/* extras.css: tema ve dil düğmeleri, renk değiştiren başlıklar, yeni footer, medya görüntüleyici.
   site.css'ten sonra yüklenir ve onun değişkenlerini kullanır. */

/* ---------- header: dil değiştirici + tema düğmesi ---------- */
.hd-ctl{position:absolute;right:max(16px,env(safe-area-inset-right,0px),4.4vw);top:50%;transform:translateY(-50%);display:flex;z-index:2}
/* düğmelere yer aç: padding yerine boş bir flex öğesi, böylece iki menü eşit genişlikte kalır ve logo ortada durur */
.nv.r::after{content:"";flex:none;width:120px}
.ctl2{display:flex;align-items:center;gap:8px}
.lng{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid var(--line);border-radius:99px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;background:color-mix(in srgb,var(--paper) 60%,transparent);transition:border-color .2s}
.lng b,.lng span{display:block;padding:6px 9px;border-radius:99px;font-weight:600;line-height:1;transition:color .2s,background .2s}
.lng b{background:var(--ink);color:var(--paper)}
.lng span{color:var(--mute)}
.lng:hover{border-color:var(--pink)}
.lng:hover span{color:var(--ink)}
.thm{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 60%,transparent);transition:border-color .2s,transform .4s var(--ease)}
.thm:hover{border-color:var(--pink);transform:rotate(18deg)}
.thm svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thm .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .thm .sun{display:block}:root:not([data-theme="light"]) .thm .moon{display:none}}
:root[data-theme="dark"] .thm .sun{display:block}
:root[data-theme="dark"] .thm .moon{display:none}
/* tema geçişi yumuşak olsun */
.theming,.theming *{transition:background-color .35s ease,color .35s ease,border-color .35s ease,fill .35s ease,stroke .35s ease!important}
.menu .foot{align-items:center;gap:12px}
.menu .lng{font-size:11px;font-weight:600;letter-spacing:.08em;padding:3px;gap:0;height:38px}
.menu .lng b,.menu .lng span{padding:8px 12px}
.menu .thm{width:38px;height:38px}
@media (max-width:760px){
  .hd-ctl{position:static;transform:none}
  .nv.r::after{content:none}
  .hd .lng{height:34px}
  .hd .thm{width:34px;height:34px}
}
@media (max-width:420px){.hd .lng span{display:none}.hd .lng b{padding:6px 8px}}

/* ---------- renk değiştiren büyük başlıklar ---------- */
.hue,h1 .ser.hue{background-image:linear-gradient(100deg,var(--ink) 0 36%,var(--pink) 45%,#8b7cff 52%,#5ee1ff 58%,var(--ink) 66% 100%);background-size:340% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:hue 7.5s cubic-bezier(.6,0,.4,1) infinite}
@keyframes hue{0%,8%{background-position:100% 0}62%,100%{background-position:0 0}}
h1 .ser.hue{animation-delay:.9s}
h2 em.hue{animation-delay:.7s}
.about h2 .hue{animation-delay:1.2s}
#rakamlar h2 .hue{animation-delay:2s}
#yazilar h2 .hue{animation-delay:2.6s}
#deneyim h2 .hue{animation-delay:3.2s}
#sertifikalar h2 .hue{animation-delay:3.8s}
h1:hover .hue,h2:hover .hue{animation-duration:2.4s}
/* vurgu kelimeleri: sürekli akan renk */
.bio .big em,.nf h1 em,.hue-h i,.detail.article .body h2 em{background-image:linear-gradient(100deg,var(--pink),#8b7cff,#5ee1ff,var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:flow 6s linear infinite}
.hue-h i{font-style:normal}
.cwrap h2 em{background-image:linear-gradient(100deg,var(--paper) 0 30%,var(--pink) 46%,#b7a8ff 54%,var(--paper) 70% 100%);background-size:340% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:hue 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes flow{to{background-position:300% 0}}
/* Harf boyaması (background-clip:text) satır kutusunun dışına taşan kısmı kırpar: sıkı harf aralığında
   son harfin sağı, italik seriflerde eğik uçlar kesilir. Kutuyu dolguyla büyütüp aynı kadar negatif
   kenar boşluğuyla yerleşimi sabit tutuyoruz. */
.hue,.hue-h i,.bio .big em,.nf h1 em,.cwrap h2 em,.detail.article h1 em,.detail.article .body h2 em{padding:.12em .18em .16em .06em;margin:0 -.18em 0 -.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Hero başlığında kelimeler, yükselme animasyonu için taşmayı gizleyen bir sarmalın (.w) içindedir.
   Negatif kenar boşluğu kelimenin kutusunu daralttığı için sarmal son harfi kesiyordu ("eden"in n'si).
   Burada telafiyi kelimeden alıp sarmala veriyoruz: boyama alanı geniş kalır, yerleşim değişmez. */
h1 .w>.hue{margin:0}
h1 .w>.ser.hue{padding-right:.18em;padding-left:.06em}
h1 .w:has(>.hue){margin-left:calc(-.05em - .06em);margin-right:calc(-.05em - .18em)}
h1 .w:has(>.ser.hue){margin-left:calc(-.05em - .067em);margin-right:calc(-.05em - .157em)}
@media (prefers-reduced-motion:reduce){.hue,h1 .ser.hue,.bio .big em,.nf h1 em,.hue-h i,.cwrap h2 em{animation:none}}

/* ---------- footer ---------- */
.ft{position:relative;margin-top:clamp(72px,11vh,140px);border-top:1px solid var(--line);overflow:hidden;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--soft) 70%,transparent))}
.ft::before{content:"";position:absolute;left:50%;top:-1px;width:min(520px,60%);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.ft-in{position:relative;max-width:1240px;margin:0 auto;padding:clamp(44px,7vh,76px) max(16px,env(safe-area-inset-right,0px),4.4vw) 0 max(16px,env(safe-area-inset-left,0px),4.4vw)}
.ft-top{display:grid;grid-template-columns:minmax(300px,1.42fr) minmax(0,.62fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px clamp(24px,3.2vw,48px);align-items:start}
/* kartvizit: hafif yamuk durur, üzerine gelince düzelir */
.ft-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0;padding:24px 24px 20px;border-radius:26px;border:1px solid var(--line);background:var(--card);box-shadow:0 30px 60px -34px rgba(20,18,24,.4);transform:rotate(-1.6deg);transform-origin:20% 60%;transition:transform .6s var(--ease),box-shadow .4s;overflow:hidden}
.ft-card:hover,.ft-card:focus-within{transform:rotate(0) translateY(-4px);box-shadow:0 40px 70px -34px rgba(20,18,24,.5)}
.ft-card::before{content:"";position:absolute;right:-30px;top:-30px;width:210px;height:210px;pointer-events:none;background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 20%,transparent) 1.1px,transparent 1.5px);background-size:14px 14px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.ft-card::after{content:"";position:absolute;left:-60px;bottom:-80px;width:260px;height:220px;pointer-events:none;background:radial-gradient(closest-side,rgba(255,92,138,.16),transparent)}
.ft-card>*{position:relative;z-index:1}
.ft-card-top{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px}
.ft-say{margin:0;font-size:clamp(22px,2.05vw,29px);font-weight:800;line-height:1.1;letter-spacing:-.045em;text-wrap:balance}
.ft-say em{white-space:nowrap;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;font-size:1.08em;padding:.12em .18em .16em .06em;margin:0 -.18em 0 -.06em;background-image:linear-gradient(100deg,var(--pink),#8b7cff,#5ee1ff,var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:flow 6s linear infinite;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ft-mail{display:inline-flex;align-items:center;gap:12px;max-width:100%;height:44px;padding:0 6px 0 18px;border-radius:99px;background:var(--ink);color:var(--paper);transition:transform .25s var(--ease),box-shadow .25s}
.ft-mail:hover{transform:translateY(-2px);box-shadow:0 14px 30px -14px rgba(20,18,24,.55)}
.ft-mail span{min-width:0;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:12.5px;font-weight:600}
.ft-mail small{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:99px;background:var(--pink);color:#1a0b11;font-family:var(--font);font-size:11.5px;font-weight:800}
.ft-open{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 11px;border-radius:99px;border:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--paper) 70%,transparent)}
.ft-open::before{content:"";width:7px;height:7px;border-radius:50%;background:#1bc47d;box-shadow:0 0 0 3px rgba(27,196,125,.2)}
.ft-card-bot{align-self:stretch;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px dashed var(--line)}
.ft-soc{display:flex;flex-wrap:wrap;gap:2px 14px;min-width:0}
.ft-soc a{display:inline-flex;align-items:center;gap:5px;padding:3px 0;font-size:13.5px;font-weight:700;color:var(--mute);transition:color .2s}
.ft-soc a:hover{color:var(--ink)}
.ft-soc svg{width:11px;height:11px;stroke:var(--pink);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.ft-soc a:hover svg{transform:translate(2px,-2px)}
/* el yazısı imza */
.ft-sign{flex:none;display:inline-flex;flex-direction:column;align-items:center;font-family:var(--hand);font-weight:600;font-size:30px;line-height:.9;color:var(--ink);transform:rotate(-5deg)}
.ft-sign svg{width:74px;height:10px;margin-top:2px;fill:none;stroke:var(--pink);stroke-width:2.2;stroke-linecap:round}
/* sütun başlıkları */
.ft-col{display:flex;flex-direction:column;min-width:0}
.ft-col h4{display:flex;align-items:center;gap:8px;margin:0 0 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:500}
.ft-col h4 b{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:99px;background:var(--soft);border:1px solid var(--line);font-size:9.5px;font-weight:600;letter-spacing:0;color:var(--ink)}
/* Site: bölümler sayfadaki sırasıyla bir rota üzerinde */
.ft-route a{position:relative;align-self:flex-start;padding:7px 0 7px 26px;font-size:14.5px;font-weight:600;line-height:1.3;color:color-mix(in srgb,var(--ink) 72%,var(--mute));transition:color .2s,transform .3s var(--ease)}
.ft-route a::before{content:"";position:absolute;z-index:1;left:0;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 26%,var(--line));background:var(--paper);transition:background .25s,border-color .25s,transform .3s var(--ease),box-shadow .3s}
.ft-route a::after{content:"";position:absolute;left:4.5px;top:50%;width:2px;height:100%;background-image:linear-gradient(color-mix(in srgb,var(--ink) 26%,var(--line)) 50%,transparent 0);background-size:2px 6px}
.ft-route a:last-of-type::after{content:none}
.ft-route a:hover,.ft-route a:focus-visible{color:var(--ink);transform:translateX(3px)}
.ft-route a:hover::before,.ft-route a:focus-visible::before{background:var(--pink);border-color:var(--pink);transform:scale(1.25);box-shadow:0 0 0 5px rgba(255,92,138,.18)}
.ft-route a:first-of-type::before{background:var(--pink);border-color:var(--pink)}
/* Projeler: vurgu renginde baş harf karosu */
.ft-proj{gap:2px}
.ft-proj a{display:flex;align-items:center;gap:12px;padding:5px 0;min-width:0}
.ft-proj i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-style:normal;font-weight:800;font-size:15px;letter-spacing:-.02em;color:var(--ac);background:color-mix(in srgb,var(--ac) 14%,var(--card));border:1px solid color-mix(in srgb,var(--ac) 34%,transparent);transition:transform .35s var(--ease),background .25s,color .25s}
.ft-proj span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ft-proj strong{font-size:14.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-proj small{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-proj a:hover i,.ft-proj a:focus-visible i{background:var(--ac);color:#fff;transform:rotate(-8deg) scale(1.06)}
/* Yazılar: kategori ve süreyle satırlar */
.ft-posts a{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.ft-posts a:last-of-type{border-bottom:1px solid var(--line)}
.ft-posts span{display:flex;flex-direction:column;gap:5px;min-width:0}
.ft-posts small{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--pink);font-weight:600}
.ft-posts strong{font-size:14px;font-weight:600;line-height:1.38;color:color-mix(in srgb,var(--ink) 80%,var(--mute));text-wrap:pretty;transition:color .2s}
.ft-posts svg{flex:none;width:15px;height:15px;margin-top:17px;stroke:var(--mute);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease),stroke .2s}
.ft-posts a:hover strong,.ft-posts a:focus-visible strong{color:var(--ink)}
.ft-posts a:hover svg,.ft-posts a:focus-visible svg{stroke:var(--pink);transform:translate(3px,-3px)}
@media (prefers-reduced-motion:reduce){.ft-card,.ft-card:hover{transform:none}}
/* sahne: akan nokta alanı ve aralarındaki tek pembe nokta (footer.js çizer) */
.ft-logo{--w:96px;flex:none;height:calc(96px * 1127 / 2556);min-height:0}
.ft-stage{--hx:27%;--hy:56%;position:relative;margin-top:clamp(28px,4.5vh,52px);height:clamp(150px,19vw,236px)}
.ft-stage::before{content:"";position:absolute;inset:-34% -6% -22%;pointer-events:none;background:radial-gradient(30% 44% at 28% 54%,rgba(255,92,138,.22),transparent 72%),radial-gradient(34% 46% at 72% 50%,rgba(139,124,255,.18),transparent 72%),radial-gradient(30% 36% at 50% 62%,rgba(94,225,255,.13),transparent 72%)}
.ft-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.ft-dot{position:absolute;z-index:2;left:var(--hx);top:var(--hy);width:26px;height:26px;margin:-13px 0 0 -13px;padding:0;border-radius:50%;cursor:pointer;transform:translate(var(--dx,0px),var(--dy,0px));transition:transform .7s cubic-bezier(.2,1.7,.35,1)}
.ft-dot i{display:block;width:100%;height:100%;border-radius:50%;background:var(--pink);animation:ftdot 2.6s cubic-bezier(.5,0,.5,1) infinite alternate;transition:scale .3s var(--ease)}
.ft-dot::before{content:"";position:absolute;inset:0;border-radius:50%;animation:ftring 2.6s ease-out infinite}
.ft-dot:hover i,.ft-dot:focus-visible i{scale:1.18}
.ft-dot.fly{transition:transform .75s cubic-bezier(.6,0,.9,.35);transform:translate(var(--dx,0px),-150vh)}
@keyframes ftdot{from{transform:translateY(0)}to{transform:translateY(-16%)}}
@keyframes ftring{0%{box-shadow:0 0 0 0 rgba(255,92,138,.45)}70%,100%{box-shadow:0 0 0 18px rgba(255,92,138,0)}}
/* el yazısı not: noktanın sağ üstünde, ok noktayı gösterir */
.ft-note{position:absolute;z-index:2;left:calc(var(--hx) + 22px);top:calc(var(--hy) - 62px);display:inline-flex;align-items:flex-end;gap:8px;font-family:var(--hand);font-weight:600;font-size:clamp(18px,1.9vw,25px);line-height:1;color:var(--ink);transform:rotate(-3deg);transform-origin:left bottom;white-space:nowrap;pointer-events:none;text-shadow:0 0 6px var(--paper),0 0 12px var(--paper),0 0 20px var(--paper)}
.ft-note svg{flex:none;width:clamp(30px,3.4vw,46px);height:auto;aspect-ratio:64/28;fill:none;stroke:var(--pink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.ft-dot i,.ft-dot::before,.ft-say em{animation:none}.ft-dot,.ft-dot.fly{transition:none;transform:none}}
/* alt şerit */
.ft-bot{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:clamp(8px,1.6vw,20px);padding:18px 0 calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}
.ft-clock b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.ft-ctl{display:flex;align-items:center;gap:14px}
.ft-up{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.ft-up i{width:6px;height:6px;border-radius:50%;background:var(--pink);transition:transform .3s var(--ease)}
.ft-up:hover i{transform:translateY(-4px)}
@media (max-width:1000px){.ft-top{grid-template-columns:minmax(0,.7fr) minmax(0,1fr)}.ft-card{grid-column:1/-1;max-width:460px}.ft-posts{grid-column:1/-1}}
@media (max-width:600px){.ft-card{padding:20px 18px 16px;transform:rotate(-1deg)}.ft-mail{padding-left:14px;gap:8px}.ft-mail span{font-size:11.5px}.ft-sign{font-size:26px}.ft-bot{flex-direction:column;align-items:flex-start}.ft-note{font-size:17px}}

/* ---------- proje detayı: medya görüntüleyici ---------- */
.mv{display:flex;flex-direction:column;gap:14px}
.mv-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mv-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:99px;border:1px solid var(--line);background:var(--soft)}
.mv-tabs button{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:99px;font-weight:700;font-size:13.5px;color:var(--mute);transition:color .2s,background .2s}
.mv-tabs button:hover{color:var(--ink)}
.mv-tabs button.on{background:var(--ink);color:var(--paper)}
.mv-tabs svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv-tabs b{font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 6px;border-radius:99px;background:color-mix(in srgb,currentColor 18%,transparent)}
.pulse{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:#1bc47d;animation:mvpulse 1.8s ease-out infinite}
@keyframes mvpulse{0%{box-shadow:0 0 0 0 rgba(27,196,125,.55)}100%{box-shadow:0 0 0 9px rgba(27,196,125,0)}}
.mv-count{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--mute);font-variant-numeric:tabular-nums}
.mv-stage{position:relative;border-radius:28px;border:1px solid var(--line);overflow:hidden;background:radial-gradient(120% 90% at 20% 0%,color-mix(in srgb,var(--ac) 22%,var(--soft)),var(--soft) 55%,color-mix(in srgb,var(--ac) 10%,var(--soft)));padding:clamp(18px,3.2vw,44px) clamp(52px,6.5vw,92px)}
.mv-stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 14%,transparent) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 80% at 50% 40%,#000,transparent);opacity:.7;pointer-events:none}
.mv-pane{position:relative;display:none}
.mv-pane.on{display:block;animation:mvin .4s var(--ease-out)}
@keyframes mvin{from{opacity:.4;transform:translateY(8px)}}
.mv-main{margin:0;max-width:1000px;margin-inline:auto}
.mv-zoom{position:relative;display:block;width:100%;cursor:zoom-in;border-radius:14px}
.mv-stage .win{position:relative;left:auto;top:auto;width:100%;transform:none;box-shadow:0 40px 80px -30px rgba(20,18,24,.45)}
.mv-stage .win .ph{border-top:1px solid var(--line);transition:opacity .25s}
.mv-stage .win.raw .ph{border:0}
.mv-main.sw .ph{animation:mvsw .4s var(--ease-out)}
@keyframes mvsw{from{opacity:.2;transform:scale(.985)}}
.mv-hint{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:99px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;opacity:0;transform:translateY(4px);transition:.25s var(--ease)}
.mv-hint svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mv-zoom:hover .mv-hint,.mv-zoom:focus-visible .mv-hint{opacity:1;transform:none}
.mv-arrow{position:absolute;top:50%;z-index:2;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 24px -10px rgba(20,18,24,.35);transform:translateY(-50%);transition:transform .25s var(--ease),border-color .2s}
.mv-arrow.l{left:calc(-1 * clamp(46px,5.6vw,70px))}
.mv-arrow.r{right:calc(-1 * clamp(46px,5.6vw,70px))}
.mv-arrow:hover{border-color:var(--ac);transform:translateY(-50%) scale(1.08)}
.mv-arrow svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* canlı önizleme pencere içinde */
.mv-live{max-width:1000px;margin-inline:auto}
.mv-live .bar span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-live .bar b{flex:none;white-space:nowrap;color:#1a9c62}
.mv-live .bar b::before{background:#1bc47d;box-shadow:0 0 6px #1bc47d}
.mv-live .live{border:0;border-radius:0;padding:clamp(14px,2.2vw,24px);gap:14px;background:var(--card)}
.mv-live .live .note2{margin:0;font-size:13.5px}
.mv-live .live .scr{min-height:260px}
.mv-foot{display:flex;flex-direction:column;gap:12px}
.mv-cap{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--mute);font-weight:500;min-height:1.5em}
.mv-cap b{color:var(--ink);font-weight:800;letter-spacing:-.01em}
.mv-thumbs{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 10px;margin:0 -4px;scrollbar-width:thin}
.mv-th{flex:0 0 150px;display:flex;flex-direction:column;gap:7px;padding:6px;border-radius:14px;border:1px solid var(--line);background:var(--card);text-align:left;transition:border-color .2s,box-shadow .2s,transform .25s var(--ease)}
.mv-th:hover{transform:translateY(-2px)}
.mv-th img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-radius:9px;background:var(--soft)}
.mv-th span{padding:0 4px 3px;font-size:11.5px;font-weight:700;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-th.on{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 22%,transparent)}
.mv-th.on span{color:var(--ink)}
.mv-th-live{flex-direction:row;align-items:center;justify-content:center;gap:10px;border-style:dashed;background:color-mix(in srgb,var(--ac) 9%,var(--card));padding:14px}
.mv-th-live span{white-space:normal;color:var(--ink);padding:0;line-height:1.3}
@media (max-width:700px){
  .mv-stage{padding:14px;border-radius:20px}
  /* dar ekranda oklar görseli kapatmasın: kaydırma hareketi ve küçük resimler yeterli */
  .mv-arrow{display:none}
  .mv-hint{display:none}
  .mv-th{flex-basis:120px}
  .mv-tabs button{padding:8px 12px;font-size:12.5px}
}

/* ---------- tam ekran görüntüleyici ---------- */
.lb{position:fixed;inset:0;z-index:90;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:8px;padding:max(20px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:rgba(12,10,16,.93);backdrop-filter:blur(6px);animation:lbin .25s ease}
.lb[hidden]{display:none}
@keyframes lbin{from{opacity:0}}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.lb img{display:block;max-width:100%;max-height:calc(100svh - 150px);border-radius:12px;box-shadow:0 40px 100px rgba(0,0,0,.6);background:#fff}
.lb figcaption{color:#f7f4fb;font-size:14px;font-weight:500;text-align:center;max-width:70ch}
.lb figcaption b{font-weight:800;margin-right:8px}
.lb button{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(247,244,251,.2);background:rgba(247,244,251,.06);transition:background .2s,transform .2s;justify-self:center}
.lb button:hover{background:rgba(247,244,251,.16);transform:scale(1.06)}
.lb button svg{width:20px;height:20px;stroke:#f7f4fb;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lb-x{position:absolute;right:max(18px,env(safe-area-inset-right,0px));top:max(18px,env(safe-area-inset-top,0px))}
@media (max-width:700px){.lb{grid-template-columns:1fr}.lb-a{position:absolute;bottom:max(20px,env(safe-area-inset-bottom,0px))}.lb-a.l{left:20px}.lb-a.r{right:20px}}

/* ---------- footer: gizlilik bağlantısı ---------- */
.ft-link{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);transition:border-color .2s}
.ft-link:hover{border-color:var(--pink)}

/* ---------- dar ekranda sabit çağrı düğmesi ---------- */
.mcta{display:none}
@media (max-width:760px){
  .mcta{position:fixed;z-index:20;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;padding:9px 9px 9px 18px;border-radius:99px;background:var(--ink);color:var(--paper);box-shadow:0 18px 40px -14px rgba(20,18,24,.6),0 0 0 1px color-mix(in srgb,var(--paper) 14%,transparent);transform:translateY(160%);opacity:0;pointer-events:none;transition:transform .5s var(--ease-out),opacity .3s}
  .mcta.on{transform:none;opacity:1;pointer-events:auto}
  .mcta-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#1bc47d;animation:mvpulse 1.8s ease-out infinite}
  .mcta-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .mcta-txt small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mcta-txt b{font-size:15.5px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
  .mcta-go{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--pink);transition:transform .3s var(--ease)}
  .mcta:active .mcta-go{transform:scale(.92)}
  .mcta-go svg{width:18px;height:18px;stroke:#1a0b11;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  body:has(.menu.open) .mcta,body:has(.lb:not([hidden])) .mcta{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.mcta{transition:opacity .2s}.mcta-dot{animation:none}}

/* ---------- düz sayfa başlıklarındaki vurgu (gizlilik) ---------- */
.detail.article h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;background-image:linear-gradient(100deg,var(--pink),#8b7cff,#5ee1ff,var(--pink));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:flow 6s linear infinite}
@media (prefers-reduced-motion:reduce){.detail.article h1 em{animation:none}}

/* ---------- proje kutuları: sade ama gösterişli ----------
   Pencere çerçevesi, nokta dokusu ve etiketler kalktı. Ekran görüntüsü kutunun sağından ve altından
   taşar, alt kenarda kutuya karışır; metin tek blok, köşede yuvarlak ok düğmesi. */
.works .grid{gap:20px}
.works .card{border-radius:30px;border-color:transparent;box-shadow:0 0 0 1px var(--line),0 24px 50px -38px rgba(20,18,24,.45)}
.works .card:hover{transform:translateY(-8px);box-shadow:0 0 0 1px color-mix(in srgb,var(--ac) 50%,var(--line)),0 50px 90px -42px color-mix(in srgb,var(--ac) 60%,rgba(20,18,24,.45))}
.works .shot{height:250px;border-bottom:0;perspective:none;background:linear-gradient(155deg,color-mix(in srgb,var(--ac) 22%,var(--soft)),color-mix(in srgb,var(--ac) 6%,var(--soft)) 72%)}
.works .shot::before{content:none}
.works .shot::after{height:30%;background:linear-gradient(180deg,transparent,var(--card))}
.works .card .win,.works .card.big .win{left:10%;top:30px;width:118%;transform:none;transform-origin:0 0;border-radius:16px;box-shadow:0 30px 70px -24px rgba(20,18,24,.5);transition:transform .7s var(--ease-out)}
.works .card.big .win{left:8%;top:46px;width:118%}
.works .card:hover .win,.works .card.big:hover .win{transform:translate(-10px,-10px) scale(1.025);transition:transform .7s var(--ease-out)}
.works .card .win .bar{display:none}
.works .card .win .ph{border-top:0}
.works .card .win.raw{box-shadow:0 30px 70px -24px rgba(20,18,24,.55)}
.works .card .win.raw .ph{border-radius:16px}
.works .meta{z-index:1;gap:10px;padding:4px 26px 26px}
.works .meta .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.works .meta .kind{min-width:0}
.works .meta .yr{font-family:var(--mono);font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.works .meta h3{display:block;font-size:clamp(22px,2vw,27px);line-height:1.05;letter-spacing:-.045em}
.works .card.big .meta h3{font-size:clamp(32px,3.6vw,48px);line-height:1}
.works .meta p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14.5px;line-height:1.5}
.works .card.big .meta p{-webkit-line-clamp:3;font-size:16px;max-width:58ch}
.works .card.big .meta{gap:12px;padding:6px 32px 32px}
/* yuvarlak ok: görselle metnin sınırında durur, üzerine gelince proje rengine döner */
.works .go{position:absolute;right:22px;top:-70px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--card);box-shadow:0 0 0 1px var(--line),0 16px 30px -14px rgba(20,18,24,.45);transition:background .3s,box-shadow .3s,transform .45s var(--ease)}
.works .go svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,transform .45s var(--ease)}
.works .card:hover .go,.works .card:focus-visible .go{background:var(--ac);box-shadow:0 16px 34px -10px var(--ac);transform:scale(1.1)}
.works .card:hover .go svg,.works .card:focus-visible .go svg{stroke:#fff;transform:rotate(45deg)}
.works .card.big .go{right:30px;top:-84px;width:64px;height:64px}
.works .card.big .go svg{width:24px;height:24px}
@media (max-width:1000px){.works .card.big .win{left:7%;top:36px;width:104%}}
@media (max-width:600px){.works .shot{height:220px}.works .card.big .win{left:7%;top:28px;width:112%}.works .meta,.works .card.big .meta{padding:4px 20px 22px}.works .card.big .meta h3{font-size:30px}.works .go,.works .card.big .go{right:18px;top:-64px;width:50px;height:50px}}
@media (prefers-reduced-motion:reduce){.works .card:hover .win,.works .card.big:hover .win,.works .card:hover .go{transform:none}}