/* ============================================================
 * SERAP GEREBİÇ — HİKÂYE (Hakkımızda) SAYFASINA ÖZEL KATMAN
 * prototype.css SONRASINDA yüklenir; onu ezer/genişletir.
 * Kaynak: Docs/prototype examples/hakkimizda.html (birebir)
 * ============================================================ */

/* ------- hikaye sayfasi ------- */
:root{--zemin:#EFE2C8}
body{background:var(--zemin);transition:background-color 1s ease}
header{background:rgba(253,250,243,.55)}
.s-hero{min-height:76vh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:40px 0 90px}
.s-hero h1{font-size:clamp(40px,9vw,76px);max-width:14ch}
.s-hero .lead{font-size:17px;color:var(--toprak);max-width:44ch;margin-top:16px}
.cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--toprak);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;transition:opacity .5s}
.cue svg{width:18px;height:18px;stroke:var(--serbet);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:bob 2.1s ease-in-out infinite}
.cue.gone{opacity:0}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
.seam{display:block;width:min(560px,86%);margin:0 auto;color:var(--serbet)}
.seam path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s ease .15s}
.seam.in path{stroke-dashoffset:0}

.timeline{position:relative;padding:30px 0 10px}
.spine,.spine-fill{position:absolute;top:0;bottom:0;left:15px;width:2px;border-radius:1px}
.spine{background:rgba(44,58,34,.14)}
.spine-fill{background:var(--fistik-500);transform:scaleY(0);transform-origin:top;bottom:auto;height:100%}
.ch{position:relative;padding:34px 0 34px 52px}
.ch .node{position:absolute;left:16px;top:44px;width:30px;height:30px;transform:translateX(-50%);color:var(--serbet);background:var(--zemin);border-radius:50%;padding:2px;transition:background-color 1s ease;stroke-dasharray:1;stroke-dashoffset:1}
.ch.in .node{transition:stroke-dashoffset 1.5s ease .15s,background-color 1s ease;stroke-dashoffset:0}
.ch-era{font-size:11.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--serbet);margin-bottom:10px}
.ch h2{font-size:clamp(26px,5.4vw,40px);margin-bottom:14px}
.ch p{font-size:16.5px;line-height:1.85;color:var(--kabuk);max-width:58ch}
.ch p + p{margin-top:14px}
.ch-img{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-lift);margin-top:24px;background:var(--fistik-100)}
.ch-img img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block;will-change:transform}
.ch-img.aged img{filter:sepia(.45) saturate(.82) contrast(.98) brightness(1.02)}
.ch-img figcaption{font-size:12.5px;color:var(--toprak);padding:10px 16px;background:var(--krem)}
.pull{position:relative;text-align:center;padding:64px 0 30px;max-width:22ch;margin:0 auto}
.pull p{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:clamp(26px,5.6vw,42px);line-height:1.3;color:var(--fistik-700)}
.pull::before{content:"“";position:absolute;top:6px;left:50%;transform:translateX(-50%);font-family:'Fraunces',serif;font-size:88px;line-height:1;color:var(--serbet);opacity:.35}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;max-width:560px}
.stat{background:var(--krem);border:1px solid rgba(44,58,34,.08);border-radius:16px;padding:18px 10px;text-align:center;box-shadow:var(--shadow)}
.stat .v{font-family:'Fraunces',serif;font-size:clamp(24px,5vw,34px);font-weight:500;color:var(--fistik-900)}
.stat .l{font-size:12px;color:var(--toprak);font-weight:600;margin-top:4px}
.s-final{text-align:center;padding:70px 0 60px}
.s-final h2{font-size:clamp(30px,6vw,46px)}
.s-final p{color:var(--toprak);max-width:46ch;margin:14px auto 26px;font-size:16px}
.edit-note{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--serbet);opacity:.75;font-weight:700}

@media (min-width:820px){
  .spine,.spine-fill{left:50%;margin-left:-1px}
  .ch{display:grid;grid-template-columns:1fr 1fr;gap:72px;padding:52px 0;align-items:center}
  .ch .node{left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px}
  .ch .ch-text{grid-column:1;text-align:right;justify-self:end}
  .ch .ch-text p{margin-left:auto}
  .ch .ch-media{grid-column:2}
  .ch.flip .ch-text{grid-column:2;text-align:left;justify-self:start}
  .ch.flip .ch-text p{margin-left:0}
  .ch.flip .ch-media{grid-column:1;grid-row:1}
  .ch-img{margin-top:0}
  .stats{margin-left:auto}
  .ch.flip .stats{margin-left:0;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .cue svg{animation:none}
  .seam path{transition:none;stroke-dashoffset:0}
  .ch .node{stroke-dashoffset:0;transition:none}
  .ch-img img{transform:none !important}
}