/* Anlatım sayfası (anlatim.html): site.css üzerine sayfaya özel stiller */
body.story .reveal{opacity:0;transform:translateY(22px)}
body.story .reveal.in{animation:rise .8s cubic-bezier(.2,.8,.2,1) both}

.s-hero{max-width:1000px;margin:0 auto;padding:clamp(48px,9vw,110px) clamp(16px,4vw,48px) 24px;text-align:center}
.s-hero h1{margin:0;font-size:clamp(34px,5.6vw,66px);line-height:1.06;letter-spacing:-.03em;color:var(--navy)}
.s-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(240,176,0,.45) 62%)}
.s-hero .lede{margin:22px auto 0;max-width:62ch}
.s-hero .cta-row{justify-content:center}

.s-sec{max-width:1200px;margin:0 auto;padding:clamp(56px,9vw,104px) clamp(16px,4vw,48px) 0}
.s-sec.alt{max-width:none;background:#F3F1E8;margin-top:clamp(56px,9vw,104px);padding-bottom:clamp(56px,9vw,104px)}
.s-sec.alt > *{max-width:1104px;margin-left:auto;margin-right:auto}
.s-sec h2{margin:0;text-align:center;font-size:clamp(28px,4vw,44px);line-height:1.15;letter-spacing:-.02em;color:var(--navy)}
.s-sec .sub{margin-bottom:36px}
.s-sec.cta{text-align:center;padding-bottom:clamp(64px,10vw,120px)}
.center{text-align:center;margin:44px 0 18px;color:var(--navy);font-size:22px}
.note{margin:28px auto 0;max-width:760px;text-align:center;color:var(--muted);font-size:16px}

.two{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(20px,4vw,48px);align-items:center;margin-top:30px}
.two p{margin:0 0 14px;color:var(--muted);font-size:17px}
.two p b{color:var(--navy)}
.quote{margin:0;padding:26px 26px 22px;border-radius:var(--radius);background:var(--navy);color:#fff;font-size:19px;line-height:1.5;position:relative}
.quote::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:5px;border-radius:5px;background:var(--gold)}
.quote cite{display:block;margin-top:14px;color:#CBD5E1;font-size:14px;font-style:normal}

.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.vs-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.vs-col h3{margin:0 0 12px;font-size:19px;color:var(--navy)}
.vs-col ul{margin:0;padding-left:20px;color:var(--muted);display:grid;gap:8px}
.vs-col.best{border-color:var(--gold);box-shadow:0 14px 36px rgba(240,176,0,.2)}
.vs-col.best li::marker{color:var(--gold-deep)}

.roles{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.role{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px;border-top:4px solid var(--c);box-shadow:var(--shadow);transition:transform .25s ease,box-shadow .25s ease}
.role:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,23,42,.14)}
.abbr{display:inline-grid;place-items:center;min-width:44px;height:30px;padding:0 10px;border-radius:9px;background:var(--c);color:#fff;font-size:13px}
.role h3{margin:12px 0 6px;font-size:17px;color:var(--navy)}
.role p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}

.steps{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.steps li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px 58px;display:grid;gap:2px;min-height:96px}
.steps i{position:absolute;left:14px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:14px}
.steps b{color:var(--navy);font-size:16px}
.steps span{color:var(--muted);font-size:14px;line-height:1.45}
.steps li.gate{border-color:var(--gold);background:linear-gradient(180deg,#FFFBEA,#fff)}
.steps li.gate i{background:var(--gold);color:var(--navy)}
.steps em{justify-self:start;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-soft);border-radius:999px;padding:3px 10px}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.metrics div{background:var(--navy);border-radius:var(--radius);padding:24px 18px;text-align:center}
.metrics b{display:block;color:var(--gold);font-size:clamp(26px,3.4vw,38px);letter-spacing:-.02em;line-height:1.1}
.metrics span{color:#CBD5E1;font-size:14px}
.proof-two{align-items:start}
.proof-two h3{margin:0 0 12px;color:var(--navy);font-size:20px}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(--muted)}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:3px solid var(--gold-deep);border-bottom:3px solid var(--gold-deep);transform:rotate(-45deg)}
.links3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fine{text-align:center}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

@media (max-width:1000px){
  .roles{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .grid4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .two,.vs,.links3{grid-template-columns:1fr}
  .roles{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr}
  .nav nav a:not(.nav-cta){display:none}
  .nav-brand span{white-space:normal;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  body.story .reveal{opacity:1;transform:none}
}