/* =========================================================================
   CARTIFY — public site stylesheet
   Concept: "The Operating Layer" — instrument-grade calm.
   Panels & hairlines, mono data labels, generous whitespace.

   Palette is the official Cartify brand kit (assets/img/brand/PALET.md):
     krem #F7F2E8 · gece lacivert #152534 · LED mavi #55CDEE
     buz #E9F9FE · derin mavi #2FB3DC · altın #B07714 · gümüş #C9CED6
   Brand rule: NO dark/royal blue — every blue sits in the light turquoise
   family. Warm cream/gold tones stay.

   CONTRAST NOTE — this drives the whole system:
   LED mavi (#55CDEE) is a LIGHT colour (1.7:1 on cream). It can never carry
   text on a light background. So turquoise is used as FILL, RULE and SIGNAL,
   always with navy text on top (#152534 on #55CDEE = 7.6:1), and it comes
   fully alive as text/glow on the navy sections. That constraint is the
   design: turquoise pops where it earns contrast.
   ========================================================================= */

:root{
  /* brand — verbatim from the kit */
  --krem:#F7F2E8;
  --krem-koyu:#EFE6D6;
  --lacivert:#152534;
  --mavi:#55CDEE;
  --mavi-acik:#8FE2F8;
  --mavi-koyu:#2FB3DC;
  --buz:#E9F9FE;
  --gumus:#C9CED6;
  --gumus-koyu:#9AA2AC;
  --altin:#B07714;

  /* semantic */
  --paper:var(--krem);
  --surface:#FFFFFF;
  --sand:var(--krem-koyu);
  --ice:var(--buz);
  --ink:var(--lacivert);
  --ink-2:#4A5A6B;
  /* #7A8794 measured 3.29:1 on cream — under AA, and this token carries every
     small label on the site (.eyebrow, .card__no, mono lists, footer, lang
     switch). #5B6671 is the lightest tone in the same blue-grey family that
     clears 4.5:1 on all three light surfaces: krem 5.25, buz 5.43, sand 4.73. */
  --ink-3:#5B6671;

  --accent:var(--mavi);
  --accent-deep:var(--mavi-koyu);
  --accent-glow:var(--mavi-acik);
  --accent-wash:var(--buz);
  --on-accent:var(--lacivert);
  --gold:var(--altin);
  --gold-wash:#F6EEDF;

  --line:rgba(21,37,52,.12);
  --line-2:rgba(21,37,52,.24);
  --line-inv:rgba(247,242,232,.16);
  --ring:rgba(85,205,238,.55);

  /* type */
  --font-display:"Bricolage Grotesque","Geist",system-ui,sans-serif;
  --font-body:"Geist",system-ui,-apple-system,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,monospace;

  /* geometry */
  --r-card:10px;
  --r-ctl:6px;
  --r-pill:100px;
  --wrap:1200px;
  --pad-x:clamp(20px,4vw,44px);
  --sec-y:clamp(76px,8.5vw,132px);
  --hd-h:64px;

  --lift-1:0 1px 2px rgba(21,37,52,.06);
  --lift-2:0 12px 32px -12px rgba(21,37,52,.18);
  --lift-3:0 30px 70px -28px rgba(21,37,52,.32);
  --glow:0 0 0 1px rgba(85,205,238,.4), 0 8px 30px -8px rgba(85,205,238,.5);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:var(--ink)}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent-deep);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------------------------------------------------------------- type -- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.025em;
  line-height:1.06;
  text-wrap:balance;
}
/* 70px overflowed the hero's narrow column — 'artificial intelligence' is one
   unbreakable run and ran straight over the console. 56px is the largest the
   column takes at both TR and EN; with h2 at 40px the step is still 1.4. */
h1{font-size:clamp(36px,4.1vw,56px);letter-spacing:-.035em;overflow-wrap:break-word}
h2{font-size:clamp(27px,3.1vw,40px)}
h3{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.015em;line-height:1.25}
h4{font-size:15px;letter-spacing:-.01em}
p{text-wrap:pretty}

.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.lead{
  font-size:clamp(16px,1.25vw,18.5px);
  color:var(--ink-2);
  line-height:1.62;
  max-width:58ch;
}
/* a lead always needs air under a heading, inside .sec-head or not */
:is(h1,h2,h3) + .lead{margin-top:16px}

/* the signature headline treatment: turquoise underscore, not turquoise text
   (turquoise text on cream would be unreadable) */
em.sig{
  font-style:normal;
  position:relative;
  white-space:nowrap;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:100% .18em;
  background-position:0 92%;
  background-repeat:no-repeat;
  padding-inline:.04em;
}
.sec--ink em.sig{
  background:none;
  color:var(--accent);
  text-shadow:0 0 22px rgba(85,205,238,.45);
}

/* ------------------------------------------------------------- layout -- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-x)}
.wrap--wide{max-width:1400px}
.sec{padding-block:var(--sec-y);position:relative}
.sec--tint{background:var(--sand)}
.sec--ice{background:var(--ice)}
.sec--surface{background:var(--surface)}
.sec--ink{background:var(--ink);color:rgba(247,242,232,.72)}
.sec--ink h1,.sec--ink h2,.sec--ink h3,.sec--ink h4{color:var(--paper)}
.sec--ink .lead{color:rgba(247,242,232,.66)}
.sec--ink .eyebrow{color:rgba(247,242,232,.55)}
.hr{height:1px;background:var(--line);border:0}

/* eyebrow — recurring structural tick */
.eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:6px;height:6px;flex:none;
  background:var(--accent);
  border-radius:2px;
  box-shadow:0 0 0 3px rgba(85,205,238,.22);
}
.eyebrow--gold::before{background:var(--gold);box-shadow:0 0 0 3px rgba(176,119,20,.18)}
.eyebrow--rule::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}
.sec--ink .eyebrow--rule::after{background:var(--line-inv)}

.sec-head{max-width:64ch;margin-bottom:clamp(36px,4vw,60px)}
.sec-head .lead{margin-top:16px}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .eyebrow{justify-content:center}
.sec-head--center .lead{margin-inline:auto}

/* ------------------------------------------------------------ buttons -- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);
  font-size:14px;font-weight:500;
  letter-spacing:-.005em;
  padding:11px 20px;
  border-radius:var(--r-ctl);
  border:1px solid transparent;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;
}
.btn:active{transform:translateY(1px)}
/* primary = LED mavi fill + navy text (7.6:1) */
.btn--accent{background:var(--accent);color:var(--ink);font-weight:600;box-shadow:var(--lift-1)}
.btn--accent:hover{background:var(--accent-deep);box-shadow:var(--glow)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#0C1720}
.btn--line{border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.btn--ghost{color:var(--ink-2)}
.btn--ghost:hover{color:var(--ink);background:rgba(21,37,52,.06)}
.btn--inv{border-color:var(--line-inv);color:var(--paper)}
.btn--inv:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--lg{padding:14px 26px;font-size:15px}
.btn--full{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.42;pointer-events:none}
.btn__arrow{transition:transform .18s ease}
.btn:hover .btn__arrow{transform:translateX(2px)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* text link — navy text, turquoise rule that fills on hover */
.tlink{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:500;color:var(--ink);
  padding-bottom:2px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 2px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size .22s ease;
}
.tlink:hover{background-size:100% 2px}
.tlink svg{width:14px;height:14px;color:var(--accent-deep);transition:transform .18s ease}
.tlink:hover svg{transform:translateX(3px)}
.sec--ink .tlink{color:var(--accent)}

/* ------------------------------------------------------------- header -- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:70;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.site-header.scrolled{
  background:color-mix(in srgb,var(--paper) 84%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
.hd__bar{
  display:flex;align-items:center;gap:clamp(14px,2vw,34px);
  height:var(--hd-h);
  max-width:1440px;margin:0 auto;
  padding-inline:var(--pad-x);
}
.hd__brand{display:flex;align-items:center;flex:none}
/* mascot lockup — needs more height than a plain wordmark for the robot to read */
.hd__logo{height:40px;width:auto;transition:transform .25s ease}
.hd__brand:hover .hd__logo{transform:translateY(-1px) scale(1.02)}
@media (max-width:420px){.hd__logo{height:34px}}
.hd__nav{display:flex;align-items:center;gap:4px;flex:1}
.hd__link{
  position:relative;
  display:flex;align-items:center;gap:5px;
  font-size:14px;font-weight:450;
  color:var(--ink-2);
  padding:8px 11px;border-radius:var(--r-ctl);
  background:none;border:0;font-family:inherit;cursor:pointer;
  transition:color .16s ease,background .16s ease;
}
.hd__link:hover,.hd__link[aria-expanded="true"]{color:var(--ink);background:rgba(21,37,52,.05)}
.hd__link.active{color:var(--ink);font-weight:500}
.hd__link.active::after{
  content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;
  background:var(--accent);border-radius:2px;
}
.hd__chev{transition:transform .2s ease;opacity:.6}
.hd__link[aria-expanded="true"] .hd__chev{transform:rotate(180deg)}
/* margin-left:auto pushes the actions right on its own. .hd__nav{flex:1} used
   to be the only spacer, so hiding the nav under 900px collapsed the whole bar
   onto the logo. */
.hd__actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.hd__lang{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-3);background:none;border:0;cursor:pointer;
  padding:8px;border-radius:var(--r-ctl);
  transition:color .16s ease,background .16s ease;
}
.hd__lang:hover{color:var(--ink);background:rgba(21,37,52,.05)}
.hd__burger{
  display:none;
  width:44px;height:44px;
  align-items:center;justify-content:center;
  border:1px solid var(--line-2);border-radius:var(--r-ctl);
  background:transparent;color:var(--ink);cursor:pointer;
  transition:border-color .16s ease;
}
.hd__burger:hover{border-color:var(--ink)}

.hd__drop{
  position:absolute;top:calc(100% - 4px);left:0;
  min-width:308px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--lift-3);
  padding:7px;
  opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.hd__item{position:relative}
.hd__item.open .hd__drop{opacity:1;visibility:visible;transform:translateY(0)}
.hd__drop a{
  display:block;
  padding:9px 11px;border-radius:var(--r-ctl);
  border-left:2px solid transparent;
  transition:background .14s ease,border-color .14s ease;
}
.hd__drop a:hover{background:var(--buz);border-left-color:var(--accent)}
.hd__drop strong{display:block;font-size:14px;font-weight:500;color:var(--ink);margin-bottom:1px}
.hd__drop span{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.hd__drop-note{
  display:flex;gap:8px;align-items:flex-start;
  margin:6px 4px 2px;padding:10px 11px;
  border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink-3);line-height:1.45;
}
.hd__drop-note svg{color:var(--gold)}

.hd__menu{
  display:none;
  position:fixed;inset:var(--hd-h) 0 0;z-index:69;
  background:var(--paper);
  padding:20px var(--pad-x) 40px;
  overflow-y:auto;
  flex-direction:column;gap:8px;
}
.hd__menu.open{display:flex}
/* the menu carries its own CTA, so the header one would be the second
   'Başvuru Yap' on screen at the same time */
body.menu-open .hd__actions .btn--accent{display:none}
.hd__mgroup{border-bottom:1px solid var(--line);padding-block:6px}
.hd__mgroup > p{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);
  padding:12px 2px 6px;
}
.hd__menu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 2px;font-size:16px;color:var(--ink);
}
.hd__menu a .idx{font-family:var(--font-mono);font-size:10px;color:var(--ink-3)}
.hd__mcta{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.hd__mcta .btn{width:100%;padding:14px}

/* ------------------------------------------------------------- footer -- */
.site-footer{background:var(--ink);color:rgba(247,242,232,.6);padding-block:64px 26px}
.ft__wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad-x)}
.ft__top{
  display:grid;
  grid-template-columns:1.6fr repeat(4,1fr);
  gap:40px 28px;
  padding-bottom:52px;
}
.ft__logo{height:48px;width:auto;margin-bottom:16px}
.ft__brand p{font-size:13.5px;line-height:1.6;max-width:36ch}
.ft__col h3{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,242,232,.58);font-weight:400;
  margin-bottom:14px;
}
.ft__col ul{list-style:none;display:flex;flex-direction:column;gap:2px}
/* min 24px tall: WCAG 2.2 target size — these are a link list, not inline prose */
.ft__col a{display:inline-flex;align-items:center;min-height:24px;font-size:13.5px;transition:color .16s ease}
.ft__col a:hover{color:var(--accent)}
.ft__legal{
  display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line-inv);
  padding-top:22px;
  font-size:11.5px;
  color:rgba(247,242,232,.58);
}
.ft__legal ul{list-style:none;display:flex;gap:8px 18px;flex-wrap:wrap}
.ft__legal a{display:inline-flex;align-items:center;min-height:24px}
.ft__legal a:hover{color:var(--accent)}
.ft__disclaimer{
  margin-top:16px;
  font-size:11.5px;line-height:1.6;
  color:rgba(247,242,232,.58);   /* marka reddi metni — .34 = 2.86:1, en kotusuydu */
  max-width:96ch;
}

/* --------------------------------------------------------------- hero -- */
.hero{
  padding-top:calc(var(--hd-h) + clamp(52px,7vh,96px));
  padding-bottom:clamp(48px,6vw,76px);
  position:relative;
  overflow:hidden;
}
/* the only background treatment: a faint measured grid — "the layer" */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:
    linear-gradient(to right,rgba(21,37,52,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(21,37,52,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 78% 60% at 50% 34%,#000 8%,transparent 76%);
          mask-image:radial-gradient(ellipse 78% 60% at 50% 34%,#000 8%,transparent 76%);
  pointer-events:none;
}
.hero > *{position:relative;z-index:1}
.hero__grid{
  display:grid;
  /* The console is the signature element — it gets the wider half. At 50/50
     neither side led and the console came out smaller on desktop than on
     tablet, which is backwards for the thing the page is built around. */
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,3.4vw,56px);
  align-items:center;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:6px 13px 6px 9px;
  margin-bottom:24px;
  box-shadow:var(--lift-1);
}
.hero__badge i{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(85,205,238,.28);
  flex:none;
}
.hero__badge--gold i{background:var(--gold);box-shadow:0 0 0 3px rgba(176,119,20,.2)}
.hero h1{margin-bottom:22px}
.hero__lead{font-size:clamp(16px,1.3vw,18.5px);color:var(--ink-2);max-width:52ch;line-height:1.62}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero__meta{
  /* Was a wrapping flex row: three items needed ~640px in a 538px column, so
     it broke 2+1 and left an orphan on every desktop width. A column is
     honest at any width and reads as a spec list, which is what it is. */
  display:flex;flex-direction:column;gap:9px;
  margin-top:30px;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);
}
.hero__meta span{display:flex;align-items:center;gap:7px}
.hero__meta svg{width:14px;height:14px;color:var(--accent-deep);flex:none}

/* ------------------------------------------ SIGNATURE — ops console -- */
.console{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:var(--lift-3);
  overflow:hidden;
  font-size:13px;
  position:relative;
}
/* turquoise hairline along the top — the "powered" tell */
.console::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--accent) 22%,var(--accent-glow) 50%,var(--accent) 78%,transparent);
}
.console__bar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(var(--buz),var(--surface));
}
.console__dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 3px rgba(85,205,238,.24);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 3px rgba(85,205,238,.24)}
  50%{box-shadow:0 0 0 6px rgba(85,205,238,.06)}
}
.console__title{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.console__stat{
  margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:var(--ink-3);
}
.console__body{padding:6px}
.crow{
  display:grid;
  grid-template-columns:28px 1fr auto;
  gap:12px;align-items:center;
  padding:11px 10px;
  border-radius:8px;
  transition:background .16s ease;
}
.crow + .crow{box-shadow:inset 0 1px 0 var(--line)}
.crow:hover{background:var(--buz)}

/* ---- the console actually working ----------------------------------------
   This is the signature element, and it was a photograph of a panel: five
   frozen rows and one blinking dot. Now one row at a time is "working" — a
   turquoise edge, a lifted surface, and the badge swapping to a live label —
   cycling in document order so it reads as a queue being processed rather
   than random flicker. Driven by assets/js/console.js, which only runs while
   the console is on screen. transform/opacity/colour only.
   -------------------------------------------------------------------------- */
.crow{position:relative}
.crow::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;
  background:var(--accent);border-radius:2px;
  opacity:0;transform:scaleY(.3);transform-origin:center;
  transition:opacity .2s ease,transform .2s ease;
}
.crow--work{background:var(--buz)}
.crow--work::before{opacity:1;transform:scaleY(1)}
.crow--work .crow__ico{
  background:var(--accent);border-color:var(--accent);
  transition:background .2s ease,border-color .2s ease;
}
/* the badge crossfades between its resting label and the live one */
.crow__badge{position:relative;overflow:hidden}
.crow__badge i{
  position:absolute;inset:0;
  display:grid;place-items:center;
  font-style:normal;
  background:var(--accent);color:var(--ink);
  opacity:0;transform:translateY(60%);
  transition:opacity .2s ease,transform .2s ease;
}
.crow--work .crow__badge i{opacity:1;transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  /* hold the whole console still — no cycling, no crossfade, nothing lit */
  .crow--work{background:transparent}
  .crow--work::before,.crow--work .crow__badge i{display:none}
  .crow--work .crow__ico{background:var(--buz);border-color:rgba(85,205,238,.45)}
}
.crow__ico{
  width:28px;height:28px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--buz);
  border:1px solid rgba(85,205,238,.45);
  color:var(--ink);
  flex:none;
}
.crow__ico svg{width:14px;height:14px}
.crow__t{display:block;font-size:13.5px;font-weight:500;color:var(--ink);line-height:1.3}
.crow__s{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.4;margin-top:2px}
.crow__badge{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line);
  color:var(--ink-3);
  white-space:nowrap;
}
.crow__badge--ai{
  color:var(--ink);border-color:rgba(85,205,238,.5);background:var(--buz);
}
.crow__badge--human{
  color:#7A5410;border-color:rgba(176,119,20,.32);background:var(--gold-wash);
}
.console__foot{
  display:flex;align-items:center;gap:9px;
  padding:12px 14px;
  border-top:1px solid var(--line);
  background:var(--paper);
  font-size:11.5px;color:var(--ink-3);
  line-height:1.45;
}
.console__foot svg{width:14px;height:14px;color:var(--gold);flex:none}

/* ------------------------------------------------------- value strip --
   Four illustrated answers to "how does this actually work". Each panel is
   generated on the exact page cream and edge-feathered, so the artwork sits
   in the page instead of in a box.
   -------------------------------------------------------------------- */
.vstrip{border-block:1px solid var(--line);padding-block:clamp(48px,5vw,76px)}
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.vcell{margin:0;text-align:center}
.vcell__img{
  width:100%;height:auto;display:block;margin-bottom:14px;
  /* same trick as the mascot clips: dissolve the edge instead of chasing an
     exact background match */
  -webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 46%, #000 52%, transparent 92%);
          mask-image:radial-gradient(ellipse 78% 78% at 50% 46%, #000 52%, transparent 92%);
}
.vcell h3{font-size:clamp(17px,1.4vw,20px);margin-bottom:6px}
.vcell p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:34ch;margin-inline:auto}
@media (max-width:900px){.vgrid{grid-template-columns:1fr 1fr;gap:26px}}
@media (max-width:560px){.vgrid{grid-template-columns:1fr;gap:34px}.vcell__img{max-width:340px;margin-inline:auto}}

/* --------------------------------------------------------------- grid -- */
.cards{display:grid;gap:14px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:24px;
  display:flex;flex-direction:column;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
a.card:hover{border-color:rgba(85,205,238,.6);box-shadow:var(--lift-2);transform:translateY(-2px)}
.card__ico{
  width:36px;height:36px;border-radius:9px;
  display:grid;place-items:center;
  background:var(--buz);
  border:1px solid rgba(85,205,238,.45);
  color:var(--ink);
  margin-bottom:16px;flex:none;
  transition:background .2s ease,border-color .2s ease;
}
.card__ico svg{width:18px;height:18px}
a.card:hover .card__ico{background:var(--accent);border-color:var(--accent)}
.card__ico--gold{background:var(--gold-wash);border-color:rgba(176,119,20,.3)}
.card__no{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  color:var(--ink-3);margin-bottom:12px;
}
.card h3{margin-bottom:8px}
.card p{font-size:13.5px;color:var(--ink-2);line-height:1.58}
.card__list{list-style:none;margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.card__list li{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-pill);
  padding:4px 9px;
}
.card__go{
  margin-top:auto;padding-top:18px;
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--ink);
}
.card__go svg{width:14px;height:14px;color:var(--accent-deep);transition:transform .18s ease}
a.card:hover .card__go svg{transform:translateX(3px)}
.card--tint{background:var(--paper)}
.card--ice{background:var(--buz);border-color:rgba(85,205,238,.28)}
.card--ink{background:rgba(247,242,232,.045);border-color:var(--line-inv)}
.card--ink h3{color:var(--paper)}
.card--ink p{color:rgba(247,242,232,.6)}
.card--ink .card__ico{background:rgba(85,205,238,.14);border-color:rgba(85,205,238,.45);color:var(--accent)}
/* .5 alpha measured 4.3:1 on the navy card at 9.5px — under AA's 4.5.
   These are the smallest text on the site, so they need the most alpha. */
.card--ink .card__list li{border-color:var(--line-inv);color:rgba(247,242,232,.66)}
/* --ink-3 is a dark blue-grey (it has to be, for AA on the light surfaces),
   so it can't carry these on navy — 2.37:1. Invert them instead. */
.card--ink .card__no,
.sec--ink .card--ink .card__no{color:rgba(247,242,232,.66)}
.card--ink .card__go{color:var(--accent)}

/* --------------------------------------------------------------- feat -- */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,4.5vw,72px);align-items:center;
}
.split--rev .split__media{order:2}
.feats{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:24px}
.feats li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--ink-2);line-height:1.5}
.feats svg{width:16px;height:16px;color:var(--accent-deep);flex:none;margin-top:3px}
.sec--ink .feats li{color:rgba(247,242,232,.7)}
.sec--ink .feats svg{color:var(--accent)}

/* mascot — the Cartify robot, used only where it has a job to do */
.mascot{
  width:100%;max-width:340px;height:auto;
  margin-inline:auto;
  filter:drop-shadow(0 24px 40px rgba(21,37,52,.18));
}
.mascot--sm{max-width:180px}
.mascot-stage{
  position:relative;
  display:grid;place-items:center;
  padding:clamp(18px,3vw,34px);
}
/* turquoise LED halo behind the robot — echoes its eyes */
.mascot-stage::before{
  content:"";position:absolute;z-index:0;
  width:min(78%,420px);aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(85,205,238,.34),rgba(85,205,238,0) 68%);
}
.mascot-stage > *{position:relative;z-index:1}

/* ==================================================================
   MASCOT ANIMATION SYSTEM
   The Cartify robot ships as 8 transparent PNG poses. Each animation
   layers 1–2 poses and moves them with transform/opacity only, so it
   stays on the compositor (60fps) and never repaints.
   Backgrounds stay transparent — the halo behind is a CSS radial, so
   the robot never sits on a cream square.
   Every variant collapses to a single still frame under reduced-motion.
   ================================================================== */
.bot{
  position:relative;
  width:100%;max-width:340px;
  aspect-ratio:1/1;
  margin-inline:auto;
}
.bot--sm{max-width:210px}
.bot--lg{max-width:330px}
.bot__l{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  background:none;               /* poses are RGBA — never paint behind them */
  filter:drop-shadow(0 22px 34px rgba(21,37,52,.20));
  will-change:transform,opacity;
}
/* LED halo — echoes the robot's turquoise eyes, keeps the PNG from
   floating in nothing without introducing a solid backdrop */
.bot::before{
  content:"";position:absolute;z-index:0;
  left:50%;top:52%;transform:translate(-50%,-50%);
  width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(85,205,238,.32),rgba(85,205,238,0) 68%);
  pointer-events:none;
}
.bot--noglow::before{display:none}

/* ---- idle float: shared base for the standing poses ---- */
@keyframes bot-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* ---- 0. IDLE — the robot simply present, breathing ---- */
.bot--idle .bot__l{animation:bot-float 5.2s ease-in-out infinite}

/* ---- 1. WINK — greeting on /giris/ and /basvuru/ ----
   Base pose (eyes open) holds; the wink pose cuts in briefly, so it reads
   as a wink + thumbs-up greeting rather than a crossfade smear. */
.bot--wink .bot__l{animation:bot-float 4.5s ease-in-out infinite}
.bot--wink .bot__l--b{opacity:0;animation:bot-float 4.5s ease-in-out infinite,bot-wink 5s steps(1,end) infinite}
.bot--wink .bot__l--a{animation:bot-float 4.5s ease-in-out infinite,bot-wink-out 5s steps(1,end) infinite}
@keyframes bot-wink{
  0%,62%{opacity:0}
  64%,86%{opacity:1}
  88%,100%{opacity:0}
}
@keyframes bot-wink-out{
  0%,62%{opacity:1}
  64%,86%{opacity:0}
  88%,100%{opacity:1}
}

/* ---- 2. CHEER — application submitted. Bounces and opens/closes arms. ---- */
.bot--cheer{--cheer:.62s}
.bot--cheer .bot__l{animation:bot-hop var(--cheer) cubic-bezier(.3,.7,.4,1) infinite}
.bot--cheer .bot__l--a{animation-name:bot-hop,bot-arms-down}
.bot--cheer .bot__l--b{animation-name:bot-hop,bot-arms-up}
.bot--cheer .bot__l--a,.bot--cheer .bot__l--b{
  animation-duration:var(--cheer),calc(var(--cheer) * 2);
  animation-timing-function:cubic-bezier(.3,.7,.4,1),steps(1,end);
  animation-iteration-count:infinite;
}
@keyframes bot-hop{
  0%,100%{transform:translateY(0) scaleY(1)}
  28%{transform:translateY(-20px) scaleY(1.03)}
  60%{transform:translateY(0) scaleY(.97)}
  75%{transform:translateY(0) scaleY(1)}
}
@keyframes bot-arms-up{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes bot-arms-down{0%,49%{opacity:0}50%,100%{opacity:1}}

/* ---- 3. CARRY — client logistics support. A weighted walk. ---- */
.bot--carry .bot__l{animation:bot-walk 1.9s ease-in-out infinite;transform-origin:50% 92%}
@keyframes bot-walk{
  0%,100%{transform:translateY(0) rotate(-1.4deg)}
  25%{transform:translateY(-7px) rotate(0deg)}
  50%{transform:translateY(0) rotate(1.4deg)}
  75%{transform:translateY(-7px) rotate(0deg)}
}

/* ---- 4. ARRIVE — developer / MCP section.
   Robot rockets in, lands, then works at the laptop. Plays once when the
   section scrolls into view (JS adds .play), then settles into a typing idle. */
.bot--arrive .bot__l{opacity:0}
.bot--arrive .bot__l--fly{
  opacity:0;
  transform:translate(-72%,68%) rotate(-24deg) scale(.72);
}
.bot--arrive .bot__l--work{transform:scale(.94)}
.bot--arrive::before{opacity:0;transition:opacity .7s ease .9s}

.bot--arrive.play::before{opacity:1}
.bot--arrive.play .bot__l--fly{animation:bot-flyin 1.25s cubic-bezier(.22,.9,.28,1) both}
/* `both` matters: it makes the 0% keyframe (opacity:0) hold through the 1.05s
   delay, so the working pose stays hidden until the robot has actually landed */
.bot--arrive.play .bot__l--work{
  animation-name:bot-land,bot-type;
  animation-duration:.5s,3.2s;
  animation-timing-function:cubic-bezier(.2,1.4,.4,1),ease-in-out;
  animation-delay:1.05s,1.6s;
  animation-iteration-count:1,infinite;
  animation-fill-mode:both,none;
}
@keyframes bot-flyin{
  0%{opacity:0;transform:translate(-72%,68%) rotate(-24deg) scale(.72)}
  18%{opacity:1}
  72%{opacity:1;transform:translate(2%,-6%) rotate(4deg) scale(1)}
  88%{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}
  100%{opacity:0;transform:translate(0,0) rotate(0deg) scale(1)}
}
@keyframes bot-land{
  0%{opacity:0;transform:scale(.94)}
  60%{opacity:1;transform:scale(1.02)}
  100%{opacity:1;transform:scale(1)}
}
/* the "working" idle — tiny, so it reads as typing not bouncing */
@keyframes bot-type{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
/* No-JS fallback: without .play nothing is visible, so show the working pose.
   (With JS, site.js adds .play — on view, or immediately if IO is missing.) */
.no-js .bot--arrive .bot__l--work{opacity:1;animation:none}

/* ---- mascot video ---------------------------------------------------------
   Real footage beats a two-frame swap. Video can't carry an alpha channel, so
   each clip is generated on the exact flat colour of the band it sits in
   (navy #152534 for .sec--ink, cream #F7F2E8 for the open sections) and drops
   in seamlessly. Poster is a WebP first frame so nothing pops in.
   -------------------------------------------------------------------------- */
.botvid{
  width:100%;max-width:360px;height:auto;
  margin-inline:auto;display:block;
  /* The clip's background is generated at the band's colour but video encoding
     lands 1–2 levels off, and the eye catches that as a rectangle. Feathering
     the edges dissolves the seam instead of chasing an exact colour match —
     works on any band, survives re-encodes. */
  -webkit-mask-image:radial-gradient(ellipse 74% 74% at 50% 50%, #000 55%, transparent 92%);
          mask-image:radial-gradient(ellipse 74% 74% at 50% 50%, #000 55%, transparent 92%);
}
.botvid--lg{max-width:440px}
/* the clip already carries the section colour, so no glow plate behind it */
.botvid-stage{display:grid;place-items:center;padding:clamp(8px,1.6vw,20px)}

/* ---- FLYBOT — the jet robot roaming the page (see assets/js/flyer.js).
   Sits above the background, below all content. Never interactive. ---- */
/* z-index:-1 puts it below every card and tinted band but above the page
   background, so the robot flies *behind* the layout and shows through the
   whitespace. It can never cover text. */
#flybot{
  position:fixed;top:0;left:0;
  width:128px;height:auto;   /* BOT_W in flyer.js — keep in sync */
  z-index:-1;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 16px 22px rgba(21,37,52,.14));
}
/* flyer.js removes it outright when the gutter can't hold it; this is the
   no-JS / pre-boot guard for the same cases */
@media (max-width:1379px){#flybot{display:none}}
@media (prefers-reduced-motion:reduce){#flybot{display:none}}

/* ---- 5. SAD — error and 404 states ---- */
.bot--sad::before{background:radial-gradient(circle,rgba(154,162,172,.3),rgba(154,162,172,0) 68%)}
.bot--sad .bot__l{animation:bot-sigh 4.2s ease-in-out infinite}
@keyframes bot-sigh{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(5px) rotate(-1.2deg)}
}

@media (prefers-reduced-motion:reduce){
  .bot__l,.bot--arrive .bot__l,.bot--arrive.play .bot__l{animation:none!important;transform:none!important}
  .bot--arrive::before{opacity:1}
  /* hold one readable frame per variant */
  .bot--wink .bot__l--b,
  .bot--cheer .bot__l--a,
  .bot--arrive .bot__l--fly{opacity:0}
  .bot--wink .bot__l--a,
  .bot--cheer .bot__l--b,
  .bot--arrive .bot__l--work{opacity:1}
}

/* -------------------------------------------------------- journey -- */
.journey{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:24px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.step:hover{border-color:rgba(85,205,238,.6);box-shadow:var(--lift-2)}
.step__no{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  margin-bottom:16px;
  transition:background .2s ease,color .2s ease;
}
.step:hover .step__no{background:var(--accent);color:var(--ink)}
.step h3{margin-bottom:8px}
.step p{font-size:13.5px;color:var(--ink-2);line-height:1.58}
.step__list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:6px}
.step__list li{
  font-size:12.5px;color:var(--ink-3);padding-left:14px;position:relative;line-height:1.45;
}
.step__list li::before{
  content:"";position:absolute;left:0;top:8px;
  width:6px;height:2px;background:var(--accent);border-radius:2px;
}

/* ---------------------------------------------------------- logo rail -- */
.rail{overflow:hidden;position:relative;padding-block:6px}
.rail::before,.rail::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none;
}
.rail::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.rail::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.sec--tint .rail::before{background:linear-gradient(90deg,var(--sand),transparent)}
.sec--tint .rail::after{background:linear-gradient(270deg,var(--sand),transparent)}
.sec--ice .rail::before{background:linear-gradient(90deg,var(--ice),transparent)}
.sec--ice .rail::after{background:linear-gradient(270deg,var(--ice),transparent)}
.rail__track{display:flex;gap:14px;width:max-content;animation:rail 46s linear infinite}
.rail:hover .rail__track{animation-play-state:paused}
@keyframes rail{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rail{overflow-x:auto}
  .rail__track{animation:none}
}
/* Static grid, not a marquee. The scrolling rail had to duplicate the logos
   to loop, so Walmart and eBay appeared twice on screen at once and read as a
   bug; the greyscale+.6 treatment on the ice band left them looking unloaded;
   and the motion said nothing (DESIGN.md: zero decorative-only motion). */
.mkgrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:12px;
}
.mk{
  display:grid;place-items:center;
  min-height:78px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:16px;
  transition:border-color .2s ease,transform .2s ease;
}
.mk:hover{border-color:rgba(85,205,238,.6);transform:translateY(-2px)}
.mk img{
  max-height:26px;width:auto;
  filter:grayscale(.25);
  transition:filter .22s ease;
}
.mk:hover img{filter:grayscale(0)}
@media (max-width:1080px){.mkgrid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:720px){.mkgrid{grid-template-columns:repeat(2,1fr)}}

/* Partner cards — two real partners, side by side. Each one leads with its
   own visual, so the section reads as "here they are", not as a grid with
   holes in it. */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcard{
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  border-radius:var(--r-card);
  padding:clamp(20px,2.4vw,28px);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.pcard:hover{box-shadow:var(--lift-2)}
.pcard__vis{display:grid;place-items:center;min-height:190px;margin-bottom:6px}
.pcard__img{width:100%;max-width:210px;height:auto;filter:drop-shadow(0 18px 30px rgba(21,37,52,.16))}
.pcard h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px}
.pcard p{font-size:14px;color:var(--ink-2);line-height:1.6;max-width:46ch}

/* Marketplace partners — five names, so this card runs the full width and lays
   its logos out in a row instead of pretending to be a portrait card like the
   other two. Text sits left, logos right; they stack on narrow screens. */
.pcard--wide{grid-column:1 / -1}
.pcard--wide .pcard__body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(20px,3vw,40px);
  align-items:center;
}
.pcard--wide p{max-width:52ch}
.pmk{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;
}
.pmk__i{
  display:grid;place-items:center;
  min-height:74px;
  background:var(--krem);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:14px;
  transition:border-color .2s ease,transform .2s ease;
}
.pmk__i:hover{border-color:rgba(85,205,238,.6);transform:translateY(-2px)}
.pmk__i img{max-height:24px;width:auto;filter:grayscale(.25);transition:filter .22s ease}
.pmk__i:hover img{filter:grayscale(0)}
@media (max-width:900px){
  .pcard--wide .pcard__body{grid-template-columns:1fr;gap:22px}
  .pmk{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .pgrid{grid-template-columns:1fr}
  .pcard{text-align:center}
  .pcard .eyebrow{justify-content:center}
  .pcard p{margin-inline:auto}
}

/* partner slots — placeholders must still look considered */
.slots{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.slot{
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  min-height:100px;padding:16px;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
}
.slot__name{font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:-.02em}
.slot__cat{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.slot--filled{border-color:rgba(85,205,238,.5);background:var(--buz)}
.slot--empty{
  background:repeating-linear-gradient(-45deg,transparent,transparent 7px,rgba(21,37,52,.03) 7px,rgba(21,37,52,.03) 8px);
  border-style:dashed;border-color:var(--line-2);
}
.slot--empty .slot__name{color:var(--ink-3);font-size:14px;font-weight:400;font-family:var(--font-body)}

/* -------------------------------------------------------------- tags -- */
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  font-size:12.5px;color:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:5px 12px;
  background:var(--surface);
}
.sec--ink .tag{border-color:var(--line-inv);color:rgba(247,242,232,.66);background:transparent}
.sec--ink .tag:hover{border-color:rgba(85,205,238,.5);color:var(--paper)}

/* --------------------------------------------------------------- faq -- */
.faq{max-width:820px;margin-inline:auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:flex-start;gap:14px;
  padding:19px 4px;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;
  font-size:16.5px;letter-spacing:-.015em;line-height:1.35;
  transition:color .16s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-deep)}
.faq summary .qno{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);
  padding-top:5px;flex:none;font-weight:400;letter-spacing:.08em}
.faq .chev{
  margin-left:auto;flex:none;width:16px;height:16px;color:var(--ink-3);
  transition:transform .22s ease,color .22s ease;
}
.faq details[open] .chev{transform:rotate(45deg);color:var(--accent-deep)}
.faq details[open] summary{color:var(--ink)}
.faq .a{
  padding:0 4px 22px 42px;
  font-size:14.5px;color:var(--ink-2);line-height:1.65;max-width:70ch;
}
.faq .a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;text-underline-offset:2px}

/* ------------------------------------------------------------- forms -- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field > label{font-size:13px;font-weight:500;color:var(--ink);display:flex;gap:6px;align-items:baseline}
.field .opt{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400}
.field .hint{font-size:12px;color:var(--ink-3);line-height:1.45}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:14.5px;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line-2);
  border-radius:var(--r-ctl);
  padding:11px 13px;
  width:100%;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(85,205,238,.3);
}
.field select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8794' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;
  padding-right:34px;
}
.field--err input,.field--err select,.field--err textarea{border-color:#C0392B}
.field--err input:focus,.field--err select:focus,.field--err textarea:focus{box-shadow:0 0 0 3px rgba(192,57,43,.14)}
.err-msg{font-size:12px;color:#C0392B;display:none;align-items:center;gap:5px}
.field--err .err-msg{display:flex}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field--full{grid-column:1/-1}

/* choice chips */
.choices{display:flex;flex-wrap:wrap;gap:7px}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--ink-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:7px 13px;cursor:pointer;
  background:var(--surface);
  transition:border-color .16s ease,background .16s ease,color .16s ease;
  user-select:none;
}
.choice span::before{
  content:"";width:13px;height:13px;flex:none;
  border:1.5px solid var(--line-2);border-radius:3px;
  transition:background .16s ease,border-color .16s ease;
  background-repeat:no-repeat;background-position:center;background-size:9px;
}
.choice:hover span{border-color:var(--ink-3)}
.choice input:checked + span{
  border-color:var(--accent);background:var(--buz);color:var(--ink);font-weight:500;
}
.choice input:checked + span::before{
  background-color:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23152534' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.choice input:focus-visible + span{outline:2px solid var(--accent-deep);outline-offset:2px}
.choice--radio span::before{border-radius:50%}
.choice--radio input:checked + span::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23152534'%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3C/svg%3E");
}

.consent{display:flex;gap:10px;align-items:flex-start;padding:11px 0}
.consent + .consent{border-top:1px solid var(--line)}
.consent input{
  width:16px;height:16px;flex:none;margin-top:2px;
  accent-color:var(--accent-deep);cursor:pointer;
}
.consent label{font-size:13.5px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-decoration-thickness:2px;text-underline-offset:2px}
.consent .req{color:#C0392B}

/* ------------------------------------------------------------ reveal -- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .32s ease-out,transform .32s ease-out}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.06s}
.reveal-d2{transition-delay:.12s}
.reveal-d3{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* --------------------------------------------------------- utilities -- */
/* This carries the trademark disclaimers and the logistics scope limit — the
   most consequential text on the site. --ink-3 on --ice was 3.40:1; AA needs
   4.5:1 at this size. --ink-2 is 7.08:1. */
.legal-note{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:14px;max-width:70ch}
.sec--ink .legal-note{color:rgba(247,242,232,.62)}
.center{text-align:center}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:-60px;left:12px;z-index:200;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:var(--r-ctl);font-size:14px;
  transition:top .18s ease;
}
.skip-link:focus{top:12px}

/* callout — scope / limit statements. Gold = the "selective" signal. */
.callout{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--buz);
  border:1px solid rgba(85,205,238,.4);
  border-left:3px solid var(--accent);
  border-radius:var(--r-card);
  padding:16px 18px;
  font-size:13.5px;color:var(--ink-2);line-height:1.55;
}
.callout svg{width:17px;height:17px;color:var(--accent-deep);flex:none;margin-top:2px}
.callout strong{color:var(--ink);font-weight:600}
.callout--gold{background:var(--gold-wash);border-color:rgba(176,119,20,.28);border-left-color:var(--gold)}
.callout--gold svg{color:var(--gold)}
.sec--ink .callout{background:rgba(85,205,238,.1);border-color:rgba(85,205,238,.3);
  border-left-color:var(--accent);color:rgba(247,242,232,.72)}
.sec--ink .callout strong{color:var(--paper)}
.sec--ink .callout svg{color:var(--accent)}

/* =========================================================================
   CUSTOMS DUTY TOOL — /gumruk-hesaplama/
   A free lookup tool inside the e-export practice: search the official USITC
   HTS pool, pick a line, estimate the US import duty on a shipment value.
   Built on the existing kit (.console shell, .field, .card, .callout); only
   the pieces the kit has no equivalent for are declared here.
   Contrast: the estimate panel is navy, which is the one place turquoise is
   allowed to carry text — so the number itself is the LED signal.
   ========================================================================= */

/* the console body normally holds .crow rows at 6px; the tool needs real padding */
.console__body--pad{padding:clamp(16px,2.4vw,24px)}

/* these blocks declare a display, which would otherwise defeat [hidden] */
.hs-idle[hidden],.hs-empty[hidden],.hs-chapters[hidden]{display:none}

/* segmented control — search mode */
.hs-tabs{
  display:inline-flex;gap:4px;
  padding:4px;margin-bottom:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-ctl);
}
.hs-tab{
  font-family:var(--font-body);font-size:13.5px;font-weight:500;
  color:var(--ink-2);
  background:transparent;border:0;
  border-radius:4px;padding:8px 15px;cursor:pointer;
  transition:background .18s ease,color .18s ease,transform .12s ease;
}
.hs-tab:hover{color:var(--ink);background:rgba(21,37,52,.05)}
.hs-tab:active{transform:translateY(1px)}
.hs-tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}

/* status line — mono, because it reports machine state */
.hs-status{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;
  color:var(--ink-3);
  margin-top:10px;min-height:16px;
}

/* results listbox */
.hs-results{
  list-style:none;
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
  max-height:342px;overflow-y:auto;
  overscroll-behavior:contain;
}
.hs-results:empty{display:none}
.hs-results:focus-visible{outline:2px solid var(--accent-deep);outline-offset:2px}
.hs-opt{
  display:grid;grid-template-columns:112px 1fr 74px;
  gap:12px;align-items:center;
  padding:11px 13px;
  cursor:pointer;
  box-shadow:inset 0 -1px 0 var(--line);
  transition:background .14s ease;
}
.hs-opt:last-child{box-shadow:none}
.hs-opt:hover{background:var(--buz)}
.hs-opt.is-active{background:var(--buz);box-shadow:inset 2px 0 0 var(--accent),inset 0 -1px 0 var(--line)}
.hs-opt[aria-selected="true"] .hs-opt__code{font-weight:500}
.hs-opt__code{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);white-space:nowrap}
.hs-opt__desc{
  font-size:13px;color:var(--ink-2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hs-opt__rate{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);text-align:right}

/* empty search result — the mascot takes the bad news */
.hs-empty{
  display:flex;align-items:center;gap:18px;
  margin-top:12px;padding:18px;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--surface);
}
.hs-empty .bot{flex:none;width:124px;margin:0}
.hs-empty p{font-size:13.5px;color:var(--ink-2);line-height:1.55}

/* chapter browse */
.hs-chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.hs-ch{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:13px;text-align:left;
  color:var(--ink-2);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-ctl);
  padding:10px 12px;cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease,transform .12s ease;
}
.hs-ch:hover{border-color:rgba(85,205,238,.6);background:var(--buz);color:var(--ink)}
.hs-ch:active{transform:translateY(1px)}
.hs-ch__no{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:none}
.hs-ch__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-ch__cnt{margin-left:auto;font-family:var(--font-mono);font-size:10px;color:var(--ink-3);flex:none}

/* estimate area — idle state before a product is picked */
.hs-idle{
  display:flex;align-items:center;gap:clamp(16px,3vw,32px);
  padding:clamp(20px,3vw,28px);
  border:1px dashed var(--line-2);
  border-radius:var(--r-card);
  background:repeating-linear-gradient(-45deg,transparent,transparent 7px,rgba(21,37,52,.03) 7px,rgba(21,37,52,.03) 8px);
}
.hs-idle .bot{flex:none;width:132px;margin:0}
.hs-idle p{font-size:13.5px;color:var(--ink-2);line-height:1.55;max-width:52ch}
/* a failed search already puts the sad mascot on screen — one robot at a time */
.hs-idle--nobot .bot{display:none}

/* estimate area — selected line + calculator */
.hs-sel{display:none}
.hs-sel.show{display:block}
.hs-sel__code{
  font-family:var(--font-mono);font-size:14px;letter-spacing:.03em;
  color:var(--ink);
}
.hs-sel__desc{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-top:8px;max-width:86ch}
.hs-calc{
  display:grid;grid-template-columns:.8fr 1.2fr;
  gap:clamp(16px,2.4vw,26px);
  align-items:start;
  margin-top:20px;
}
.hs-out{
  background:var(--ink);
  border-radius:var(--r-card);
  padding:clamp(16px,2vw,20px);
}
.hs-out__lbl{
  display:block;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,242,232,.5);
  margin-bottom:6px;
}
.hs-brow{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;
  border-bottom:1px solid var(--line-inv);
  font-size:13px;color:rgba(247,242,232,.68);line-height:1.45;
}
.hs-brow b{font-family:var(--font-mono);font-weight:400;color:var(--paper);white-space:nowrap}
/* inline-block: the global svg{display:block} would drop it onto its own line */
.hs-brow__ico{display:inline-block;width:13px;height:13px;margin-right:6px;vertical-align:-2px}
.hs-brow--warn{color:rgba(247,242,232,.8)}
.hs-brow--warn .hs-brow__ico{color:var(--gold)}
.hs-brow--ref{font-size:11px;color:rgba(247,242,232,.5)}
.hs-brow--ref .hs-brow__ico{color:var(--accent)}
.hs-brow--ref span:last-child{text-align:right}
.hs-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(85,205,238,.35);
}
.hs-total .tl{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(247,242,232,.55);
}
.hs-total em{
  font-style:normal;
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;line-height:1;
  color:var(--accent);
  text-shadow:0 0 26px rgba(85,205,238,.32);
}
.hs-total .plus{font-family:var(--font-body);font-size:11.5px;color:rgba(247,242,232,.5)}
.hs-note{font-size:11.5px;color:rgba(247,242,232,.45);line-height:1.55;margin-top:12px}

@media (max-width:900px){
  .hs-chapters{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hs-calc{grid-template-columns:1fr}
  .hs-idle{flex-direction:column;text-align:center}
  .hs-idle .bot{width:110px}
}
@media (max-width:560px){
  .hs-chapters{grid-template-columns:1fr}
  .hs-opt{grid-template-columns:1fr auto;gap:4px 10px}
  .hs-opt__desc{grid-column:1/-1}
  .hs-opt__rate{text-align:right}
  .hs-tabs{display:flex;width:100%}
  .hs-tab{flex:1}
  .hs-empty{flex-direction:column;text-align:center}
}

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  .cards--4{grid-template-columns:repeat(2,1fr)}
  .journey{grid-template-columns:repeat(2,1fr)}
  .slots{grid-template-columns:repeat(3,1fr)}
  .ft__top{grid-template-columns:1fr 1fr 1fr;gap:36px 24px}
  .ft__brand{grid-column:1/-1}
}
@media (max-width:900px){
  .hd__nav{display:none}
  .hd__burger{display:flex}
  .hd__hide-m{display:none}
  .hero__grid{grid-template-columns:1fr;gap:40px}
  .split{grid-template-columns:1fr;gap:32px}
  .split--rev .split__media{order:0}
  .vstrip .wrap{grid-template-columns:1fr 1fr}
  .cards--3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  :root{--sec-y:clamp(56px,11vw,80px)}
  .hero__meta{gap:8px}
  .cards--2,.cards--3,.cards--4{grid-template-columns:1fr}
  .journey{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(2,1fr)}
  .grid2{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr 1fr}
  .faq .a{padding-left:4px}
  .rail::before,.rail::after{width:40px}
}
@media (max-width:520px){
  /* the bar holds logo + lang + CTA + burger — tighten the CTA, not the logo */
  .hd__bar{gap:8px}
  .hd__actions{gap:4px}
  .hd__actions .btn{padding:9px 13px;font-size:13px}
  .hd__lang{padding:8px 4px;font-size:10.5px}
}
@media (max-width:420px){
  .vstrip .wrap{grid-template-columns:1fr}
  .slots{grid-template-columns:1fr}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
}

/* =========================================================================
   ADDENDUM — components introduced by the sub-pages. Tokens only, no new
   colours. Everything else on those pages reuses the library above.
   ========================================================================= */

/* ------------------------------------------------------- code block -- */
/* /gelistirici/ — navy instrument panel for illustrative API samples.
   Two token colours only, so the turquoise stays a signal:
     .k = the thing that matters (key, method, command)
     .c = commentary, dimmed
   Contrast on --ink: body 10:1 · .c 4.7:1 · .k 8.4:1 */
.code{
  background:var(--ink);
  border-radius:var(--r-card);
  overflow:hidden;
  min-width:0;                       /* lets the <pre> scroll inside a grid */
  box-shadow:var(--lift-2);
}
.sec--ink .code{
  background:rgba(247,242,232,.045);
  border:1px solid var(--line-inv);
  box-shadow:none;
}
.code__bar{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;
  border-bottom:1px solid var(--line-inv);
  background:rgba(85,205,238,.06);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(247,242,232,.55);
}
.code__m{
  flex:none;
  font-size:9.5px;letter-spacing:.08em;
  color:var(--accent);
  border:1px solid rgba(85,205,238,.45);
  border-radius:var(--r-pill);
  padding:3px 8px;
}
.code__note{
  margin-left:auto;
  text-transform:none;letter-spacing:.02em;font-size:9.5px;
  /* says "temsili" on every code block — the honesty label, so it has to be
     readable. .38 measured 3.09:1 on the ink block. */
  color:rgba(247,242,232,.62);
}
.code pre{
  margin:0;padding:16px 18px;
  overflow-x:auto;
  font-family:var(--font-mono);font-size:12.5px;line-height:1.75;
  color:rgba(247,242,232,.84);
  tab-size:2;
}
.code pre:focus-visible{outline:2px solid var(--accent-deep);outline-offset:-2px}
.code code{font:inherit;color:inherit;white-space:pre}
.code .k{color:var(--accent)}
.code .c{color:rgba(247,242,232,.52)}
@media (max-width:520px){.code pre{font-size:11.5px;padding:14px}}

/* ------------------------------------- console ownership badges -- */
/* /partnerlik/white-label/ — same shell as .crow__badge--ai/--human,
   different meaning: who owns which layer. */
.crow__badge--you{color:var(--ink);border-color:rgba(85,205,238,.5);background:var(--buz)}
.crow__badge--cf{color:#7A5410;border-color:rgba(176,119,20,.32);background:var(--gold-wash)}

/* -------------------------------- step list inside a dark card -- */
/* .step__list is authored for the light .step card; on .card--ink it needs
   the same inversion .card--ink p already gets. (/hakkimizda/) */
.card--ink .step__list li{color:rgba(247,242,232,.6)}

/* =========================================================================
   APPLICATION FLOW — /basvuru/ and /basvuru/tesekkurler/
   Everything below is layout + step state for the multi-step form. It sits
   on the existing primitives (.field, .grid2, .choices, .choice, .consent,
   .err-msg, .callout, .card) — no new colours beyond the error red already
   used by .err-msg (#C0392B), no new type styles. Tokens only.
   ========================================================================= */

/* --- small primitives the form needed and the library didn't have yet --- */
/* [hidden] is a UA rule (display:none); any author `display` beats it. Every
   component we toggle from JS has to opt back in explicitly. */
.btn[hidden]{display:none}
.callout[hidden]{display:none}
button.tlink{border:0;background:none;font-family:inherit;cursor:pointer}
.err-msg svg{width:13px;height:13px;flex:none}
.callout--err{background:#FBEDEB;border-color:rgba(192,57,43,.28);border-left-color:#C0392B;color:var(--ink-2)}
.callout--err svg{color:#C0392B}
.callout .btn{margin-left:auto;flex:none;align-self:center}

/* label row: label on the left, live character counter on the right.
   .field > label rules don't reach a nested label, so restate them here. */
.field__hd{display:flex;align-items:baseline;gap:10px}
.field__hd > label{font-size:13px;font-weight:500;color:var(--ink)}
.counter{
  margin-left:auto;flex:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--ink-3);
}
.counter.is-bad{color:#C0392B}

/* a labelled group of chips/consents. Real <fieldset>+<legend>, reset flat.
   Error state reuses .field--err so .err-msg display logic stays in one place. */
.fgroup{border:0;padding:0;margin:0 0 18px;min-width:0}
.fgroup__l{display:block;font-size:13px;font-weight:500;color:var(--ink);padding:0;margin-bottom:8px}
.fgroup__l .opt{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-weight:400;margin-left:6px;
}
.fgroup .hint{font-size:12px;color:var(--ink-3);line-height:1.45;margin:-3px 0 9px}
.fgroup .err-msg{margin-top:8px}
.fgroup .legal-note{margin-top:10px}
.fgroup.field--err .choice span{border-color:rgba(192,57,43,.55)}
.fgroup.field--err .consent input[required]:not(:checked){
  outline:2px solid #C0392B;outline-offset:2px;border-radius:3px;
}
/* a .grid2 cell holding a group, so chips can sit side by side */
.grid2 > .fgroup{margin-bottom:16px}

/* ------------------------------------------------------------ layout --- */
.apply{
  display:grid;
  grid-template-columns:246px 1fr;
  gap:clamp(22px,3.4vw,52px);
  align-items:start;
}
/* min-width:0 is load-bearing. A grid item defaults to min-width:auto, so the
   track would size to the rail's max-content (the whole step list laid out in
   a row on mobile) and the page would scroll sideways — the .steps overflow
   scroller never gets a chance to engage. */
.apply__rail{position:sticky;top:calc(var(--hd-h) + 24px);min-width:0}
.apply__form{min-width:0}

/* --------------------------------------------------- step indicator --- */
.steps{list-style:none;position:relative;display:flex;flex-direction:column;gap:2px}
/* the spine — .step-i__no sits on top of it and breaks it into segments */
.steps::before{
  content:"";position:absolute;z-index:0;
  left:22px;top:22px;bottom:22px;width:1px;
  background:var(--line-2);
}
.step-i{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:11px;
  width:100%;padding:9px;
  border:0;border-radius:var(--r-ctl);
  background:none;
  font-family:inherit;font-size:13.5px;line-height:1.3;text-align:left;
  color:var(--ink-3);
  cursor:default;
  transition:color .16s ease,background .16s ease;
}
.step-i__no{
  position:relative;
  width:26px;height:26px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface);
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--ink-3);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.step-i__ck{display:none;width:12px;height:12px}
.step-i__t{min-width:0}
/* current */
.step-i[aria-current="step"]{color:var(--ink)}
.step-i[aria-current="step"] .step-i__t{font-weight:500}
.step-i[aria-current="step"] .step-i__no{
  background:var(--accent);border-color:var(--accent);color:var(--ink);
  box-shadow:0 0 0 3px rgba(85,205,238,.22);
}
/* completed — navigable */
.step-i.is-done{color:var(--ink-2);cursor:pointer}
.step-i.is-done .step-i__no{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.step-i.is-done .step-i__no i{display:none}
.step-i.is-done .step-i__ck{display:block}
.step-i.is-done:hover{background:rgba(21,37,52,.05);color:var(--ink)}
.step-i.is-done:active{transform:translateY(1px)}
.step-i[disabled]{opacity:.55}
.apply__meta{
  display:flex;flex-direction:column;gap:7px;
  margin-top:20px;padding-top:16px;
  border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);line-height:1.45;
}
.apply__meta span{display:flex;align-items:flex-start;gap:7px}
.apply__meta svg{width:13px;height:13px;color:var(--accent-deep);flex:none;margin-top:3px}

/* --------------------------------------------------------- step panel -- */
.fstep{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:clamp(20px,2.6vw,32px);
  box-shadow:var(--lift-1);
  transition:opacity .2s ease-out,transform .2s ease-out;
}
.fstep[hidden]{display:none}
.fstep.is-enter{opacity:0;transform:translateY(8px)}
.fstep h2{font-size:clamp(21px,2.1vw,27px)}
.fstep h2:focus-visible{outline:2px solid var(--accent-deep);outline-offset:4px}
.fstep .lead{font-size:14.5px;margin-top:10px}
.fstep__body{margin-top:24px}
.fstep__body > .callout{margin-bottom:20px}
/* a rule between related blocks inside one step */
.fstep__sep{
  border:0;border-top:1px solid var(--line);
  margin:22px 0;
}

.apply__nav{display:flex;align-items:center;gap:12px;margin-top:18px}
.apply__nav #btnBack{margin-right:auto}
.apply__nav .btn svg{width:15px;height:15px}

/* ------------------------------------------------------------ summary -- */
.sum{display:flex;flex-direction:column;gap:12px}
.sum-g{
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--paper);
  padding:15px 17px;
}
.sum-g__h{
  display:flex;align-items:center;gap:11px;
  padding-bottom:11px;margin-bottom:12px;
  border-bottom:1px solid var(--line);
}
.sum-g__no{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.sum-g__t{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.015em}
.sum-g .tlink{margin-left:auto;font-size:12.5px}
.sum-dl{display:grid;grid-template-columns:minmax(110px,30%) 1fr;gap:9px 18px}
.sum-dl dt{font-size:12px;color:var(--ink-3);line-height:1.45}
.sum-dl dd{font-size:13.5px;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
.sum-dl dd.is-empty{color:var(--ink-3)}

/* ---------------------------------------------- submitted / thank you -- */
.refno[hidden]{display:none}                /* inline-flex would defeat [hidden] */
.refno{
  display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:var(--r-ctl);
  padding:12px 18px;
  box-shadow:var(--lift-1);
}
.refno__k{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.refno__v{
  font-family:var(--font-mono);font-size:clamp(15px,1.6vw,19px);
  letter-spacing:.06em;color:var(--ink);
}

/* ------------------------------------------------------- responsive --- */
@media (max-width:980px){
  .apply{grid-template-columns:1fr}
  .apply__rail{position:static;margin-bottom:6px}
  .steps{
    flex-direction:row;gap:6px;
    overflow-x:auto;overscroll-behavior-x:contain;
    padding:2px 2px 8px;
    scrollbar-width:none;
  }
  .steps::-webkit-scrollbar{display:none}
  .steps::before{display:none}
  .step-i{
    width:auto;flex:none;
    padding:6px 13px 6px 7px;
    border:1px solid var(--line);border-radius:var(--r-pill);
    background:var(--surface);
  }
  .step-i__t{white-space:nowrap;font-size:12.5px}
  .step-i__no{width:22px;height:22px;font-size:9.5px;border-radius:6px}
  .step-i__ck{width:10px;height:10px}
  .apply__meta{
    flex-direction:row;flex-wrap:wrap;gap:6px 20px;
    margin-top:12px;padding-top:12px;
  }
}
@media (max-width:640px){
  .apply__nav{flex-wrap:wrap}
  .apply__nav .btn{flex:1}
  .callout .btn{margin-left:0;width:100%}
  .callout{flex-wrap:wrap}
}
@media (max-width:520px){
  .sum-dl{grid-template-columns:1fr;gap:1px 0}
  .sum-dl dd{margin-bottom:9px}
  .sum-dl dd:last-child{margin-bottom:0}
}

/* --------------------------------------------------- journey (4 steps) --
   A 4-step journey in the default 3-col .journey grid leaves a lone orphan
   card on the second row. Four steps read better as one linear row.
   Desktop-only on purpose: scoped to min-width 1081px so the existing
   .journey breakpoints (2-col <=1080, 1-col <=720) keep owning small screens
   — an unscoped rule here would out-cascade them (same specificity, later in
   the file) and break the mobile layout. */
@media (min-width:1081px){
  .journey--4{grid-template-columns:repeat(4,1fr)}
}

/* Ekip — Cartify'ın yapay zekâ ajanları. Her kart tek robot: göğüs ekranında
   ajanın adı, altında görev alanı. Görseller krem zeminde üretildi, o yüzden
   bölüm de krem; arkalarına renkli kutu koymaya gerek yok. */
.ekip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
.ekip__k{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:14px 14px 18px;
  text-align:center;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.ekip__k:hover{
  border-color:rgba(85,205,238,.6);
  transform:translateY(-3px);
  box-shadow:var(--lift-2);
}
.ekip__g{
  display:block;width:100%;height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  /* görselin krem zemini ile kartın yüzeyi birebir aynı değil; kenarı
     yumuşatmak dikdörtgen izini videolardaki gibi çözüyor */
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 94%);
          mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 60%, transparent 94%);
}
.ekip__ad{
  font-family:var(--font-mono);
  font-size:13px;font-weight:500;
  letter-spacing:.08em;
  /* turkuaz burada olamaz: beyaz üstünde 2.44:1 ile AA'dan kalıyor.
     Sinyal rengi alt çizgide, metin lacivert — sitenin em.sig deseni. */
  color:var(--lacivert);
  margin-top:2px;
}
.ekip__ad::after{
  content:"";display:block;
  width:26px;height:2px;margin:5px auto 0;
  background:var(--mavi);
  border-radius:2px;
}
.ekip__gorev{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.45;
  margin-top:3px;
}
@media (max-width:1080px){.ekip{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.ekip{grid-template-columns:repeat(2,1fr)}}