/* ============================================================
   ÇAĞRI VİNÇ — inner pages (pages.css)
   COMPLEMENTS styles.css (tokens + global + header + footer).
   Never overrides existing rules; only adds inner-page patterns
   and per-page sections. Same tokens, type scale, easing, radius.
   ============================================================ */

/* ------------------------------------------------------------
   MOBILE OVERFLOW GUARD
   Inner pages have decorative bleed (CTA watermark, review/value
   marquees) that escapes body{overflow-x:clip} via the fixed-element
   ICB, stretching the fixed header to the document width and shifting
   the logo/hamburger off index's positions. Clip at the root so the
   document width can never exceed the viewport — the fixed header then
   stays viewport-wide and the bar/pill land exactly where index does.
   `clip` (not hidden) doesn't create a scroll container or break the
   page's position:sticky / scroll-pinned sections. Pages already at
   viewport width are unaffected (no-op). ------------------------------------------------------------ */
html{overflow-x:clip}

/* ------------------------------------------------------------
   ROUTE CURTAIN (red column transition) + entry pre-cover
   ------------------------------------------------------------ */
/* flat pre-cover painted before the JS columns take over on arrival */
html.cv-entering{background:#e5171a}
html.cv-entering::before{content:"";position:fixed;inset:0;background:#e5171a;z-index:120;pointer-events:none}
.route-curtain{position:fixed;inset:0;z-index:130;display:flex;pointer-events:none;visibility:hidden}
.route-curtain.is-active{visibility:visible}
.route-curtain__col{flex:1 1 0;height:100%;background:#e5171a;transform:translateY(-101%);will-change:transform}
.route-curtain__col + .route-curtain__col{box-shadow:-1px 0 0 rgba(255,255,255,.5)}

/* ------------------------------------------------------------
   ACTIVE NAV STATE (persistent underline on the current page)
   ------------------------------------------------------------ */
.nav a.is-active{color:var(--red)}
.nav a.is-active::after{width:100%}
.site-header.on-dark:not(.is-scrolled) .nav a.is-active{color:#fff}
.mobile-menu a.is-active{color:var(--red);opacity:1}
.cta__nav a.is-active{opacity:1;text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------
   GENERIC SCROLL REVEAL  ([data-reveal])
   ------------------------------------------------------------ */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
}

/* ------------------------------------------------------------
   SHARED SECTION RHYTHM + small helpers
   ------------------------------------------------------------ */
.section{position:relative;padding:clamp(72px,9vw,140px) 0}
.section--paper{background:var(--paper)}
.section--paper2{background:var(--paper-2)}
.section--ink{background:var(--ink);color:#fff}
.section--red{background:var(--red);color:#fff}
.section__head{max-width:760px;margin-bottom:clamp(34px,4vw,60px)}
.section__head--center{margin-inline:auto;text-align:center}
.section__title{font-size:clamp(1.9rem,3.6vw,3.2rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin-top:.4em}
.section__lead{margin-top:1.1em;font-size:clamp(1rem,1.2vw,1.18rem);line-height:1.55;color:var(--ink-soft);max-width:60ch}
.section--ink .section__lead,.section--red .section__lead{color:rgba(255,255,255,.82)}
.eyebrow--ink{color:var(--ink)}

/* small star eyebrow variant used across pages */
.eyebrow--star{display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.eyebrow--star .star{font-size:.9em;line-height:1}

/* ------------------------------------------------------------
   INNER PAGE HERO  (shared skeleton; content per page)
   ~70vh, paper-2 + radial gradient (matches the home hero ground),
   breadcrumb · eyebrow · giant h1 · single-line intro, with a
   brand accent (container / hook PNG) floated to one side.
   ------------------------------------------------------------ */
.page-hero{position:relative;min-height:clamp(560px,72vh,760px);background:var(--paper-2);
  display:flex;align-items:center;overflow:hidden;padding:clamp(120px,16vh,180px) 0 clamp(56px,8vh,96px)}
.page-hero::before{content:"";position:absolute;inset:0;
  background:radial-gradient(120% 80% at 30% 25%,#fbfaf8 0%,var(--paper-2) 60%,var(--paper-3) 100%)}
.page-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.page-hero__grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(24px,5vw,72px)}

.crumb{display:flex;align-items:center;gap:.55em;font-size:.78rem;font-weight:500;letter-spacing:.04em;color:var(--grey);margin-bottom:clamp(18px,2.4vw,28px)}
.crumb a{color:var(--grey);transition:color .25s}
.crumb a:hover{color:var(--red)}
.crumb__sep{opacity:.6}
.crumb__here{color:var(--ink)}

.page-hero__eyebrow{margin-bottom:18px;display:inline-flex;align-items:center;gap:.5em}
.eyebrow__star{font-size:.9em;line-height:1}
.page-hero__title{font-size:clamp(2.6rem,6.4vw,5.4rem);font-weight:800;letter-spacing:-.045em;line-height:.96;color:var(--ink)}
.page-hero__title .accent{color:var(--red)}
.page-hero__intro{margin-top:clamp(20px,2.6vw,30px);max-width:46ch;font-size:clamp(1.02rem,1.25vw,1.22rem);line-height:1.55;color:var(--ink-soft)}
.page-hero__actions{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:14px}

/* hero brand accent column (suspended container / hook) */
.page-hero__accent{position:relative;justify-self:center;width:100%;max-width:clamp(300px,34vw,480px);pointer-events:none}
.page-hero__accent img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.18))}
/* gentle suspended motion reused from the home hero */
.page-hero__accent--sway{transform-origin:50% 6%;animation:pageSway 7.5s ease-in-out infinite}
.page-hero__accent--float{animation:pageFloat 6.5s ease-in-out infinite}
/* crane variant: a ground vehicle — no suspended motion. On the contact hero it is a
   FULL-BLEED element anchored to the bottom-right, deliberately running off the right and
   bottom edges so the boom reaches toward the headline (see .page-hero--contact below). */
.page-hero__accent--crane{max-width:none}
.page-hero__accent--crane img{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 50px rgba(0,0,0,.22))}

.page-hero--contact{overflow:hidden;min-height:clamp(620px,88vh,900px)}
.page-hero--contact .page-hero__grid{grid-template-columns:1fr}
.page-hero--contact .page-hero__copy{max-width:520px}
.page-hero--contact .page-hero__accent--crane{
  position:absolute;z-index:1;pointer-events:none;margin:0;
  right:clamp(-90px,-4vw,-30px);
  bottom:clamp(-48px,-2.8vw,-18px);
  width:min(58vw,1180px);
}
@keyframes pageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pageSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
@media (hover:none),(pointer:coarse){
  .page-hero__accent--sway,.page-hero__accent--float{animation:none}
}

@media (max-width:860px){
  .page-hero{min-height:auto;padding:124px var(--pad) 56px;text-align:center}
  .page-hero__inner{padding-inline:0}
  .page-hero__grid{grid-template-columns:1fr;gap:32px}
  .crumb{justify-content:center}
  .page-hero__intro{margin-inline:auto}
  .page-hero__actions{justify-content:center}
  .svc-hero__chips{justify-content:center}
  .page-hero__accent{order:-1;max-width:clamp(220px,60vw,320px)}
  .section{padding:clamp(56px,12vw,90px) 0}
  .section__head{margin-inline:auto}
  /* contact hero: echo the desktop diagonal — a big crane bleeding off the RIGHT with the boom
     reaching left, wheels grounded just above the copy; text left-aligned beneath it. Large +
     edge-bleed kills the "small PNG floating in empty space" look. Section overflow:hidden + the
     root overflow-x:clip guard contain the bleed (no horizontal scroll). */
  .page-hero--contact{flex-direction:column;text-align:left}
  .page-hero--contact .page-hero__copy{max-width:none;align-self:flex-start}
  .page-hero--contact .page-hero__eyebrow,
  .page-hero--contact .page-hero__intro,
  .page-hero--contact .page-hero__actions{margin-inline:0;justify-content:flex-start}
  .page-hero--contact .page-hero__accent--crane{
    position:static;order:-1;align-self:flex-end;
    max-width:none;width:140vw;margin:0 -34vw -6% 0;right:auto;bottom:auto}
}

/* ============================================================
   PAGE-SPECIFIC SECTIONS appended below as each page is built
   ============================================================ */

/* ---------- İLETİŞİM (contact) ------------------------------ */
/* signature: a shipping container opens its doors to reveal the form; on a valid submit the
   form retracts back inside, the doors close & lock, then a success badge eases in and resets.
   Driven by CSS-3D door panels (door_left/door_right) over the interior — open/close in ~820ms. */
/* overflow:clip (not hidden) — `hidden` makes this a scroll container whose clip-rect for the
   composited 3D doors goes stale on scroll, cropping the right door's lower half. `clip` doesn't. */
.contact-rig{position:relative;background:var(--paper-2);padding:clamp(80px,11vw,170px) 0 clamp(72px,9vw,130px);overflow:clip}
/* the container sits on top; the form emerges from it and overlaps its lower/front edge */
.ccont{position:relative;max-width:820px;margin-inline:auto;--door-ms:820ms;--door-ease:cubic-bezier(.34,.66,.18,1);--door-deg:62deg}
.ccont__box{position:relative;z-index:1;width:min(100%,760px);margin-inline:auto;perspective:1600px;perspective-origin:50% 44%}
/* 3D container: interior backdrop + two front doors that swing toward the viewer */
.ccont__doors{position:relative;width:100%;transform-style:preserve-3d;-webkit-user-select:none;user-select:none}
.ccont__base{display:block;width:100%;height:auto;border-radius:var(--radius);-webkit-user-drag:none}
.ccont__door{position:absolute;height:89.62%;top:5.06%;
  transition:transform var(--door-ms) var(--door-ease);-webkit-user-drag:none}
.ccont__door--l{left:2.84%;width:46.99%;transform-origin:left center}
.ccont__door--r{left:49.83%;width:46.82%;transform-origin:right center}
.ccont.is-open .ccont__door--l{transform:rotateY(calc(var(--door-deg) * -1))}
.ccont.is-open .ccont__door--r{transform:rotateY(var(--door-deg))}

/* form card sits INSIDE the container opening, framed by the open doors, and tucks
   back in on submit. pulled up so its top lands high in the interior (near the back wall),
   not down by the floor. visibility flips so it leaves the tab order while tucked away. */
.ccont__form{position:relative;z-index:2;width:84%;max-width:560px;margin:-82% auto 0;
  transform-origin:50% 0;transform:scale(.42);opacity:0;visibility:hidden;
  transition:transform .75s var(--ease),opacity .5s var(--ease),visibility .75s var(--ease);
  will-change:transform,opacity}
.ccont.is-open .ccont__form{transform:none;opacity:1;visibility:visible}
/* near-solid bg (no backdrop-filter): blur behind a 3D-transformed sibling makes the doors
   drop out during scroll repaints in Chrome — the .97 white reads the same without that bug. */
.contact-card{position:relative;width:100%;margin-inline:auto;
  background:rgba(255,255,255,.97);
  border:1px solid var(--grey-line);border-radius:calc(var(--radius) + 6px);
  box-shadow:0 50px 90px -50px rgba(0,0,0,.45);
  padding:clamp(28px,4vw,56px)}
.contact-card__title{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.contact-card__sub{margin-top:.6em;color:var(--ink-soft);font-size:clamp(.96rem,1.1vw,1.08rem);max-width:52ch}

.cform{margin-top:clamp(26px,3vw,40px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,30px) clamp(20px,2.4vw,34px)}
.cform__field{position:relative;display:flex;flex-direction:column}
.cform__field--full{grid-column:1 / -1}
/* floating label input */
.cform__input,.cform__textarea,.cform__select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1.5px solid var(--grey-line);padding:22px 0 10px;border-radius:0;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.cform__textarea{resize:vertical;min-height:120px}
.cform__select{appearance:none;cursor:pointer}
.cform__field label{position:absolute;left:0;top:22px;font-size:1rem;color:var(--grey);
  pointer-events:none;transform-origin:0 0;
  transition:transform .28s var(--ease),color .28s var(--ease)}
.cform__input:focus,.cform__textarea:focus,.cform__select:focus{outline:none;border-bottom-color:var(--red);box-shadow:0 1px 0 0 var(--red),0 14px 30px -22px rgba(229,35,28,.55)}
.cform__input:focus + label,
.cform__textarea:focus + label,
.cform__select:focus + label,
.cform__input:not(:placeholder-shown) + label,
.cform__textarea:not(:placeholder-shown) + label,
.cform__select:valid + label{transform:translateY(-20px) scale(.74);color:var(--red)} /* select floats up on focus or once a service is picked (:valid) */
/* valid-field hook check */
.cform__ok{position:absolute;right:0;top:24px;width:18px;height:18px;opacity:0;transform:scale(.5);
  transition:opacity .3s var(--ease),transform .4s cubic-bezier(.34,1.5,.5,1);color:var(--red)}
.cform__field--valid .cform__ok{opacity:1;transform:scale(1)}
.cform__submit{grid-column:1 / -1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.cform__note{font-size:.8rem;color:var(--grey);max-width:38ch}
/* submit button: arrow morphs to a rising hook on success */
.cform__btn{position:relative;overflow:hidden}
.cform__btn .ico-arrow,.cform__btn .ico-hook{display:inline-block;transition:transform .45s var(--ease),opacity .35s var(--ease)}
.cform__btn .ico-hook{position:absolute;right:1.5em;opacity:0;transform:translateY(14px)}
.cform.is-sent .cform__btn .ico-arrow{transform:translateY(-14px);opacity:0}
.cform.is-sent .cform__btn .ico-hook{transform:translateY(0);opacity:1}
.cform__success{grid-column:1/-1;display:none;align-items:center;gap:14px;color:var(--ink);
  background:rgba(229,35,28,.07);border:1px solid rgba(229,35,28,.25);border-radius:12px;
  padding:16px 20px;font-weight:600}
.cform.is-sent .cform__success{display:flex;animation:cformPop .5s var(--ease)}
@keyframes cformPop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:680px){
  /* MOBILE: keep the DESKTOP format — natural-aspect container with real 3D swing-doors, form
     framed inside. On a phone the text can't shrink, so the form is taller than a viewport-width
     square container would be. Instead of cropping/stretching the container (which made the doors
     look fake), let the container BLEED past the side edges: at its natural square aspect it then
     grows tall enough to frame the emerging form, and the open doors keep real perspective and
     hardware (just trimmed by the screen edge, like the desktop crop). contact-rig{overflow:clip}
     + the root overflow-x:clip guard contain the bleed (no horizontal scroll). Short fields stay
     two-up so the form is compact. */
  .ccont__box{width:135vw;max-width:none;margin:0;position:relative;left:50%;transform:translateX(-50%)}
  /* pull the card up so it sits vertically centred in the (bled, taller-than-viewport) container
     rather than hanging out the bottom — the % is relative to .ccont's width, not the box's */
  .ccont__form{width:min(86%,86vw);max-width:none;margin:-152% auto 0}
  /* keep Ad Soyad/Telefon and E-posta/Hizmet side-by-side; textarea stays full via --full */
  .cform{grid-template-columns:1fr 1fr;gap:18px 16px}
  /* extend the white tail below the container so it eases into the red section below instead of
     cutting to red right under the container floor */
  .contact-rig{padding-bottom:clamp(120px,26vw,160px)}
}

/* success badge — eases in over the locked container doors, then resets */
.ccont__sent{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;
  background:rgba(20,20,22,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.ccont.is-sent .ccont__sent{opacity:1;visibility:visible}
.ccont__sent-badge{width:clamp(56px,8vw,76px);height:clamp(56px,8vw,76px);border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--red);box-shadow:0 0 0 8px rgba(229,35,28,.22),0 18px 40px -16px rgba(229,35,28,.7);
  transform:scale(.4);transition:transform .5s cubic-bezier(.34,1.5,.5,1)}
.ccont.is-sent .ccont__sent-badge{transform:scale(1)}
.ccont__sent-badge svg{width:54%;height:54%}
.ccont__sent-check{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s .25s var(--ease)}
.ccont.is-sent .ccont__sent-check{stroke-dashoffset:0}
.ccont__sent-title{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:800;letter-spacing:-.03em;color:#fff}
.ccont__sent-text{font-size:clamp(.92rem,1.2vw,1.1rem);line-height:1.5;color:rgba(255,255,255,.88)}
@media (prefers-reduced-motion:reduce){
  .ccont__form{transition:none}
  .ccont__door{transition:none}
  .ccont__sent,.ccont__sent-badge,.ccont__sent-check{transition:none}
}

/* contact info panel (red seam band) + map */
.contact-info{position:relative;background:var(--red);color:#fff;overflow:hidden}
.contact-info::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 0% 0%,rgba(255,255,255,.14),transparent 55%);pointer-events:none}
.contact-info__grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,70px);align-items:center}
.contact-info__list{display:flex;flex-direction:column;gap:clamp(14px,1.8vw,22px)}
.cinfo{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(255,255,255,.22);color:#fff;transition:transform .35s var(--ease);will-change:transform}
.contact-info__list .cinfo:first-child{border-top:0}
a.cinfo:hover{transform:translateX(8px)}
.cinfo__ico{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:9px;background:rgba(255,255,255,.08)}
.cinfo__ico svg{width:17px;height:17px}
.cinfo__k{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.cinfo__v{display:block;font-size:clamp(1.05rem,1.4vw,1.3rem);font-weight:700;letter-spacing:-.01em;margin-top:3px}
.cinfo__meta{display:block;font-size:.85rem;opacity:.78;margin-top:2px}
/* WhatsApp value reads as an action (no duplicate number); arrow nudges on row hover */
.cinfo__v--action{display:inline-flex;align-items:center;gap:.4em}
.cinfo__arrow{display:inline-block;transition:transform .35s var(--ease)}
a.cinfo:hover .cinfo__arrow{transform:translateX(5px)}
.contact-info__title{font-size:clamp(1.7rem,3vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;margin-bottom:.5em}

.contact-map{position:relative;border-radius:var(--radius);overflow:hidden;min-height:0;
  contain:paint;transform:translateZ(0);backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.25);box-shadow:0 40px 80px -45px rgba(0,0,0,.55)}
.contact-map iframe{width:100%;height:clamp(280px,38vw,420px);border:0;display:block}
.contact-map__btn{position:absolute;left:16px;bottom:16px;z-index:2}
/* location label as a header BAR above the map → label + map read as one unified block */
.contact-map__label{display:flex;align-items:center;gap:.5em;
  padding:14px 20px;background:#fff;color:var(--ink);
  font-size:.92rem;font-weight:700;letter-spacing:-.01em;
  border-bottom:1px solid var(--grey-line)}
.contact-map__label svg{flex:none;width:16px;height:16px;display:block}

@media (max-width:860px){
  .contact-info__grid{grid-template-columns:1fr;gap:30px}
}

/* ---------- HİZMETLER (services) ---------------------------- */
/* signature: a pinned section pans 4 full-screen service panels
   horizontally as you scroll vertically, with a lateral progress
   rail; a hero whose chips light the matching service image behind
   the copy; a hover-preview detail list; a glass process row; a
   right slide-over drawer with the full service breakdown. */

/* ----- hero: chips + ghost image ----- */
.page-hero--services{overflow:hidden}
.page-hero--services .page-hero__grid{grid-template-columns:1fr}
.page-hero--services .page-hero__copy{max-width:780px;position:relative;z-index:2}
/* ghost layer: faint service photos behind the copy, one lit at a time on chip hover */
.svc-hero__ghost{position:absolute;inset:0;z-index:1;pointer-events:none}
.svc-hero__ghost img{position:absolute;top:50%;right:clamp(-40px,-2vw,0px);transform:translateY(-50%) scale(1.04);
  width:min(54vw,720px);height:78%;object-fit:cover;border-radius:calc(var(--radius) + 8px);
  opacity:0;transition:opacity .7s var(--ease),transform .9s var(--ease);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.svc-hero__ghost img.is-active{opacity:.22;transform:translateY(-50%) scale(1)}
/* premium blueprint slideshow — decorative technical wash on the right of the hero */
.services-hero-blueprint{position:absolute;top:50%;right:clamp(20px,5vw,110px);transform:translateY(-50%);
  z-index:1;pointer-events:none;width:min(48vw,660px);height:82%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%);mask-image:linear-gradient(90deg,transparent 0%,#000 34%)}
.services-hero-blueprint__item{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center center;
  mix-blend-mode:multiply;opacity:0;transition:opacity 1.4s var(--ease);will-change:opacity}
.services-hero-blueprint__item.is-active{opacity:.42;animation:bpbreath 9s ease-in-out infinite}
@keyframes bpbreath{0%,100%{transform:scale(1) translateY(0)}50%{transform:scale(1.015) translateY(-6px)}}

.svc-hero__chips{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;gap:12px}
.svc-chip{font:inherit;font-size:.92rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  background:rgba(255,255,255,.6);border:1px solid var(--grey-line);border-radius:100px;
  padding:.7em 1.3em;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.svc-chip:hover,.svc-chip:focus-visible{transform:translateY(-2px);color:#fff;background:var(--red);border-color:var(--red);
  box-shadow:0 14px 30px -14px rgba(229,35,28,.6);outline:none}
.svc-hero__scrollcue{position:absolute;left:50%;bottom:clamp(18px,3vh,34px);transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey)}
.svc-hero__scrollcue i{display:block;width:1px;height:26px;background:linear-gradient(var(--red),transparent);animation:scrollcue 1.8s var(--ease) infinite}
@keyframes scrollcue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ----- ★ filmstrip (pinned horizontal pan) ----- */
.filmstrip{position:relative;background:var(--ink);color:#fff}
.filmstrip__viewport{height:100vh;overflow:hidden;position:relative}
.filmstrip__track{display:flex;height:100%;will-change:transform}
.fs-panel{position:relative;flex:0 0 100vw;width:100vw;height:100%;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(24px,5vw,80px);padding:clamp(96px,13vh,150px) clamp(28px,7vw,120px) clamp(64px,9vh,110px);
  overflow:hidden}
/* giant ghost number behind the body copy */
.fs-panel__num{position:absolute;right:clamp(-10px,2vw,40px);bottom:-.18em;z-index:0;
  font-size:clamp(14rem,30vw,34rem);font-weight:900;line-height:.8;letter-spacing:-.04em;
  color:rgba(255,255,255,.05);pointer-events:none}
.fs-panel__media{position:relative;z-index:1;height:min(64vh,560px);border-radius:calc(var(--radius) + 8px);
  overflow:hidden;box-shadow:0 60px 110px -40px rgba(0,0,0,.7)}
.fs-panel__media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.08);transition:transform 1.1s var(--ease)}
.fs-panel.is-current .fs-panel__media img{transform:scale(1)}
.fs-panel__body{position:relative;z-index:2;max-width:46ch}
.fs-panel__kicker{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:.6em}
.fs-panel__kicker::before{content:"";width:30px;height:1px;background:var(--red)}
.fs-panel__title{margin-top:.5em;font-size:clamp(2rem,4.4vw,3.8rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.fs-panel__desc{margin-top:1em;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55;color:rgba(255,255,255,.78)}
.fs-panel__specs{margin-top:1.5em;display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.fs-panel__specs li{font-size:.82rem;letter-spacing:.02em;color:#fff;
  border:1px solid rgba(255,255,255,.28);border-radius:100px;padding:7px 16px}
.fs-panel__more{margin-top:1.9em}
/* spec chips & cta draw in once the panel becomes current */
.fs-panel__specs li,.fs-panel__more{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.fs-panel.is-current .fs-panel__specs li,.fs-panel.is-current .fs-panel__more{opacity:1;transform:none}
.fs-panel.is-current .fs-panel__specs li:nth-child(2){transition-delay:.08s}
.fs-panel.is-current .fs-panel__specs li:nth-child(3){transition-delay:.16s}
.fs-panel.is-current .fs-panel__specs li:nth-child(4){transition-delay:.24s}
.fs-panel.is-current .fs-panel__more{transition-delay:.3s}

/* lateral progress rail (the home seam__rail's horizontal twin) */
.filmstrip__progress{position:absolute;left:50%;top:clamp(64px,9vh,96px);transform:translateX(-50%);z-index:5;
  width:min(46vw,440px);display:flex;align-items:center;gap:18px}
.filmstrip__count{font-size:.8rem;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.6);white-space:nowrap}
.filmstrip__count b{color:#fff;font-weight:800}
.filmstrip__rail{position:relative;flex:1;height:14px}
.filmstrip__rail-track{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:rgba(255,255,255,.22);border-radius:2px}
.filmstrip__rail-fill{position:absolute;left:0;top:50%;height:2px;width:0;transform:translateY(-50%);background:var(--red);border-radius:2px}
.filmstrip__rail-tick{position:absolute;top:50%;width:7px;height:7px;border-radius:1.5px;transform:translate(-50%,-50%);background:rgba(255,255,255,.4)}
.filmstrip__rail-thumb{position:absolute;left:0;top:50%;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)}

/* ----- detail list (hover preview) ----- */
.svc-list{position:relative;border-top:1px solid var(--grey-line)}
.svc-list__row{display:grid;grid-template-columns:auto 1fr 1.4fr auto;align-items:center;gap:clamp(18px,2.4vw,44px);
  text-decoration:none;color:var(--ink);position:relative;z-index:2;
  border-bottom:1px solid var(--grey-line);padding:clamp(22px,2.7vw,38px) 0;
  transition:padding-left .35s var(--ease),color .3s}
.svc-list__row:hover{padding-left:18px;color:var(--red)}
.svc-list__no{font-size:.86rem;font-weight:700;letter-spacing:.08em;color:var(--grey)}
.svc-list__row:hover .svc-list__no{color:var(--red)}
.svc-list__name{font-size:clamp(1.2rem,1.75vw,1.85rem);font-weight:700;letter-spacing:-.02em}
.svc-list__tags{display:flex;flex-wrap:wrap;gap:9px}
.svc-list__tags i{font-style:normal;font-size:.78rem;letter-spacing:.03em;color:var(--grey);border:1px solid var(--grey-line);padding:6px 13px;border-radius:100px}
.svc-list__arrow{font-size:1.5rem;line-height:1;color:var(--ink);transition:transform .4s var(--ease),color .3s}
.svc-list__row:hover .svc-list__arrow{transform:translateX(6px);color:var(--red)}
/* cursor-following floating preview (page-scoped twin of the home svc__preview) */
.svc-list__preview{position:absolute;top:0;left:0;width:clamp(180px,17vw,250px);aspect-ratio:4/5;
  transform:translate(-50%,-50%);opacity:0;visibility:hidden;pointer-events:none;z-index:6;
  transition:opacity .4s var(--ease),visibility .4s var(--ease);will-change:transform,opacity}
.svc-list.is-previewing .svc-list__preview{opacity:1;visibility:visible}
.svc-list__preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:14px;box-shadow:0 42px 80px -28px rgba(0,0,0,.5);
  opacity:0;transform-origin:50% 80%;transform:rotate(var(--tilt,0deg)) scale(.6);
  transition:opacity .42s var(--ease),transform .6s cubic-bezier(.34,1.4,.5,1)}
.svc-list__preview img.is-active{opacity:1;transform:rotate(var(--tilt,0deg)) scale(1)}
.svc-list__preview img[data-key="konteyner"]{--tilt:5deg}
.svc-list__preview img[data-key="insaat"]{--tilt:-5deg}
.svc-list__preview img[data-key="agir"]{--tilt:5deg}
.svc-list__preview img[data-key="sepetli"]{--tilt:-5deg}

/* ----- process (glass step boxes) ----- */
.process__grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);counter-reset:pstep}
.process__step{position:relative;counter-increment:pstep;padding:clamp(26px,2.6vw,38px) clamp(22px,2vw,30px);
  /* the red accent bar lives in the background so ::before is free for the ghost number */
  background-color:rgba(255,255,255,.55);
  background-image:linear-gradient(var(--red),var(--red));
  background-repeat:no-repeat;background-position:clamp(22px,2vw,30px) 0;background-size:34px 3px;
  border:1px solid var(--grey-line);border-radius:var(--radius);
  box-shadow:0 30px 60px -42px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease),background-color .45s var(--ease),background-size .5s var(--ease)}
.process__step:hover{transform:translateY(-8px);box-shadow:0 48px 86px -40px rgba(0,0,0,.5);
  border-color:rgba(229,35,28,.4);background-color:rgba(255,255,255,.92);background-size:66px 3px}
/* big ghost step number that wakes up on hover */
.process__step::before{content:counter(pstep,decimal-leading-zero);position:absolute;z-index:0;
  right:clamp(12px,1.4vw,22px);bottom:clamp(8px,1vw,18px);
  font-size:clamp(3rem,4.6vw,4.8rem);font-weight:900;line-height:.78;letter-spacing:-.04em;
  color:rgba(20,22,28,.05);pointer-events:none;
  transition:color .5s var(--ease),transform .5s var(--ease)}
.process__step:hover::before{color:rgba(229,35,28,.11);transform:translateY(-6px)}
.process__no{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:clamp(38px,3vw,46px);height:clamp(38px,3vw,46px);border-radius:50%;
  border:1.6px solid rgba(229,35,28,.35);font-size:.9rem;font-weight:800;letter-spacing:.02em;color:var(--red);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .45s var(--ease)}
.process__step:hover .process__no{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.08) rotate(-4deg)}
.process__title{position:relative;z-index:1;margin-top:.7em;font-size:clamp(1.15rem,1.6vw,1.5rem);font-weight:800;letter-spacing:-.02em;
  transition:transform .45s var(--ease)}
.process__step:hover .process__title{transform:translateX(3px)}
.process__text{position:relative;z-index:1;margin-top:.55em;font-size:.96rem;line-height:1.5;color:var(--ink-soft)}
/* connecting arrow between steps — gently flows to signal the sequence */
.process__step:not(:last-child)::after{content:"→";position:absolute;right:calc(-1 * clamp(11px,1.1vw,16px));top:50%;
  color:var(--grey);font-size:1.1rem;z-index:2;animation:pflow 1.9s var(--ease) infinite;transition:color .4s var(--ease)}
.process__step:nth-child(2)::after{animation-delay:.25s}
.process__step:nth-child(3)::after{animation-delay:.5s}
.process__step:hover::after{color:var(--red)}
@keyframes pflow{0%,100%{transform:translate(0,-50%)}50%{transform:translate(5px,-50%)}}

/* ----- CTA band ----- */
.svc-cta{position:relative;background:var(--red);color:#fff;overflow:hidden;padding:clamp(56px,8vw,104px) 0}
.svc-cta::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 100% 0%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.svc-cta__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.svc-cta__copy{max-width:18ch}
.svc-cta__title{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.04;margin-top:.4em}
.svc-cta__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ----- service drawer (right slide-over) ----- */
.svc-drawer{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none}
.svc-drawer.is-open{visibility:visible;pointer-events:auto}
.svc-drawer__scrim{position:absolute;inset:0;background:rgba(15,15,17,.58);opacity:0;transition:opacity .45s var(--ease)}
.svc-drawer.is-open .svc-drawer__scrim{opacity:1}
.svc-drawer__panel{position:absolute;top:0;right:0;height:100%;width:min(92vw,520px);
  background:var(--paper);box-shadow:-40px 0 90px -40px rgba(0,0,0,.55);
  padding:clamp(28px,4vw,56px);overflow-y:auto;overflow-x:hidden;transform:translateX(100%);transition:transform .5s var(--ease)}
/* hide scrollbar chrome on the drawer + equipment view (scroll still works) */
.svc-drawer__panel,.svc-eq{scrollbar-width:none;-ms-overflow-style:none}
.svc-drawer__panel::-webkit-scrollbar,.svc-eq::-webkit-scrollbar{width:0;height:0;display:none}
.svc-drawer.is-open .svc-drawer__panel{transform:translateX(0)}
.svc-drawer__close{position:absolute;top:18px;right:18px;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);background:var(--paper-2);border:1px solid var(--grey-line);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.svc-drawer__close:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.svc-drawer__close svg{width:20px;height:20px}
.svc-drawer__kicker{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-top:.4em}
.svc-drawer__title{margin-top:.4em;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.04}
.svc-drawer__desc{margin-top:1em;font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}
.svc-drawer__media{margin-top:1.4em;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/10}
.svc-drawer__media img{width:100%;height:100%;object-fit:cover;display:block}
.svc-drawer__list{margin-top:1.6em;list-style:none;display:flex;flex-direction:column;gap:2px}
.svc-drawer__list li{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--grey-line);font-weight:600;color:var(--ink)}
.svc-drawer__list li::before{content:"";flex:none;width:18px;height:18px;border-radius:5px;background:rgba(229,35,28,.12);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%23e5231c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center}
.svc-drawer__cta{margin-top:1.8em}
.svc-drawer__close{z-index:6}

/* ----- drawer › equipment sub-layer (slides over the detail view, same panel) ----- */
.svc-eq{position:absolute;inset:0;z-index:4;background:var(--paper);
  padding:clamp(28px,4vw,56px);padding-top:clamp(64px,7vw,80px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);visibility:hidden;
  transition:transform .45s var(--ease),visibility .45s var(--ease)}
.svc-drawer.is-eq .svc-eq{transform:translateX(0);visibility:visible}
.svc-eq__back{display:inline-flex;align-items:center;gap:8px;
  background:none;border:none;cursor:pointer;font:inherit;font-size:.9rem;font-weight:600;
  color:var(--ink-soft);padding:6px 0;margin-bottom:.5em;transition:color .25s var(--ease)}
.svc-eq__back:hover,.svc-eq__back:focus-visible{color:var(--red)}
.svc-eq__back span{font-size:1.15em;line-height:1}
.svc-eq__title{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.03em;line-height:1.06}
.svc-eq__sub{margin-top:.55em;font-size:.98rem;line-height:1.55;color:var(--ink-soft)}
.svc-eq__grid{margin-top:1.5em;display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px)}
.svc-eq__cta{margin-top:1.8em}

.eq-card{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--grey-line);border-radius:var(--radius);overflow:hidden;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.eq-card:hover{border-color:rgba(229,35,28,.45);box-shadow:0 18px 40px -28px rgba(20,22,28,.42);transform:translateY(-3px)}
.eq-card__media{position:relative;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.eq-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.eq-card__media.is-broken{display:grid;place-items:center}
.eq-card__media.is-broken::after{content:"";width:44px;height:44px;opacity:.4;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l9-3v3M5 8h9m0-3 6 3v13M9 21v-4h4v4'/%3E%3C/svg%3E")}
.eq-card__body{display:flex;flex-direction:column;gap:5px;padding:clamp(12px,1.4vw,16px)}
.eq-card__type{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.eq-card__title{font-size:1rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.eq-card__desc{font-size:.85rem;line-height:1.5;color:var(--ink-soft)}
.eq-card__badge{align-self:flex-start;margin-top:3px;font-size:.64rem;font-weight:700;letter-spacing:.04em;
  padding:.32em .72em;border-radius:999px;background:rgba(229,35,28,.1);color:var(--red)}

@media (max-width:560px){
  .svc-eq__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .svc-eq{transition:none}
}

/* ------------------------------------------------------------
   OPERASYON SİMÜLATÖRÜ — premium configurator
   ------------------------------------------------------------ */
.simx__steps{display:flex;flex-wrap:wrap;gap:clamp(14px,2.6vw,42px);list-style:none;
  margin:clamp(26px,4vw,46px) 0 clamp(28px,4vw,44px);padding:0}
.simx__steps li{display:flex;align-items:center;gap:11px;font-size:.94rem;font-weight:600;
  color:var(--ink-soft);opacity:.45;transition:opacity .35s var(--ease),color .35s var(--ease)}
.simx__steps li b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  border:1.5px solid var(--grey-line);font-size:.78rem;font-weight:700;transition:all .35s var(--ease)}
.simx__steps li.is-active{opacity:1;color:var(--ink)}
.simx__steps li.is-active b{background:var(--red);border-color:var(--red);color:#fff}
.simx__steps li.is-done{opacity:1}
.simx__steps li.is-done b{border-color:var(--red);color:var(--red)}

.simx__stage{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.simx__stage[hidden]{display:none}
.simx__stage:not(.is-in){opacity:0;transform:translateY(16px)}
.simx__stage.is-in{opacity:1;transform:none}

/* step 1 — load cards */
.simx__loads{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px)}
.load-card{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  gap:clamp(22px,2.6vw,38px);min-height:clamp(146px,14vw,194px);padding:clamp(18px,1.9vw,26px);
  background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);
  text-align:left;font:inherit;color:var(--ink);cursor:pointer;position:relative;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.load-card__icon{width:clamp(34px,3vw,46px);height:clamp(34px,3vw,46px);color:var(--red);transition:color .3s var(--ease)}
.load-card__icon svg{width:100%;height:100%}
.load-card__name{font-size:clamp(.98rem,1.05vw,1.12rem);font-weight:700;letter-spacing:-.01em;line-height:1.2}
.load-card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 26px 50px -30px rgba(20,22,28,.45);border-color:rgba(229,35,28,.45)}
.load-card:active{transform:translateY(-2px) scale(1.005)}
.load-card.is-selected{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 28px 60px -28px rgba(20,22,28,.6)}
.load-card.is-selected .load-card__icon{color:#fff}
.simx__loads.has-selection .load-card:not(.is-selected){opacity:.42}
.simx__loads.has-selection .load-card:not(.is-selected):hover{opacity:1}

/* step 2 — operation */
.simx__chosen{display:inline-flex;align-items:baseline;gap:11px;margin-bottom:clamp(24px,3vw,40px);
  padding:10px 18px;border-radius:999px;background:var(--paper-2);border:1px solid var(--grey-line)}
.simx__chosen-label{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.simx__chosen strong{font-size:1rem;font-weight:800;color:var(--ink)}
.simx__questions{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,36px)}
.simx__q{display:flex;flex-direction:column;gap:14px}
.simx__q-label{display:flex;align-items:center;gap:11px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.simx__q-label b{font-size:.74rem;font-weight:700;letter-spacing:.1em;color:var(--red)}
.seg{display:inline-flex;flex-wrap:wrap;gap:8px}
.seg__opt{font:inherit;font-size:.95rem;font-weight:600;color:var(--ink-soft);cursor:pointer;
  padding:.7em 1.35em;border-radius:999px;background:var(--paper);border:1px solid var(--grey-line);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.seg__opt:hover{border-color:rgba(229,35,28,.5);color:var(--ink)}
.seg__opt.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.simx__nav{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px)}
.simx__back{display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;
  font:inherit;font-weight:600;color:var(--ink-soft);transition:color .25s var(--ease)}
.simx__back:hover{color:var(--red)}
.simx__go[disabled]{opacity:.4;pointer-events:none}

/* step 3 — recommendation (cinematic dark panel) */
.simx__result{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  border-radius:clamp(18px,2vw,28px);padding:clamp(28px,4vw,56px);box-shadow:0 50px 100px -50px rgba(0,0,0,.6)}
.simx__result-kicker{font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.simx__result-title{margin-top:.5em;font-size:clamp(1.7rem,3.2vw,2.7rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.simx__result-grid{margin-top:clamp(24px,3vw,40px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,48px);align-items:start}
.simx__result-sub{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px}
.simx-rec{display:flex;align-items:center;gap:16px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.simx-rec + .simx-rec{margin-top:10px}
.simx-rec__media{flex:none;width:88px;height:66px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.08)}
.simx-rec__media img{width:100%;height:100%;object-fit:cover;display:block}
.simx-rec__media.is-broken{display:grid;place-items:center}
.simx-rec__media.is-broken::after{content:"";width:30px;height:30px;opacity:.5;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M5 21V8l9-3v3M5 8h9m0-3 6 3v13M9 21v-4h4v4'/%3E%3C/svg%3E")}
.simx-rec__txt{display:flex;flex-direction:column;gap:3px}
.simx-rec__txt b{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.simx-rec__txt i{font-style:normal;font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.simx__meta-row{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.simx__meta-row:first-child{border-top:none;padding-top:0}
.simx__meta-row span{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.simx__meta-row strong{font-size:1.02rem;font-weight:700}
.simx__result-why{margin-top:18px;font-size:.98rem;line-height:1.6;color:rgba(255,255,255,.72)}
.simx__result-actions{margin-top:clamp(26px,3vw,40px);display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.simx__restart{background:none;border:none;cursor:pointer;font:inherit;font-weight:600;color:rgba(255,255,255,.6);transition:color .25s var(--ease)}
.simx__restart:hover{color:#fff}

@media (max-width:900px){
  .simx__loads{grid-template-columns:repeat(2,1fr)}
  .simx__result-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  .simx__loads{grid-template-columns:1fr 1fr;gap:10px}
  .load-card{min-height:130px;gap:18px}
  .seg{width:100%}
  .seg__opt{flex:1 1 auto;text-align:center}
  .simx__nav{flex-direction:column-reverse;align-items:stretch}
  .simx__go{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .simx__stage{transition:none}
  .load-card:hover{transform:none}
}

/* ------------------------------------------------------------
   HİZMETLER — responsive / reduced motion
   ------------------------------------------------------------ */
@media (max-width:960px){
  .fs-panel{grid-template-columns:1fr;align-content:center;gap:clamp(20px,4vw,36px);
    padding:clamp(88px,12vh,120px) clamp(24px,6vw,56px) clamp(56px,8vh,90px)}
  .fs-panel__media{height:min(40vh,320px);order:-1}
  .process__grid{grid-template-columns:repeat(2,1fr)}
  .process__step:not(:last-child)::after{display:none}
  /* tablet: keep the blueprint but smaller & fainter */
  .services-hero-blueprint{width:min(52vw,460px);height:70%}
  .services-hero-blueprint__item.is-active{opacity:.3}
}
@media (max-width:860px){
  .svc-hero__scrollcue{display:none}
}
/* mobile: hide the blueprint entirely so it never crowds the copy */
@media (max-width:680px){
  .services-hero-blueprint{display:none}
}
@media (max-width:680px){
  .svc-hero__chips{gap:10px}
  .svc-chip{font-size:.84rem;padding:.6em 1.1em}
  .svc-list__row{grid-template-columns:auto 1fr auto;row-gap:10px}
  .svc-list__tags{grid-column:1 / -1}
  .process__grid{grid-template-columns:1fr}
  .svc-cta__inner{flex-direction:column;align-items:flex-start}
}

/* mobile / no-pin fallback: filmstrip becomes a vertical stack of full-width panels */
.filmstrip.is-static .filmstrip__viewport{height:auto;overflow:visible}
.filmstrip.is-static .filmstrip__track{display:block;height:auto}
.filmstrip.is-static .fs-panel{width:100%;height:auto;min-height:auto}
.filmstrip.is-static .fs-panel + .fs-panel{border-top:1px solid rgba(255,255,255,.1)}
.filmstrip.is-static .fs-panel__num{font-size:clamp(9rem,40vw,16rem)}
.filmstrip.is-static .filmstrip__progress{display:none}
.filmstrip.is-static .fs-panel__specs li,
.filmstrip.is-static .fs-panel__more,
.filmstrip.is-static .fs-panel__media img{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .svc-hero__scrollcue i{animation:none}
  .fs-panel__media img{transform:none}
  .svc-drawer__panel,.svc-drawer__scrim{transition:none}
  .process__step:not(:last-child)::after{animation:none;transform:translateY(-50%)}
  /* only the first blueprint stays, no breathing, no auto-rotate */
  .services-hero-blueprint__item{transition:none;animation:none}
}

/* ---------- HAKKIMIZDA (about) ------------------------------ */
/* signature: a vertical crane rope whose hook descends on scroll;
   each milestone "unspools" from the rope, alternating left/right.
   Plus a two-column story, a red panel-flip values seam with a slow
   value-card marquee, big counters, and hover-lift team cards. */

/* ABOUT hero: a brand video fills the ENTIRE hero as a cinematic background (replaces the old
   hanging-rope accent). The copy sits over it in white, with a left-weighted dark scrim so the
   text stays readable while the video remains visible on the right. */
.page-hero--about .page-hero__grid{grid-template-columns:1fr}
.page-hero--about .page-hero__copy{max-width:640px;position:relative;z-index:2}
.page-hero__media{position:absolute;z-index:1;inset:0;margin:0;pointer-events:none}
.page-hero__media video{width:100%;height:100%;object-fit:cover;display:block}
.page-hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,16,19,.84) 0%,rgba(14,16,19,.58) 40%,rgba(14,16,19,.2) 70%,rgba(14,16,19,.34) 100%)}
/* copy turns light over the video */
.page-hero--about .page-hero__title{color:#fff}
.page-hero--about .page-hero__intro{color:rgba(255,255,255,.84)}
.page-hero--about .crumb,.page-hero--about .crumb a{color:rgba(255,255,255,.72)}
.page-hero--about .crumb__here{color:#fff}
.page-hero--about .crumb a:hover{color:var(--red)}
@media (max-width:860px){
  /* MOBILE: full-bleed background too, with a centred (vertical) scrim under the centred copy */
  .page-hero--about .page-hero__copy{max-width:none}
  .page-hero__media::after{background:linear-gradient(180deg,rgba(14,16,19,.5) 0%,rgba(14,16,19,.74) 100%)}
}

/* ----- story / mission (two columns) ----- */
.about-mission__grid{display:grid;grid-template-columns:0.95fr 1.2fr;gap:clamp(28px,5vw,80px);align-items:start}
.about-mission__title{font-size:clamp(1.8rem,3.4vw,3rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin-top:.4em}
/* story image fills the space below the heading (mirrors EFC's about image + experience badge) */
.about-mission__media{position:relative;margin:clamp(28px,3.2vw,48px) 0 0;border-radius:20px;overflow:hidden;
  box-shadow:0 40px 80px -50px rgba(0,0,0,.5)}
.about-mission__media img{width:100%;height:100%;display:block;aspect-ratio:4/5;object-fit:cover;object-position:32% 50%}
.about-mission__badge{position:absolute;left:0;bottom:clamp(18px,2.4vw,30px);display:flex;flex-direction:column;gap:3px;
  background:var(--red);color:#fff;padding:clamp(13px,1.5vw,18px) clamp(18px,2vw,26px);border-radius:0 16px 16px 0;
  box-shadow:0 22px 44px -20px rgba(229,35,28,.6)}
.about-mission__badge-num{font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:#fff}
.about-mission__badge-num i{font-style:normal;font-weight:700}
.about-mission__badge-txt{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.92}
/* long story → flow the body in TWO columns so it fills the width and the heading column isn't
   dwarfed by a tall single strip (balanced, editorial) */
.about-mission__body{font-size:clamp(1rem,1.15vw,1.12rem);line-height:1.7;color:var(--ink-soft);padding-top:clamp(6px,3vw,52px);
  columns:2;column-gap:clamp(26px,2.4vw,46px)}
.about-mission__body p{margin:0;break-inside:avoid}
.about-mission__body p + p{margin-top:1.1em}
.about-mission__sign{margin-top:1.7em;font-size:.95rem;color:var(--ink-soft);break-inside:avoid}
.about-mission__sign span{display:inline-block;margin-top:.3em;font-weight:800;letter-spacing:.04em;color:var(--ink)}

/* ----- ★ crane-rope timeline ----- */
.rope-tl__track{position:relative;margin-top:clamp(20px,3vw,40px)}
/* the rope: a thin vertical line down the centre with a descending hook */
.rope-tl__rope{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);z-index:1;pointer-events:none}
.rope-tl__line{position:absolute;inset:0;background:linear-gradient(var(--grey-line),var(--grey-line));border-radius:2px}
.rope-tl__line::before{content:"";position:absolute;left:0;top:0;width:100%;height:var(--rope-fill,0%);
  background:var(--red);border-radius:2px;transition:height .1s linear}
.rope-tl__hook{position:absolute;left:50%;top:0;transform:translate(-50%,-6px);color:var(--red);z-index:2;
  filter:drop-shadow(0 8px 14px rgba(229,35,28,.35))}
.rope-tl__hook svg{display:block;width:34px;height:auto}
/* items alternate sides of the rope */
.rope-tl__items{list-style:none;position:relative;z-index:2;display:flex;flex-direction:column;gap:clamp(40px,6vw,86px);padding:clamp(20px,3vw,40px) 0}
.rope-tl__item{position:relative;width:calc(50% - clamp(30px,4vw,64px))}
.rope-tl__item[data-side="left"]{margin-right:auto;text-align:right;padding-right:clamp(24px,3vw,46px)}
.rope-tl__item[data-side="right"]{margin-left:auto;text-align:left;padding-left:clamp(24px,3vw,46px)}
/* knot dot sitting on the rope at each item's vertical centre */
.rope-tl__knot{position:absolute;top:14px;width:14px;height:14px;border-radius:3px;background:var(--paper-2);
  border:2px solid var(--grey-line);transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.rope-tl__item[data-side="left"] .rope-tl__knot{right:calc(clamp(30px,4vw,64px) * -1 - 7px)}
.rope-tl__item[data-side="right"] .rope-tl__knot{left:calc(clamp(30px,4vw,64px) * -1 - 7px)}
.rope-tl__item.is-passed .rope-tl__knot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px rgba(229,35,28,.16)}
/* each milestone's text sits in a CARD (offset from the rope; the knot bridges to the line) */
.rope-tl__card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--grey-line);
  border-radius:18px;padding:clamp(22px,2.4vw,32px);
  box-shadow:0 18px 40px -28px rgba(20,22,28,.30);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
/* top accent bar, revealed on hover (EFC-style) */
.rope-tl__card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--red),#ff7a6e);opacity:0;transition:opacity .4s var(--ease)}
.rope-tl__item:hover .rope-tl__card{transform:translateY(-4px);
  box-shadow:0 28px 56px -26px rgba(20,22,28,.36);border-color:rgba(229,35,28,.32)}
.rope-tl__item:hover .rope-tl__card::before{opacity:1}
.rope-tl__year{font-size:.86rem;font-weight:800;letter-spacing:.08em;color:var(--red)}
.rope-tl__h{margin-top:.3em;font-size:clamp(1.2rem,1.9vw,1.7rem);font-weight:800;letter-spacing:-.025em;line-height:1.1}
.rope-tl__p{margin-top:.5em;font-size:.98rem;line-height:1.55;color:var(--ink-soft)}

/* ----- values: red panel-flip seam + slow card marquee ----- */
.values{position:relative;background:var(--paper)}
.values__panel{position:relative;background:var(--red);color:#fff;overflow:hidden;
  padding:clamp(64px,9vw,120px) 0;
  clip-path:inset(0 0 100% 0)}                 /* JS opens this downward like a seam panel-flip */
.values__panel.is-open{clip-path:inset(0 0 0% 0);transition:clip-path .9s var(--ease)}
.values__panel::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 100% 0%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.values__panel .section__head{position:relative;z-index:2}
/* clip horizontally only; keep vertical visible so the hover lift and the
   card's drop-shadow aren't cut. Edge fade via gradient overlays (a mask
   would clip to the border-box and cut the shadow at the bottom). */
.values__marquee{position:relative;z-index:2;margin-top:clamp(30px,4vw,56px);
  overflow-x:clip;overflow-y:visible}
.values__marquee::before,.values__marquee::after{content:"";position:absolute;top:0;bottom:0;width:6%;z-index:3;pointer-events:none}
.values__marquee::before{left:0;background:linear-gradient(90deg,var(--red),transparent)}
.values__marquee::after{right:0;background:linear-gradient(270deg,var(--red),transparent)}
.values__row{display:flex;gap:clamp(16px,1.8vw,26px);width:max-content;will-change:transform}
.value-card{flex:0 0 clamp(240px,24vw,320px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);
  border-radius:var(--radius);padding:clamp(22px,2.4vw,32px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .4s var(--ease),background .4s var(--ease),box-shadow .4s var(--ease)}
.values__marquee:hover .values__row{animation-play-state:paused}
.value-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.18);box-shadow:0 28px 60px -30px rgba(0,0,0,.5)}
.value-card__no{font-size:.78rem;font-weight:800;letter-spacing:.14em;color:rgba(255,255,255,.7)}
.value-card h3{margin-top:.4em;font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;letter-spacing:-.02em}
.value-card p{margin-top:.5em;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.85)}
@keyframes valuesScroll{from{transform:translateX(0)}to{transform:translateX(var(--half,-50%))}}

/* ----- counters band ----- */
.about-stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.about-stat{text-align:center;padding:clamp(20px,2vw,30px) 10px;border-radius:var(--radius);
  border:1px solid var(--grey-line);background:var(--paper-2)}
.about-stat__row{display:inline-flex;align-items:baseline;gap:1px}
.about-stat__row .stat__num{font-size:clamp(2.4rem,4.6vw,3.8rem);font-weight:800;letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.about-stat__unit{font-size:clamp(1.2rem,2vw,1.8rem);font-weight:800;color:var(--red)}
.about-stat__label{display:block;margin-top:.7em;font-size:.86rem;letter-spacing:.02em;color:var(--ink-soft)}

/* ----- certifications & safety cards (hover lift + red accent) ----- */
.certs__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.cert-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--grey-line);
  border-radius:18px;padding:clamp(26px,2.6vw,38px);
  box-shadow:0 18px 40px -30px rgba(20,22,28,.28);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.cert-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--red),#ff7a6e);opacity:0;transition:opacity .4s var(--ease)}
.cert-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -28px rgba(20,22,28,.34);border-color:rgba(229,35,28,.32)}
.cert-card:hover::before{opacity:1}
.cert-card__icon{display:inline-grid;place-items:center;width:54px;height:54px;border-radius:14px;
  color:var(--red);background:rgba(229,35,28,.08);border:1px solid rgba(229,35,28,.16);
  margin-bottom:clamp(16px,1.6vw,22px);transition:transform .4s var(--ease)}
.cert-card:hover .cert-card__icon{transform:translateY(-2px) scale(1.04)}
.cert-card__icon svg{width:26px;height:26px}
.cert-card__sub{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.cert-card__title{margin-top:.25em;font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.cert-card__p{margin-top:.7em;font-size:.96rem;line-height:1.55;color:var(--ink-soft)}

/* ------------------------------------------------------------
   HAKKIMIZDA — responsive / reduced motion
   ------------------------------------------------------------ */
@media (max-width:960px){
  .about-mission__grid{grid-template-columns:1fr;gap:24px}
  .about-mission__body{padding-top:0;columns:1}
  .about-stats__grid{grid-template-columns:repeat(2,1fr)}
  .certs__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  /* timeline collapses to a single left-aligned rope with stacked items */
  .rope-tl__rope{left:14px}
  .rope-tl__items{padding-left:0}
  .rope-tl__item,
  .rope-tl__item[data-side="left"],
  .rope-tl__item[data-side="right"]{width:100%;margin:0;text-align:left;padding-left:42px;padding-right:0}
  .rope-tl__item[data-side="left"] .rope-tl__knot,
  .rope-tl__item[data-side="right"] .rope-tl__knot{left:8px;right:auto}
}
@media (max-width:560px){
  .about-stats__grid{grid-template-columns:1fr 1fr}
  .certs__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .values__panel{clip-path:none}
  .values__row{animation:none !important}
  .rope-tl__line::before{transition:none}
}

/* ---------- YORUMLAR (reviews) ----------------------------- */
/* signature: two infinite review-card marquees scrolling opposite
   ways (hover-pause, click to read full); a hero score with stars
   that fill on load; a crossfading featured quote with a rating
   distribution; a logo strip; a review modal. */

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* reusable star meter: a grey base with a gold fill clipped to --r/5 */
.stars{position:relative;display:inline-block;line-height:1;font-size:1em;letter-spacing:.08em;white-space:nowrap}
.stars__base{color:rgba(20,20,20,.18)}
.stars__fill{position:absolute;left:0;top:0;overflow:hidden;color:#f6a609;width:calc(var(--r,0) / 5 * 100%);
  transition:width .9s var(--ease)}
.section--ink .stars__base,.rv-card .stars__base{color:rgba(255,255,255,.22)}

/* ----- hero score ----- */
.page-hero--reviews .page-hero__grid{align-items:center}
.rv-score{position:relative;justify-self:center;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:0 6px;
  text-align:center;padding:clamp(24px,3vw,40px);background:rgba(255,255,255,.55);border:1px solid var(--grey-line);
  border-radius:calc(var(--radius) + 6px);box-shadow:0 40px 80px -50px rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transform-style:preserve-3d;will-change:transform;cursor:default;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease)}
.rv-score:hover{box-shadow:0 55px 110px -45px rgba(0,0,0,.5);border-color:rgba(0,0,0,.12)}
/* sheen that follows the cursor (set via --mx/--my in JS) */
.rv-score::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.6),transparent 62%)}
.rv-score.is-live::before{opacity:1}
/* depth layers — they parallax forward when the card tilts */
.rv-score__num{font-size:clamp(4rem,8vw,6.2rem);font-weight:800;letter-spacing:-.05em;line-height:.9;color:var(--ink);transform:translateZ(38px)}
.rv-score__den{font-size:clamp(1.2rem,2vw,1.8rem);font-weight:700;color:var(--grey);transform:translateZ(28px)}
.rv-score__stars{grid-column:1 / -1;margin-top:14px;font-size:clamp(1.4rem,2.4vw,2rem);position:relative;z-index:2;transform:translateZ(22px)}
.rv-score__meta{grid-column:1 / -1;margin-top:12px;font-size:.9rem;color:var(--ink-soft);position:relative;z-index:2;transform:translateZ(12px)}
.rv-score__meta b{color:var(--ink);font-weight:800}

/* ----- ★ review marquees ----- */
.reviews{background:var(--ink);color:#fff;padding:clamp(56px,8vw,104px) 0;overflow:hidden}
/* clip horizontally (so the loop doesn't overflow the page) but keep the
   vertical axis fully visible, so a hovered card's lift AND its drop-shadow
   are never cut. The left/right edge fade is done with gradient overlays
   instead of a mask — a mask would clip to the border-box and cut the shadow. */
/* overflow-x:CLIP (not hidden) so overflow-y:visible actually stays visible — pairing visible with
   hidden makes the browser compute overflow-y to auto, which clipped the card's hover lift at the top.
   Horizontal cards stay clipped (clip); old browsers without overflow-x:clip fall back to .reviews{overflow:hidden}. */
.rv-marquee{position:relative;overflow-x:clip;overflow-y:visible;-webkit-transform:translateZ(0);transform:translateZ(0)}
.rv-marquee::before,.rv-marquee::after{content:"";position:absolute;top:0;bottom:0;width:5%;z-index:3;pointer-events:none}
.rv-marquee::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.rv-marquee::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.rv-marquee + .rv-marquee{margin-top:clamp(16px,1.8vw,24px)}
.rv-row{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rv-marquee:hover .rv-row{animation-play-state:paused}
.rv-card{flex:0 0 clamp(280px,26vw,360px);text-align:left;cursor:pointer;font:inherit;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:clamp(20px,2vw,28px);display:flex;flex-direction:column;gap:12px;
  transition:transform .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.rv-card:hover{transform:translateY(-6px) scale(1.015);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);box-shadow:0 30px 60px -34px rgba(0,0,0,.7)}
.rv-card .stars{font-size:1rem}
/* reserve a full 4 lines so every card is the same height in both rows */
.rv-card__text{font-size:1rem;line-height:1.55;color:rgba(255,255,255,.9);min-height:6.2em;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rv-card__by{display:flex;flex-direction:column;gap:1px;margin-top:auto}
.rv-card__name{font-weight:700;letter-spacing:-.01em}
.rv-card__meta{font-size:.82rem;color:rgba(255,255,255,.6)}
@keyframes rvScrollL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes rvScrollR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

/* ----- featured quote + distribution ----- */
.rv-feature__grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,5vw,80px);align-items:center}
/* all quotes share one grid cell so the block stays as tall as the LONGEST
   quote — height no longer jumps as we crossfade between different lengths */
.rv-feat{position:relative;margin-top:clamp(16px,2vw,26px);display:grid}
.rv-feat__item{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),visibility .6s var(--ease)}
.rv-feat__item.is-active{opacity:1;visibility:visible;transform:none}
.rv-feat__item .stars{font-size:1.3rem;color:var(--ink)}
.rv-feat__q{margin-top:.8em;font-size:clamp(1.3rem,2.2vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.rv-feat__q::before{content:"“";color:var(--red);font-weight:800;margin-right:.04em}
.rv-feat__q::after{content:"”";color:var(--red);font-weight:800;margin-left:.04em}
.rv-feat__by{margin-top:1.1em;display:flex;flex-direction:column;gap:1px}
.rv-feat__name{font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.rv-feat__meta{font-size:.86rem;color:var(--grey)}
.rv-feat__nav{margin-top:clamp(20px,2.4vw,30px);display:flex;align-items:center;gap:16px}
.rv-feat__btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--ink);
  background:var(--paper);border:1px solid var(--grey-line);cursor:pointer;
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.rv-feat__btn:hover{background:var(--red);color:#fff;border-color:var(--red);transform:translateY(-2px)}
.rv-feat__btn svg{width:20px;height:20px}
.rv-feat__dots{display:flex;gap:8px}
.rv-feat__dot{width:8px;height:8px;border-radius:50%;background:var(--grey-line);border:0;padding:0;cursor:pointer;transition:background .3s,transform .3s}
.rv-feat__dot.is-active{background:var(--red);transform:scale(1.25)}

.rv-dist{background:var(--paper);border:1px solid var(--grey-line);border-radius:var(--radius);padding:clamp(24px,2.6vw,36px);
  box-shadow:0 36px 70px -50px rgba(0,0,0,.35)}
.rv-dist__head{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:clamp(16px,2vw,22px);margin-bottom:clamp(16px,2vw,22px);border-bottom:1px solid var(--grey-line)}
.rv-dist__score{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--ink)}
.rv-dist__head .stars{font-size:1.2rem}
.rv-dist__count{font-size:.86rem;color:var(--grey)}
.rv-dist__list{list-style:none;display:flex;flex-direction:column;gap:12px}
.rv-dist__list li{display:grid;grid-template-columns:34px 1fr 42px;align-items:center;gap:12px}
.rv-dist__k{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.rv-dist__bar{height:8px;border-radius:6px;background:var(--paper-3);overflow:hidden}
.rv-dist__bar i{display:block;height:100%;width:0;border-radius:6px;background:var(--red);transition:width 1s var(--ease)}
.rv-dist__list li.is-in .rv-dist__bar i{width:var(--w)}
.rv-dist__v{font-size:.82rem;font-weight:700;color:var(--grey);text-align:right}

/* ----- qualities: a constellation of customer words -----
   all words rest together, scattered and mixed in size. JS glides one at a
   time into the centre, enlarges it, and reveals that customer's line below. */
.rv-words{overflow:hidden}
.rv-words__label{display:flex;justify-content:center;margin-bottom:clamp(34px,4.5vw,60px)}
.rv-words__stage{position:relative;width:100%;max-width:1100px;margin:0 auto;
  min-height:clamp(260px,30vh,360px)}
/* each word sits at its scattered spot, faded, until its turn comes */
.rv-words__w{position:absolute;transform-origin:center;white-space:nowrap;
  font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--grey);opacity:.4;
  transition:transform 1.3s var(--ease),opacity .9s var(--ease),color .9s var(--ease);
  will-change:transform,opacity}
.rv-words__w--xl{font-size:clamp(1.6rem,4.4vw,3.4rem)}
.rv-words__w--lg{font-size:clamp(1.4rem,3.4vw,2.6rem)}
.rv-words__w--md{font-size:clamp(1.1rem,2.4vw,1.8rem)}
.rv-words__w--sm{font-size:clamp(.95rem,1.7vw,1.3rem)}
/* while one word is centre stage, the rest of the constellation recedes —
   :not(.is-hero) keeps the dimming from ever touching the active word */
.rv-words__stage.is-active .rv-words__w:not(.is-hero){opacity:.14}
.rv-words__w.is-hero{opacity:1;color:var(--ink);z-index:5}
/* the single tiny red accent — a full-stop, only on the active word */
.rv-words__stop{color:var(--red);opacity:0}
.rv-words__w.is-hero .rv-words__stop{opacity:1}

/* supporting customer line, centred below the focal point */
.rv-words__line{position:absolute;left:50%;top:74%;transform:translateX(-50%);
  width:min(500px,86%);text-align:center;font-style:italic;font-weight:500;
  font-size:clamp(1.05rem,1.8vw,1.5rem);line-height:1.5;color:var(--ink);
  opacity:0;transition:opacity .9s var(--ease)}
.rv-words__line.is-on{opacity:1}
.rv-words__line::before{content:"“"}
.rv-words__line::after{content:"”"}
.rv-words__line:empty::before,.rv-words__line:empty::after{content:none}

@media (max-width:560px){
  /* mobile: same constellation, smaller type so it stays calm and scroll-free */
  .rv-words__stage{min-height:clamp(300px,48vh,380px)}
  .rv-words__line{top:78%;font-size:clamp(1rem,4.2vw,1.2rem)}
}

/* ----- review modal ----- */
.rv-modal{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;display:grid;place-items:center;padding:24px}
.rv-modal.is-open{visibility:visible;pointer-events:auto}
/* solid darkening instead of backdrop-filter:blur — blurring the whole
   live page (with the animating marquees behind) janked on open */
.rv-modal__scrim{position:absolute;inset:0;background:rgba(15,15,17,.62);opacity:0;transition:opacity .4s var(--ease)}
.rv-modal.is-open .rv-modal__scrim{opacity:1}
.rv-modal__card{position:relative;z-index:2;background:var(--paper);border:1px solid var(--grey-line);border-radius:22px;
  padding:clamp(34px,5vw,56px);max-width:min(92vw,620px);box-shadow:0 60px 120px -45px rgba(0,0,0,.55);
  transform:translateY(20px) scale(.96);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease)}
.rv-modal.is-open .rv-modal__card{transform:none;opacity:1}
.rv-modal__close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--grey-line);cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.rv-modal__close:hover{background:var(--red);color:#fff;transform:rotate(90deg)}
.rv-modal__close svg{width:18px;height:18px}
.rv-modal__stars{font-size:1.4rem}
.rv-modal__text{margin-top:1em;font-size:clamp(1.1rem,1.6vw,1.4rem);line-height:1.55;color:var(--ink);font-weight:500}
.rv-modal__by{margin-top:1.4em;display:flex;flex-direction:column;gap:1px}
.rv-modal__name{font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.rv-modal__meta{font-size:.88rem;color:var(--grey)}

/* ------------------------------------------------------------
   YORUMLAR — responsive / reduced motion
   ------------------------------------------------------------ */
@media (max-width:860px){
  .page-hero--reviews .rv-score{order:-1;margin-bottom:8px}
  .rv-feature__grid{grid-template-columns:1fr;gap:36px}
  .rv-feat{min-height:0}
  /* keep all quotes in the shared grid cell (like desktop) so the block stays as tall as the LONGEST
     quote — height no longer jumps when switching reviews; transition/transform off keeps the mobile
     swap instant (no crossfade/slide introduced). */
  .rv-feat__item{position:relative;inset:auto;transition:none;transform:none}
  .rv-feat__item:not(.is-active){opacity:0;visibility:hidden}
}
@media (prefers-reduced-motion:reduce){
  .rv-row{animation:none !important}
  .rv-words__w,.rv-words__line{transition:none !important}
  .stars__fill{transition:none}
  .rv-dist__bar i{transition:none}
  .rv-feat__item{transition:none}
  .rv-modal__card,.rv-modal__scrim{transition:none}
}

/* ---------- SSS (FAQ) -------------------------------------- */
/* signature: each answer opens like a container door lifting up
   (grid-rows 0fr→1fr + a 3D rotateX reveal, red edge accent, the
   left hook icon pulls up). One open at a time. Live hero search
   filters + highlights; a sticky category list scroll-spies with a
   moving thumb. */

/* ----- hero live search ----- */
.faq-search{margin-top:clamp(24px,3vw,36px);position:relative;max-width:540px}
.faq-search__input{width:100%;font:inherit;font-size:1.02rem;color:var(--ink);background:rgba(255,255,255,.7);
  border:1px solid var(--grey-line);border-radius:100px;padding:1em 3.2em 1em 3.1em;
  box-shadow:0 20px 40px -34px rgba(0,0,0,.4);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease)}
.faq-search__input::placeholder{color:var(--grey)}
.faq-search__input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 1px 0 0 rgba(229,35,28,.3),0 20px 44px -28px rgba(229,35,28,.5)}
.faq-search__input::-webkit-search-cancel-button{display:none}
.faq-search__ico{position:absolute;left:1.15em;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--grey);pointer-events:none}
.faq-search__clear{position:absolute;right:.8em;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink);background:var(--paper-2);border:1px solid var(--grey-line);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.faq-search__clear:hover{background:var(--red);color:#fff}
.faq-search__clear svg{width:14px;height:14px}

/* ----- hero right side: "questions → answers" clarity network ----- */
/* Pure CSS/SVG. A calm 24s loop over a wide field: many faint '?' float as
   noise; one by one, five of them resolve into bold '✓' with a red anchor
   dot while a thin network quietly fades in to connect them; the ordered
   answer-network holds, then it all resets. Almost subconscious. */
.faq-clarity{position:relative;justify-self:end;width:100%;max-width:clamp(420px,58vw,760px);
  margin-right:clamp(-90px,-4vw,0px);pointer-events:none}
.cl{position:relative;width:100%;height:clamp(380px,46vw,600px)}

/* the connecting network — very thin, light, fades in with the answers */
.cl__net{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cl__net line{stroke:#C2C2C2;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linecap:round;
  opacity:0;animation:clLine 24s ease-in-out infinite}

/* ambient faint question marks (noise that never resolves) */
.cl__scatter{position:absolute;font-weight:700;color:#B9B9B9;line-height:1;user-select:none;opacity:var(--o);
  animation:clFloat 9s ease-in-out infinite,clAmbient 24s ease-in-out infinite}
.cl__scatter.a1{top:4%;left:26%;font-size:1.3rem;--o:.14;animation-delay:0s,0s}
.cl__scatter.a2{top:14%;left:86%;font-size:2rem;--o:.10;animation-delay:-2s,0s}
.cl__scatter.a3{top:36%;left:12%;font-size:1.1rem;--o:.16;animation-delay:-4s,0s}
.cl__scatter.a4{top:40%;left:94%;font-size:1.6rem;--o:.09;animation-delay:-6s,0s}
.cl__scatter.a5{top:58%;left:20%;font-size:1.25rem;--o:.13;animation-delay:-1s,0s}
.cl__scatter.a6{top:62%;left:92%;font-size:1rem;--o:.12;animation-delay:-3s,0s}
.cl__scatter.a7{top:80%;left:14%;font-size:1.7rem;--o:.08;animation-delay:-5s,0s}
.cl__scatter.a8{top:94%;left:40%;font-size:1.2rem;--o:.14;animation-delay:-7s,0s}
.cl__scatter.a9{top:20%;left:52%;font-size:.95rem;--o:.11;animation-delay:-2.5s,0s}
.cl__scatter.a10{top:78%;left:84%;font-size:1.15rem;--o:.12;animation-delay:-4.5s,0s}

/* the five resolving nodes */
.cl__node{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center}
.cl__node > *{grid-area:1/1}
.cl__node.n1{top:8%;left:56%}
.cl__node.n2{top:14%;left:80%}
.cl__node.n3{top:24%;left:36%}
.cl__node.n4{top:30%;left:66%}
.cl__node.n5{top:40%;left:86%}
.cl__node.n6{top:46%;left:50%}
.cl__node.n7{top:56%;left:30%}
.cl__node.n8{top:60%;left:72%}
.cl__node.n9{top:72%;left:48%}
.cl__node.n10{top:80%;left:84%}
.cl__node.n11{top:90%;left:60%}
.cl__q{font-size:clamp(32px,3.4vw,54px);font-weight:700;color:#B9B9B9;line-height:1}
.cl__a{display:inline-flex;align-items:center;gap:.36em;opacity:0}
.cl__dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 0 5px rgba(229,35,28,.10)}
.cl__check{font-size:clamp(30px,3.2vw,50px);font-weight:800;color:var(--ink);line-height:1}

.cl__node.n1 .cl__q{animation:clQ1 26s ease-in-out infinite}
.cl__node.n2 .cl__q{animation:clQ2 26s ease-in-out infinite}
.cl__node.n3 .cl__q{animation:clQ3 26s ease-in-out infinite}
.cl__node.n4 .cl__q{animation:clQ4 26s ease-in-out infinite}
.cl__node.n5 .cl__q{animation:clQ5 26s ease-in-out infinite}
.cl__node.n6 .cl__q{animation:clQ6 26s ease-in-out infinite}
.cl__node.n7 .cl__q{animation:clQ7 26s ease-in-out infinite}
.cl__node.n8 .cl__q{animation:clQ8 26s ease-in-out infinite}
.cl__node.n9 .cl__q{animation:clQ9 26s ease-in-out infinite}
.cl__node.n10 .cl__q{animation:clQ10 26s ease-in-out infinite}
.cl__node.n11 .cl__q{animation:clQ11 26s ease-in-out infinite}
.cl__node.n1 .cl__a{animation:clA1 26s ease-in-out infinite}
.cl__node.n2 .cl__a{animation:clA2 26s ease-in-out infinite}
.cl__node.n3 .cl__a{animation:clA3 26s ease-in-out infinite}
.cl__node.n4 .cl__a{animation:clA4 26s ease-in-out infinite}
.cl__node.n5 .cl__a{animation:clA5 26s ease-in-out infinite}
.cl__node.n6 .cl__a{animation:clA6 26s ease-in-out infinite}
.cl__node.n7 .cl__a{animation:clA7 26s ease-in-out infinite}
.cl__node.n8 .cl__a{animation:clA8 26s ease-in-out infinite}
.cl__node.n9 .cl__a{animation:clA9 26s ease-in-out infinite}
.cl__node.n10 .cl__a{animation:clA10 26s ease-in-out infinite}
.cl__node.n11 .cl__a{animation:clA11 26s ease-in-out infinite}

@keyframes clFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-4px)}}
/* ambient questions persist, just dim a touch while the answers dominate */
@keyframes clAmbient{0%,58%{opacity:var(--o)}76%{opacity:calc(var(--o)*.5)}90%,100%{opacity:var(--o)}}
/* the network fades in as answers form, holds, then clears */
@keyframes clLine{0%,14%{opacity:0}66%{opacity:.26}86%{opacity:.26}95%,100%{opacity:0}}
/* questions: faint, then fade out one by one at their turn; return on reset */
@keyframes clQ1{0%,13%{opacity:.18}19%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ2{0%,17.5%{opacity:.18}23.5%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ3{0%,22%{opacity:.18}28%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ4{0%,26.5%{opacity:.18}32.5%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ5{0%,31%{opacity:.18}37%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ6{0%,35.5%{opacity:.18}41.5%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ7{0%,40%{opacity:.18}46%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ8{0%,44.5%{opacity:.18}50.5%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ9{0%,49%{opacity:.18}55%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ10{0%,53.5%{opacity:.18}59.5%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
@keyframes clQ11{0%,58%{opacity:.18}64%{opacity:0}86%{opacity:0}97%,100%{opacity:.18}}
/* answers (check + red dot): fade in at their turn, hold, then clear */
@keyframes clA1{0%,13%{opacity:0}19%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA2{0%,17.5%{opacity:0}23.5%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA3{0%,22%{opacity:0}28%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA4{0%,26.5%{opacity:0}32.5%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA5{0%,31%{opacity:0}37%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA6{0%,35.5%{opacity:0}41.5%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA7{0%,40%{opacity:0}46%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA8{0%,44.5%{opacity:0}50.5%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA9{0%,49%{opacity:0}55%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA10{0%,53.5%{opacity:0}59.5%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}
@keyframes clA11{0%,58%{opacity:0}64%{opacity:.82}86%{opacity:.82}95%,100%{opacity:0}}

@media (max-width:1180px){
  .faq-clarity{max-width:clamp(300px,40vw,460px)}
  .cl{height:clamp(320px,38vw,460px)}
}
@media (max-width:860px){
  .faq-clarity{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* show only the final, organized answer-network — no motion */
  .cl__scatter,.cl__q{opacity:0;animation:none}
  .cl__a{opacity:.8;animation:none}
  .cl__net line{opacity:.26;animation:none}
}

/* ----- layout: sticky category sidebar + question column ----- */
.faq__grid{display:grid;grid-template-columns:240px 1fr;gap:clamp(28px,5vw,80px);align-items:start}
.faq-side__sticky{position:sticky;top:clamp(96px,12vh,120px)}
.faq-side__label{font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.faq-cats{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:14px}
/* the progress thumb rides a faint vertical track on the left of the list */
.faq-cats::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--grey-line);border-radius:2px}
.faq-cats__thumb{position:absolute;left:-1px;top:0;width:4px;height:34px;background:var(--red);border-radius:3px;
  transition:transform .4s var(--ease),height .3s var(--ease);box-shadow:0 0 10px rgba(229,35,28,.5)}
.faq-cat{font:inherit;text-align:left;font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--grey);
  background:none;border:0;padding:8px 0;cursor:pointer;transition:color .25s var(--ease),padding-left .25s var(--ease)}
.faq-cat:hover{color:var(--ink)}
.faq-cat.is-active{color:var(--ink)}

/* ----- groups + container-door accordion ----- */
.faq-group{margin-bottom:clamp(30px,4vw,52px)}
.faq-group__title{display:flex;align-items:center;gap:14px;font-size:1.05rem;font-weight:800;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.faq-group__seam{flex:none;width:26px;height:4px;background:var(--red);border-radius:2px}
.faq-list{border-top:1px solid var(--grey-line)}

.faq-item{border-bottom:1px solid var(--grey-line);perspective:1200px}
.faq-item.is-hidden{display:none}
.faq-q{width:100%;display:flex;align-items:center;gap:16px;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;padding:clamp(18px,2vw,26px) 0;color:var(--ink);transition:color .3s var(--ease)}
.faq-q:hover{color:var(--red)}
.faq-q__hook{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--grey);
  border:1px solid var(--grey-line);border-radius:8px;transition:transform .45s var(--ease),color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease)}
.faq-q__hook svg{width:17px;height:17px}
.faq-item.is-open .faq-q__hook{color:#fff;background:var(--red);border-color:var(--red);transform:translateY(-3px)}
.faq-q__text{flex:1;font-size:clamp(1.02rem,1.4vw,1.22rem);font-weight:600;letter-spacing:-.015em;line-height:1.35}
.faq-q__plus{flex:none;position:relative;width:18px;height:18px}
.faq-q__plus::before,.faq-q__plus::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:2px;transition:transform .4s var(--ease),opacity .3s var(--ease)}
.faq-q__plus::before{width:16px;height:2px;transform:translate(-50%,-50%)}
.faq-q__plus::after{width:2px;height:16px;transform:translate(-50%,-50%)}
.faq-item.is-open .faq-q__plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq-item.is-open .faq-q{color:var(--red)}
/* the "door": grid-rows animates the height; the inner lifts open with a slight rotateX */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a__inner{overflow:hidden;transform-origin:top center;transform:rotateX(-16deg);opacity:0;
  transition:transform .5s var(--ease),opacity .35s var(--ease)}
.faq-item.is-open .faq-a__inner{transform:rotateX(0);opacity:1}
.faq-a__inner p{padding:0 0 clamp(20px,2.2vw,28px) 46px;margin:0;max-width:64ch;
  font-size:clamp(.98rem,1.15vw,1.1rem);line-height:1.65;color:var(--ink-soft);
  border-left:2px solid rgba(229,35,28,.35);padding-left:18px;margin-left:6px}

/* search highlight */
.faq-q__text mark{background:rgba(246,166,9,.32);color:inherit;border-radius:3px;padding:0 .1em}
.faq-empty{padding:32px 0;font-size:1.05rem;color:var(--ink-soft)}
.faq-empty a{color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ----- "still have questions?" red band ----- */
.faq-ask{position:relative;background:var(--red);color:#fff;overflow:hidden;padding:clamp(56px,8vw,104px) 0}
.faq-ask::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 0% 100%,rgba(255,255,255,.16),transparent 55%);pointer-events:none}
.faq-ask__inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,60px);flex-wrap:wrap}
.faq-ask__copy{max-width:26ch}
.faq-ask__title{font-size:clamp(1.6rem,3vw,2.6rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;margin-top:.4em}
.faq-ask__actions{display:flex;gap:14px;flex-wrap:wrap}

/* ------------------------------------------------------------
   SSS — responsive / reduced motion
   ------------------------------------------------------------ */
@media (max-width:860px){
  /* minmax(0,1fr) lets the single column shrink below its content's min-content
     (long answers / chip row) so the grid can't balloon past the viewport */
  .faq__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  /* sticky sidebar → horizontal scrollable chip row at the top */
  .faq-side__sticky{position:sticky;top:64px;z-index:4;background:var(--paper);padding:10px 0;
    box-shadow:0 1px 0 var(--grey-line)}
  .faq-side__label{display:none}
  .faq-cats{flex-direction:row;gap:8px;padding-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .faq-cats::-webkit-scrollbar{display:none}
  .faq-cats::before,.faq-cats__thumb{display:none}
  .faq-cat{flex:none;padding:8px 16px;border:1px solid var(--grey-line);border-radius:100px;font-size:.92rem}
  .faq-cat.is-active{color:#fff;background:var(--red);border-color:var(--red)}
  .faq-ask__inner{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .faq-a{transition:none}
  .faq-a__inner{transition:none;transform:none}
  .faq-q__hook,.faq-q__plus::before,.faq-q__plus::after,.faq-cats__thumb{transition:none}
}