/* Dijital Pazarlama Nedir? v3: sinematik film sahnesi (16 Eki 2026; 17 Eki: sinematik katman v2).
   .dmx (JS yok): portre + sahneler alt alta (sabit kare + metin). .dmx.is-live: dmx.js'in kurduğu yapışkan film sahnesi.
   html.dmx-film: film sürerken site başlığı, alt düğmeler ve duyuru şeridi gizli (deneyim bitince geri gelir).
   Katman dili: film jeneriği tipografisi (maskeden açılan satırlar), HUD köşeli cam paneller, beyin mini haritası. Yalnız
   transform/opacity canlanır; bulanıklık süzgeci (backdrop-filter) yok, her karede yeniden boyama yükü yok. */
.dmx{--c-see:#36f0c8;--c-und:#4da6ff;--c-feel:#ff9f38;--c-trust:#ffcc59;--c-act:#5cff8f;--c-rival:#ff5a4f;--c-seo:#31c48d;
  --d-ink:#f1f4f8;--d-mut:#a9b3be;--d-line:rgba(255,255,255,.09);--mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  position:relative;background:#000;color:var(--d-ink);color-scheme:dark}
.dmx .ck{flex:none;width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;background:var(--c-seo);color:#04140b}
.dmx .btn{pointer-events:auto}
.dmx-canvas,.dmx-fx,.dmx-panels,.dmx-bar,.dmx-load,.dmx-map{display:none}

/* ---------- statik (JS yok) ---------- */
.dmx-stage{position:relative}
.dmx-poster{display:block;position:relative;height:min(88vh,760px);overflow:hidden}
.dmx-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.dmx-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.2) 55%,transparent),linear-gradient(0deg,#000,transparent 35%)}
.dmx-intro{position:absolute;left:clamp(20px,6vw,110px);bottom:clamp(36px,10vh,120px);max-width:640px;z-index:2}
.dmx-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--c-see);margin-bottom:12px}
.dmx-intro h1{font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:1;letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance}
.dmx-lead{font-size:clamp(1.02rem,1.5vw,1.3rem);line-height:1.5;color:#dbe2ea;margin:0;max-width:34ch}
.dmx-hint{position:relative;display:inline-flex;align-items:center;gap:12px;margin-top:24px;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--d-mut)}
.hint-m{position:relative;flex:none;width:20px;height:32px;border:1.5px solid rgba(255,255,255,.5);border-radius:12px}
.hint-m::after{content:"";position:absolute;left:50%;top:6px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:#fff;animation:dmxHint 1.8s ease-in-out infinite}
@keyframes dmxHint{0%{opacity:0;transform:translateY(0)}30%{opacity:1}80%,100%{opacity:0;transform:translateY(11px)}}
.hint-ld,.hint-bar{display:none}
.dmx-caps{display:grid;gap:clamp(36px,6vw,80px);padding:clamp(40px,7vw,96px) clamp(20px,6vw,110px)}
.dmx-cap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(18px,3vw,48px);align-items:center;align-content:center}
.dmx-cap>*{grid-column:2}
.dmx-still{grid-column:1;grid-row:1 / span 8;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:#05080b}
.cap-k{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--tc,var(--c-see))}
.cap-n{color:#fff;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.cap-k i{flex:none;width:38px;height:1px;background:currentColor;transform-origin:0 50%}
.dmx-cap h2{margin:14px 0 0;font-weight:600;text-wrap:balance}
.ln{display:block}
.ln-a{font-size:clamp(2rem,4vw,3.4rem);line-height:1;letter-spacing:-.04em;color:#fff}
.ln-b{margin-top:.38em;font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:400;line-height:1.25;letter-spacing:-.012em;color:rgba(255,255,255,.9)}
.ln>span{display:block}
.cap-p>span{display:block}
.cap-p{margin:16px 0 0;color:rgba(222,229,237,.78);line-height:1.66;font-size:clamp(.96rem,1.15vw,1.04rem);max-width:48ch}
.cap-w{margin:18px 0 0}
.cap-wi{margin:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:8px;font-size:13.5px;color:#f2f5f8}
.cap-wi b{flex-basis:100%;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--tc,var(--c-see));margin-bottom:2px}
.cap-wi span{padding:0 13px;line-height:1.2;border-left:1px solid rgba(255,255,255,.22)}
.cap-wi b+span{padding-left:0;border-left:0}
.dmx-moves,.dmx-five{list-style:none;margin:18px 0 0;padding:0}
.dmx-moves{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:10px 22px}
.dmv{display:flex;align-items:center;gap:8px;font-size:14px;color:#fff}
.dmv-n{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.55)}
.dmv i{width:8px;height:8px;transform:rotate(45deg);background:var(--mc)}
.dmv-0{--mc:var(--c-see)}.dmv-1{--mc:var(--c-und)}.dmv-2{--mc:var(--c-feel)}.dmv-3{--mc:var(--c-trust)}.dmv-4{--mc:var(--c-act)}.dmv-x{--mc:#fff;font-weight:700}
.dmv-x .dmv-n{color:var(--c-trust);font-weight:700}
.dmx-five{display:flex;flex-wrap:wrap;gap:12px 22px}
.dmx-five li{display:flex;align-items:baseline;gap:8px;padding-bottom:7px;border-bottom:2px solid var(--fc);font-size:15px;font-weight:500;color:#fff}
.dmx-five span{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.55)}
.f5-0{--fc:var(--c-see)}.f5-1{--fc:var(--c-und)}.f5-2{--fc:var(--c-feel)}.f5-3{--fc:var(--c-trust)}.f5-4{--fc:var(--c-act)}
.dmx-sign{font-size:12.5px !important;color:var(--d-mut) !important;margin:18px 0 0 !important;letter-spacing:.01em}
.dmx-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.dmx-c-eye,.dmx-c-path,.dmx-c-see{--tc:var(--c-see)}.dmx-c-understand{--tc:var(--c-und)}.dmx-c-feel{--tc:var(--c-feel)}.dmx-c-trust{--tc:var(--c-trust)}.dmx-c-act{--tc:var(--c-act)}.dmx-c-strategy,.dmx-c-done{--tc:#d8fff1}
@media (max-width:760px){
  .dmx-poster{height:min(92vh,680px)}
  .dmx-poster::after{background:linear-gradient(0deg,#000 0,rgba(0,0,0,.45) 42%,transparent 70%)}
  .dmx-intro{left:16px;right:16px;bottom:28px}
  .dmx-cap{grid-template-columns:minmax(0,1fr)}
  .dmx-cap>*{grid-column:1}
  .dmx-still{grid-row:auto;margin-bottom:16px}
  .dmx-moves{grid-template-columns:repeat(2,auto)}
}

/* ---------- film (dmx.js) ---------- */
.dmx.is-live .dmx-track{height:calc(var(--dmx-len,18) * 100vh);height:calc(var(--dmx-len,18) * 100svh)}
.dmx.is-live .dmx-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.dmx.is-live .dmx-poster{position:absolute;inset:0;height:auto;transition:opacity .5s ease}
.dmx.is-live .dmx-poster img{object-position:50% 50%}   /* ilk film karesiyle aynı hizada (tuval de ortadan kırpar) */
.dmx.is-live .dmx-poster::after{display:none}
.dmx.is-live.is-ready .dmx-poster{opacity:0;visibility:hidden}
.dmx.is-live .dmx-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.dmx.is-live .dmx-fx{display:block;position:absolute;inset:0;pointer-events:none;z-index:1;   /* tek katman: vinyet + okunurluk gölgesi */
  background:linear-gradient(90deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.2) 36%,transparent 54%),linear-gradient(0deg,rgba(0,0,0,.6) 0,transparent 36%),
    linear-gradient(180deg,rgba(0,0,0,.4) 0,transparent 18%),radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
.dmx.is-live .dmx-intro{z-index:3;bottom:clamp(40px,12vh,140px)}
/* yükleme: "Film hazırlanıyor" çubuğu, ilk ekranın kareleri hazır olunca "Kaydırın" */
.dmx.is-live .hint-ld{display:block}
.dmx.is-live .hint-go{display:none}
.dmx.is-live .hint-bar{display:block;position:absolute;left:32px;right:0;bottom:-9px;height:1.5px;background:rgba(255,255,255,.14);overflow:hidden}
.dmx.is-live .hint-bar i{display:block;height:100%;background:var(--c-see);transform-origin:0 50%;transform:scaleX(0)}
.dmx.is-live .hint-m::after{animation-play-state:paused;opacity:0}
.dmx.is-live.is-go .hint-ld,.dmx.is-live.is-go .hint-bar{display:none}
.dmx.is-live.is-go .hint-go{display:block}
.dmx.is-live.is-go .hint-m::after{animation-play-state:running}

/* sahne yazıları: jenerik tipografisi */
.dmx.is-live .dmx-caps{position:absolute;z-index:3;left:clamp(20px,5.5vw,96px);bottom:clamp(52px,10vh,116px);width:min(600px,44vw);padding:0;display:grid;gap:0;pointer-events:none}
.dmx.is-live .dmx-cap{grid-area:1 / 1;align-self:end;display:block;opacity:0;will-change:opacity,transform;text-shadow:0 2px 22px rgba(0,0,0,.55)}
.dmx.is-live .dmx-c-done{visibility:hidden}   /* bağlantılı final yazısı görünene dek odaklanılamaz; diğer yazılar ekran okuyucuya açık */
html.dmx-film .dmx-still,.dmx.is-live .dmx-still{display:none}   /* film modunda JS'siz görünüm kareleri hiç indirilmez */
.dmx.is-live .dmx-cap .btn{pointer-events:auto}
.dmx.is-live .cap-k i{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) .05s}
.dmx.is-live .is-in .cap-k i{transform:none}
.dmx.is-live .dmx-cap h2{margin-top:16px}
.dmx.is-live .ln{overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em}
.dmx.is-live .ln>span{transform:translate3d(0,105%,0);will-change:transform;transition:transform .95s cubic-bezier(.16,.84,.24,1)}
.dmx.is-live .is-in .ln>span{transform:none}
.dmx.is-live .is-in .ln-b>span{transition-delay:.12s}
.dmx.is-live .cap-p>span,.dmx.is-live .cap-wi{opacity:0;transform:translate3d(0,12px,0);transition:opacity .7s ease .28s,transform .85s cubic-bezier(.2,.8,.2,1) .28s}
.dmx.is-live .cap-wi{transition-delay:.42s}
.dmx.is-live .is-in .cap-p>span,.dmx.is-live .is-in .cap-wi{opacity:1;transform:none}
.dmx.is-live .dmx-cap:not(.is-in) *{transition-delay:0s !important;transition-duration:.25s !important}
.dmx.is-live .ln-a{font-size:clamp(2.9rem,5.3vw,5.1rem);line-height:.98;letter-spacing:-.045em}
.dmx.is-live .dmx-c-eye .ln-a,.dmx.is-live .dmx-c-path .ln-a{font-size:clamp(2.3rem,4vw,3.9rem);line-height:1.02;max-width:12ch}
.dmx.is-live .ln-b{max-width:24ch;font-size:clamp(1.2rem,1.75vw,1.7rem)}
.dmx.is-live .cap-p{font-size:15px;max-width:46ch}
.dmx.is-live .dmx-c-done .ln-a{font-size:clamp(2.6rem,4.6vw,4.4rem)}
.dmx.is-live .dmx-five li,.dmx.is-live .dmx-c-done .dmx-sign,.dmx.is-live .dmx-c-done .dmx-ctas{opacity:0;transform:translate3d(0,10px,0);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.dmx.is-live .is-in .dmx-five li,.dmx.is-live .is-in.dmx-c-done .dmx-sign,.dmx.is-live .is-in.dmx-c-done .dmx-ctas{opacity:1;transform:none}
.dmx.is-live .is-in .dmx-five li:nth-child(1){transition-delay:.3s}.dmx.is-live .is-in .dmx-five li:nth-child(2){transition-delay:.38s}.dmx.is-live .is-in .dmx-five li:nth-child(3){transition-delay:.46s}
.dmx.is-live .is-in .dmx-five li:nth-child(4){transition-delay:.54s}.dmx.is-live .is-in .dmx-five li:nth-child(5){transition-delay:.62s}
.dmx.is-live .is-in.dmx-c-done .dmx-sign{transition-delay:.7s}.dmx.is-live .is-in.dmx-c-done .dmx-ctas{transition-delay:.8s}
.dmx.is-live .dmx-c-done,.dmx.is-live .dmx-intro{max-width:min(560px,40vw)}
.dmx.is-live .dmv{opacity:.28;transition:opacity .35s ease}
.dmx.is-live .dmv i{transition:box-shadow .35s ease,transform .35s ease}
.dmx.is-live .dmv.on{opacity:1}
.dmx.is-live .dmv.on i{box-shadow:0 0 12px var(--mc);transform:rotate(45deg) scale(1.2)}
.dmx.is-live .dmv-x.on{font-size:17px;letter-spacing:.01em}

/* beyin mini haritası (gerçek MR silüeti): istasyon bölgesi yanar, nokta yolculuğu izler */
.dmx.is-live .dmx-map{display:flex;align-items:center;gap:14px;position:absolute;z-index:3;left:clamp(20px,5.5vw,96px);top:26px;opacity:0;visibility:hidden;pointer-events:none}
.map-svg{display:block;width:118px;height:auto;overflow:visible}
.m-out{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.5);stroke-width:1.2;vector-effect:non-scaling-stroke}
.m-r{fill:rgba(255,255,255,0);stroke:rgba(255,255,255,.13);stroke-width:.8;vector-effect:non-scaling-stroke;transition:fill .5s ease}
.m-cer,.m-stem{fill:rgba(255,255,255,.04)}
.m-limb{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke;transition:stroke .5s ease}
.m-amy{fill:rgba(255,255,255,.25);transition:fill .5s ease}
.m-opt{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke}
.m-optl{fill:none;stroke:var(--c-see);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round}   /* çizilerek ilerleyen yol: ölçeklenmeyen çizgi kesik çizgiyi bozar */
.m-eye{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.7);stroke-width:1.1;vector-effect:non-scaling-stroke}
.m-dot{fill:#fff}
.m-halo{fill:rgba(255,255,255,.22);transform-box:fill-box;transform-origin:50% 50%}
.dmx-map.is-see .m-occ{fill:rgba(54,240,200,.55)}
.dmx-map.is-understand .m-temp{fill:rgba(77,166,255,.55)}
.dmx-map.is-feel .m-limb{stroke:var(--c-feel)}.dmx-map.is-feel .m-amy{fill:var(--c-feel)}
.dmx-map.is-trust .m-pref{fill:rgba(255,204,89,.55)}
.dmx-map.is-act .m-mot{fill:rgba(92,255,143,.6)}.dmx-map.is-act .m-par{fill:rgba(92,255,143,.22)}
.dmx-map.is-strategy .m-occ{fill:rgba(54,240,200,.4)}.dmx-map.is-strategy .m-temp{fill:rgba(77,166,255,.4)}.dmx-map.is-strategy .m-pref{fill:rgba(255,204,89,.4)}
.dmx-map.is-strategy .m-mot{fill:rgba(92,255,143,.45)}.dmx-map.is-strategy .m-limb{stroke:var(--c-feel)}.dmx-map.is-strategy .m-amy{fill:var(--c-feel)}
.map-l{display:grid;min-width:0}
.ml{grid-area:1 / 1;display:grid;gap:3px;opacity:0;transform:translate3d(0,4px,0);transition:opacity .4s ease,transform .4s ease}
.ml.on{opacity:1;transform:none}
.ml b{font-size:13px;font-weight:600;color:#fff;white-space:nowrap}
.ml em{font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--mlc,var(--c-see))}
.ml-understand{--mlc:var(--c-und)}.ml-feel{--mlc:var(--c-feel)}.ml-trust{--mlc:var(--c-trust)}.ml-act{--mlc:var(--c-act)}.ml-strategy{--mlc:#d8fff1}
@keyframes dmxPing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.dmx.is-live .m-halo{animation:dmxPing 1.8s ease-out infinite}

/* ---------- kartlar: müşterinin telefonu (gerçek uygulama ekranları) ----------
   Tek ölçüde tasarlanır (telefon 316 px genişlik), bulunduğu alana orantılı ölçeklenir (--cs, dmx.js); yükseklik --fh.
   Adımlar kaydırmayla tetiklenir (is-s1…), geçişler zamana bağlıdır (kaydırmaya kilitli titreme yok). */
.dmx.is-live .dmx-panels{display:block;position:absolute;z-index:3;right:clamp(18px,4.6vw,84px);top:72px;bottom:52px;width:min(430px,31vw);pointer-events:none}
.dmx.is-live .dmx-panel{position:absolute;inset:0;opacity:0;visibility:hidden;will-change:opacity,transform}
.dmx-panel{--pc:54,240,200}
.dmx-p-und{--pc:77,166,255}.dmx-p-feel{--pc:255,159,56}.dmx-p-trust{--pc:255,204,89}.dmx-p-act{--pc:92,255,143}
.cd-wrap{position:absolute;left:50%;top:50%;width:316px;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translate(-50%,-50%) scale(var(--cs,1));transform-origin:50% 50%}
.cd-lab{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 9px;max-width:316px;text-align:center;font-size:10.5px;font-weight:600;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--pc))}
.cd-n{color:#fff;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.cd-v{display:none;color:#fff;font-weight:600;letter-spacing:.14em}
.cd-lab i{width:22px;height:1px;background:currentColor;opacity:.8}
.cd-lab em{font-style:normal}
.cd-ph{position:relative;width:316px;height:var(--fh,640px);padding:8px;border-radius:52px;
  background:linear-gradient(140deg,#4a505a 0%,#1a1d22 22%,#0b0d10 55%,#272b31 82%,#4a505a 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 0 0 2.5px #050607,0 50px 110px -34px rgba(0,0,0,.9),0 0 90px -24px rgba(var(--pc),.55);
  transform:perspective(1600px) rotateY(-9deg) rotateX(1.5deg);transform-origin:100% 50%}
.cd-ph::before,.cd-ph::after{content:"";position:absolute;width:3px;border-radius:2px;background:linear-gradient(180deg,#5a616b,#2a2e34)}
.cd-ph::before{left:-2px;top:130px;height:58px}
.cd-ph::after{right:-2px;top:170px;height:86px}
.cd-scr{position:relative;height:100%;border-radius:44px;overflow:hidden;isolation:isolate;background:var(--sbg,#0c1013);color:var(--sink,#f2f5f7);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:13px;line-height:1.38;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;text-align:left}
.cd-scr::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.075) 0,rgba(255,255,255,0) 34%),radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.05),transparent 60%)}
.cd-sb{position:absolute;left:0;right:0;top:0;z-index:12;height:46px;padding:16px 26px 0 32px;display:flex;justify-content:space-between;align-items:flex-start;font-size:14px;font-weight:600;letter-spacing:-.01em}
.cd-sbi{display:flex;align-items:center;gap:5px;padding-top:2px}
.cd-sbi svg{fill:currentColor}
.cd-isl{position:absolute;z-index:13;top:11px;left:50%;width:94px;height:27px;margin-left:-47px;border-radius:20px;background:#000}
.cd-pill{position:absolute;z-index:11;left:50%;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:9px 14px 9px 11px;border-radius:99px;background:rgba(10,14,18,.94);
  border:1px solid rgba(var(--pc),.65);color:#fff;font-size:13px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 26px rgba(var(--pc),.35);
  opacity:0;transform:translate(-50%,8px) scale(.94);transition:opacity .4s ease,transform .55s cubic-bezier(.2,1.4,.4,1)}
.cd-pill svg{color:rgb(var(--pc));flex:none}
@keyframes dmxFloat{0%,100%{transform:perspective(1600px) rotateY(-9deg) rotateX(1.5deg) translate3d(0,0,0)}50%{transform:perspective(1600px) rotateY(-9deg) rotateX(1.5deg) translate3d(0,-7px,0)}}
.dmx.is-live .is-on .cd-ph{animation:dmxFloat 7s ease-in-out infinite}
.cd-tap{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,255,255,.32);border:2px solid rgba(255,255,255,.85);opacity:0;transform:scale(.4);pointer-events:none}
@keyframes dmxTap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}70%{opacity:.9;transform:scale(.88)}100%{opacity:0;transform:scale(1.25)}}

/* 01 web sitesi: ilk 50 ms; göz izleme odak haritası (başlık, görsel, teklif düğmesi) */
.cd-web{--sbg:#0b0f12}
.w-url{position:relative;margin:50px 14px 0;height:34px;border-radius:12px;background:#1b2027;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12.5px;color:#c9d1d9;overflow:hidden}
.w-url svg{color:#8b949e}
.w-load{position:absolute;left:0;bottom:0;width:100%;height:2px;background:rgb(var(--pc));transform:scaleX(0);transform-origin:0 50%;opacity:0}
.is-s1 .w-load{animation:dmxLoad 1s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes dmxLoad{0%{opacity:1;transform:scaleX(0)}80%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
.w-site{padding:14px 16px 0;display:flex;flex-direction:column}
.w-site>*{opacity:0;transform:translate3d(0,10px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.is-s1 .w-site>*{opacity:1;transform:none}
.is-s1 .w-site>:nth-child(2){transition-delay:.08s}.is-s1 .w-site>:nth-child(3){transition-delay:.16s}.is-s1 .w-site>:nth-child(4){transition-delay:.22s}.is-s1 .w-site>:nth-child(5){transition-delay:.3s}
.w-nav{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.w-logo{flex:none;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:#04140f;background:linear-gradient(135deg,#7ff6dc,#22b99c)}
.w-nav b{font-size:14px;font-weight:600}
.w-nav svg{margin-left:auto;color:#9aa4ad}
.w-hero{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/11.5;background:#1b2027}
.w-hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.w-ov{position:absolute;left:0;right:0;bottom:0;padding:46px 14px 13px;background:linear-gradient(180deg,rgba(6,9,12,0),rgba(6,9,12,.78) 58%)}
.w-eb{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7ff6dc;margin-bottom:6px}
.w-h{display:block;font-size:21px;font-weight:700;line-height:1.1;letter-spacing:-.02em;color:#fff}
.w-p{margin:12px 0 0;font-size:13px;line-height:1.45;color:#a9b4bd}
.w-btns{display:flex;gap:8px;margin-top:12px}
.w-cta,.w-cta2{position:relative;padding:11px 17px;border-radius:13px;font-size:13.5px;font-weight:700}
.w-cta{color:#04140f;background:rgb(var(--pc))}
.w-cta2{font-weight:600;color:#e9eef2;border:1px solid rgba(255,255,255,.2)}
.w-feat{display:flex;gap:8px;margin-top:16px}
.w-feat span{flex:1;display:grid;justify-items:center;gap:6px;padding:11px 4px 10px;border-radius:13px;background:#141a20;font-size:11.5px;color:#c9d1d9}
.w-feat svg{color:rgb(var(--pc))}
/* göz izleme odak haritası: gözün o an baktığı öğe aydınlık kalır, diğerleri söner; odak nişangâhı başlıktan görsele, oradan teklif düğmesine kayar.
   Yalnız saydamlık ve kaydırma canlandırılır (Safari'de büyük gölge/katman yok). Nişangâh ölçüleri gerçek öğelerden: dmx.js layoutCards --x/--y/--w/--h 1-3. */
/* sönen öğeler düz kutular (görselin yuvarlatılmış kırpması içinde ayrı katman açılmaz): başlık ve görsel adımında görsel aydınlık, teklif adımında yalnız düğme */
.w-url,.w-cta,.w-cta2{transition:opacity .5s ease}
.is-s3 .w-site>:nth-child(n){transition-delay:0s}
.is-s3 .w-url,.is-s3 .w-nav,.is-s3 .w-p,.is-s3 .w-cta,.is-s3 .w-cta2,.is-s3 .w-feat{opacity:.36}
.is-s5 .w-hero{opacity:.36}.is-s5 .w-cta{opacity:1}
.is-s6 .w-url,.is-s6 .w-nav,.is-s6 .w-hero,.is-s6 .w-p,.is-s6 .w-cta,.is-s6 .w-cta2,.is-s6 .w-feat{opacity:1}
.w-aim{position:absolute;z-index:4;left:0;top:0;width:0;height:0;pointer-events:none;opacity:0;--aw:calc(var(--w1,0px) + 20px);--ah:calc(var(--h1,0px) + 20px);
  transform:translate3d(calc(var(--x1,0px) - 10px),calc(var(--y1,0px) - 10px),0);transition:opacity .35s ease,transform .75s cubic-bezier(.65,0,.35,1)}
.w-aim i{position:absolute;left:0;top:0;width:16px;height:16px;border:0 solid rgb(var(--pc));transition:transform .75s cubic-bezier(.65,0,.35,1)}
.w-aim i:nth-child(1){border-width:2px 0 0 2px;border-top-left-radius:8px}
.w-aim i:nth-child(2){border-width:2px 2px 0 0;border-top-right-radius:8px;transform:translate3d(calc(var(--aw) - 16px),0,0)}
.w-aim i:nth-child(3){border-width:0 0 2px 2px;border-bottom-left-radius:8px;transform:translate3d(0,calc(var(--ah) - 16px),0)}
.w-aim i:nth-child(4){border-width:0 2px 2px 0;border-bottom-right-radius:8px;transform:translate3d(calc(var(--aw) - 16px),calc(var(--ah) - 16px),0)}
.is-s3 .w-aim{opacity:1;--aw:var(--w1,0px);--ah:var(--h1,0px);transform:translate3d(var(--x1,0px),var(--y1,0px),0)}
.is-s4 .w-aim{--aw:var(--w2,0px);--ah:var(--h2,0px);transform:translate3d(var(--x2,0px),var(--y2,0px),0)}
.is-s5 .w-aim{--aw:var(--w3,0px);--ah:var(--h3,0px);transform:translate3d(var(--x3,0px),var(--y3,0px),0)}
.is-s6 .w-aim{opacity:0}
.w-tag{position:absolute;z-index:5;left:0;top:0;display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 2px;border-radius:8px;white-space:nowrap;
  background:rgb(var(--pc));color:#03130e;font-size:11.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;box-shadow:0 6px 18px rgba(0,0,0,.45);
  opacity:0;transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(.88);transform-origin:0 50%;transition:opacity .25s ease,transform .45s cubic-bezier(.2,1.35,.4,1)}
.w-tag b{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:6px;background:rgba(3,19,14,.16);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.is-s3 .w-t1,.is-s4 .w-t2,.is-s5 .w-t3{opacity:1;transform:translate3d(var(--tx,0px),var(--ty,0px),0);transition-delay:.42s}
.is-s4 .w-t1,.is-s5 .w-t2,.is-s6 .w-t3{opacity:0;transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(.88);transition-delay:0s}
.w-timer{position:absolute;z-index:4;top:10px;right:10px;display:flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:15px;background:rgba(8,11,14,.86);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 26px rgba(0,0,0,.45);opacity:0;transform:translate3d(0,-6px,0);transition:opacity .35s ease,transform .45s ease}
.w-timer svg{width:30px;height:30px;transform:rotate(-90deg)}
.w-timer circle{fill:none;stroke:rgba(255,255,255,.16);stroke-width:3.2}
.w-timer .w-ring{stroke:rgb(var(--pc));stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s linear}
.w-timer>span{display:grid;line-height:1.15}
.w-timer b{white-space:nowrap;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums;font-family:ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:-.02em}
.w-timer em{font-style:normal;font-size:10px;color:#aab4bd;white-space:nowrap}
.is-s2 .w-timer{opacity:1;transform:none}
.is-s2 .w-ring{stroke-dashoffset:0}
.w-ver{top:10px;left:auto;right:10px;transform:translate(0,-8px) scale(.94)}
.is-s6 .w-timer{opacity:0;transform:translate3d(0,-6px,0)}
.is-s6 .w-ver{opacity:1;transform:none}

/* 02 arama: yazılır, sonuçlar gelir, marka 1. sıraya çıkar, yapay zekâ özeti */
.cd-srch,.cd-act,.cd-prof{--sbg:#1f1f1f;--sink:#e8eaed}
.s-bar{position:relative;display:flex;align-items:center;gap:10px;margin:52px 12px 0;height:46px;padding:0 16px;border-radius:23px;background:#303134;font-size:14.5px;color:#e8eaed}
.s-bar svg{flex:none;color:#9aa0a6}
.s-q{white-space:nowrap;overflow:hidden}
.s-caret{flex:none;width:1.5px;height:19px;margin-left:-9px;background:#8ab4f8}
.is-on .s-caret{animation:dmxCaret 1s steps(1) infinite}
.is-s2 .s-caret{display:none}
.s-tabs{display:flex;gap:18px;padding:14px 18px 0;font-size:12.5px;color:#9aa0a6;border-bottom:1px solid #3c4043;white-space:nowrap;overflow:hidden}
.s-tabs span{padding-bottom:10px}
.s-tabs .on{color:#8ab4f8;border-bottom:2.5px solid #8ab4f8;padding-bottom:7.5px}
.s-aiw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.2,.8,.2,1)}
.is-s4 .s-aiw{grid-template-rows:1fr}
.s-ai{min-height:0;overflow:hidden;margin:0 12px;border-radius:18px;opacity:0;transition:opacity .5s ease .25s,margin .8s ease}
.is-s4 .s-ai{opacity:1;margin:12px 12px 2px}
.s-ai>*{padding:0 14px}
.s-ai b{display:flex;align-items:center;gap:6px;padding-top:12px;font-size:12.5px;font-weight:600;color:#c8d4ff}
.s-ai b svg{color:#a98bff}
.s-ai p{margin:0;padding-top:6px;padding-bottom:13px;font-size:13px;line-height:1.48;color:#e3e6ea}
.s-ai{background:linear-gradient(135deg,rgba(77,166,255,.15),rgba(168,120,255,.13));box-shadow:inset 0 0 0 1px rgba(140,160,255,.32)}
.s-ai mark{background:rgba(77,166,255,.28);color:#fff;font-weight:600;padding:0 2px;margin:0 -1px;border-radius:4px}
.s-res{list-style:none;margin:0;padding:4px 0 0}
.s-r{position:relative;padding:12px 18px 13px;opacity:0;transform:translate3d(0,8px,0);transition:opacity .45s ease,transform .9s cubic-bezier(.2,.85,.2,1),background .5s ease}
.is-s2 .s-r{opacity:1;transform:translate3d(0,var(--ty,0px),0)}
.is-s2 .s-r:nth-child(2){transition-delay:.06s,0s,0s}.is-s2 .s-r:nth-child(3){transition-delay:.12s,0s,0s}.is-s2 .s-r:nth-child(4){transition-delay:.18s,0s,0s}
.s-site{display:flex;align-items:center;gap:10px}
.s-fav{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;color:var(--fc);background:#fff}
.s-site span{display:grid;min-width:0;line-height:1.25}
.s-site b{font-size:13px;font-weight:400;color:#dadce0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-site em{font-style:normal;font-size:11.5px;color:#9aa0a6}
.s-t{display:block;margin:8px 0 4px;font-size:16.5px;line-height:1.28;color:#8ab4f8}
.s-sn{margin:0;font-size:12.5px;line-height:1.45;color:#bdc1c6}
.s-you{z-index:2;background:#1f1f1f}
.is-s3 .s-you{background:#232a33;box-shadow:inset 3px 0 0 #4da6ff}
.s-one{margin-left:auto;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:#041021;background:#4da6ff;opacity:0;transform:scale(.4);transition:opacity .3s ease .7s,transform .5s cubic-bezier(.2,1.6,.4,1) .7s}
.is-s3 .s-one{opacity:1;transform:none}

/* 03 reels: oynar, çift dokunuş kalbi, beğeni ve yorum, kaydedilir */
.cd-reel{--sbg:#000;--sink:#fff}
.r-bg{position:absolute;inset:0;overflow:hidden}
.r-bg img{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.03)}
.is-s1 .r-bg img{animation:dmxKen 16s cubic-bezier(.2,.4,.4,1) forwards}
@keyframes dmxKen{to{transform:scale(1.14) translate3d(-2%,1%,0)}}
.r-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 46%,rgba(0,0,0,.82) 100%)}
.r-prog{position:absolute;z-index:3;top:52px;left:12px;right:12px;display:flex;gap:4px}
.r-prog>i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.r-prog>i>i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.is-s1 .r-prog>i>i{animation:dmxProg 9s linear forwards}
@keyframes dmxProg{to{transform:scaleX(1)}}
.r-head{position:absolute;z-index:3;top:64px;left:12px;right:12px;display:flex;align-items:center;gap:9px}
.r-av{flex:none;width:32px;height:32px;border-radius:50%;padding:2px;background:conic-gradient(#ff9f38,#ff3b7a,#ffd35a,#ff9f38)}
.r-av::after{content:"";display:block;width:100%;height:100%;border-radius:50%;border:2px solid #000;background:radial-gradient(circle at 38% 32%,#7ff6dc,#1a8f7b)}
.r-head b{font-size:14px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.r-fol{padding:5px 11px;border-radius:9px;border:1px solid rgba(255,255,255,.75);font-size:12.5px;font-weight:600}
.r-side{position:absolute;z-index:3;right:10px;bottom:118px;display:grid;gap:17px;justify-items:center}
.r-side>span{display:grid;justify-items:center;gap:3px;color:#fff;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.r-side svg{width:28px;height:28px}
.r-side b{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.r-like svg{transition:color .3s ease,transform .5s cubic-bezier(.2,1.8,.4,1)}
.is-s2 .r-like svg{color:#ff3b5c;transform:scale(1.15)}
.r-save svg{transition:color .3s ease,transform .5s cubic-bezier(.2,1.8,.4,1)}
.is-s4 .r-save svg{color:#ffd35a;transform:scale(1.12);fill:#ffd35a}
.r-cap{position:absolute;z-index:3;left:14px;right:62px;bottom:46px}
.r-cap b{display:block;font-size:22px;font-weight:800;line-height:1.14;letter-spacing:-.015em;text-shadow:0 2px 16px rgba(0,0,0,.55)}
.r-cap p{margin:7px 0 0;font-size:13px;line-height:1.4;color:rgba(255,255,255,.9)}
.r-aud{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;color:rgba(255,255,255,.82)}
.r-com{position:absolute;z-index:4;left:12px;right:62px;bottom:156px;list-style:none;margin:0;padding:0;display:grid;gap:7px}
.r-com li{display:flex;align-items:center;gap:8px;padding:7px 11px 7px 7px;border-radius:16px;background:rgba(0,0,0,.5);font-size:12.5px;line-height:1.3;opacity:0;transform:translate3d(0,12px,0);transition:opacity .45s ease,transform .5s cubic-bezier(.2,1.2,.3,1)}
.r-com b{font-weight:700;margin-right:2px}
.r-av2{flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#ffb36b,#ff5f8f)}
.r-av3{background:linear-gradient(135deg,#7fb7ff,#7a5cff)}
.is-s3 .r-com li:nth-child(1),.is-s4 .r-com li:nth-child(2){opacity:1;transform:none}
.r-burst{position:absolute;z-index:6;left:50%;top:40%;width:104px;height:104px;margin:-52px 0 0 -52px;color:#fff;opacity:0;transform:scale(.2);filter:drop-shadow(0 8px 18px rgba(0,0,0,.3))}
.r-burst svg{width:100%;height:100%}
.is-s2 .r-burst{animation:dmxBurst 1.1s cubic-bezier(.2,1.5,.4,1) forwards}
@keyframes dmxBurst{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(1.12)}32%{transform:scale(.94)}46%{transform:scale(1)}74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.55)}}   /* yerinde küçülerek söner: kayarken gölgesi iz bırakmaz */
.r-hearts{position:absolute;z-index:5;right:16px;bottom:300px;width:30px;height:170px;pointer-events:none}
.r-hearts i{position:absolute;left:4px;bottom:0;color:#ff3b5c;opacity:0}
.r-hearts i:nth-child(2n){color:#ff9f38}.r-hearts i:nth-child(3n){color:#fff}
.is-on.is-s2 .r-hearts i{animation:dmxHeart 2.4s cubic-bezier(.3,.6,.4,1) infinite}
.is-s2 .r-hearts i:nth-child(2){animation-delay:.4s;left:0}.is-s2 .r-hearts i:nth-child(3){animation-delay:.8s;left:10px}
.is-s2 .r-hearts i:nth-child(4){animation-delay:1.2s;left:2px}.is-s2 .r-hearts i:nth-child(5){animation-delay:1.6s;left:8px}.is-s2 .r-hearts i:nth-child(6){animation-delay:2s}
@keyframes dmxHeart{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}15%{opacity:1;transform:translate3d(-4px,-18px,0) scale(1)}50%{transform:translate3d(6px,-80px,0) scale(.95)}100%{opacity:0;transform:translate3d(-5px,-160px,0) scale(.8)}}
.r-saved{top:104px}
.is-s4 .r-saved{opacity:1;transform:translate(-50%,0) scale(1)}

/* 04 işletme profili: olumsuz yorum, işletmenin yanıtı, olumlu yorumlar, basın, yıldızlar dolar */
.p-cover{position:relative;height:118px;overflow:hidden}
.p-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.p-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 46%)}
.cd-prof .cd-sb{color:#fff}
.p-body{padding:13px 16px 0}
.p-name{display:block;font-size:21px;font-weight:600;line-height:1.2;color:#e8eaed}
.p-rate{display:flex;align-items:center;gap:7px;margin-top:5px;font-size:12px;color:#9aa0a6}
.p-rate em{font-style:normal}
/* puan: her yıldız kendi kutusunda, sırayla dolar (açılışta 3, olumlu yorumlarla 4, basınla 5); ses dmx.js'te aynı anlara bağlı */
.p-stars{display:inline-flex;gap:1px}
.p-s{position:relative;flex:none;width:15px;height:15px}
.p-s svg{position:absolute;left:0;top:0;width:100%;height:100%;color:#5f6368}
.p-s svg+svg{color:#fbbc04;opacity:0;transform:scale(.3);transition:opacity .2s ease,transform .5s cubic-bezier(.3,1.7,.5,1)}
.is-s1 .p-s:nth-child(-n+3) svg+svg,.is-s3 .p-s:nth-child(4) svg+svg,.is-s5 .p-s:nth-child(5) svg+svg{opacity:1;transform:none}
.is-s1 .p-s:nth-child(1) svg+svg{transition-delay:.35s}.is-s1 .p-s:nth-child(2) svg+svg{transition-delay:.5s}.is-s1 .p-s:nth-child(3) svg+svg{transition-delay:.65s}
.is-s3 .p-s:nth-child(4) svg+svg{transition-delay:.3s}.is-s5 .p-s:nth-child(5) svg+svg{transition-delay:.1s}
.p-cat{display:block;margin-top:3px;font-size:12.5px;color:#9aa0a6}
.p-gw,.p-rw,.p-pw{display:grid;grid-template-rows:0fr;transition:grid-template-rows .75s cubic-bezier(.2,.8,.2,1)}
.p-gw>*,.p-rw>*,.p-pw>*{min-height:0;overflow:hidden}
.is-s3 .p-gw,.is-s2 .p-rw,.is-s4 .p-pw{grid-template-rows:1fr}
.p-press{opacity:0;transition:opacity .5s ease .2s}
.is-s4 .p-press{opacity:1}
.p-press b{display:block;padding-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9aa0a6}
.p-prs{display:flex;flex-wrap:wrap;gap:6px;padding-top:7px}
.p-prs span{padding:5px 10px;border-radius:9px;background:#303134;font-size:11.5px;color:#e8eaed}
.p-revh{display:block;margin-top:14px;font-size:15px;font-weight:600}
.p-revs{display:flex;flex-direction:column;margin-top:8px}
.p-good{opacity:0;transition:opacity .45s ease .25s}
.is-s3 .p-good{opacity:1}
.is-s3 .p-gw>.p-rev{margin-bottom:9px}
.p-rev{border-radius:15px;background:#2a2b2e}
.p-rev>*{padding:0 12px}
.p-rev .p-rh{padding-top:11px}
.p-rev>p{margin:0;padding-top:6px;padding-bottom:12px;font-size:12.5px;line-height:1.42;color:#e8eaed}
.p-rh{display:flex;align-items:center;gap:8px}
.p-rh i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#7e57c2}
.p-g1 .p-rh i{background:#00897b}.p-bad .p-rh i{background:#c2185b}
.p-rh b{font-size:12.5px;font-weight:600}
.p-st{margin-left:auto;display:inline-flex;color:#fbbc04}
.p-st svg{flex:none;width:11px;height:11px}
.p-st2 svg:nth-child(n+3){color:#5f6368}
.p-bad{box-shadow:inset 0 0 0 1px rgba(255,90,79,.32)}
.p-reply{padding:0 12px;opacity:0;transition:opacity .4s ease .2s}
.is-s2 .p-reply{opacity:1}
.p-rw>.p-reply>*:last-child{margin-bottom:12px}
.p-reply b{display:block;padding:9px 10px 0;border-left:3px solid rgb(var(--pc));font-size:11.5px;font-weight:600;color:rgb(var(--pc));background:#202124;border-radius:10px 10px 0 0}
.p-reply p{margin:0;padding:3px 10px 9px;border-left:3px solid rgb(var(--pc));font-size:12px;line-height:1.4;color:#d7dadf;background:#202124;border-radius:0 0 10px 10px}
.p-ver{top:100px;left:auto;right:12px;transform:translate(0,-8px) scale(.94)}   /* kapak görselinin alt kenarına oturur: ad ve puan satırını örtmez */
.is-s5 .p-ver{opacity:1;transform:none}

/* 05 reklam → dokunuş → form → onay → bildirim */
.s-bar2{height:42px;font-size:13.5px}
.a-ad{position:relative;margin:12px 12px 0;padding:13px 14px 15px;border-radius:18px;background:#2a2b2e;box-shadow:inset 0 0 0 1px rgba(92,255,143,.24)}
.a-tag{display:block;font-size:11.5px;font-weight:700;color:#e8eaed;margin-bottom:7px}
.a-t{display:block;margin-top:9px;font-size:17px;line-height:1.28;color:#8ab4f8}
.a-d{margin:5px 0 0;font-size:12.5px;line-height:1.42;color:#bdc1c6}
.a-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.a-links span{padding:6px 11px;border-radius:99px;border:1px solid #5f6368;font-size:12px;color:#8ab4f8}
.a-cta{position:relative;display:inline-block;margin-top:13px;padding:11px 20px;border-radius:99px;background:#5cff8f;color:#03140a;font-size:13.5px;font-weight:700}
.is-s2 .a-cta .cd-tap{animation:dmxTap .75s ease-out forwards}
.a-res{margin-top:6px;opacity:.85}
.a-res .s-r{opacity:1;transform:none}
.a-sheet{position:absolute;z-index:8;left:0;right:0;bottom:0;display:grid;gap:11px;padding:10px 16px 26px;border-radius:24px 24px 0 0;background:#2a2b2e;box-shadow:0 -24px 50px rgba(0,0,0,.55);
  transform:translate3d(0,105%,0);transition:transform .6s cubic-bezier(.2,.9,.25,1)}
.is-s3 .a-sheet{transform:none}
.a-grab{justify-self:center;width:38px;height:4.5px;border-radius:3px;background:#5f6368}
.a-sheet>b{font-size:17px;font-weight:600}
.a-f{display:grid;gap:5px}
.a-f i{font-style:normal;font-size:11.5px;color:#9aa0a6}
.a-f u{display:block;min-height:42px;padding:11px 13px;border-radius:12px;background:#1f1f1f;border:1px solid #3c4043;text-decoration:none;font-size:14.5px;color:#fff;transition:border-color .3s ease}
.is-s3 .a-f u{border-color:#5f6368}
.a-send{position:relative;padding:13px;border-radius:13px;background:#5cff8f;color:#03140a;font-size:14.5px;font-weight:700;text-align:center}
.is-s4 .a-send .cd-tap{animation:dmxTap .75s ease-out forwards}
.a-ok{position:absolute;z-index:9;inset:46px 0 0;display:grid;place-content:center;justify-items:center;gap:10px;padding:0 28px 40px;text-align:center;background:#1f1f1f;opacity:0;transition:opacity .45s ease}
.a-ok svg{width:84px;height:84px}
.a-ok circle,.a-ok path{fill:none;stroke:#5cff8f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.a-ok circle{transition:stroke-dashoffset .7s ease .1s}.a-ok path{transition:stroke-dashoffset .45s ease .65s}
.a-ok b{font-size:20px;font-weight:700}
.a-ok p{margin:0;font-size:13.5px;line-height:1.45;color:#bdc1c6}
.is-s5 .a-ok{opacity:1}
.is-s5 .a-ok circle,.is-s5 .a-ok path{stroke-dashoffset:0}
.a-note{position:absolute;z-index:14;top:52px;left:9px;right:9px;display:flex;gap:10px;padding:11px 12px;border-radius:20px;background:rgba(56,56,60,.94);box-shadow:0 16px 36px rgba(0,0,0,.55);
  transform:translate3d(0,-150%,0);transition:transform .6s cubic-bezier(.2,1.25,.3,1)}
.is-s6 .a-note{transform:none}
.a-ico{flex:none;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:#34c759;color:#fff}
.a-note>span{display:grid;grid-template-columns:1fr auto;column-gap:8px;min-width:0}
.a-note b{font-size:13.5px;font-weight:600;color:#fff}
.a-note em{font-style:normal;font-size:11.5px;color:#b0b0b5}
.a-note p{grid-column:1 / -1;margin:2px 0 0;font-size:13px;line-height:1.35;color:#e5e5ea}

.dmx-snd{display:none}
.dmx.is-live .dmx-snd{display:inline-flex;position:absolute;z-index:5;top:18px;right:18px;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);background:rgba(8,12,16,.72);color:#e9eef3;cursor:pointer}
.dmx-snd:hover{background:rgba(20,28,36,.78)}.dmx-snd:focus-visible{outline:2px solid var(--c-see);outline-offset:2px}
.dmx-snd .snd-on{display:none}.dmx-snd[aria-pressed="true"] .snd-on{display:block}.dmx-snd[aria-pressed="true"] .snd-off{display:none}
.dmx-snd-hint{font-style:normal;font-size:11.5px;letter-spacing:.06em}.dmx-snd.used .dmx-snd-hint{display:none}
.dmx.is-live .dmx-bar{display:block;position:absolute;z-index:4;left:clamp(20px,5.5vw,96px);right:clamp(20px,5.5vw,96px);bottom:calc(14px + env(safe-area-inset-bottom,0px));height:1.5px;border-radius:2px;background:rgba(255,255,255,.12)}
.dmx.is-live .dmx-bar i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg,var(--c-see),var(--c-und),var(--c-feel),var(--c-trust),var(--c-act));transform-origin:0 50%;transform:scaleX(0)}
.dmx-tick{position:absolute;top:-3.5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#0b1117;border:1.5px solid var(--tc);transition:background .3s,box-shadow .3s,transform .3s}
.dmx-tick.is-past{background:var(--tc)}
.dmx-tick.is-now{background:var(--tc);transform:scale(1.35);box-shadow:0 0 12px var(--tc)}
.tk-see{--tc:var(--c-see)}.tk-understand{--tc:var(--c-und)}.tk-feel{--tc:var(--c-feel)}.tk-trust{--tc:var(--c-trust)}.tk-act{--tc:var(--c-act)}
.dmx.is-live .dmx-load{display:flex;position:absolute;z-index:4;left:50%;bottom:26px;transform:translateX(-50%);align-items:center;gap:10px;padding:8px 14px;border-radius:99px;
  background:rgba(8,12,16,.75);border:1px solid var(--d-line);font-size:12px;color:var(--d-mut);opacity:0;transition:opacity .3s;pointer-events:none}
.dmx.is-live .dmx-load.on{opacity:1}
.dmx-load i{width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--c-see);animation:dmxSpin .8s linear infinite}
@keyframes dmxSpin{to{transform:rotate(360deg)}}

/* çok küçük ekran (kart hikâyesi okunur ölçekte sığmıyorsa): ikincil öğeler kısalır */
.is-short .s-tabs,.is-short .p-cat,.is-short .w-feat,.is-short .a-links{display:none}
.is-short .s-bar{margin-top:48px}.is-short .s-aiw{font-size:12px}
.is-short .p-cover{height:66px}.is-short .p-ver{top:48px}.is-short .p-revh{margin-top:9px}
.is-short .w-hero{aspect-ratio:16/9.6}.is-short .w-p{display:none}

/* ---------- film: mobil / dikey ----------
   Sıralı düzen: istasyona gelince önce yazı (okunur), sonra yazı başlığa küçülür ve kart başlığın üstündeki boş alana tam ölçüyle
   yerleşir (--zt/--zh/--cs/--fh dmx.js'ten). Kart ile yazı hiçbir ekran boyunda aynı alanı paylaşmaz. */
@media (max-width:760px),(orientation:portrait) and (max-width:1024px){
  .dmx.is-live .dmx-fx{background:linear-gradient(0deg,rgba(0,0,0,.86) 0,rgba(0,0,0,.45) 32%,transparent 54%),linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 22%)}
  .dmx.is-live .dmx-intro{left:18px;right:18px;bottom:calc(44px + env(safe-area-inset-bottom,0px))}
  .dmx.is-live .dmx-intro h1{font-size:clamp(2.5rem,11vw,3.4rem)}
  .dmx.is-live .dmx-c-done,.dmx.is-live .dmx-intro{max-width:none}
  .dmx.is-live .dmx-caps{left:18px;right:18px;width:auto;bottom:calc(30px + env(safe-area-inset-bottom,0px))}
  .dmx.is-live .dmx-cap h2{margin-top:12px}
  .dmx.is-live .ln-a{font-size:clamp(2.15rem,10vw,2.9rem)}
  .dmx.is-live .dmx-c-eye .ln-a,.dmx.is-live .dmx-c-path .ln-a{font-size:clamp(1.9rem,8.4vw,2.5rem)}
  .dmx.is-live .dmx-c-done .ln-a{font-size:clamp(2rem,9.4vw,2.6rem)}
  .dmx.is-live .ln-b{font-size:clamp(1.02rem,4.6vw,1.2rem);margin-top:.32em}
  .dmx.is-live .cap-p{font-size:14px;line-height:1.58;margin-top:12px}
  .dmx.is-live .cap-w{margin-top:12px}.dmx.is-live .cap-wi{font-size:12.5px;row-gap:6px}.dmx.is-live .cap-wi span{padding:0 9px}
  .dmx.is-live .dmx-moves{gap:8px 16px;grid-template-columns:repeat(2,auto)}.dmx.is-live .dmv{font-size:13px}
  .dmx.is-live .dmx-five{gap:9px 14px}.dmx.is-live .dmx-five li{font-size:13.5px;padding-bottom:5px}
  .dmx.is-live .dmx-map{left:18px;top:calc(16px + env(safe-area-inset-top,0px));gap:10px}
  .dmx.is-live .map-svg{width:62px}
  .dmx.is-live .map-l{max-width:calc(100vw - 252px)}
  .dmx.is-live .ml b{font-size:12px;white-space:normal;line-height:1.2}.dmx.is-live .ml em{font-size:8.5px;letter-spacing:.16em;line-height:1.35}
  .dmx.is-live .dmx-c-done .cap-p{display:none}   /* yüz açık kalsın; imza satırı aynı mesajı verir */
  .dmx.is-live .dmx-snd{top:calc(16px + env(safe-area-inset-top,0px));right:16px}
  .dmx.is-live .dmx-panels{inset:0;width:auto}
  .dmx.is-live .dmx-panel{inset:auto 18px auto 18px;top:var(--zt,90px);height:var(--zh,300px)}
  .dmx.is-live .cd-wrap{top:0;transform:translate(-50%,0) scale(var(--cs,1));transform-origin:50% 0;gap:12px}
  .dmx.is-live .cd-lab{font-size:11px}
  .dmx.is-live .cd-ph,.dmx.is-live .is-on .cd-ph{transform:none;animation:none;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 34px),transparent)}
  .dmx.is-live .a-sheet{padding-bottom:46px}

  .dmx.is-live .cd-ph::after{display:none}
}
@media (orientation:portrait) and (max-height:560px){
  .dmx.is-live .cap-w{display:none}
}
@media (max-height:700px) and (orientation:landscape){
  .dmx.is-live .cap-p{font-size:14px}
}

/* ---------- film sürerken site öğeleri gizli ---------- */
#nav,#dock,.tb{transition:opacity .5s ease,transform .5s ease,visibility .5s}
html.dmx-film,html.dmx-film body{background:#000}   /* hızlı kaydırmada ya da iOS esnemesinde sahnenin ardında açık zemin görünmesin */
html.dmx-film #nav,html.dmx-film .tb{opacity:0;visibility:hidden;transform:translateY(-110%);pointer-events:none}
html.dmx-film #dock{opacity:0;visibility:hidden;transform:translateY(120%);pointer-events:none}
html.dmx-film .glow,html.dmx-film .grain{display:none}   /* tam ekran karışım katmanları (overlay/screen) film boyunca hiç birleştirilmesin */
html.dmx-film .sprog{opacity:0}
.sprog{transition:opacity .5s ease}

/* ---------- alt anlatım (site teması) ---------- */
.dmx-art{background:var(--bg);color:var(--ink);padding-block:clamp(56px,8vw,112px)}
.dmx-art-grid{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.dmx-toc{position:sticky;top:calc(var(--nav-h,88px) + 34px);align-self:start;background:var(--bg2);border:1.5px solid var(--line2);border-radius:20px;padding:20px;
  max-height:calc(100vh - var(--nav-h,88px) - 58px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}   /* 15 başlık: ekrana sığmazsa liste kendi içinde kayar */
.dmx-toc b{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.dmx-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:t}
.dmx-toc li{counter-increment:t}
.dmx-toc a{display:flex;gap:10px;padding:7px 8px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
.dmx-toc a::before{content:counter(t,decimal-leading-zero);font-size:11px;color:var(--grn);padding-top:2px}
.dmx-toc a:hover{background:var(--panel)}
.dmx-art-body>h2:first-child{margin-top:0}
.dmx-def{font-size:1.14rem;line-height:1.65;padding:18px 20px;border-left:3px solid var(--grn);background:var(--bg2);border-radius:0 14px 14px 0}
.dmx-faq{display:grid;gap:10px;margin-top:8px}
.dmx-faq details{background:var(--bg2);border:1.5px solid var(--line2);border-radius:16px;padding:0 18px}
.dmx-faq summary{cursor:pointer;padding:16px 0;font-weight:600;list-style-position:outside}
.dmx-faq details p{margin:0 0 16px;color:var(--mut)}
.dmx-art-cta{margin-top:36px;padding:26px;border-radius:20px;background:var(--bg2);border:1.5px solid var(--line2);position:relative;overflow:hidden}
.dmx-art-cta::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--sig)}
.dmx-art-cta b{display:block;font-size:1.3rem;margin-bottom:6px}
.dmx-art-cta p{margin:0 0 16px;color:var(--mut)}
.dmx-credit{margin-top:28px;font-size:12px;line-height:1.5;color:var(--mut)}
.dmx-art-body{min-width:0}
@media (max-width:999px){
  .dmx-art-grid{grid-template-columns:minmax(0,1fr)}
  .dmx-toc{position:static;max-height:none;overflow:visible}
  .dmx-art .bp-tbl table{min-width:560px}
  .dmx-def{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){
  .dmx.is-live .dmx-cap *{transition:none !important}
  .hint-m::after,.dmx.is-live .m-halo,.pn-live::after,.ps-caret,.is-play .ekg-s,.is-hearts .pf-hearts i{animation:none}
  .dmx.is-live .ln>span{transform:none}
  .w-aim,.w-aim i{transition:opacity .3s ease !important}.w-tag{transition:opacity .25s ease !important}   /* odak nişangâhı kaymaz, yerinde belirir */
  .p-s svg+svg{transform:none !important;transition:opacity .25s ease !important}
}
html[data-motion="reduce"] .hint-m::after,html[data-motion="reduce"] .dmx.is-live .m-halo,html[data-motion="reduce"] .pn-live::after,
html[data-motion="reduce"] .ps-caret,html[data-motion="reduce"] .is-play .ekg-s,html[data-motion="reduce"] .is-hearts .pf-hearts i{animation:none}
