/* Voiser Work tanıtım sayfası. Yazı tipi: Aspekta (OFL 1.1) — assets/fonts altında, dış bağlantı yok. */
@font-face{font-family:Aspekta;src:url(fonts/aspekta-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Aspekta;src:url(fonts/aspekta-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* iki temada aynı kalan renkler; temaya göre değişenler aşağıda */
  --brand:#927BFF;--c1:#C3B7FF;--c2:#927BFF;--c3:#927BFF;--c5:#E4E2EC;--on-brand:#111016;--ink-dark:17,16,22;
  --ease1:cubic-bezier(.16,1,.3,1);--ease-btn:cubic-bezier(.25,1,.5,1);--ease-io:cubic-bezier(.76,0,.24,1);
  --p2o:cubic-bezier(.215,.61,.355,1);--p4o:cubic-bezier(.23,1,.32,1);--expo-o:cubic-bezier(.19,1,.22,1);--expo-io:cubic-bezier(1,0,0,1);
  --f1:Aspekta,-apple-system,BlinkMacSystemFont,"Avenir Next",Avenir,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gap:20px;--pad:24px;--maxw:1524px;--radius-block:20px;
  --fs-ui:clamp(14px,calc(14px + .002*(100vw - 440px)),15px);
  --fs-body:clamp(16px,calc(16px + .003*(100vw - 440px)),19px);
  --row-gap:clamp(20px,calc(20px + .04*(100vw - 440px)),60px);
}
@media (min-width:1025px){:root{--pad:48px;--radius-block:40px}}
/* açık tema renkleri: beyaz zemin, siyah yazı ve dolgu, Voiser moru vurgu. Koyu tema dosyanın sonunda.
   Hero ve altbilgi (hareketli arka plan) sayfanın tersi temada: koyu temada bu renkleri, açık temada koyu renkleri alır. */
:root,html[data-theme=dark] :is(.hero-bg,.hero-main,.scroller-wrap,.ftr){color-scheme:light;
  --c4:#EEEDF4;--c6:#F7F6FB;--c7:#111016;--c9:#1C1A22;--ink:17,16,22;
  --surface:#FFFFFF;--glass:rgba(255,255,255,.8);--line:rgba(17,16,22,.06);--hover:#F1EFF7;
  --fill:#111016;--on-fill:#FFFFFF;--deep:#111016;--mist:#E9E6F5;--post-3:#7359F0;
  /* ışık katmanı (WebGL yoksa): zemin, beş ışık, ince yaylar, yazının arkasındaki perde */
  --aura-bg:#EFEBFD;--au1:rgba(146,123,255,.66);--au2:rgba(206,180,255,.85);--au3:rgba(106,84,236,.28);--au4:rgba(255,255,255,.95);--au5:rgba(150,160,255,.42);
  --arc:rgba(255,255,255,.9);--arc-glow:rgba(146,123,255,.3);--grain:.3;
  /* hareketli arka plan (hero-fx.js): zemin, gölge, orta, vurgu, parıltı */
  --fx0:#EFEBFD;--fx1:#A48EFF;--fx2:#F1EDFF;--fx3:#7359F0;--fx4:#FFFFFF;
  --veil:linear-gradient(100deg,rgba(247,246,251,.66) 0%,rgba(247,246,251,.24) 42%,rgba(247,246,251,0) 68%);
  --app-bg:#F7F6FB}
.hero-main,.scroller-wrap{color:var(--c7)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;max-width:100%;overflow-x:clip}
body{font-family:var(--f1);font-weight:400;font-size:16px;line-height:1;letter-spacing:-.1px;background:var(--c6);color:var(--c7);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ul{margin:0;padding:0}
h1,h2,h3{font-weight:400}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas{display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:4px solid var(--c7);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:12px;z-index:200;padding:10px 14px;border-radius:8px;background:var(--surface);color:var(--c7);font-size:13px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:calc(var(--maxw) + 2 * var(--pad));margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------------- etiket ---------------- */
.tag{display:inline-flex;align-items:center;width:fit-content;padding:8px 12px 8px 8px;border-radius:8px;background:var(--tag-bg,var(--surface));color:var(--tag-fg,var(--c7));
  font-size:var(--fs-ui);line-height:1;letter-spacing:0;white-space:nowrap}
.tag::before{content:"";width:10px;height:10px;margin-right:12px;background:var(--c2);flex:0 0 auto}
.tag--hero{--tag-bg:rgba(var(--ink),.07);--tag-fg:var(--c7)}

/* ---------------- buton: etiket + eğik birleşimli ok bloğu ---------------- */
.btn{position:relative;display:inline-flex;align-items:stretch;width:fit-content;height:48px;
  --lb:var(--fill);--lb-h:var(--c3);--lf:var(--on-fill);--lf-h:var(--on-brand);--bb:var(--c3);--bb-h:var(--fill);--af:var(--on-brand);--af-h:var(--on-fill)}
.btn-label{position:relative;display:inline-flex;align-items:center;margin-right:16px;padding:8px 8px 8px 20px;border-radius:12px 0 0 12px;
  background:var(--lb);color:var(--lf);font-size:var(--fs-ui);line-height:1;letter-spacing:0;white-space:nowrap;
  transition:background-color .6s var(--ease-btn),color .6s var(--ease-btn),margin-right .6s var(--ease-btn),padding-right .6s var(--ease-btn)}
.btn-corner{position:absolute;top:0;right:-16px;width:18px;height:100%;overflow:visible}
.btn-corner path{fill:var(--lb);transition:fill .6s var(--ease-btn)}
.btn-icon{position:relative;display:inline-flex;width:51px;height:100%;overflow:hidden;transform-origin:center right;transition:transform .6s var(--ease-btn)}
.btn-blob{position:absolute;inset:0;width:100%;height:100%}
.btn-blob path{fill:var(--bb);transition:fill .6s var(--ease-btn)}
.btn-arrows{position:absolute;top:0;bottom:0;left:4px;right:0;z-index:1;overflow:hidden}
.btn-arrows svg{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px 0 0 -5px;fill:none;stroke-width:1.3;stroke-linecap:square;
  transition:transform .6s var(--ease-btn),stroke .6s var(--ease-btn)}
.btn-arrows svg:first-child{stroke:var(--af);transform:translateX(0)}
.btn-arrows svg:last-child{stroke:var(--af-h);transform:translateX(-46px)}
@media (hover:hover) and (pointer:fine){
  .btn:hover .btn-label{background:var(--lb-h);color:var(--lf-h);margin-right:12px;padding-right:14px}
  .btn:hover .btn-corner path{fill:var(--lb-h)}
  .btn:hover .btn-icon{transform:scale(.875)}
  .btn:hover .btn-blob path{fill:var(--bb-h)}
  .btn:hover .btn-arrows svg:first-child{transform:translateX(46px)}
  .btn:hover .btn-arrows svg:last-child{transform:translateX(0)}
}

/* ---------------- üst menü ---------------- */
.hdr{--logo:var(--c7);--mark:var(--brand)}
html[data-theme=dark] .hdr{--mark:var(--c7)}          /* logo: açık zeminde mor, koyu zeminde beyaz */
.hdr-bar{position:fixed;top:20px;left:0;right:0;z-index:100;width:calc(100% - 40px);height:64px;margin:0 auto;padding:0 8px 0 12px;border-radius:16px;
  background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;
  opacity:0;transform:translateY(-40px);transition:background-color .6s var(--ease1),opacity .6s var(--ease1) 1s,transform .6s var(--ease1) 1s}
html.has-loaded .hdr-bar{opacity:1;transform:none}
html.has-loaded.has-hero .hdr-bar{transition-delay:0s,1.8s,1.8s}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;height:100%}
.hdr-logo{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;height:100%;transform-origin:left;transition:transform .6s var(--ease1)}
.hdr-logo::before{content:"";position:absolute;top:50%;left:50%;z-index:0;width:calc(100% + 28px);height:54px;border-radius:12px;opacity:0;
  background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);
  transform:translate(-50%,-50%) scale(.975,.75);transform-origin:left;transition:border-color .6s var(--ease1),opacity .6s var(--ease1),transform .6s var(--ease1)}
.logo{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;color:var(--logo);pointer-events:auto;transition:color .3s var(--ease1)}
.logo-svg{width:auto;height:24px;color:var(--mark);transition:color .3s var(--ease1)}
.logo-work{padding-left:10px;border-left:1px solid currentColor;font-size:19px;letter-spacing:-.02em;line-height:18px}
.hdr-menu{display:inline-flex;align-items:center;justify-content:flex-end;height:64px;pointer-events:auto}
.hdr-links{display:none}
.hdr-link{display:inline-flex;align-items:center;height:39px;padding:8px 17px;border-radius:8px;font-size:var(--fs-ui);line-height:1;
  transition:background-color .6s var(--ease1)}
.roll{display:none}
.hdr-sep{display:none}          /* dar ekranda menü düğmesi ve açılan menü */
.hdr-toggle{position:relative;display:inline-flex;width:48px;height:48px;border-radius:12px;background:var(--fill);border:1px solid var(--fill);overflow:hidden;
  transition:background-color .6s var(--ease1),border-color .6s var(--ease1)}
.hdr-toggle span{position:relative;display:inline-flex;width:24px;height:24px;margin:auto;transition:width .6s var(--ease1),height .6s var(--ease1)}
.hdr-toggle i{position:absolute;inset:0;margin:auto;width:100%;height:1px;background:var(--c2);transform:translateY(-3px);
  transition:background-color .6s var(--ease1),transform .6s var(--ease1)}
.hdr-toggle i+i{transform:translateY(3px)}
@media (hover:hover) and (pointer:fine){.hdr-toggle:hover i{transform:translateY(3px)}.hdr-toggle:hover i+i{transform:translateY(-3px)}}
.hdr[data-nav=on]{--logo:#fff;--mark:#fff}
.hdr[data-nav=on] .hdr-bar{background:rgba(255,255,255,.08)}
.hdr[data-nav=on] .hdr-toggle{background:transparent;border-color:var(--c2)}
.hdr[data-nav=on] .hdr-toggle span{width:19px;height:19px}
.hdr[data-nav=on] .hdr-toggle i{background:#fff;transform:rotate(45deg)!important}
.hdr[data-nav=on] .hdr-toggle i+i{transform:rotate(-45deg)!important}

.popup{position:fixed;top:20px;left:20px;right:20px;z-index:99;display:flex;width:calc(100% - 40px);height:64px;margin:auto;border-radius:16px;overflow:hidden;
  background:var(--deep);opacity:0;visibility:hidden;pointer-events:none;transition:all .6s var(--ease1) .6s}
.popup::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 80% 100%,rgba(146,123,255,.24),transparent 60%),radial-gradient(90% 60% at 0% 0%,rgba(195,183,255,.08),transparent 60%)}
.popup-in{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;row-gap:40px;padding:0 24px;overflow:auto}
.popup-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 auto;row-gap:12px;padding-top:76px}
.popup-menu a{display:inline-flex;overflow:hidden;color:#fff;font-size:clamp(32px,10.5vw,46px);letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.popup-menu a span,.popup-cta a span{display:inline-block;transform:translateY(-105%);transition:transform .6s var(--ease-btn) 0s}
.popup-cta{display:flex;justify-content:center;padding-bottom:60px}
.popup-cta a{position:relative;display:inline-flex;overflow:hidden;padding-bottom:.2em;color:#fff;font-size:20px;line-height:1}
.popup-cta a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--c3);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease1)}
.hdr[data-nav=on] .popup{top:8px;left:8px;right:8px;width:calc(100% - 16px);height:calc(100% - 16px);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}
.hdr[data-nav=on] .popup-menu a span,.hdr[data-nav=on] .popup-cta a span{transform:none}
.hdr[data-nav=on] .popup-menu li:nth-child(1) a span{transition-delay:.3s}
.hdr[data-nav=on] .popup-menu li:nth-child(2) a span{transition-delay:.4s}
.hdr[data-nav=on] .popup-menu li:nth-child(3) a span{transition-delay:.5s}
.hdr[data-nav=on] .popup-menu li:nth-child(4) a span{transition-delay:.6s}
.hdr[data-nav=on] .popup-menu li:nth-child(5) a span{transition-delay:.7s}
.hdr[data-nav=on] .popup-cta a span{transition-delay:.8s}
.hdr[data-nav=on] .popup-cta a::after{transform:scaleX(1);transition-delay:.8s}

@media (min-width:1025px){
  .hdr-bar{top:30px;width:100%;max-width:calc(var(--maxw) + 2 * var(--pad));height:54px;padding:0 var(--pad);border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .hdr-menu{gap:12px;height:54px;padding:4px 4px 4px 12px;border-radius:12px;background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border:1px solid var(--line)}
  .hdr-links{display:inline-flex;gap:1px}
  /* bölümler | giriş + tema: iki grubu ince bir çizgi ayırır */
  .hdr-sep{display:block;flex:0 0 auto;width:1px;height:20px;background:rgba(var(--ink),.18)}
  .hdr-toggle,.popup{display:none}
  .roll{position:relative;display:inline-flex;align-items:center;height:46px;padding:8px 20px;border-radius:8px;overflow:hidden;background:var(--fill);color:var(--on-fill);
    font-size:var(--fs-ui);line-height:1;white-space:nowrap;
    transition:background-color .1s var(--ease-io) .1s}
  .roll span{display:inline-flex;transition:transform .3s var(--ease-io)}
  .roll::after{content:attr(data-label);position:absolute;top:-1px;left:-1px;z-index:1;display:flex;align-items:center;width:calc(100% + 2px);height:calc(100% + 2px);
    padding:inherit;border-radius:inherit;background:var(--surface);color:var(--c7);transform:translateY(100%);transition:transform .3s var(--ease-io)}
  /* en üstte logo doğrudan hero'nun üstünde: hero'nun (sayfanın tersi) yazı rengini alır; kayınca kendi cam kutusunda sayfa renginde */
  html:not([data-theme=dark]).invert-logo:not(.has-scrolled) .hdr{--logo:#fff;--mark:#fff}
  html[data-theme=dark].invert-logo:not(.has-scrolled) .hdr{--logo:#111016;--mark:var(--brand)}
  html.has-scrolled .hdr{--logo:var(--c7);--mark:var(--brand)}
  html[data-theme=dark].has-scrolled .hdr{--mark:var(--c7)}
  html.has-scrolled .hdr-logo{transform:translateX(14px)}
  html.has-scrolled .hdr-logo::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){
  .hdr-link:hover{background:var(--hover)}
  .roll:hover{background:var(--surface);transition-delay:.15s}
  .roll:hover span{transform:translateY(-12px)}
  .roll:hover::after{transform:translateY(0)}
  html.has-scrolled .hdr-logo:hover::before{border-color:var(--c1)}
}

/* ---------------- hero ---------------- */
.hero{position:relative;color:var(--c7);background:var(--c6)}
.hero-bg{position:fixed;top:0;left:0;z-index:0;width:100%;height:100lvh;margin:0;pointer-events:none}
.hero-bg.is-off{visibility:hidden}
.hero-frame{position:absolute;top:8px;left:8px;width:calc(100% - 16px);height:calc(100lvh - 16px);border-radius:20px;overflow:hidden}
.hero-clip{position:absolute;inset:0;background:var(--aura-bg);clip-path:inset(50% 50% 50% 50% round 100px)}
.hero-media{position:absolute;inset:0;transform-origin:center}
/* isteğe bağlı video: temaya uyan oynar, hazır olunca ışık katmanının üstüne yavaşça gelir (site.js) */
.hero-video{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;opacity:0;transition:opacity 1.2s var(--p2o)}
.hero-video.is-ready{opacity:1}
html[data-theme=dark] .hero-video[data-for=dark],html:not([data-theme=dark]) .hero-video[data-for=light]{display:none}
.hero-clip::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--veil)}
html.reduce .hero-clip,html.no-intro .hero-clip{clip-path:none}
.hero-main{position:relative;z-index:1}
.hero-in{display:flex;flex-direction:column;justify-content:space-between;row-gap:100px;height:100lvh;
  padding-top:clamp(112px,calc(112px + .036*(100vw - 440px)),148px);padding-bottom:clamp(32px,calc(32px + .012*(100vw - 440px)),44px)}
.hero-h1{max-width:1070px;font-size:clamp(50px,calc(50px + .062*(100vw - 440px)),112px);letter-spacing:-.03em;line-height:1;text-wrap:pretty}
.hero-bottom{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:24px var(--gap);width:100%}
.hero-text{max-width:640px;font-size:clamp(20px,calc(20px + .004*(100vw - 440px)),24px);letter-spacing:-.02em;line-height:1.2;text-wrap:pretty}
html.js:not(.reduce) [data-lines]{visibility:hidden}
html.js:not(.reduce) [data-lines].is-split{visibility:visible}
.line-mask{display:block;position:relative;clip-path:inset(-.1em)}
.line{display:block;position:relative}
html.js:not(.reduce) .hero-btn{opacity:0}
@media (min-width:1025px){
  .hero-bottom{flex-direction:row;align-items:flex-end}
  .hero-frame{top:12px;left:12px;width:calc(100% - 24px);height:calc(100lvh - 24px)}
  .hero-clip{clip-path:inset(50% 50% 50% 50% round 200px)}
}

/* ---------------- ışık katmanı: hero ve footer arka planı ----------------
   Temaya göre renk değiştiren beş yumuşak ışık ve iki ince yay; her biri farklı sürede yavaşça kayar (yalnız transform).
   Üstte ince gren (bantlaşmayı gizler). Renkler :root ve koyu temadaki --aura-*, --au1..5, --arc değişkenlerinde. */
.aura{position:absolute;inset:0;overflow:hidden;background:var(--aura-bg);isolation:isolate;contain:strict}
.aura i,.aura b{position:absolute;display:block;border-radius:50%;pointer-events:none;
  animation:auraDrift var(--t,30s) cubic-bezier(.45,0,.55,1) var(--dl,0s) infinite alternate}
.aura i{width:var(--w);height:var(--w);left:calc(var(--cx) - var(--w) / 2);top:calc(var(--cy) - var(--w) / 2);
  background:radial-gradient(closest-side,var(--c) 0%,color-mix(in srgb,var(--c) 62%,transparent) 30%,color-mix(in srgb,var(--c) 24%,transparent) 62%,transparent 100%)}
.aura .a1{--c:var(--au1);--w:96vmax;--cx:80%;--cy:16%;--t:28s;--x:-8vmax;--y:6vmax;--s:1.1}
.aura .a2{--c:var(--au2);--w:82vmax;--cx:98%;--cy:80%;--t:34s;--dl:-12s;--x:-7vmax;--y:-5vmax;--s:1.16}
.aura .a3{--c:var(--au3);--w:58vmax;--cx:70%;--cy:60%;--t:23s;--dl:-6s;--x:8vmax;--y:-7vmax;--s:.84}
.aura .a4{--c:var(--au4);--w:74vmax;--cx:26%;--cy:36%;--t:31s;--dl:-3s;--x:7vmax;--y:5vmax;--s:1.08}
.aura .a5{--c:var(--au5);--w:62vmax;--cx:6%;--cy:104%;--t:27s;--dl:-15s;--x:9vmax;--y:-5vmax;--s:1.12}
/* ince yaylar: büyük elips kenarı, hafif parıltılı */
.aura b{border:1px solid var(--arc);box-shadow:0 0 28px -4px var(--arc-glow),inset 0 0 28px -4px var(--arc-glow)}
.aura .r1{width:150vmax;height:56vmax;left:calc(68% - 75vmax);top:calc(58% - 28vmax);rotate:-13deg;--t:46s;--r:5deg;--x:-3vmax;--y:2vmax;--s:1.04}
.aura .r2{width:118vmax;height:40vmax;left:calc(86% - 59vmax);top:calc(26% - 20vmax);rotate:21deg;--t:54s;--dl:-22s;--r:-7deg;--x:3vmax;--y:-2vmax;--s:.97}
.aura::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);mix-blend-mode:soft-light;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.aura.is-paused i,.aura.is-paused b{animation-play-state:paused}
@keyframes auraDrift{
  from{transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  to{transform:translate3d(var(--x,0),var(--y,0),0) scale(var(--s,1)) rotate(var(--r,0deg))}}
/* hareketli arka plan (hero-fx.js) ışık katmanının üstünde; tam kaplayan görünümde ışık katmanı durur */
.hero-fx{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--p2o)}
.hero-fx.is-on{opacity:1}
.fx-solid>.aura{visibility:hidden}
.fx-solid>.aura i,.fx-solid>.aura b{animation:none}
/* footer: aynı ışıklar ters köşede */
.aura--ftr{transform:rotate(180deg)}

/* ne yapar: yapışkan bölüm; üç madde 3000 px boyunca sırayla */
.scroller-wrap{position:relative;z-index:1;height:calc(100lvh + 3000px)}
.scroller{position:sticky;top:0;display:flex;flex-direction:column;height:100lvh;overflow:hidden}
@media (min-width:1025px) and (min-height:730px),(max-width:1024px) and (min-height:500px){.scroller{padding-top:70px}}
.scroller-head{flex:0 0 auto;padding-top:48px;padding-bottom:44px}
.scroller-progress{position:relative;flex:0 0 auto;width:100%;height:1px;overflow:hidden;background:rgba(var(--ink),.16)}
.scroller-progress i{position:absolute;inset:0;background:var(--c7);transform:scaleX(0);transform-origin:0 50%}
.scroller-content{display:flex;flex-direction:column;align-items:flex-start;gap:44px var(--gap);padding-top:32px}
.scroller-index{justify-self:start;width:fit-content;display:inline-flex;align-items:stretch;padding:12px 17px;border:1px solid rgba(var(--ink),.3);border-radius:20px;font-size:var(--fs-ui);line-height:1}
.scroller-index>*{display:inline-flex;align-items:center;justify-content:center;min-width:20px}
.idx-div,.idx-tot{color:rgba(var(--ink),.3)}
.scroller-items{position:relative;width:100%}
.scroller-item{position:absolute;top:0;left:0;width:100%;visibility:hidden}
.scroller-item.is-on{visibility:visible}
.scroller-item p{font-size:clamp(30px,calc(30px + .028*(100vw - 440px)),58px);letter-spacing:-.02em;line-height:1.1;text-wrap:pretty}
.char{display:inline-block;opacity:.4}
html.reduce .char{opacity:1}
@media (min-width:1025px){.scroller-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}

/* ---------------- ortak blok ---------------- */
.hgroup,.cards,.marquee,.media,.posts{position:relative;z-index:1;background:var(--c6)}

/* başlık + metin bloğu, üstte ince köşeli çizgi */
.hgroup-in{display:flex;flex-direction:column;gap:44px var(--gap);padding-top:clamp(60px,calc(25px + 8.333vw),160px);padding-bottom:clamp(60px,calc(33.75px + 6.25vw),135px)}
.hg-side,.hg-content{position:relative;width:100%;padding-top:48px}
.hg-side::before,.hg-content::before{content:"";position:absolute;top:0;left:0;width:100%;height:12px;border:1px solid var(--c7);border-bottom:0;border-radius:8px 8px 0 0;opacity:.1}
.hg-content{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--row-gap)}
.hg-heading{font-size:clamp(26px,calc(26px + .05*(100vw - 440px)),76px);letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.hl{color:var(--brand)}
.hg-text{max-width:790px;color:rgba(var(--ink),.8);font-size:var(--fs-body);letter-spacing:-.02em;line-height:1.3;text-wrap:pretty}
.hgroup--split .hgroup-in{padding-top:0;padding-bottom:clamp(35px,calc(28px + 1.667vw),55px)}
@media (max-width:1024px){.hg-side+.hg-content{padding-top:0}.hg-side+.hg-content::before{content:none}.hg-content>div:last-child{margin-top:20px}}
@media (min-width:1025px){
  .hgroup-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:flex-start}
  .hgroup--split .hgroup-in{display:flex}
}

/* kelime kelime açılış: her kelimenin üstünde metin renginde blok, aşağı doğru küçülür */
.rw{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.rw-o{position:absolute;inset:0;z-index:1;background:currentColor;transform-origin:bottom;transform:scaleY(1);pointer-events:none;
  transition:transform .8s var(--expo-o) var(--d,0s)}
.is-revealed .rw-o{transform:scaleY(0)}

/* ---------------- kartlar ---------------- */
.cards{display:grid;grid-template-columns:1fr;gap:0}
.card{--fg:255,255,255;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:40px;min-height:280px;padding:24px;overflow:hidden;
  background:var(--bg);color:rgb(var(--fg))}
.card--brand{--bg:var(--brand);--fg:var(--ink-dark)}
.card--navy{--bg:var(--c9)}
.card--mist{--bg:var(--mist);--fg:var(--ink-dark)}
.card-index{position:absolute;top:24px;right:24px;font-size:var(--fs-ui);letter-spacing:-.02em;line-height:1}
.card-icon{--s:68px;display:flex;flex:1 0 var(--s);width:var(--s);height:var(--s)}
.card-icon svg{width:var(--s);height:var(--s);fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.card-content{display:flex;flex-direction:column;gap:16px}
.card-heading{font-size:clamp(26px,calc(26px + .002*(100vw - 440px)),28px);letter-spacing:-.02em;line-height:1.1;text-wrap:pretty}
.card-text{font-size:var(--fs-body);letter-spacing:-.02em;line-height:1.3;opacity:.7;text-wrap:pretty}
@media (min-width:1025px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{min-height:420px;padding:40px}
  .card-index{top:40px;right:40px}
  .card-icon{--s:114px}
  html.js:not(.reduce) .card{clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path 1s var(--expo-o) calc(var(--i) * .15s)}
  html.js:not(.reduce) .card-index,html.js:not(.reduce) .card-icon,html.js:not(.reduce) .card-heading,html.js:not(.reduce) .card-text{opacity:0;transform:translateY(20px);
    transition:opacity .6s var(--p2o) var(--cd,0s),transform .6s var(--p2o) var(--cd,0s)}
  html.js:not(.reduce) .cards.is-in .card{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  html.js:not(.reduce) .cards.is-in .card-index,html.js:not(.reduce) .cards.is-in .card-icon,html.js:not(.reduce) .cards.is-in .card-heading{opacity:1;transform:none}
  html.js:not(.reduce) .cards.is-in .card-text{opacity:1;transform:none}
}

/* ---------------- kayan yazı ---------------- */
.marquee{overflow:hidden;padding:70px 0}
.marquee-scroll{position:relative;display:flex;width:120%;margin-left:-10%;will-change:transform}
.marquee-track{display:flex;flex:0 0 auto;will-change:transform}
.marquee-text{padding-bottom:.1em;font-size:clamp(54px,calc(54px + .106*(100vw - 440px)),160px);line-height:1;white-space:nowrap}
@media (min-width:1025px){.marquee{padding:160px 0}}

/* ---------------- görsel + iki sütun ---------------- */
.media-in{display:flex;flex-direction:column;gap:44px var(--gap);padding-top:clamp(35px,calc(28px + 1.667vw),55px);padding-bottom:clamp(70px,calc(46.9px + 5.5vw),136px)}
.media-img{position:relative;width:100%;max-width:623px;aspect-ratio:623/500;border-radius:12px;overflow:hidden;background:var(--deep)}
.media-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
.media-content{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--row-gap);width:100%}
.media-heading{font-size:clamp(19px,calc(19px + .023*(100vw - 440px)),42px);letter-spacing:-.02em;line-height:1.1;text-wrap:balance}
.media-col{width:100%}
.media-text{display:flex;flex-direction:column;gap:var(--gap);width:100%;max-width:752px;color:rgba(var(--ink),.8);font-size:var(--fs-body);letter-spacing:-.02em;line-height:1.3;text-wrap:pretty}
@media (min-width:569px) and (max-width:1024px),(min-width:1281px){.media-text{display:grid;grid-template-columns:minmax(0,366px) minmax(0,366px);align-items:flex-start}}
@media (max-width:1024px){.media-content>div:last-child{margin-top:20px}}
@media (min-width:1025px){.media-in{display:grid;grid-template-columns:repeat(2,1fr);align-items:flex-start}}

/* ---------------- özellikler (yuvarlak köşeli blok) ---------------- */
.posts{background:var(--c4);border-radius:var(--radius-block)}
.posts-in{display:flex;flex-direction:column;padding-top:clamp(60px,calc(60px + .06*(100vw - 440px)),120px);padding-bottom:clamp(80px,calc(80px + .06*(100vw - 440px)),140px)}
.posts-head{display:flex;flex-direction:column;gap:0 48px;width:100%;margin-bottom:60px}
.posts-heading{font-size:clamp(48px,calc(48px + .042*(100vw - 440px)),90px);letter-spacing:-.02em;line-height:1;text-wrap:balance}
.posts-btn{display:none}
@media (min-width:1025px){.posts-head{flex-direction:row;align-items:flex-end;justify-content:space-between}.posts-btn{display:inline-flex}}

.feat,.post{--pbg:var(--surface);--pfg:var(--c7);--ptag:var(--c6);--r:12px;--n:75px;position:relative;isolation:isolate;display:flex;flex-direction:column;row-gap:20px;width:100%;min-height:240px;
  padding:16px;color:var(--pfg);border-radius:var(--r)}
.feat{margin-bottom:var(--gap)}
.feat::before,.post::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:var(--r) var(--r) 0 var(--r);background:var(--pbg);
  clip-path:polygon(100% 0,100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,0 100%,0 0)}
.notch{position:absolute;right:0;bottom:0;z-index:0;width:87px;height:90px;pointer-events:none}
.notch-fill{position:absolute;inset:0;width:100%;height:100%}
.notch-fill path{fill:var(--pbg)}
.notch .btn-icon{position:absolute;right:0;bottom:0;width:51px;height:48px;--bb:var(--c3);--bb-h:var(--pbg);--af:var(--on-brand);--af-h:var(--pfg)}
.notch .btn-blob path{fill:var(--bb)}
.post-meta{position:relative;display:flex;align-items:center;justify-content:space-between;column-gap:10px;width:100%}
.tag--post{--tag-bg:var(--ptag);--tag-fg:var(--pfg)}
.post-date{overflow:hidden;font-size:clamp(13px,calc(13px + .002*(100vw - 440px)),15px);letter-spacing:-.02em;line-height:1;
  white-space:nowrap;text-overflow:ellipsis;opacity:.5}
.post-title{flex:1 1 auto;font-size:22px;letter-spacing:-.02em;line-height:1.3}
.post-foot{padding-bottom:4px;padding-right:80px;font-size:13px;letter-spacing:-.02em;line-height:1}
.uline{background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 var(--ul,1px);
  transition:background-size .3s var(--ease1)}
.post-list{display:grid;grid-template-columns:1fr;gap:var(--gap);width:100%}
.post--navy{--pbg:var(--c9);--pfg:#fff;--ptag:rgba(255,255,255,.1)}
.post--dark{--pbg:var(--post-3);--pfg:#fff;--ptag:rgba(255,255,255,.12)}
.feat-img{position:relative;display:block;width:100%;aspect-ratio:750/530;border-radius:var(--r);overflow:hidden;background:var(--deep)}
.feat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 0;transform:scale(1);transition:transform .5s var(--ease1)}
.feat-img .ui{transition:transform .5s var(--ease1)}
.feat-content{display:flex;flex-direction:column;row-gap:var(--row-gap);width:100%}
.feat-hgroup{display:flex;flex-direction:column;align-items:flex-start;row-gap:20px;flex:1 1 auto}
.feat-title{font-size:clamp(22px,calc(22px + .014*(100vw - 440px)),36px);letter-spacing:-.02em;line-height:1.3}
.feat-excerpt{opacity:.8;font-size:clamp(14px,calc(14px + .005*(100vw - 440px)),19px);letter-spacing:-.02em;line-height:1.3;text-wrap:pretty}
@media (min-width:1025px){
  .feat,.post{--r:20px;min-height:300px;padding:26px 32px;row-gap:24px}
  .feat{--n:98px;--ul:2px;display:grid;grid-template-columns:repeat(2,1fr);gap:24px 48px;margin-bottom:40px}
  .feat .notch{width:113px;height:117px}
  .feat .notch .btn-icon{width:66px;height:62px}
  .feat .notch .btn-arrows svg{width:12px;height:12px;margin:-6px 0 0 -6px}
  .feat-img{border-radius:16px}
  .feat-content{max-width:494px;margin-left:auto;margin-right:auto;padding:24px 0}
  .post-foot{padding-bottom:0}
  .post-list{grid-template-columns:repeat(3,1fr)}
}
@media (hover:hover) and (pointer:fine){
  .feat:hover .feat-img img{transform:scale(1.05)}
  .feat:hover .feat-img .ui{transform:scale(1.03)}
  .feat:hover .uline,.post:hover .uline{background-size:100% var(--ul,1px)}
  .feat:hover .btn-icon,.post:hover .btn-icon{transform:scale(.875)}
  .feat:hover .btn-blob path{fill:var(--fill)}
  .post:hover .btn-blob path{fill:var(--pbg)}
  .feat:hover .btn-arrows svg:first-child,.post:hover .btn-arrows svg:first-child{transform:translateX(46px)}
  .feat:hover .btn-arrows svg:last-child,.post:hover .btn-arrows svg:last-child{transform:translateX(0)}
  .feat:hover .btn-arrows svg:last-child{stroke:var(--on-fill)}
}

/* ---------------- footer ---------------- */
.ftr{position:relative;z-index:0;overflow:hidden;padding-top:40px;padding-bottom:24px;background:var(--aura-bg);color:var(--c7);margin-top:calc(var(--radius-block) * -1)}
.ftr-bg{position:absolute;inset:0;margin:0;opacity:.6;transform:translateY(-120px);will-change:transform,opacity}
.ftr-in{position:relative;z-index:1;display:flex;flex-direction:column;padding-top:40px}
.ftr-main{display:flex;flex-direction:column;align-items:stretch;gap:50px;padding-bottom:70px;width:100%}
.ftr-heading{font-size:clamp(28px,calc(28px + .014*(100vw - 440px)),42px);letter-spacing:-.02em;line-height:1.2;text-wrap:balance}
.ftr-btn{margin-top:40px}
.ftr-info{position:relative;display:flex;flex-direction:column;gap:50px;padding-left:20px;border-left:1px solid rgba(var(--ink),.16)}
.ftr-col{display:flex;flex-direction:column;gap:20px}
.ftr-label{font-size:15px;line-height:1.2;color:rgba(var(--ink),.55)}          /* sütun başlıkları düz yazı (Aspekta), etiket fontu değil */
.ftr-col ul{display:flex;flex-direction:column;gap:8px}
.ftr-col li{display:flex;width:100%}
/* iletişim: bağlantının üstünde küçük açıklama (ne için, hangi saatlerde); altta ofis adresleri. Düz yazı (Aspekta), etiket fontu değil */
.ftr-col li.kv{flex-direction:column;align-items:flex-start;gap:4px}
.ftr-col li.kv + li.kv{margin-top:12px}
.ftr-note{font-size:13px;line-height:1.3;color:rgba(var(--ink),.6)}
.ftr-addrs{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.ftr-addrs address{font-style:normal;font-size:15px;line-height:1.55;color:rgba(var(--ink),.7)}
.ftr-addrs b{display:block;margin-bottom:6px;font-weight:400;font-size:18px;letter-spacing:-.02em;line-height:1.2;color:rgb(var(--ink))}
.uline-link{padding-bottom:.2em;font-size:28px;letter-spacing:-.02em;line-height:1;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;
  background-repeat:no-repeat;background-size:0 1px;transition:background-size .3s var(--ease1)}
.ftr-top{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 11V1.5M1.8 5.7 6 1.5l4.2 4.2' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  position:absolute;top:0;right:0;z-index:1;display:flex;width:48px;height:48px;border:1px solid rgba(var(--ink),.16);border-radius:16px;overflow:hidden}
.ftr-top::before,.ftr-top::after{content:"";position:absolute;inset:0;margin:auto;transition:transform .4s var(--ease-io)}
.ftr-top::before{width:12px;height:12px;background:currentColor;-webkit-mask:no-repeat center/12px var(--arrow);mask:no-repeat center/12px var(--arrow)}
/* üstüne gelince alttan dolan kare; ok kareden oyulur, zemin rengi görünür */
.ftr-top::after{width:100%;height:100%;border-radius:inherit;transform:translateY(110%);background:currentColor;
  -webkit-mask:no-repeat center/12px var(--arrow),linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:no-repeat center/12px var(--arrow) exclude,linear-gradient(#000 0 0)}
.ftr-mark{position:relative;display:flex;width:100%;margin-top:24px;overflow:hidden}
.ftr-lockup{display:inline-flex;align-items:center;gap:.16em;font-size:var(--mark,13vw);line-height:1;color:var(--c7);white-space:nowrap;padding:.04em 0}
.ftr-logo-svg{flex:0 0 auto;width:auto;height:1em}
.ftr-work{padding-left:.16em;border-left:.03em solid currentColor;font-size:.9em;letter-spacing:-.03em;line-height:.78;transform:translateY(-.095em)}
.ftr-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-top:16px;font-size:14px;line-height:1.3}
.ftr-bottom-r{text-align:right;opacity:.6}
@media (max-width:1280px){.ftr-bottom{order:1;margin-top:0}.ftr-mark{order:2}}
@media (max-width:1024px){.ftr-bottom{justify-content:flex-end;text-align:right}.ftr-bottom-r{display:none}}
@media (hover:hover) and (pointer:fine){
  .uline-link:hover,.uline-link:focus-visible{background-size:100% 1px}
  .ftr-top:hover::before{transform:translateY(-32px)}
  .ftr-top:hover::after{transform:translateY(0)}
}
@media (min-width:1025px){
  .ftr-in{min-height:calc(100vh - 120px);padding-top:60px}
  /* Gezin | İletişim | Ofisler yan yana: alt bilgi ekrandan uzun olmasın, en altta üstteki şerit ve menü görünsün */
  .ftr-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-left:0;border-left:0}
  .ftr-col{padding-left:20px;border-left:1px solid rgba(var(--ink),.16)}
  .ftr-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,700px);align-items:flex-start}
  .uline-link{font-size:18px}
}
@media (min-width:1281px){
  .ftr-main{grid-template-columns:minmax(0,1fr) minmax(0,780px);padding-bottom:100px}
  .ftr-info{padding-right:88px}
  .ftr-mark{margin-top:auto}
  .ftr-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,780px)}
  .ftr-bottom-r{text-align:left}
}

/* ---------------- görünür olunca (masaüstü) ---------------- */
@media (min-width:1025px){
  html.js:not(.reduce) [data-inview]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--p2o) var(--d,0s),transform .8s var(--p2o) var(--d,0s)}
  html.js:not(.reduce) [data-inview].in{opacity:1;transform:none}
}
html.reduce *,html.reduce *::before,html.reduce *::after{transition:none!important;animation:none!important}
html.reduce .rw-o{display:none}
html:not(.js) .hdr-bar{opacity:1;transform:none}
html:not(.js) .hero-clip{clip-path:none}

/* ---------------- ürün önizlemeleri: ürünün kendi görünümüyle HTML'de çizilmiş örnek ekranlar ----------------
   Ürünle aynı renkler: zemin ve yazı nötr, mor yalnız vurgu (açık ve koyu tema). */
.media-img--ui,.feat-img--ui{background:var(--ui-bg,#F7F6FB)}
.ui{--ui-bg:#F7F6FB;--ui-card:#FFFFFF;--ui-line:rgba(17,16,22,.08);--ui-txt:#111016;--ui-body:#34323C;--ui-dim:#72707C;--ui-ink:#5B42D9;--ui-label:#72707C;
  --ui-soft:rgba(146,123,255,.12);--ui-fill:#7359F0;--ui-warn:#DB9A2E;--ui-warn-ink:#8F5B0C;--ui-warn-soft:rgba(219,154,46,.14);--ui-ok-ink:#157550;--ui-ok-soft:rgba(30,158,106,.12);
  --s1:#4FD1B8;--s1i:#0B7F6A;--s2:#F5A462;--s2i:#A8520E;--s3:#F37BB5;
  position:absolute;inset:0;display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);padding:clamp(12px,1.4vw,20px);overflow:hidden;
  color:var(--ui-txt);text-align:left;font-size:clamp(10.5px,.95vw,13.5px);line-height:1.35;letter-spacing:-.01em;background:var(--ui-bg)}
html[data-theme=dark] .ui,html[data-theme=dark] .media-img--ui,html[data-theme=dark] .feat-img--ui{--ui-bg:#09080C;--ui-card:#111015;--ui-line:rgba(255,255,255,.07);--ui-txt:#F4F2FA;--ui-body:#D6D3E2;--ui-dim:#8E8B99;
  --ui-ink:#BBAAFF;--ui-label:#8E8B99;--ui-soft:rgba(146,123,255,.16);--ui-warn:#E8A94A;--ui-warn-ink:#F4C777;--ui-warn-soft:rgba(232,169,74,.16);--ui-ok-ink:#72DFAE;--ui-ok-soft:rgba(57,196,137,.15);
  --s1i:#4FD1B8;--s2i:#F5A462}
.ui p{margin:0}
.ui time{font-size:.82em;color:var(--ui-dim)}
.ui-bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:clamp(8px,1vw,12px);border-bottom:1px solid var(--ui-line);font-size:.92em}
.ui-brand{color:var(--brand);font-weight:600;letter-spacing:-.02em}
.ui-brand b{margin-left:.2em;color:var(--ui-txt);font-weight:400}
.ui-context{color:var(--ui-label);font-size:.82em}
.ui-title{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-size:1.28em;letter-spacing:-.025em}
.ui-meta{margin-top:-.4em;color:var(--ui-dim);font-size:.86em}
.ui-meta b{color:var(--ui-txt);font-weight:400;font-size:.95em}
.ui-live,.ui-done{display:inline-flex;align-items:center;gap:.5em;padding:.35em .7em;border-radius:6px;font-size:.78em;font-weight:400;white-space:nowrap}
.ui-live{background:rgba(229,72,77,.12);color:#D9434A}
html[data-theme=dark] .ui-live{color:#FF8E93}
.ui-live i{width:.7em;height:.7em;border-radius:50%;background:#E5484D;animation:uiPulse 1.6s ease-out infinite}
@keyframes uiPulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 .7em rgba(229,72,77,0)}}
.ui-done{background:var(--ui-ok-soft);color:var(--ui-ok-ink)}
.ui-cols{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(10px,1.2vw,16px);flex:1 1 auto;min-height:0}
.ui-cap{margin-bottom:.15em;color:var(--ui-label);font-size:.8em}
.ui-transcript,.ui-assist,.ui-notes{display:flex;flex-direction:column;gap:.5em;min-width:0}
/* transkript satırı: renkli baş harf, ad ve zaman, metin (üründeki gibi) */
.ui-row{display:grid;grid-template-columns:1.9em minmax(0,1fr);column-gap:.7em;padding:.5em .6em;border-radius:10px}
.ui-av{width:1.9em;height:1.9em;border-radius:.55em;display:flex;align-items:center;justify-content:center;font-size:.82em;color:#16142A;background:var(--sc)}
.ui-who{display:flex;align-items:baseline;gap:.6em;margin-bottom:.2em}
.ui-who b{color:var(--sci);font-weight:600;font-size:.95em}
.ui-row p:last-child{color:var(--ui-body)}
.ui-row.s1{--sc:var(--s1);--sci:var(--s1i)}.ui-row.s2{--sc:var(--s2);--sci:var(--s2i)}
.ui-row.is-flag{background:linear-gradient(90deg,color-mix(in srgb,var(--ui-warn) 12%,transparent),transparent 75%);box-shadow:inset 3px 0 0 var(--ui-warn)}
.ui-row.is-live .ui-av{box-shadow:0 0 0 .25em color-mix(in srgb,var(--sc) 35%,transparent)}
.ui-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:var(--brand);animation:uiCaret 1.05s steps(1) infinite}
@keyframes uiCaret{50%{opacity:0}}
.ui mark{padding:0 .2em;border-radius:4px;background:rgba(146,123,255,.26);color:inherit}
/* asistan sütunu ve öneri kartı */
.ui-ahead{display:flex;align-items:center;gap:.6em;padding:.6em .75em;border-radius:10px;border:1px solid var(--ui-line);background:linear-gradient(180deg,var(--ui-soft),transparent),var(--ui-card);
  font-size:.8em}
.ui-ahead i{width:.6em;height:.6em;border-radius:50%;background:var(--brand);box-shadow:0 0 0 .25em var(--ui-soft)}
.ui-ahead span{margin-left:auto;padding:.2em .55em;border-radius:5px;background:var(--ui-soft);color:var(--ui-ink)}
.ui-insight{position:relative;display:flex;flex-direction:column;gap:.55em;padding:.8em .85em;border-radius:12px;background:var(--ui-card);border:1px solid var(--ui-line);
  box-shadow:0 14px 30px -24px rgba(40,24,120,.45)}
.ui-insight::before{content:"";position:absolute;left:-1px;top:.9em;bottom:.9em;width:3px;border-radius:0 3px 3px 0;background:var(--ui-warn)}
.ui-k{display:flex;align-items:center;justify-content:space-between}
.ui-pill{padding:.3em .6em;border-radius:5px;background:var(--ui-warn-soft);color:var(--ui-warn-ink);font-size:.78em}
.ui-h{font-size:1em;line-height:1.4}
.ui-ev{display:flex;gap:.6em;padding:.45em .6em;border-left:2px solid var(--ui-line);border-radius:0 8px 8px 0;background:var(--ui-soft);color:var(--ui-dim);font-size:.85em}
.ui-question{padding:.65em .7em;border-radius:10px;background:color-mix(in srgb,var(--brand) 8%,transparent);border:1px solid color-mix(in srgb,var(--brand) 38%,transparent)}
.ui-question span,.ui-open span{display:block;margin-bottom:.35em;color:var(--ui-ink);font-size:.76em}
.ui-acts{display:flex;gap:.4em;font-size:.78em}
.ui-acts b,.ui-acts span{padding:.5em .8em;border-radius:6px;font-weight:400}
.ui-acts b{background:var(--ui-fill);color:#fff}
.ui-acts span{border:1px solid var(--ui-line);color:var(--ui-body)}
/* özet sütunu */
.ui-tabs{display:inline-flex;align-self:flex-start;gap:.2em;padding:.25em;border-radius:9px;background:var(--ui-chan,#F3F2F7);font-size:.8em}
.ui-tabs span{padding:.45em .8em;border-radius:6px;color:var(--ui-dim)}
.ui-tabs .is-on{background:var(--ui-card);color:var(--ui-txt);box-shadow:0 1px 2px rgba(17,16,22,.08),0 0 0 1px rgba(17,16,22,.06)}
html[data-theme=dark] .ui-tabs{--ui-chan:#18171E}html[data-theme=dark] .ui-tabs .is-on{background:#24222C;box-shadow:none}
.ui-sum{padding:.65em .7em;border-radius:10px;background:color-mix(in srgb,var(--brand) 7%,transparent);border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);color:var(--ui-body);font-size:.9em}
.ui-notes>p{display:flex;justify-content:space-between;align-items:center;gap:.6em;padding:.4em 0;border-bottom:1px solid var(--ui-line);color:var(--ui-body);font-size:.9em}
.ui-src{display:inline-flex;padding:.12em .45em;border-radius:5px;border:1px solid var(--ui-line);background:var(--ui-card);color:var(--ui-ink);font-size:.78em;white-space:nowrap}
.ui-open{margin-top:auto;padding:.65em .7em;border-radius:10px;background:var(--ui-warn-soft);border:1px solid color-mix(in srgb,var(--ui-warn) 35%,transparent);color:var(--ui-body);font-size:.9em}
.ui-open span{color:var(--ui-warn-ink)}
/* alt çubuk: canlıda konuşma akışı, sonrasında dışa aktarma biçimleri */
.ui-dock{display:flex;align-items:center;gap:.9em;padding:.55em .8em;border-radius:12px;background:var(--ui-card);border:1px solid var(--ui-line)}
.ui-rec{display:inline-flex;align-items:center;gap:.5em;flex:0 0 auto;color:var(--ui-dim);font-size:.78em}
.ui-rec i{width:.55em;height:.55em;border-radius:50%;background:#E5484D}
.ui-flow{position:relative;flex:1 1 auto;height:.9em;border-radius:4px;background:linear-gradient(var(--ui-line),var(--ui-line)) center/100% 1px no-repeat}
.ui-flow i{position:absolute;top:0;bottom:0;left:var(--x);width:var(--w);border-radius:3px;background:var(--c)}
.ui-flow::after{content:"";position:absolute;right:0;top:-.25em;bottom:-.25em;width:2px;border-radius:1px;background:#E5484D}
.ui-foot{display:flex;align-items:center;gap:.5em;padding-top:clamp(8px,1vw,12px);border-top:1px solid var(--ui-line);color:var(--ui-dim);font-size:.8em}
.ui-foot--formats span{padding:.35em .65em;border-radius:6px;background:var(--ui-card);border:1px solid var(--ui-line);color:var(--ui-body)}
@media (max-width:1024px){
  .media-img--ui,.feat-img--ui{aspect-ratio:auto}
  .media-img--ui .ui,.feat-img--ui .ui{position:relative;inset:auto}
}
@media (max-width:560px){.ui-cols{grid-template-columns:1fr}.ui{font-size:12px}}
@media (prefers-reduced-motion:reduce){.ui-live i,.ui-caret{animation:none}}

/* ---------------- koyu tema: siyah zemin, beyaz yazı, Voiser moru vurgu (açık temada hero ve altbilgi de bu renklerde) ---------------- */
html[data-theme=dark],html:not([data-theme=dark]) :is(.hero-bg,.hero-main,.scroller-wrap,.ftr){color-scheme:dark;
  --c4:#111015;--c6:#09080C;--c7:#F4F2FA;--c9:#26232F;--ink:244,242,250;
  --surface:#18171E;--glass:rgba(24,23,30,.78);--line:rgba(190,175,255,.1);--hover:#24212D;
  --fill:#F4F2FA;--on-fill:#111016;--deep:#131218;--mist:#C3B7FF;--post-3:#7359F0;
  --aura-bg:#08070B;--au1:rgba(115,89,240,.58);--au2:rgba(146,123,255,.3);--au3:rgba(64,40,190,.6);--au4:rgba(195,183,255,.1);--au5:rgba(84,74,210,.32);
  --arc:rgba(195,183,255,.34);--arc-glow:rgba(146,123,255,.22);--grain:.2;
  --fx0:#08070B;--fx1:#0D0A17;--fx2:#4A33CC;--fx3:#8C75FF;--fx4:#D9CEFF;
  --veil:linear-gradient(100deg,rgba(8,7,11,.6) 0%,rgba(8,7,11,.18) 45%,rgba(8,7,11,0) 70%),linear-gradient(0deg,rgba(8,7,11,.45),rgba(8,7,11,0) 38%);
  --app-bg:#09080C}

/* tema düğmesi: açık temada ay, koyu temada güneş; değişirken döner (menüde "Demo talep edin"in solunda) */
.theme-btn{position:relative;display:inline-flex;flex:0 0 auto;width:46px;height:46px;border-radius:8px;overflow:hidden;color:var(--c7);pointer-events:auto;transition:background-color .6s var(--ease1)}
.theme-btn svg{position:absolute;inset:0;margin:auto;transition:transform .6s cubic-bezier(.34,1.36,.64,1),opacity .3s ease}
.theme-btn .sun{transform:rotate(-90deg) scale(.4);opacity:0}
html[data-theme=dark] .theme-btn .sun{transform:none;opacity:1}
html[data-theme=dark] .theme-btn .moon{transform:rotate(90deg) scale(.4);opacity:0}
@media (hover:hover) and (pointer:fine){.theme-btn:hover{background:var(--hover)}}
@media (max-width:1024px){.theme-btn{width:48px;height:48px;margin-right:8px;border-radius:12px;background:var(--glass);border:1px solid var(--line)}}
.hdr[data-nav=on] .theme-btn{color:#fff;background:transparent;border-color:rgba(255,255,255,.2)}
/* tema geçişi: yeni görünüm düğmeden daire olarak açılır (site.js). Daire CSS'te, ilk karede yarıçap 0 (göz kırpması olmaz);
   tema değişirken renk geçişleri kapalı (düğmeler daire içinde bir an eski renkte kalmaz). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){animation:vtReveal .7s cubic-bezier(.19,1,.22,1) both}
@keyframes vtReveal{from{clip-path:circle(0 at var(--vt-x) var(--vt-y))}to{clip-path:circle(var(--vt-r) at var(--vt-x) var(--vt-y))}}
html.theme-swap :not(.theme-btn svg),html.theme-swap :not(.theme-btn svg)::before,html.theme-swap :not(.theme-btn svg)::after{transition:none!important}


/* "Giriş yap" (ürün, app/): ürünün zemin renginde bir yüzey tıklanan düğmeden büyüyüp ekranı kaplar, sonra ürün açılır (site.js);
   ürün aynı renkten kendi açılışıyla gelir (web/static/js/core/fx.js entrance). */
.app-cover{position:fixed;inset:0;z-index:400;background:var(--app-bg);pointer-events:none}