/* ============================================================
   ÇAĞRIVINÇ — Güvenli Kaldırma Hizmetleri
   Design tokens
   ============================================================ */
:root{
  --red:#e5231c;
  --red-deep:#c2160f;
  --red-dark:#9e120c;
  --ink:#141414;
  --ink-soft:#2a2a2a;
  --paper:#ffffff;
  --paper-2:#f4f2ef;
  --paper-3:#eceae6;
  --grey:#8b8b8b;
  --grey-line:#e2e0db;

  --shell:1280px;
  --pad:clamp(20px,5vw,64px);

  --f-display:'Outfit',system-ui,sans-serif;
  --f-body:'Outfit',system-ui,sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --radius:16px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:only light}
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,
body::-webkit-scrollbar{display:none}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  /* clip (not hidden): `hidden` turns body into a scroll container, whose stale clip-rect crops
     composited 3D children (the right contact-container door) on vertical scroll. `clip` doesn't. */
  overflow-x:clip;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px}

/* fixed grain overlay for tactile depth */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);
}
.eyebrow--light{color:#fff;opacity:.85}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-weight:600;font-size:.9rem;letter-spacing:.01em;
  padding:.8em 1.5em;border-radius:100px;cursor:pointer;border:1px solid transparent;
  transition:transform .35s var(--ease),background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
  white-space:nowrap;
}
.btn--lg{font-size:1rem;padding:1em 1.9em}
.btn:active{transform:translateY(1px) scale(.98)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-deep);transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(229,35,28,.6)}
.btn--white{background:#fff;color:var(--ink)}
.btn--white:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(0,0,0,.4)}
.btn--statement-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--statement-dark:hover{transform:translateY(-2px);box-shadow:0 16px 34px -12px rgba(0,0,0,.5)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:80;
  padding:14px 0;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
/* scrolled: the header element itself stays fully transparent across the page width;
   the glass fill lives only on the compact .header-inner group (see below), so the red
   background stays clean and there is no full-width bar or hairline. */
.site-header.is-scrolled{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:10px 0}
.site-header.on-dark:not(.is-scrolled) .brand__word,
.site-header.on-dark:not(.is-scrolled) .nav a{color:#fff}
/* full-bleed header: logo hugs the left edge, İletişim hugs the far right,
   nav spread so the last item (Yorumlar) lands near the crane pulley (~centre) */
.header-inner{position:relative;z-index:81;display:flex;align-items:center;gap:clamp(30px,3.6vw,58px);
  max-width:100vw;margin-inline:auto;padding-inline:clamp(18px,2.4vw,40px);
  border-radius:18px;background:transparent;
  transition:max-width .6s var(--ease),padding .5s var(--ease),
    background .45s var(--ease),box-shadow .45s var(--ease),
    -webkit-backdrop-filter .45s var(--ease),backdrop-filter .45s var(--ease)}
.brand{display:inline-flex;align-items:center;gap:.5em;flex:none}
.brand__logo{height:46px;width:auto;display:block}
.brand__mark{display:inline-flex}
.brand__word{font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.brand--footer .brand__word{color:#fff}

/* nav shifted toward the centre so the last item (Yorumlar) sits just left of the crane pulley;
   wider item gap for breathing room, left margin trimmed to keep the group anchored near the crane */
.nav{display:flex;gap:clamp(32px,3.1vw,46px);margin-left:clamp(30px,7vw,120px);
  transform-origin:50% 50%;
  transition:opacity .42s var(--ease),transform .55s var(--ease),filter .42s var(--ease)}
.nav a{font-size:.92rem;font-weight:500;color:var(--ink-soft);position:relative;transition:color .25s}
.nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--red);transition:width .3s var(--ease)}
.nav a:hover{color:var(--red)}
.nav a:hover::after{width:100%}

.header-actions{display:flex;align-items:center;gap:14px;margin-left:auto}
/* reference İletişim is a near-rectangle with only a slight corner radius */
.header-actions .btn--dark{border-radius:5px;padding:.74em 1.5em;font-size:.85rem;font-weight:600}
.burger{display:none;flex-direction:column;justify-content:center;align-items:stretch;gap:5px;width:40px;height:34px;padding:7px 6px;background:none;border:0;cursor:pointer}
.burger span{display:block;width:100%;height:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .25s var(--ease),background .3s var(--ease);transform-origin:center}
.site-header.on-dark:not(.is-scrolled) .burger span{background:#fff}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- scroll transform: nav collapses into a centred hamburger ----
   The hero header shows the full nav; once scrolled, the links fade + shrink
   toward the centre while a hamburger fades/scales in at the exact centre, so the
   scrolled header reads as three elements: logo · hamburger · İletişim. */
.nav-toggle{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.5);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  width:48px;height:42px;padding:9px 10px;
  background:none;border:0;cursor:pointer;
  opacity:0;pointer-events:none;
  /* hamburger arrives a beat AFTER the nav starts leaving, so it reads as a transform */
  transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s;
}
.nav-toggle span{display:block;width:28px;height:2px;border-radius:2px;background:var(--ink);transform-origin:center;transition:transform .3s var(--ease),opacity .25s var(--ease),background .3s var(--ease)}
.site-header.on-dark:not(.is-scrolled) .nav-toggle span{background:#fff}
.nav-toggle.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* scrolled state: the full-bleed header contracts into a compact, centred group
   (logo · hamburger · İletişim) sitting in the top-centre, with empty space either
   side — not stretched edge to edge. max-width animates so the contraction is smooth. */
.site-header.is-scrolled .header-inner{
  max-width:clamp(320px,42vw,540px);
  padding:7px clamp(16px,1.6vw,26px);
  background:rgba(255,255,255,.15);
  -webkit-backdrop-filter:blur(11px) saturate(1.1);
  backdrop-filter:blur(11px) saturate(1.1);
  box-shadow:0 10px 34px -18px rgba(0,0,0,.4);
}
/* the nav links slide + shrink toward the centre and fade out as they fold into the
   hamburger; pulled out of flow so they don't bloat the compact group while fading */
.site-header.is-scrolled .nav{
  position:absolute;left:50%;top:50%;margin:0;
  opacity:0;transform:translate(-50%,-50%) scale(.6);filter:blur(3px);pointer-events:none;
}
.site-header.is-scrolled .nav-toggle{
  opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;
}

/* frosted-glass slide-in panel: the page shows through, softly blurred + dimmed */
.mobile-menu{
  position:fixed;inset:0 0 0 auto;width:min(82vw,360px);z-index:79;
  background:rgba(18,18,20,0.5);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border-left:1px solid rgba(255,255,255,0.14);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,0.55);
  color:#fff;
  display:flex;flex-direction:column;gap:2px;justify-content:center;
  padding:48px clamp(34px,5vw,54px);
  transform:translateX(100%);transition:transform .55s var(--ease);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .mobile-menu{background:rgba(18,18,20,0.92)} /* fallback when blur isn't supported */
}
.mobile-menu.is-open{transform:translateX(0)}
.mobile-menu a{
  font-size:clamp(1.45rem,3.2vw,1.8rem);font-weight:600;letter-spacing:-.015em;
  color:#fff;opacity:.92;padding:15px 0;width:max-content;
  text-shadow:0 1px 14px rgba(0,0,0,.45);
  transition:color .25s var(--ease),padding-left .35s var(--ease),opacity .25s var(--ease);
}
.mobile-menu a:hover{color:var(--red);opacity:1;padding-left:12px}
/* İletişim belongs in the slide-in menu only on mobile (burger). On desktop the
   same panel opens from the centre hamburger, but the header already shows the
   İletişim button there, so drop the duplicate from the menu above the mobile bp. */
@media (min-width:861px){.mobile-menu a[href="iletisim.php"]{display:none}}
/* Mobil: kayan menuyu daralt - sagda kalsin, sol ust logoyu kapatmasin (sol kenar ~150px) */
@media (max-width:600px){
  .mobile-menu{width:calc(100vw - 150px);max-width:340px;padding:44px 26px}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;z-index:3;min-height:100dvh;background:var(--paper-2);overflow:hidden;
  --g:clamp(20px,5vw,72px)}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 80% at 50% 30%,#fbfaf8 0%,var(--paper-2) 60%,var(--paper-3) 100%);}
/* full-bleed layered stage — children are positioned absolutely against the viewport */
.hero__grid{position:absolute;inset:0}

/* oversized editorial titles: bleed off-screen, sit BEHIND the container (z:1) */
.hero__title{position:absolute;z-index:1;margin:0;
  font-size:clamp(3.4rem,14.6vw,12.5rem);font-weight:800;letter-spacing:-.045em;line-height:.82;
  white-space:nowrap;color:var(--ink);pointer-events:none}
.hero__title--top{top:clamp(72px,11vh,120px);left:clamp(10px,1.6vw,32px)}      /* Hassas: lower portion tucks behind the container */
.hero__title--bottom{bottom:clamp(84px,12.5vh,150px);right:clamp(16px,3vw,52px)} /* Yaklaşım: raised so its top tucks behind the container */

/* suspended PNG container — the focal point: large, slightly left of centre, IN FRONT of the type,
   tall enough to BRIDGE and overlap both words */
.hero__stage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  transform:translate(-3%,-14%);pointer-events:none}

/* ---- suspended PNG container ----
   Layered transforms so nothing fights: parallax (JS) on .hero__container,
   vertical float on __float, pendulum sway on __sway. White is default;
   the aligned red PNG sits on top and crossfades in on hover. */
.hero__container{position:relative;width:clamp(560px,82vw,1180px);pointer-events:auto;
  transform:translate3d(var(--px,0px),var(--py,0px),0);will-change:transform}
.hero__container__float{animation:heroFloat 6.5s ease-in-out infinite;will-change:transform}
/* the stack: white + red sit in the SAME box, identical metrics; the shadow is a
   pre-rendered alpha layer so the browser does not recompute a live filter while animating */
.hero__container__sway{position:relative;width:100%;aspect-ratio:1400 / 1050;
  transform-origin:50% 4%;animation:heroSway 7.5s ease-in-out infinite;will-change:transform}
.hero__container__shadow{position:absolute;left:-8.571%;top:-11.429%;width:117.143%;height:122.857%;object-fit:fill;display:block;pointer-events:none;z-index:0}
.hero__container__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1}
.hero__container__img--white{opacity:1}
/* Local circular reveal: the red layer sits on top of the white one and is masked to a
   soft circle that follows the cursor (--mx/--my, set by JS). Outside the circle the mask
   is transparent, so the white container shows through. The whole red layer fades in/out
   on enter/leave so there are no hard edges. */
.hero__container__img--red{
  opacity:0;transition:opacity .4s var(--ease);will-change:opacity;
  --reveal:clamp(130px,15vw,230px);
  -webkit-mask-image:radial-gradient(circle var(--reveal) at var(--mx,50%) var(--my,50%),#000 0%,#000 58%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(circle var(--reveal) at var(--mx,50%) var(--my,50%),#000 0%,#000 58%,rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* reveal only while the cursor is actually over an OPAQUE pixel of the container (the
   .is-revealing class is toggled by JS via alpha hit-testing, NOT the full element rect,
   so transparent PNG margins / crane gaps never trigger it). Fades cleanly on leave. */
.hero__container.is-revealing .hero__container__img--red{opacity:1}

@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes heroSway{0%,100%{transform:rotate(-1.25deg)}50%{transform:rotate(1.25deg)}}
/* touch devices: the HERO container keeps its idle float/sway (requested for mobile parity with
   desktop). Only the SEAM container drops it — that one is driven by the scroll choreography and a
   competing idle animation would fight the scrubbed transforms. */
@media (hover:none),(pointer:coarse){
  .seam__float,.seam__sway{animation:none}
}

/* right info column — team showcase card (top) + stats (middle), edge-aligned.
   Compact: left text column + a full-bleed photo panel on a red geometric background. */
/* final design asset (card.png) — the PNG already contains the white card body,
   rounded corners, logo, copy and the team photo, so the wrapper only positions it */
.hero__card{position:absolute;z-index:5;top:clamp(70px,10vh,112px);right:var(--g);
  width:clamp(316px,26vw,374px)}
.hero__card__img{display:block;width:100%;height:auto}

.hero__stats{position:absolute;z-index:4;top:0;bottom:0;right:var(--g);
  display:flex;flex-direction:column;justify-content:center;width:clamp(150px,14vw,200px)}
.stat{display:flex;flex-direction:column;gap:2px;padding:11px 0;text-align:right}
.stat + .stat{border-top:1px solid var(--grey-line)}
.stat__row{display:inline-flex;align-items:baseline;justify-content:flex-end;gap:2px}
.stat__num{font-size:clamp(2rem,3vw,2.7rem);font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.stat__unit{font-size:1rem;font-weight:700;color:var(--grey)}
.stat__label{font-size:.72rem;letter-spacing:.06em;color:var(--grey)}

.hero__cta{position:absolute;z-index:6;bottom:clamp(60px,9vh,88px);left:var(--g)}
/* rectangular shape with moderately rounded corners, matching the header İletişim button
   (less of a full pill) — colour, text and arrow unchanged */
.hero__cta .btn{border-radius:6px}

/* ============================================================
   STATEMENT
   ============================================================ */
/* overflow visible + a positive z-index let the bridge container cross the bottom seam
   and sit over the top of the white section below (horizontal page overflow is clipped
   by body{overflow-x:clip}) */
.statement{position:relative;background:var(--red);color:#fff;padding:clamp(74px,9vw,116px) 0 clamp(48px,5vw,72px);overflow:visible;z-index:2;text-align:center}
.statement::before{content:"";position:absolute;inset:0;z-index:1;background:var(--red);pointer-events:none}
.statement::after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(120% 100% at 50% 0%,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.statement__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:30px;max-width:1000px}
.statement__text{font-size:clamp(1.8rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.12}

/* SEAM RIG — one shared long-rope container straddling the red→white boundary.
   The rig is a zero-height marker sitting exactly on the seam (between .statement and .spec).
   .seam__pin is absolutely anchored to that line and lifted so the body crosses into the white
   while its upper part + rope sit above the seam, masked by the red statement (z-index:2).
   z-index:1 keeps it above the white .spec (z-index:0) but below the red panel and its text.
   --reveal (set by JS) is the scrubbed translateY that holds it screen-fixed during the scroll
   reveal; with no JS / reduced-motion it stays at its static straddle. */
.seam{position:relative;z-index:1;width:100%;height:0;pointer-events:none}
.seam__pin{position:absolute;left:50%;top:0;width:clamp(560px,82vw,1180px);
  /* default (no-JS / reduced-motion) static straddle: body crosses the seam, top masked */
  transform:translate(-50%,-46%);will-change:transform}
.seam__float{animation:heroFloat 6.5s ease-in-out infinite;will-change:transform}
.seam__sway{position:relative;transform-origin:50% 8%;animation:heroSway 7.5s ease-in-out infinite;will-change:transform}
/* STEP 1–2 layer: the container + its callouts transform as one unit (grow, then the slight
   right glide + scale of step 2). position:relative makes it the callouts' containing block so
   their %-anchors resolve against the container box exactly as before. */
.seam__shift{position:relative;display:block;width:100%;transform-origin:50% 56%;will-change:transform,opacity}
.seam__img{width:100%;height:auto;display:block}
/* STEP 3–5 layer: the yellow-man REVEAL. Now a SIBLING of #seamPin (not a child) so the pin's
   transform/scrub can't make a containing block for it — it locks to the viewport directly via
   position:fixed; inset:0; transform:none. Hidden by default (never shows with no JS / reduced
   motion). The win/full layers below fill this viewport box. */
.seam__reveal{position:fixed;inset:0;width:100vw;height:100vh;
  transform:none;opacity:0;pointer-events:none;will-change:opacity}
/* lifecycle: once the story releases after step 5 (or the touch scrub passes the sequence) the
   fixed reveal is PARKED — its job is handed to the in-flow #seamFlow twin, so the overlay must
   stop covering the page. Cleared again on re-enter so the fixed overlay drives the replay. Kept
   off the opacity GSAP owns. */
.seam__reveal.is-handoff{visibility:hidden}

/* STEPS 6–9: services-card stack over the full-screen yellow-man + synced progress rail.
   Fixed to the viewport (sibling of #seamReveal); hidden until the cards step (GSAP drives it). */
.seam__cards{position:fixed;inset:0;pointer-events:none;opacity:0;will-change:opacity;z-index:1}
/* RELEASE fade: hide the whole card stack + rail WITHOUT touching GSAP's inline opacity, so the
   story timeline keeps sole ownership of #seamCards opacity (external writes would break its
   reverse scrub, leaving the rail thumb stuck visible over the container section). */
.seam__cards.is-exit{opacity:0!important;transition:opacity .3s ease}
.seam__cardstack{position:absolute;left:9%;top:57%;transform:translateY(-50%);
  width:clamp(230px,26vw,380px);aspect-ratio:1024 / 1536}
.seam__card{position:absolute;inset:0;width:100%;height:auto;display:block;
  will-change:transform,opacity}
.seam__cardstack .seam__card:nth-child(1){z-index:1}
.seam__cardstack .seam__card:nth-child(2){z-index:2}
.seam__cardstack .seam__card:nth-child(3){z-index:3}
.seam__cardstack .seam__card:nth-child(4){z-index:4}
/* Cards 2 & 4 are GLASS (near-transparent PNGs) → their white text is unreadable over the busy
   yellow-man. Give them a real frosted-glass backdrop (like the callouts / scrolled header): blur +
   a soft dark tint for contrast. This also turns whatever card sits behind them into a gentle blur
   instead of a sharp coloured tint. */
.seam__cardstack .seam__card:nth-child(2),
.seam__cardstack .seam__card:nth-child(4){
  /* the glass PNGs fill their box edge-to-edge with a ~5px rounded corner (and no real margin), so
     the frosted backdrop just needs that SAME small radius — no clip-path, no overflow, no halo. */
  border-radius:5px;
  background:rgba(14,14,18,.22);
  -webkit-backdrop-filter:blur(13px) saturate(1.12) brightness(.86);
          backdrop-filter:blur(13px) saturate(1.12) brightness(.86);
}
.seam__rail{position:absolute;right:7%;top:50%;transform:translateY(-50%);width:16px;height:clamp(170px,30vh,250px)}
.seam__rail-track{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.26);border-radius:2px}
.seam__rail-tick{position:absolute;left:50%;width:7px;height:7px;border-radius:1.5px;transform:translate(-50%,-50%);background:rgba(255,255,255,.4)}
.seam__rail-thumb{position:absolute;left:50%;top:12.5%;width:13px;height:13px;border-radius:2.5px;transform:translate(-50%,-50%);background:#E42C25;box-shadow:0 0 0 4px rgba(228,44,37,.2),0 0 14px rgba(228,44,37,.5)}
@media (max-width:860px){ .seam__cardstack{left:50%;transform:translate(-50%,-50%);width:clamp(190px,62vw,300px)} .seam__rail{right:4%} }

/* STATIC step-5 hand-off twin: a normal in-flow section that matches the step-5 full-screen
   yellowman EXACTLY (same asset, cover, center bottom). Display:none until the story releases;
   then it carries the image as a real section that scrolls away into .projects. */
.seamFlow{display:none;position:relative;z-index:2;width:100%;height:100vh;
  background-image:url('assets/yellowman.png');background-image:-webkit-image-set(url('assets/yellowman.webp') type('image/webp'),url('assets/yellowman.png') type('image/png'));background-image:image-set(url('assets/yellowman.webp') type('image/webp'),url('assets/yellowman.png') type('image/png'));background-repeat:no-repeat;
  background-size:cover;background-position:center bottom}
.seam__reveal-win,
.seam__reveal-full{
  position:absolute;
  inset:0;
  background-image:url('assets/yellowman.png');
  background-image:-webkit-image-set(url('assets/yellowman.webp') type('image/webp'),url('assets/yellowman.png') type('image/png'));
  background-image:image-set(url('assets/yellowman.webp') type('image/webp'),url('assets/yellowman.png') type('image/png'));
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center bottom;
}
/* the container-shaped window: yellowman visible ONLY inside the `container-red-norope` silhouette.
   --win (set by script.js) is now a MULTIPLE of the container's OWN clamp width, NOT vmax — so the
   window tracks the red container at every viewport (vmax drifted huge once the container clamped to
   1180px on wide screens). Step 3 starts at ~1.13 (= the container's step-2 scale 1.07×1.06) so the
   window opens at exactly the container's size, then grows for steps 4–5. --winy keeps the body (not
   the empty rope gap) vertically centred. */
.seam__reveal-win{
  --win:1.13;
  --winy:53%;
  -webkit-mask-image:url('assets/container-red-norope.png');
          mask-image:url('assets/container-red-norope.png');
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center var(--winy);mask-position:center var(--winy);
  -webkit-mask-size:calc(clamp(560px,82vw,1180px) * var(--win)) auto;mask-size:calc(clamp(560px,82vw,1180px) * var(--win)) auto;
  will-change:mask-size}
/* same photo, unmasked — fades in only at the end of step 5 to complete a clean full-screen scene */
.seam__reveal-full{opacity:0;will-change:opacity}

/* ============================================================
   SPEC
   ============================================================ */
.spec{background:var(--paper);padding:clamp(170px,18vw,250px) 0 clamp(220px,22vw,320px);position:relative}
.spec__stage{position:relative;height:clamp(560px,52vw,700px);margin:0 auto;max-width:1400px}
/* scroll room for the storytelling sequence (steps 2–5) — height set by script.js (0 without JS) */
.spec__room{width:100%;height:0;pointer-events:none}
/* MISSION / intro row — rides WITH the seam container at the crane-hook level. Full-bleed band
   centred on the viewport, split LEFT (Misyonumuz · Çağrı Vinç Nedir?) and RIGHT (description),
   with a centre gap so the crane hook/pulley sits between the two groups. */
.mission{position:absolute;top:22.5%;left:50%;transform:translateX(-50%);
  width:min(94vw,1520px);
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:clamp(24px,6vw,120px);z-index:2;pointer-events:none}
.mission__left{display:flex;align-items:baseline;gap:clamp(20px,4vw,72px);flex:0 1 auto;min-width:0}
.mission__right{flex:0 1 clamp(240px,30%,420px);min-width:0}
.mission__eyebrow{display:inline-flex;align-items:center;gap:.5em;margin:0;white-space:nowrap}
.mission__star{font-size:.85em;line-height:1}
.mission__title{font-size:clamp(1rem,1.4vw,1.25rem);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--ink);white-space:nowrap}
.mission__lead{font-size:clamp(.9rem,1.02vw,1rem);line-height:1.5;color:var(--ink-soft)}
/* MOBILE-only feature marquee (declared here, shown only inside the mobile media query below).
   Desktop keeps the four corner callouts and never shows this. */
.seam__marquee{display:none}
@keyframes seamMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* tablet / mobile: the corner callouts are dropped; the mission moves BELOW the container and the
   feature phrases run as a marquee just under it (see the main 860 block). Centred + pushed down so
   the mission no longer overlaps the crane rope/hook. */
@media (max-width:860px){
  .mission{top:205%;flex-direction:column;align-items:center;text-align:center;gap:8px;width:min(92vw,560px)}
  .mission__left{gap:14px;justify-content:center}
  .mission__right{flex:none}
}
.spec-callout{--line:var(--red);--accent:var(--red);position:absolute;z-index:2;color:var(--ink);font-size:.82rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.spec-callout__label{position:absolute;line-height:1.15}
/* Continuous elbow connector: a horizontal run from the label, then a short vertical drop that
   lands on the marker square — which itself sits on the container corner. No floating gaps. */
.spec-callout__line{position:absolute;width:90px;height:24px}
.spec-callout__line::before,
.spec-callout__line::after{content:"";position:absolute;background:var(--line)}
.spec-callout__line::before{width:100%;height:1px}   /* horizontal run: label → over the marker */
.spec-callout__line::after{width:1px;height:100%}     /* short drop onto the marker square */
.spec-callout__corner{position:absolute;width:58px;height:48px;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.36);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 18px 45px -28px rgba(0,0,0,.45)}
/* small arrow head at the callout's container end — two thin strokes forming a chevron that
   points into the corner being described (direction set per corner below) */
.spec-callout__corner::after{content:"";position:absolute;width:7px;height:7px}
.spec-callout--tl{left:6%;top:49%}
.spec-callout--tl .spec-callout__corner{left:0;top:0}
.spec-callout--tl .spec-callout__corner::after{right:-2px;bottom:-2px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)}
.spec-callout--tl .spec-callout__line{right:0;top:-24px}
.spec-callout--tl .spec-callout__line::before{left:0;top:0}
.spec-callout--tl .spec-callout__line::after{right:0;top:0}
.spec-callout--tl .spec-callout__label{right:90px;top:-34px}
.spec-callout--tr{right:9%;top:44%}
.spec-callout--tr .spec-callout__corner{right:0;top:0}
.spec-callout--tr .spec-callout__corner::after{left:-2px;bottom:-2px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)}
.spec-callout--tr .spec-callout__line{left:0;top:-24px}
.spec-callout--tr .spec-callout__line::before{left:0;top:0}
.spec-callout--tr .spec-callout__line::after{left:0;top:0}
.spec-callout--tr .spec-callout__label{left:90px;top:-34px}
.spec-callout--bl{left:7%;bottom:-1%}
.spec-callout--bl .spec-callout__corner{left:0;bottom:0}
.spec-callout--bl .spec-callout__corner::after{right:-2px;top:-2px;border-right:1.5px solid var(--accent);border-top:1.5px solid var(--accent)}
.spec-callout--bl .spec-callout__line{right:0;bottom:-24px}
.spec-callout--bl .spec-callout__line::before{left:0;bottom:0}
.spec-callout--bl .spec-callout__line::after{right:0;bottom:0}
.spec-callout--bl .spec-callout__label{right:90px;bottom:-34px}
.spec-callout--br{right:24%;bottom:0%}
.spec-callout--br .spec-callout__corner{right:0;bottom:0}
.spec-callout--br .spec-callout__corner::after{left:-2px;top:-2px;border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent)}
.spec-callout--br .spec-callout__line{left:0;bottom:-24px}
.spec-callout--br .spec-callout__line::before{left:0;bottom:0}
.spec-callout--br .spec-callout__line::after{left:0;bottom:0}
.spec-callout--br .spec-callout__label{left:90px;bottom:-34px}

/* ============================================================
   PROJECTS
   ============================================================ */
/* fill at least the viewport so the next section never peeks at the forward-glide landing; the
   row list flex-grows to absorb the slack (no empty white gap at the bottom). */
.projects{background:var(--paper);padding:clamp(70px,8vw,112px) 0 clamp(36px,4vw,56px);min-height:100vh;display:flex;flex-direction:column}
/* wide container: eyebrow lines up with the mission band's left edge and the rows span the screen
   (small edge margin) like the reference, instead of the narrower default shell. */
.projects .shell{max-width:min(94vw,1520px);padding-inline:0}
.projects__head{display:grid;grid-template-columns:0.9fr 1.1fr;gap:0 clamp(32px,5vw,88px);align-items:baseline;margin-bottom:clamp(28px,3vw,44px)}
.projects__eyebrow{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.projects__star{font-size:.9em;line-height:1}
.projects__intro{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2vw,28px)}
.projects__title{font-size:clamp(1.55rem,1.95vw,2.3rem);font-weight:700;letter-spacing:-.025em;line-height:1.14;max-width:none;margin:0}
.projects__intro .btn{align-self:flex-start}

.projects__list{border-top:1px solid var(--grey-line);position:relative;flex:1;display:flex;flex-direction:column}

/* floating hover preview card */
.svc__preview{
  position:absolute;top:50%;left:clamp(180px,34%,560px);
  width:clamp(170px,16vw,232px);aspect-ratio:659/961;
  transform:translate(-50%,-50%);
  opacity:0;visibility:hidden;pointer-events:none;z-index:5;
  transition:opacity .4s var(--ease),visibility .4s var(--ease);
  will-change:top,opacity;
}
.projects__list.is-previewing .svc__preview{opacity:1;visibility:visible}
/* each image is its own rounded, tilted card (overflow stays visible so the tilt isn't clipped);
   it GROWS in from small while keeping its resting tilt, instead of popping in upright. */
.svc__preview img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:16px;box-shadow:0 42px 80px -28px rgba(0,0,0,.5);
  opacity:0;transform-origin:50% 85%;
  transform:rotate(var(--tilt,0deg)) scale(.6);
  transition:opacity .42s var(--ease),transform .6s cubic-bezier(.34,1.4,.5,1);
  will-change:transform,opacity;
}
.svc__preview img.is-active{opacity:1;transform:rotate(var(--tilt,0deg)) scale(1)}
/* resting tilt per card: 1) right  2) left  3) right  4) right */
.svc__preview img[data-key="konteyner"]{--tilt:5deg}
.svc__preview img[data-key="insaat"]{--tilt:-5deg}
.svc__preview img[data-key="agir"]{--tilt:5deg}
.svc__preview img[data-key="sepetli"]{--tilt:-5deg}

/* service rows */
.svc__row{
  display:grid;grid-template-columns:1fr 1.35fr auto;align-items:center;gap:clamp(20px,2.4vw,44px);
  flex:1 0 auto;                                  /* grow equally to fill the list height */
  text-decoration:none;color:var(--ink);position:relative;z-index:2;
  border-bottom:1px solid var(--grey-line);padding:clamp(24px,2.7vw,38px) 0;
  transition:padding-left .35s var(--ease),color .3s;
}
.svc__row:hover{padding-left:20px;color:var(--red)}
.svc__name{font-size:clamp(1.25rem,1.75vw,1.85rem);font-weight:700;letter-spacing:-.02em}
.svc__tags{display:flex;flex-wrap:wrap;gap:10px}
.svc__tags i{font-style:normal;font-size:.8rem;letter-spacing:.04em;color:var(--grey);border:1px solid var(--grey-line);padding:6px 14px;border-radius:100px}
.svc__arrow{font-size:1.5rem;line-height:1;color:var(--ink);transition:transform .4s var(--ease),color .3s}
.svc__row:hover .svc__arrow{transform:translateX(6px);color:var(--red)}

/* ============================================================
   CTA / footer banner
   ============================================================ */
.cta{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.cta__media{position:absolute;inset:0;background:url('assets/footercontainer.png') center center/cover no-repeat,#8ec8e8}
/* big faint brand wordmark sitting in the SKY, BEHIND the container: the wordmark is clipped to the
   sky silhouette so it never paints over the container — where the container rises, the word is cut,
   so it reads as tucked between the sky and the container (like the reference). Tuned for ~16:9. */
.cta__watermark{position:absolute;inset:0;z-index:1;pointer-events:none;
  clip-path:polygon(0% 0%, 100% 0%, 100% 29%, 77% 27%, 62% 14%, 0% 36%)}
.cta__watermark span{position:absolute;top:-2%;left:50%;transform:translateX(-50%);
  font-size:clamp(7rem,24vw,23rem);font-weight:900;letter-spacing:-.01em;line-height:1;
  color:rgba(255,255,255,.46);white-space:nowrap}
.cta__overlay{position:absolute;inset:0;z-index:2}
/* Every clickable/text element on the containers shares the container's perspective lean so they
   read as painted onto it (a unified whole). The red front face is a trapezoid: its TOP edge slopes
   -8.1° and its BOTTOM edge -2.3° (measured from footercontainer.png), so the local slope eases from
   ~-8° near the top to ~-2° near the bottom. Each element is rotated to the local slope at ITS OWN
   vertical position — BUT damped to ~70%: a flat 2D rotate reads steeper than true 3D perspective
   text, so the undamped slope looked "crooked". 0.7× keeps the container's proportional lean (top
   steeper → bottom gentler) while sitting calm. JS (ctaSurface→applyTilts) refines these per viewport
   with the same 0.7 factor; the values below are the static fallback (file:// / no-canvas). The sky
   wordmark is intentionally left upright. */
/* nav row sitting ON the container's slanted top edge (no logo) — local slope -7.6° × 0.7 ≈ -5.3° */
.cta__nav{position:absolute;top:33%;left:6%;display:flex;gap:clamp(22px,3vw,58px);transform:rotate(-5.3deg);transform-origin:0 50%}
.cta__nav a{color:#fff;font-size:clamp(.82rem,1vw,1rem);font-weight:500;letter-spacing:.02em;text-decoration:none;opacity:.9;transition:opacity .25s,color .25s}
.cta__nav a:hover{opacity:1}
/* "İletişim" pill button, centred on the container. Local slope at its position is -6.0°; a small
   pill reads a flat rotate even more literally than the wide title, so the damped -4.2° (-6.0×0.7)
   keeps it coplanar with the title below while staying calm for a compact control. */
.cta__quote{position:absolute;top:43%;left:43%;transform:translateX(-50%) rotate(-4.2deg);display:inline-flex;align-items:center;gap:.5em;padding:.72em 1.55em;border:1.5px solid rgba(255,255,255,.85);border-radius:100px;color:#fff;font-weight:600;font-size:clamp(.82rem,.95vw,.98rem);text-decoration:none;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s var(--ease)}
.cta__quote:hover{background:#fff;color:var(--ink)}
/* headline, centred just under the button (kept on the red front face, not spilling past the corner) —
   local slope at this lower-middle position is -4.7° × 0.7 ≈ -3.3° (calmer than the old flat -8°) */
.cta__title{position:absolute;left:43%;top:51%;transform:translateX(-50%) rotate(-3.3deg);text-align:center;margin:0;font-size:clamp(2.2rem,5.2vw,5.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.02;text-shadow:0 2px 30px rgba(0,0,0,.28)}
/* "Ana Sayfa" link, lower-left on the container -> back to hero — near the bottom edge, local slope
   -2.6° × 0.7 ≈ -1.8° */
.cta__home{position:absolute;left:6%;bottom:13.5%;transform:rotate(-1.8deg);transform-origin:0 50%;color:#fff;font-size:clamp(.86rem,1.05vw,1.12rem);font-weight:600;letter-spacing:.01em;text-decoration:none;text-shadow:0 1px 14px rgba(0,0,0,.28);transition:opacity .25s}
.cta__home:hover{opacity:.7}
/* legal row on the bottom (light-orange) container: copyright left, policies right */
.cta__legal{position:absolute;left:5.5%;right:5.5%;bottom:clamp(16px,2.4vw,34px);display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-size:clamp(.72rem,.82vw,.9rem);font-weight:500;letter-spacing:.01em;color:rgba(255,255,255,.95);text-shadow:0 1px 12px rgba(0,0,0,.32)}
/* legal text stays upright (no perspective tilt), balanced at the bottom */
.cta__copyright{display:inline-block}
.cta__policies{display:inline-block}
.cta__policies a{color:inherit;text-decoration:none;transition:opacity .25s}
.cta__policies a:hover{opacity:.65}
/* social row painted on the right container end-face (kept upright; not perspective-tilted) */
.cta__social{position:absolute;z-index:2;right:5.5%;top:51%;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:auto}
.cta__social-label{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.4)}
.cta__social-row{display:flex;gap:12px}
.cta__social-link{width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:#fff;
  background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3);box-shadow:0 14px 30px -18px rgba(0,0,0,.5);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cta__social-link svg{width:20px;height:20px;fill:currentColor;display:block}
.cta__social-link:hover{transform:translateY(-3px);border-color:transparent;box-shadow:0 18px 34px -16px rgba(0,0,0,.55)}
.cta__social-link.is-instagram:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.cta__social-link.is-facebook:hover{background:#1877f2}
.cta__social-link.is-whatsapp:hover{background:#25D366}
.cta__social-link.is-linkedin:hover{background:#0077b5}
/* hide the floating site header while the CTA fills the screen */
.site-header.cta-hidden{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-14px);transition:opacity .35s var(--ease),visibility .35s var(--ease),transform .35s var(--ease)}

/* footer */
.footer{background:var(--ink);color:#fff;padding:50px 0}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.footer__nav{display:flex;gap:26px}
.footer__nav a{font-size:.9rem;color:#bdbdbd;transition:color .25s}
.footer__nav a:hover{color:#fff}
.footer__meta{display:flex;flex-direction:column;gap:4px;text-align:right;font-size:.8rem;color:#8c8c8c}

/* ============================================================
   ANIMATION HELPERS
   ============================================================ */
.reveal-words .word{display:inline-block;opacity:0;transform:translateY(.4em)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero__title{font-size:clamp(4rem,19vw,13rem)}
  .spec-callout{font-size:.76rem}
}
@media (max-width:860px){
  .nav{display:none}
  .nav-toggle{display:none}
  .header-actions .btn--dark{display:none}
  /* pull the burger IN from the very edge so its icon lines up with the brand's left inset (the brand
     sits at the header's padding-inline; the burger has its own 6px inner padding, so subtract it) —
     it was flush to the viewport edge (right:0), looking too far right vs the brand. */
  .header-actions{position:absolute;right:calc(clamp(18px,2.4vw,40px) - 6px);top:50%;transform:translateY(-50%);margin:0}
  .burger{display:inline-flex}
  /* stack the full-bleed hero back into a centred column on small screens. Keep the full-viewport
     min-height (like desktop) so the white hero always fills the screen — otherwise on taller phones
     the content is shorter than the viewport and the red statement below peeks in at the bottom. */
  .hero{min-height:100dvh}
  .hero__grid{position:static;inset:auto;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:108px var(--pad) 56px}
  .hero__title{position:static;white-space:normal;font-size:clamp(3rem,15vw,6rem);line-height:.94}
  /* keep the headline ABOVE the lifted cable (z-index) so the rope tucks BEHIND the letters.
     The stage keeps its base z-index:2 (its transform makes that level effective), so the title
     must sit strictly higher — and the stage is pinned below it. */
  .hero__title--top{top:auto;left:auto;order:1;position:relative;z-index:4}
  .hero__title--bottom{position:static;right:auto;bottom:auto;order:6}
  /* the crane cable starts at the very top edge of the container PNG; lift the stage up so that
     cable tip tucks under the "Hassas" headline (reads as hanging FROM the word, not floating) */
  .hero__stage{position:static;inset:auto;transform:none;order:2;display:block;width:100%;margin-top:-36px;z-index:1}
  .hero__container{width:clamp(280px,86vw,440px);margin-inline:auto}
  /* fade the crane cable's upper run so it dissolves before reaching the "Hassas" headline instead
     of cutting across the letters (the same effect that was removed from the red seam container).
     Applied to the white body + its shadow; the touch-reveal red layer keeps its own radial mask. */
  .hero__container__img--white,
  .hero__container__shadow{
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);
            mask-image:linear-gradient(180deg,transparent 0,#000 24%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
  .seam__pin{width:clamp(280px,86vw,440px)}
  /* the masked yellowman window must track the SMALLER mobile container, not the desktop
     clamp(560px,82vw,1180px) — otherwise its min 560px mask overflows a ~390px screen and the
     container-shaped reveal collapses into a thin horizontal band. Same WIN multipliers, mobile base. */
  .seam__reveal-win{
    /* the raised mobile container sits high (~35% of the viewport), so open the reveal window THERE
       (not the desktop 53% centre) — otherwise the window forms below the container and reads as a
       disconnected, floating panel. */
    --winy:35%;
    -webkit-mask-size:calc(clamp(280px,86vw,440px) * var(--win)) auto;
            mask-size:calc(clamp(280px,86vw,440px) * var(--win)) auto;
  }
  .hero__card{position:static;top:auto;right:auto;order:3;align-self:center}
  .hero__stats{position:static;inset:auto;top:auto;bottom:auto;right:auto;order:4;align-self:center;width:auto;flex-direction:row;justify-content:center;gap:0 34px}
  .hero__stats .stat{padding:8px 0}
  .hero__stats .stat + .stat{border-top:0}
  .hero__stats .stat__row{justify-content:center}
  .hero__cta{position:static;bottom:auto;left:auto;order:5;align-self:center}
  /* (A) cut the oversized desktop spec padding on mobile so the small container fills a
     proportional share of the section instead of floating in a tall white band */
  .spec{padding:clamp(90px,14vw,150px) 0 clamp(70px,12vw,120px)}
  /* (B) trim the empty landing stage a touch */
  .spec__stage{height:clamp(320px,70vw,460px)}
  /* callouts are DROPPED on mobile — the four phrases run as a marquee under the container instead */
  .spec-callout{display:none}
  /* feature marquee: viewport-wide strip dropped well below the container to fill the white below
     (bigger type than the old corner callouts so it carries the empty space) */
  .seam__marquee{display:block;position:absolute;top:150%;left:50%;width:100vw;transform:translateX(-50%);
    overflow:hidden;pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .seam__marquee-track{display:inline-flex;align-items:center;gap:30px;white-space:nowrap;
    will-change:transform;animation:seamMarquee 22s linear infinite}
  .seam__marquee-track span{font-size:1.35rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
  .seam__marquee-dot{color:var(--red);font-size:1.05rem}
  /* MOBILE: fill the viewport and let the content spread vertically (rows grow to fill, like desktop)
     so the section reaches the footer evenly instead of dumping empty white at the bottom. Push the
     head down a touch and enlarge the rows so the whole block breathes. */
  .projects{min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(96px,24vw,150px);padding-bottom:clamp(40px,9vw,64px)}
  .projects__list{display:flex;flex:1;flex-direction:column}
  .projects .shell{max-width:none;padding-inline:var(--pad)}
  .svc__row{grid-template-columns:1fr auto;gap:14px;padding:clamp(30px,7vw,48px) 0}
  .svc__name{font-size:clamp(1.45rem,6vw,2rem)}
  .projects__title{font-size:clamp(1.8rem,7vw,2.4rem)}
  .svc__tags{display:none}
  .svc__preview{display:none}
  .projects__head{grid-template-columns:1fr;gap:14px}
  .projects__head .eyebrow{margin-top:0}
  .projects__intro{gap:18px}
  .projects__intro .btn{align-self:flex-start}
  .footer__inner{flex-direction:column;align-items:flex-start}
  .footer__meta{text-align:left}
  /* CTA overlay: bring the mobile layout in line with DESKTOP — (1) the sky wordmark only PARTLY
     visible (bigger + dipping behind the container so the JS clip cuts its lower part), (2) the nav
     row sitting ANGLED on the container's top edge, (3) İletişim ABOVE the headline (not at the
     bottom). Title/home/legal keep their mobile placement. */
  /* nav + watermark angles/positions below are STATIC FALLBACKS matched to the measured mobile
     cover-crop (container top edge ≈ -7.8°, sitting ~24.7% at the left). JS ctaSurface() refines
     them per-device from the real pixel geometry (see script.js). */
  .cta__nav{top:26%;left:6%;gap:clamp(14px,4vw,24px);flex-wrap:nowrap;max-width:none;transform:rotate(-7.8deg);transform-origin:0 50%}
  .cta__nav a{font-size:clamp(.72rem,3.3vw,.9rem)}
  .cta__quote{top:auto;bottom:43%;left:6%;transform:none}
  .cta__title{top:auto;bottom:28%;left:6%;transform:none;text-align:left;font-size:clamp(1.7rem,8vw,2.6rem)}
  .cta__home{bottom:9%;left:6%;transform:none}
  .cta__copyright,.cta__policies{transform:none}
  .cta__watermark span{font-size:24vw;top:10%;transform:translateX(-50%) rotate(-7.8deg)}
  .cta__legal{left:6%;right:6%;bottom:14px;flex-direction:column;align-items:flex-start;gap:5px;font-size:.7rem}
  /* social: vertical column centred on the right edge so it never collides with the left-stacked text */
  .cta__social{top:50%;right:5%;left:auto;transform:translateY(-50%);align-items:flex-end;gap:0}
  .cta__social-label{display:none}
  .cta__social-row{flex-direction:column;gap:10px}
  .cta__social-link{width:42px;height:42px}
}
@media (max-width:560px){
  .hero__title{font-size:clamp(2.8rem,17vw,5rem)}
  .spec__stage{height:clamp(260px,72vw,380px)}
  .hero__stats{gap:22px}
  .stat__num{font-size:1.5rem}
  .cta__copy{align-items:center;text-align:center}
}

/* ============================================================
   INTRO LOADER OVERLAY (finalized loader — overlay subset only)
   The loader's placeholder hero is intentionally NOT ported; this
   overlay sits above the real hero and lifts away to reveal it.
   ============================================================ */
/* scroll is locked while the intro plays; released by JS on finish */
body.is-loading{overflow:hidden}

/* above the fixed site header (z:80) and mobile menu (z:79) so it fully covers the page */
.loader{position:fixed;inset:0;min-height:100vh;min-height:100lvh;z-index:100;overflow:hidden;background:#e5171a}
.loader__panels{position:absolute;inset:0;display:flex}
/* FLAT red architectural surface — no emboss, no bevel, no 3D */
.panel{position:relative;flex:1 1 0;height:100%;background:#e5171a;will-change:transform}
/* far-left / far-right narrow side panels */
.panel--edge{flex:0 0 clamp(20px,4vw,64px)}
/* hairline-thin, straight, high-contrast near-white vertical separators */
.panel::after{content:"";position:absolute;top:0;bottom:0;right:0;width:1px;background:rgba(255,255,255,.52)}
.panel:last-child::after{display:none}

/* ---- logo lockup (real PNG pieces, assembled at native proportions) ---- */
.loader__logo{position:absolute;top:50%;left:50%;
  transform:translate(-54%,-50%) scale(var(--logo-scale,1));
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
#logoMark{position:relative;width:clamp(240px,30vw,360px);aspect-ratio:1050 / 421}
.mark-piece{position:absolute;bottom:0;height:auto;display:block;   /* bottom:0 -> shared baseline */
  -webkit-user-drag:none;user-select:none;will-change:transform}
.mark-piece--left  {left:0%;        width:21.429%; z-index:1}
.mark-piece--center{left:24.952%;   width:22.667%; z-index:2}
.mark-piece--right {left:48.095%;   width:51.905%; z-index:3}
.loader__tagline{font-family:ui-monospace,'Cascadia Mono','Consolas',monospace;
  font-size:clamp(10px,1.5vw,12px);font-weight:500;letter-spacing:.34em;text-transform:uppercase;
  color:#fff;opacity:.92}

/* logo scales as one unit on smaller screens */
@media (max-width:600px){ .loader__logo{--logo-scale:.78} }
@media (max-width:380px){ .loader__logo{--logo-scale:.66} }
/* MOBILE: the logo lockup is symmetric, so the desktop's -54% (a slight optical nudge left) reads as
   off-centre on a narrow screen. Use a true -50% so it sits dead-centre. Mobile only — desktop intro
   is left untouched. GSAP parses this translate at load → keeps xPercent:-50 through the animation. */
@media (max-width:860px){ .loader__logo{transform:translate(-50%,-50%) scale(var(--logo-scale,1))} }

/* iOS safe-area (viewport-fit=cover) — header'i Dynamic Island/status bar altinda birakma; cover yoksa env()=0 */
.site-header{padding-top:calc(14px + env(safe-area-inset-top))}
.site-header.is-scrolled{padding-top:calc(10px + env(safe-area-inset-top))}