/* Layout: bir film. Açılışta kamera gece Bursa'sının üstünden alçalıp "plaza"ya iner (kaydırmayla oynar),
   sonra sahneler: yatay film şeridi, ışık yakma anı, storyboard, oyuncu listesi, jenerik. Tek tema: gece. */
:root{
  --canvas:#060A17;       /* gece göğü, maviye çalan */
  --panel:#0C1328;
  --line:#1D2847;
  --line-strong:#33426E;
  --text:#E7ECFF;
  --text-2:#98A4C8;
  --brand:#2F6BFF;        /* Dijital Plaza mavisi */
  --brand-hover:#4F83FF;
  --ice:#A9DBFF;          /* pencere ışığı */
  --f-display:"Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-body:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"DM Mono", ui-monospace, Menlo, monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --tshadow:0 1px 2px rgba(3,5,12,.95),0 3px 12px rgba(3,5,12,.78),0 10px 44px rgba(3,5,12,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{overflow-x:hidden; overflow-x:clip}
body{overflow-x:hidden; overflow-x:clip; background:var(--canvas); color:var(--text); font-family:var(--f-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-hover); outline-offset:3px; border-radius:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{max-width:1280px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:760px){ .wrap{padding-left:max(40px, env(safe-area-inset-left, 0px)); padding-right:max(40px, env(safe-area-inset-right, 0px))} }
.mono{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase}
h1,h2,h3{font-family:var(--f-display); font-weight:900; text-transform:uppercase; line-height:.9; letter-spacing:.005em; margin:0; text-wrap:balance}

/* Ortam katmanı: sabit, yavaş kayan ışık + gren */
.env{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.env::before{content:""; position:absolute; width:90vmax; height:90vmax; left:-20vmax; top:30vh; border-radius:50%;
  background:radial-gradient(circle, rgba(47,107,255,.14), transparent 62%); animation:drift 70s linear infinite; animation-delay:-20s}
.env::after{content:""; position:absolute; inset:0; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{0%{transform:translate(0,0)}50%{transform:translate(60vw,-30vh)}100%{transform:translate(0,0)}}
body.paused *, body.paused *::before, body.paused *::after{animation-play-state:paused !important}

/* Nav */
.skip{position:absolute; left:-999px; top:8px; background:var(--brand); color:#fff; padding:8px 14px; z-index:100}
.skip:focus{left:16px}
nav.top{position:fixed; top:0; left:0; right:0; z-index:60; padding-top:env(safe-area-inset-top, 0px);
  background:linear-gradient(rgba(6,10,23,.85), rgba(6,10,23,0)); }
.nav-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:18px}
.wordmark{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:800; font-size:22px; letter-spacing:.06em; text-transform:uppercase; line-height:1}
.wordmark img{display:block; height:44px; width:auto}
.wordmark span b{color:var(--brand-hover); font-weight:800}
.nav-links{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-links a{text-decoration:none; font-size:15px; color:var(--text-2); transition:color .3s var(--ease-out)}
.nav-links a:hover{color:var(--text)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font:600 15px var(--f-body); text-decoration:none; cursor:pointer; border:0; border-radius:999px; padding:13px 22px; transition:background .3s var(--ease-out), transform .3s var(--ease-out), border-color .3s var(--ease-out); text-shadow:none}
.btn-brand{background:var(--brand); color:#fff}
.btn-brand:hover{background:var(--brand-hover); transform:translateY(-2px)}
.btn-line{background:rgba(12,19,40,.5); color:var(--text); border:1px solid var(--line-strong); backdrop-filter:blur(8px)}
.btn-line:hover{border-color:var(--ice)}
@media (pointer:coarse){ .btn{min-height:44px} }
@media (max-width:860px){ .nav-links{display:none} }

/* ---------- HERO: kaydırmayla oynayan sahne ---------- */
.hero{position:relative; height:1000vh}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--canvas)}
.poster{position:absolute; inset:0; background:var(--canvas) center/cover no-repeat}
.stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .9s var(--ease-out); transform:translateZ(0); will-change:transform}
.stage.video-ready video{opacity:1}
.stage.video-failed video{display:none}
.ring{position:absolute; left:50%; bottom:70px; width:40px; height:40px; margin-left:-20px; color:var(--brand-hover); transform:rotate(-90deg); transition:opacity .6s var(--ease-out)}
.ring circle.bg{stroke:var(--line-strong)}
.stage.video-ready .ring, .stage.video-failed .ring{opacity:0}
.scrim{position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 120% 90% at 50% 45%, rgba(6,10,23,0) 38%, rgba(6,10,23,.62) 100%)}
.band{position:absolute; opacity:0; visibility:hidden; text-shadow:var(--tshadow); will-change:opacity; --k:0}
.band::before{content:""; position:absolute; inset:-30% -20%; z-index:-1; pointer-events:none; opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 60% 56% at 50% 50%, rgba(4,6,14,.7) 0%, rgba(4,6,14,.46) 46%, rgba(4,6,14,0) 76%)}
.band .mono{color:var(--ice); display:block; margin-bottom:16px}
.band h1,.band h2{font-size:clamp(52px, 8vw, 128px)}
.band p{font-size:clamp(17px,1.4vw,21px); color:var(--text); margin:18px 0 0; max-width:34ch}
.b1{left:max(24px, 5vw); bottom:13vh}
.b2{right:max(24px, 5vw); top:20vh; text-align:right}
.b2 p{margin-left:auto}
.b3{left:max(24px, 5vw); top:20vh}
.b3::before,.b2::before{background:radial-gradient(ellipse 62% 60% at 50% 50%, rgba(4,6,14,.82) 0%, rgba(4,6,14,.58) 48%, rgba(4,6,14,0) 78%)}
/* b4: meydan ortada parlak kalır, yazı iki yanda koyu bloklar üstünde */
.b4{inset:0; display:grid; grid-template-columns:minmax(0,31%) 1fr minmax(0,31%); align-items:center; padding-left:max(24px, 3.5vw); padding-right:max(24px, 3.5vw)}
.b4::before{inset:0; background:
  radial-gradient(ellipse 30% 62% at 15% 52%, rgba(4,6,14,.74) 0%, rgba(4,6,14,.5) 46%, rgba(4,6,14,0) 76%),
  radial-gradient(ellipse 30% 62% at 85% 52%, rgba(4,6,14,.74) 0%, rgba(4,6,14,.5) 46%, rgba(4,6,14,0) 76%)}
.b4 .l{grid-column:1}
.b4 .r{grid-column:3}
.b4 h2{font-size:clamp(46px, 5.4vw, 96px)}
.b4 .r p{margin-top:0}
.b4 .cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; opacity:clamp(0, (var(--k) - .55) * 3, 1); transform:translateY(calc((1 - clamp(0, (var(--k) - .55) * 3, 1)) * 16px))}
.b4 .r p{opacity:clamp(0, (var(--k) - .35) * 3, 1)}
.w{display:inline-block; --kc:clamp(0, var(--k) * 2.2 - var(--d,0), 1); opacity:var(--kc); transform:translateY(calc((1 - var(--kc)) * .45em))}
.b2 .w{transform:translateY(calc((1 - var(--kc)) * .2em)) scale(calc(.82 + .18 * var(--kc)))}
.b3 .w{transform:translateX(calc((1 - var(--kc)) * -1.2em))}
.hud{position:absolute; right:max(16px, env(safe-area-inset-right, 0px)); bottom:max(18px, env(safe-area-inset-bottom, 0px)); display:flex; gap:14px; align-items:center;
  background:rgba(8,12,26,.55); border:1px solid var(--line-strong); border-radius:10px; padding:9px 14px; backdrop-filter:blur(10px); color:var(--ice)}
.hud .bar{width:90px; height:3px; background:var(--line-strong); border-radius:3px; overflow:hidden}
.hud .bar i{display:block; height:100%; width:100%; background:var(--brand-hover); transform-origin:left; transform:scaleX(var(--p,0))}
.cue{position:absolute; left:50%; bottom:22px; transform:translateX(-50%); color:var(--text-2); display:grid; justify-items:center; gap:6px; transition:opacity .5s var(--ease-out); text-shadow:var(--tshadow)}
.cue svg{animation:bob 2.4s var(--ease-io) infinite; animation-delay:-.6s}
@keyframes bob{50%{transform:translateY(6px)}}
@media (max-height:560px){ .hud,.cue{display:none} }
/* Sabit açılış: telefon, dikey tablet, dokunmatik dikey, yatay telefon, azaltılmış hareket (JS ile birebir aynı beş koşul) */
@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce){
  .hero{height:100vh; height:100svh}
  .b1,.b2,.b3,.ring,.cue,.hud,.stage video{display:none}
  .b4{opacity:1 !important; visibility:visible !important; --k:1 !important; grid-template-columns:1fr; align-content:end; gap:16px; padding-bottom:max(9vh, 40px)}
  .b4 .l,.b4 .r{grid-column:1}
  .b4 h2{font-size:clamp(46px, 13vw, 88px)}
  .b4::before{background:linear-gradient(to top, rgba(4,6,14,.9) 0%, rgba(4,6,14,.6) 45%, rgba(4,6,14,0) 78%); opacity:1}
  .b4 .cta{margin-top:18px}
}

/* ---------- Bölüm başlığı ---------- */
.scene-tag{display:flex; align-items:center; gap:12px; color:var(--text-2)}
.scene-tag::before{content:""; width:28px; height:1px; background:var(--brand-hover)}

/* ---------- Film şeridi (hizmetler) ---------- */
.reel{position:relative}
.reel-sticky{padding-block:110px 60px}
.reel-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:44px}
.reel-head h2{font-size:clamp(46px,6.4vw,96px)}
.reel-head p{max-width:40ch; color:var(--text-2); margin:0}
.track-wrap{overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent}
.track{display:flex; gap:0; width:max-content; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); will-change:transform}
.frame{scroll-snap-align:start; width:min(84vw, 400px); flex-shrink:0; background:#03050C; padding:30px 14px; position:relative}
.frame::before,.frame::after{content:""; position:absolute; left:0; right:0; height:14px;
  background:repeating-linear-gradient(90deg, transparent 0 10px, var(--line-strong) 10px 24px, transparent 24px 34px)}
.frame::before{top:8px} .frame::after{bottom:8px}
.frame-in{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 14px 24px; display:grid; gap:18px; height:100%; align-content:start; transition:border-color .4s var(--ease-out)}
.frame:hover .frame-in{border-color:var(--brand)}
.shot{aspect-ratio:4/3; max-width:100%; overflow:hidden; border-radius:4px; background:var(--canvas)}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); transition:transform 1.2s var(--ease-out)}
.frame:hover .shot img{transform:scale(1.1)}
.frame-in svg .draw{stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset 1.6s var(--ease-out)}
.reel.in .frame-in svg .draw{stroke-dashoffset:0}
.frame h3{font-size:36px; font-weight:800; padding-inline:10px}
.frame p,.frame ul{padding-inline:10px}
.frame p{margin:0; color:var(--text-2); font-size:16px; max-width:40ch}
.frame ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.frame li{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line-strong); border-radius:4px; padding:4px 8px; color:var(--ice)}
/* Şerit sabitlenmediğinde (dar pencere, dokunmatik, azaltılmış hareket) kareler ızgara olur; yana kaydırma gerekmez */
.reel:not(.pin) .track-wrap{overflow:visible}
.reel:not(.pin) .track{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:18px; width:auto; max-width:1280px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
@media (min-width:760px){ .reel:not(.pin) .track{padding-left:max(40px, env(safe-area-inset-left, 0px)); padding-right:max(40px, env(safe-area-inset-right, 0px))} }
.reel:not(.pin) .frame{width:auto}
.reel.pin{height:var(--reel-h, 300vh)}
.reel.pin .reel-sticky{position:sticky; top:0; height:100vh; height:100svh; display:flex; flex-direction:column; justify-content:center; padding-block:80px 40px; overflow:hidden}
.reel.pin .track-wrap{overflow:visible}

/* ---------- Işık yakma anı ---------- */
.lights{padding-block:120px}
.lights-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:56px; align-items:center}
.skyline{width:100%; height:auto; max-width:100%; display:block}
.skyline .win{fill:var(--line); transition:fill .5s var(--ease-out)}
.skyline .win.on{fill:var(--ice)}
.skyline .win.on.b{fill:var(--brand-hover)}
.lights h2{font-size:clamp(44px,5.6vw,84px)}
.lights p.lead{color:var(--text-2); max-width:44ch}
.hold{position:relative; margin-top:26px; user-select:none; -webkit-user-select:none; touch-action:none; overflow:hidden; background:var(--panel); color:var(--text); border:1px solid var(--line-strong); padding:16px 26px; font-size:16px}
.hold i{position:absolute; inset:0; background:var(--brand); transform-origin:left; transform:scaleX(var(--h,0)); z-index:0}
.hold span{position:relative; z-index:1}
.promises{display:grid; gap:12px; margin-top:30px}
.promise{display:grid; grid-template-columns:24px minmax(0,1fr); gap:14px; align-items:baseline; padding:16px 0; border-top:1px solid var(--line); opacity:.32; transition:opacity .6s var(--ease-out)}
.promise b{font-weight:600; display:block}
.promise span.t{color:var(--text-2); font-size:15px}
.promise .dot{width:10px; height:10px; border-radius:50%; background:var(--line-strong); transition:background .6s var(--ease-out), box-shadow .6s var(--ease-out)}
.lights.done .promise{opacity:1}
.lights.done .promise .dot{background:var(--brand-hover); box-shadow:0 0 14px var(--brand)}
.lights.done .promise:nth-child(2){transition-delay:.15s}
.lights.done .promise:nth-child(3){transition-delay:.3s}
@media (max-width:860px){ .lights-grid{grid-template-columns:1fr; gap:32px} .lights{padding-block:80px} }

/* ---------- Storyboard (süreç) ---------- */
.board{padding-block:40px 120px}
.board h2{font-size:clamp(44px,5.6vw,84px); margin:16px 0 40px}
.panels{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px}
.panel{display:grid; gap:12px; align-content:start}
.panel .sketch{aspect-ratio:4/3; max-width:100%; border:1px solid var(--line-strong); border-radius:4px; background:var(--panel); display:grid; place-items:center; position:relative}
.panel .sketch svg{width:70%; height:70%}
.panel .sketch .mono{position:absolute; top:10px; left:12px; color:var(--text-2); font-size:10px}
.panel h3{font-size:30px; font-weight:800}
.panel p{margin:0; color:var(--text-2); font-size:15px}
@media (max-width:900px){ .panels{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .panels{grid-template-columns:1fr} }

/* ---------- Oyuncular (müşteriler) ---------- */
.cast{padding-block:40px 120px}
.cast h2{font-size:clamp(44px,5.6vw,84px); margin:16px 0 0}
.cast-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:40px}
.cast-head p{max-width:38ch; color:var(--text-2); margin:0}
.wall{list-style:none; margin:0 auto; padding:0; max-width:1040px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,2vw,22px)}
.brand{display:grid; gap:10px; align-content:start}
.tile{--tb:#FFFFFF; background:var(--tb); border-radius:10px; aspect-ratio:3/2; max-width:100%; position:relative; overflow:hidden; transition:transform .6s var(--ease-out), box-shadow .6s var(--ease-out)}
.tile img{position:absolute; inset:14% 14%; width:72%; height:72%; object-fit:contain; display:block}
.brand:hover .tile{transform:translateY(-6px); box-shadow:0 18px 40px -18px rgba(47,107,255,.65), 0 0 0 1px rgba(79,131,255,.5)}
.brand figcaption{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.brand b{font-weight:600; font-size:15px}
.brand span{font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-2)}
@media (max-width:620px){ .brand figcaption{display:grid; gap:2px} .brand b{font-size:13px} .brand span{font-size:10px} .tile img{inset:10%; width:80%; height:80%} }
.partners{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:baseline; margin-top:44px; color:var(--text-2)}
.partners strong{font-family:var(--f-display); font-size:28px; font-weight:800; text-transform:uppercase; color:var(--text); letter-spacing:.03em}

/* ---------- SSS ---------- */
.faq{padding-block:40px 120px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:48px}
.faq h2{font-size:clamp(44px,5.6vw,84px); margin-top:16px}
.faq details{border-bottom:1px solid var(--line); padding-block:20px}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; font-size:19px; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-mono); color:var(--brand-hover); transition:transform .4s var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--text-2); margin:12px 0 0; max-width:60ch}
@media (max-width:860px){ .faq{grid-template-columns:1fr; gap:20px} }

/* ---------- İletişim ---------- */
.contact{padding-block:40px 100px}
.contact-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start}
.contact h2{font-size:clamp(56px,8vw,128px); margin-top:16px}
.contact h2 em{font-style:normal; color:var(--brand-hover)}
.lines{display:grid; gap:2px; margin-top:32px}
.line-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-block:12px; border-bottom:1px solid var(--line)}
.line-row div{min-width:0}
.line-row .mono{display:block; color:var(--text-2); font-size:11px}
.line-row b{font-weight:600; font-size:19px; overflow-wrap:anywhere}
.copy{font:500 12px var(--f-mono); background:none; border:1px solid var(--line-strong); color:var(--text); border-radius:6px; padding:6px 10px; cursor:pointer; flex-shrink:0}
.copy:hover{border-color:var(--ice)}
form{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:clamp(22px,3.6vw,40px); display:grid; gap:16px}
.field{display:grid; gap:6px}
.field label,.field .lbl{font-size:14px; font-weight:600; color:var(--text-2)}
.field input,.field textarea,.field select{font:inherit; font-size:16px; color:var(--text); background:var(--canvas); border:1px solid var(--line-strong); border-radius:8px; padding:12px 14px; width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--brand-hover)}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.pills{display:flex; flex-wrap:wrap; gap:8px}
.pills input{position:absolute; opacity:0; pointer-events:none}
.pills label{font-size:14px; padding:7px 13px; border:1px solid var(--line-strong); border-radius:999px; cursor:pointer; color:var(--text); transition:background .3s var(--ease-out), border-color .3s var(--ease-out)}
.pills input:checked + label{background:var(--brand); border-color:var(--brand); color:#fff}
.pills input:focus-visible + label{outline:2px solid var(--brand-hover); outline-offset:2px}
.form-msg{margin:0; font-size:14px; color:var(--text-2); min-height:1.4em}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:36px} .two{grid-template-columns:1fr} }

/* ---------- Jenerik (footer) ---------- */
footer{border-top:1px solid var(--line); padding-block:90px 30px; text-align:center}
.credits{display:grid; gap:26px; justify-items:center}
.foot-logo{width:180px; height:auto; margin-bottom:14px}
.credit{display:grid; gap:4px}
.credit .mono{color:var(--text-2); font-size:11px}
.credit b{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(24px,3vw,34px); letter-spacing:.04em}
.credit a{text-decoration:none}
.credit a:hover{color:var(--brand-hover)}
.credits .end{font-family:var(--f-display); font-weight:900; text-transform:uppercase; font-size:clamp(64px,14vw,200px); line-height:.85; margin-top:30px; color:transparent; -webkit-text-stroke:1px var(--line-strong)}
.legal{margin-top:50px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; color:var(--text-2); font-size:13px}

/* Önizleme etiketi */
.preview-chip{position:fixed; left:max(12px, env(safe-area-inset-left, 0px)); bottom:max(12px, env(safe-area-inset-bottom, 0px)); z-index:70; background:rgba(8,12,26,.8); border:1px solid var(--line-strong); color:var(--ice); border-radius:8px; padding:7px 11px; backdrop-filter:blur(8px)}
@media (max-width:720px){ .preview-chip{display:none} }

/* Girişler */
.anim .rise{transform:translateY(28px); opacity:.001; transition:transform 1s var(--ease-out), opacity 1s var(--ease-out)}
.anim .rise.in{transform:none; opacity:1}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important; transition-delay:0s !important}
  .hero{height:100vh; height:100svh}
  .cue{display:none}
  .anim .rise{transform:none; opacity:1}
  .frame-in svg .draw{stroke-dashoffset:0}
}

/* =========================================================
   Çok sayfalı site eklemeleri (PHP sürümü)
   ========================================================= */
.preview-chip{display:none}
a{text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px}

/* Menü */
.nav-act{display:flex; align-items:center; gap:10px}
.nav-links a[aria-current="page"]{color:var(--text)}
.menu-btn{display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line-strong); background:rgba(12,19,40,.6); cursor:pointer; flex-direction:column; justify-content:center; align-items:center; gap:6px}
.menu-btn span{display:block; width:18px; height:1.5px; background:var(--text); transition:transform .3s var(--ease-out)}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (max-width:860px){
  .menu-btn{display:inline-flex}
  .nav-act .btn{display:none}
  .nav-links.open{display:flex; flex-direction:column; gap:2px; position:absolute; left:0; right:0; top:100%; background:var(--canvas); border-bottom:1px solid var(--line);
    padding-block:10px 18px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
  .nav-links.open a{display:block; padding-block:12px; font-size:20px; color:var(--text)}
  .nav-row{position:relative}
}
body.is-inner nav.top{background:rgba(6,10,23,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}

/* Ana sayfa girişi */
.intro{padding-block:90px 0; display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:baseline}
.intro p{margin:0; font-size:clamp(20px,2vw,26px); line-height:1.5; max-width:46ch; color:var(--text)}
.intro a{color:var(--ice)}
@media (max-width:760px){ .intro{grid-template-columns:1fr; gap:12px; padding-block:64px 0} }

/* Film şeridindeki kare artık bağlantı */
a.frame-in{color:inherit; text-decoration:none}
.frame-in .more{color:var(--ice); padding-inline:10px; font-size:11px; opacity:.75; transition:opacity .3s var(--ease-out)}
.frame:hover .more{opacity:1}
.brand-link{display:block; color:inherit; text-decoration:none}

/* Bloğdan notlar */
.notes{padding-block:40px 110px}
.notes .cast-head{align-items:end}
.note-grid,.post-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
.note,.post-card{display:grid; gap:10px; align-content:start; color:inherit; text-decoration:none}
.note-img,.post-img{display:block; aspect-ratio:16/10; max-width:100%; overflow:hidden; border-radius:8px; border:1px solid var(--line); background:var(--panel)}
.note-img img,.post-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.note:hover img,.post-card:hover img{transform:scale(1.05)}
.note .mono,.post-card .mono{color:var(--text-2); font-size:11px}
.note b,.post-card b{font-size:19px; line-height:1.35; font-weight:600}
.note:hover b,.post-card:hover b{color:var(--ice)}
.post-ex{color:var(--text-2); font-size:15px}
@media (max-width:900px){ .note-grid,.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .note-grid,.post-grid{grid-template-columns:1fr} }

/* İç sayfa başlığı */
.phead{padding-block:150px 60px}
.crumbs{display:flex; flex-wrap:wrap; gap:8px; color:var(--text-2); font-size:11px; margin-bottom:34px}
.crumbs a{color:var(--text-2); text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs [aria-current]{color:var(--ice); max-width:48ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.phead-grid{display:grid; gap:48px; align-items:center}
.phead-grid.has-img{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.phead h1{font-size:clamp(46px,6.4vw,100px); margin:18px 0 0; max-width:16ch}
.phead-grid:not(.has-img) h1{max-width:20ch}
.phead-intro{font-size:clamp(18px,1.5vw,21px); color:var(--text); opacity:.9; max-width:58ch; margin:26px 0 0}
.phead-meta{color:var(--text-2); margin:22px 0 0; font-size:11px}
.phead-img{aspect-ratio:4/3; max-width:100%; border-radius:10px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 80px -30px rgba(47,107,255,.45)}
.phead-img img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ .phead-grid.has-img{grid-template-columns:1fr} .phead{padding-block:120px 40px} }

/* Kısa bilgi kutuları */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0; border-block:1px solid var(--line)}
.fact{padding:22px 24px 22px 0; display:grid; gap:6px; align-content:start}
.fact + .fact{padding-left:24px; border-left:1px solid var(--line)}
.fact .mono{color:var(--text-2); font-size:11px}
.fact b{font-weight:600; font-size:17px}
.fact a{color:var(--ice)}
.fact-logo .tile{display:block; width:180px; aspect-ratio:3/2}
@media (max-width:620px){ .fact + .fact{padding-left:0; border-left:0; border-top:1px solid var(--line)} }

/* Neden bölümü + alıntı */
.why{padding-block:90px 30px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:56px; align-items:center}
.why h2,.items-sec h2,.more-svc h2,.related h2,.pf-brands h2{font-size:clamp(34px,4vw,60px)}
.why p{color:var(--text); opacity:.9; font-size:18px; max-width:62ch; margin:20px 0 0}
.quote{margin:0; padding:30px 0 30px 30px; border-left:2px solid var(--brand)}
.quote p{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(24px,2.4vw,36px); line-height:1.05; margin:0}
.quote cite{display:block; margin-top:16px; color:var(--text-2); font-style:normal; font-size:11px}
@media (max-width:900px){ .why{grid-template-columns:1fr; gap:30px; padding-block:64px 20px} }

/* Hizmet maddeleri */
.items-sec{padding-block:60px}
.items{list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; counter-reset:it; border-top:1px solid var(--line)}
.items li{counter-increment:it; padding:26px 26px 26px 0; border-bottom:1px solid var(--line); display:grid; gap:8px; align-content:start}
.items li:nth-child(even){padding-left:26px; border-left:1px solid var(--line)}
.items h3{font-family:var(--f-body); text-transform:none; font-weight:600; font-size:19px; line-height:1.3; letter-spacing:0}
.items h3::before{content:counter(it, decimal-leading-zero); display:block; font-family:var(--f-mono); font-size:11px; color:var(--ice); margin-bottom:10px; letter-spacing:.1em}
.items p{margin:0; color:var(--text-2); font-size:16px}
.items.compact li{padding-block:18px}
@media (max-width:760px){ .items{grid-template-columns:1fr} .items li:nth-child(even){padding-left:0; border-left:0} }

/* Sorun / Çözüm */
.ps{display:grid; grid-template-columns:1fr 1fr; gap:18px; padding-block:30px}
.ps-card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:clamp(22px,3vw,36px); display:grid; gap:14px; align-content:start}
.ps-card .mono{color:var(--text-2); font-size:11px}
.ps-card.sol{border-color:color-mix(in srgb, var(--brand) 55%, var(--line)); background:linear-gradient(160deg, rgba(47,107,255,.14), var(--panel) 60%)}
.ps-card.sol .mono{color:var(--ice)}
.ps-card p{margin:0; font-size:17px}
.mv{padding-top:10px}
@media (max-width:760px){ .ps{grid-template-columns:1fr} }
.closing{padding-block:40px 20px}
.closing p{font-size:clamp(19px,1.8vw,24px); line-height:1.55; max-width:60ch; margin:0}

/* CTA bandı */
.cta-band{padding-block:70px}
.cta-inner{display:flex; justify-content:space-between; align-items:end; gap:30px; flex-wrap:wrap; padding:clamp(26px,4vw,48px); border-radius:14px; border:1px solid var(--line-strong);
  background:radial-gradient(120% 140% at 100% 0%, rgba(47,107,255,.28), transparent 55%), var(--panel)}
.cta-inner h2{font-size:clamp(36px,4.4vw,64px); margin-top:14px; max-width:18ch}
.cta-inner p{color:var(--text-2); margin:14px 0 0; max-width:48ch}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* Diğer bağlantılar */
.more-svc,.related,.pf-brands{padding-block:30px 90px}
.chips-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.chip-link{border:1px solid var(--line-strong); border-radius:999px; padding:10px 18px; text-decoration:none; color:var(--text); font-size:15px; transition:border-color .3s var(--ease-out), background .3s var(--ease-out)}
.chip-link:hover{border-color:var(--ice); background:rgba(169,219,255,.06)}
.pf-brands p{color:var(--text-2); font-size:18px; max-width:70ch}

/* Hizmet listesi */
.svc-list{display:grid; gap:0; border-top:1px solid var(--line); padding-bottom:30px}
.svc-row{display:grid; grid-template-columns:200px minmax(0,1fr) 40px; gap:30px; align-items:center; padding-block:24px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none}
.svc-img{aspect-ratio:4/3; max-width:100%; overflow:hidden; border-radius:8px}
.svc-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.svc-row:hover .svc-img img{transform:scale(1.06)}
.svc-txt{display:grid; gap:8px}
.svc-txt .mono{color:var(--ice); font-size:11px}
.svc-txt b{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,2.6vw,40px); line-height:1}
.svc-txt span:last-child{color:var(--text-2); max-width:70ch}
.svc-go{font-size:26px; color:var(--text-2); transition:transform .4s var(--ease-out), color .3s}
.svc-row:hover .svc-go{transform:translateX(6px); color:var(--ice)}
@media (max-width:700px){ .svc-row{grid-template-columns:1fr; gap:14px} .svc-go{display:none} }

/* Portfolyo */
.pf-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; padding-bottom:40px}
.pf-card{display:grid; gap:10px; color:inherit; text-decoration:none}
.pf-img{display:block; aspect-ratio:16/10; max-width:100%; overflow:hidden; border-radius:10px; border:1px solid var(--line); background:var(--panel)}
.pf-img img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out)}
.pf-card:hover .pf-img img{transform:scale(1.04)}
.pf-card .mono{color:var(--ice); font-size:11px}
.pf-card b{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,2.4vw,36px); line-height:1}
.pf-tags{display:flex; flex-wrap:wrap; gap:6px}
.pf-tags i{font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line-strong); border-radius:4px; padding:4px 8px; color:var(--text-2)}
@media (max-width:760px){ .pf-grid{grid-template-columns:1fr} }

/* Blog yazısı */
.article{max-width:820px; padding-bottom:30px}
.article-img{margin:0 0 40px; border-radius:10px; overflow:hidden; border:1px solid var(--line)}
.article-img img{width:100%; height:auto; display:block}
.prose{font-size:18.5px; line-height:1.75; color:#DDE3F7}
.prose > * + *{margin-top:1.1em}
.prose p{margin:0}
.prose h2,.prose h3,.prose h4{font-family:var(--f-body); text-transform:none; letter-spacing:-.01em; line-height:1.25; color:var(--text); margin-top:1.8em}
.prose h2{font-size:30px; font-weight:600}
.prose h3{font-size:23px; font-weight:600}
.prose h4{font-size:19px; font-weight:600}
.prose a{color:var(--ice)}
.prose ul,.prose ol{padding-left:1.3em; margin:0}
.prose li + li{margin-top:.4em}
.prose blockquote{margin:0; padding-left:20px; border-left:2px solid var(--brand); color:var(--text)}
.prose img{border-radius:8px; height:auto}
.author{display:flex; gap:16px; align-items:center; margin-top:50px; padding:20px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.author img{width:44px; height:auto}
.author div{display:grid; gap:4px}
.author span{color:var(--text-2); font-size:15px}
.author a{color:var(--ice)}

/* Form ekleri */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.consent{margin:0; font-size:13px; color:var(--text-2)}
.line-row a{color:inherit; text-decoration:none}
.notice{padding:16px 20px; border:1px solid var(--brand); border-radius:10px; background:rgba(47,107,255,.12)}
.contact{padding-block:70px 100px}
.is-inner .contact .scene-tag{display:none}

/* 404 */
.nf{padding-block:180px 120px}
.nf h1{font-size:clamp(48px,7vw,110px); margin:18px 0 20px; max-width:14ch}
.nf p{color:var(--text-2); max-width:52ch}

.foot-links a,.credit a{color:inherit; text-decoration:none}
.foot-links a:hover,.credit a:hover{color:var(--ice)}
.legal a{color:var(--text-2); text-decoration:none}
.legal a:hover{color:var(--text)}

/* Logo duvarı: sütun sayısı marka sayısına göre (yalnız kalan logo olmasın) */
.wall{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); max-width:calc(var(--cols,3) * 350px)}
@media (max-width:900px){ .wall{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ---------- Süreç: storyboard (görselli) ---------- */
.board h2{margin-bottom:14px}
.story-lead{color:var(--text-2); max-width:56ch; margin:0 0 44px; font-size:18px}
.story{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; position:relative}
.story-rail{position:absolute; left:0; right:0; top:0; height:2px; background:var(--line); grid-column:1/-1; overflow:hidden}
.story-rail i{display:block; height:100%; background:linear-gradient(90deg, var(--brand), var(--ice)); transform:scaleX(0); transform-origin:left; transition:transform 1.8s var(--ease-out)}
.story.in .story-rail i{transform:scaleX(1)}
.step{position:relative; padding-top:30px; display:grid; gap:18px; align-content:start}
.node{position:absolute; top:-6px; left:0; width:14px; height:14px; border-radius:50%; background:var(--canvas); border:2px solid var(--line-strong); transition:background .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .6s var(--ease-out)}
.story.in .node{background:var(--brand); border-color:var(--ice); box-shadow:0 0 14px var(--brand)}
.story.in .step:nth-child(3) .node{transition-delay:.45s}
.story.in .step:nth-child(4) .node{transition-delay:.9s}
.story.in .step:nth-child(5) .node{transition-delay:1.35s}
.step-shot{margin:0; position:relative; aspect-ratio:4/3; max-width:100%; overflow:hidden; border-radius:8px; border:1px solid var(--line); background:var(--panel)}
.step-shot img{width:100%; height:100%; object-fit:cover; transform:scale(1.03); transition:transform 1.2s var(--ease-out)}
.step:hover .step-shot img{transform:scale(1.09)}
.step-shot figcaption{position:absolute; left:10px; top:10px; padding:6px 10px; border-radius:6px; font-size:11px; color:var(--ice);
  background:rgba(8,12,26,.72); border:1px solid rgba(96,96,126,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
.step-txt{display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start}
.step-n{font-family:var(--f-display); font-weight:900; font-size:54px; line-height:.8; color:transparent; -webkit-text-stroke:1px var(--line-strong); transition:color .6s var(--ease-out), -webkit-text-stroke-color .6s var(--ease-out)}
.step:hover .step-n{color:var(--brand); -webkit-text-stroke-color:var(--brand)}
.step h3{font-size:30px; font-weight:800}
.step p{margin:8px 0 0; color:var(--text-2); font-size:15px}
@media (max-width:980px){ .story{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px} .story-rail{display:none} .node{display:none} .step{padding-top:0} }
@media (max-width:560px){ .story{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){ .story-rail i{transform:none} }