/* =====================================================================
   STORY ROAD™ — HERO
   responsive.css · yalnızca breakpoint override’ları
   ===================================================================== */

/* ── ≤ 1100px — tablet yatay ───────────────────────────────────────── */
@media (max-width:1100px){
  .plate__content{padding-inline:clamp(24px,6vw,56px)}
  .category{max-width:24ch}
}

/* ── ≤ 900px — nav daralır ─────────────────────────────────────────── */
@media (max-width:900px){
  .nav{display:none}
  .menu-toggle{display:inline-block}
  .docmark{display:none}

  .masthead__inner{grid-template-columns:1fr auto}

  .plate{min-height:min(54vh,520px)}

  .footbar{
    grid-template-columns:1fr;
    justify-items:start;
    gap:clamp(26px,4.4vh,38px);
  }
  .cue{display:none}
  .cta{justify-self:start}
}

/* ── ≤ 640px — telefon ─────────────────────────────────────────────── */
@media (max-width:640px){
  :root{
    --t-hero:clamp(44px, 13.8vw, 78px);
    --t-lead:17px;
    --t-body:14px;
    --t-figure:20px;
    --t-meta:10px;
    --t-micro:9px;
  }

  .hero{
    gap:24px;
    padding-bottom:24px;
  }

  .plate{
    min-height:330px;
    border-radius:22px;
  }
  .plate__media img{object-position:52% 66%}
  .plate__content{padding:30px 20px}

  .dateline{
    letter-spacing:.22em;
    margin-bottom:20px;
    max-width:26ch;
  }
  .display{letter-spacing:-.038em}
  .category{margin-top:22px;max-width:24ch;line-height:1.3}
  .hairline{width:44px;margin:22px 0}
  .invite{max-width:32ch;line-height:1.62}

  /* Şerit, mobilde dikey bir defter satırına dönüşür — yine tek bakış */
  .strip{
    width:100%;
    grid-template-columns:1fr;
  }
  .strip__cell{
    grid-template-columns:auto 1fr;
    align-items:baseline;
    justify-items:start;
    gap:16px;
    padding:11px 0;
    border-top:1px solid var(--hairline);
  }
  .strip__cell + .strip__cell{border-left:0}
  .strip__cell:last-child{border-bottom:1px solid var(--hairline)}
  .strip dd{justify-self:end;text-align:right;letter-spacing:.22em}

  .footbar{gap:24px;padding-top:20px}
  .founding{gap:11px}
  .founding__row{gap:18px}
  .founding__edition{font-size:20px}
  .founding__register{gap:8px}
  .founding__register li{height:8px}
  .founding__register li.is-claimed{height:18px}

  .cta{
    width:100%;
    justify-content:space-between;
    gap:12px;
    padding-bottom:11px;
  }
}

/* ── Çok kısa telefonlar ───────────────────────────────────────────── */
@media (max-width:640px) and (max-height:720px){
  :root{--t-hero:clamp(38px, 12vw, 58px)}
  .plate{min-height:250px}
  .plate__content{padding:24px 18px}
  .dateline{margin-bottom:14px}
  .category{margin-top:16px}
  .hairline{margin:16px 0}
  .invite{display:none}
  .strip__cell{padding:9px 0}
}

/* ── Kısa ve geniş ekranlar (dizüstü 13") ──────────────────────────── */
@media (max-height:760px) and (min-width:901px){
  :root{--t-hero:clamp(52px, 7.4vw, 118px)}
  .plate{min-height:340px}
  .plate__content{padding-block:clamp(26px,4vh,54px)}
  .dateline{margin-bottom:18px}
  .category{margin-top:20px}
  .hairline{margin:20px 0}
}

/* ── Çok geniş ekranlar ────────────────────────────────────────────── */
@media (min-width:2000px){
  :root{
    --gutter:clamp(76px, 5vw, 132px);
    --t-hero:172px;
  }
  .plate{border-radius:96px}
}

/* =====================================================================
   SECTIONS II–VI — breakpoint override'ları
   ===================================================================== */

/* ── ≤ 1200px ──────────────────────────────────────────────────────── */
@media (max-width:1200px){
  .hs__label{max-width:min(26ch,28vw)}
  .claim__spread{gap:clamp(30px,4vw,60px)}
}

/* ── ≤ 1024px — tablet ─────────────────────────────────────────────── */
@media (max-width:1024px){
  .chapter{padding:clamp(80px,10vh,140px) 0}
  .chapter__head{max-width:min(660px,100%)}

  .observations{grid-template-columns:repeat(2,1fr)}
  .obs{padding-right:clamp(14px,2.4vw,28px)}
  .obs:nth-child(odd){padding-left:0;border-left:0}
  .obs:nth-child(even){padding-left:clamp(14px,2.4vw,28px);border-left:1px solid var(--hairline)}
  .obs:nth-child(n+3){margin-top:0;border-top:1px solid var(--hairline)}

  .claim__spread{grid-template-columns:1fr;gap:clamp(38px,6vh,64px)}
  .claim__plate img{aspect-ratio:16/9;object-position:47% 66%}
}

/* ── ≤ 900px — keşif yüzeyi yatay kaydırmaya geçer ─────────────────── */
@media (max-width:900px){
  .survey__scroller{
    padding-inline:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .survey__scroller::-webkit-scrollbar{height:3px}
  .survey__scroller::-webkit-scrollbar-thumb{background:var(--hairline-hi)}

  .survey__plate{
    width:1000px;
    max-width:none;
    margin-inline:var(--gutter);
  }
  /* Kısa harita etiketleri — plaka kenarında kırpılma olmaz.
     Tam açıklamalar alttaki erişilebilir lejantta yer alır. */
  .hs__long{display:none}
  .hs__short{display:inline}
  .hs__label{max-width:18ch}
  .hs__label b{letter-spacing:.14em}
  .hs__leader{width:26px}
  .hs[data-side="right"] .hs__leader{left:calc(50% + 6px)}
  .hs[data-side="left"]  .hs__leader{right:calc(50% + 6px)}
  .hs[data-side="right"] .hs__label{left:calc(50% + 38px)}
  .hs[data-side="left"]  .hs__label{right:calc(50% + 38px)}

  /* Açıklama ekran okuyucular için erişilebilir kalır, görsel taşma yaratmaz */
  .hs__label i,
  .hs:hover .hs__label i,
  .hs:focus-visible .hs__label i,
  .hs.is-open .hs__label i{
    position:absolute;
    width:1px;height:1px;
    max-height:none;
    margin:0;padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
    opacity:1;
    transition:none;
  }

  /* Erişilebilir dikey lejant görünür olur */
  .survey__legend{
    display:grid;
    gap:0;
    margin-top:clamp(26px,3.4vh,38px);
    border-top:1px solid var(--hairline);
  }
  .survey__legend li{
    display:flex;
    align-items:baseline;
    gap:14px;
    padding:13px 0;
    border-bottom:1px solid var(--hairline);
    font-size:var(--t-micro);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--sand);
  }
  .survey__legend li > span{display:block;flex:1 1 auto}
  .survey__legend strong{
    display:block;
    font-weight:500;
    color:var(--bone);
  }
  .survey__legend span > strong + *,
  .survey__legend li > span{line-height:1.7}
  .survey__legend li > span{
    color:var(--dust);
    letter-spacing:.06em;
    text-transform:none;
  }
  .survey__legend strong{letter-spacing:.14em;text-transform:uppercase}
  .survey__legend li[hidden]{display:none}
  .survey__legend b{
    font-family:var(--font-display);
    font-weight:400;
    font-size:1.5em;
    letter-spacing:0;
    color:var(--dust);
  }
  .survey__legend em{
    flex:0 0 auto;
    align-self:flex-start;
    font-style:normal;
    letter-spacing:.2em;
    color:var(--dust);
  }

  .survey__caption{padding-inline:0}
  .arrival__close{text-align:left;margin-left:0}
}

/* ── ≤ 768px ───────────────────────────────────────────────────────── */
@media (max-width:768px){
  .chapter{padding:clamp(72px,9vh,110px) 0}
  .chapter__mark{top:clamp(24px,3.4vh,36px)}

  .statement{min-height:64vh}
  .statement__inner{text-align:left}
  .statement__lead br{display:none}

  .beat{min-height:40vh}
  .beat__line{max-width:24ch}

  .stage{padding-block:clamp(22px,3vh,34px)}
  .stage--major .stage__word{font-size:clamp(34px,8.6vw,60px)}
}

/* ── ≤ 640px — telefon ─────────────────────────────────────────────── */
@media (max-width:640px){
  .chapter__head{margin-bottom:clamp(34px,4.6vh,52px)}
  .chapter__title{font-size:clamp(25px,7vw,36px)}

  .statement__lead{font-size:clamp(23px,6.4vw,34px);line-height:1.24}
  .statement__note{margin-top:32px;letter-spacing:.24em}

  .survey__filters{gap:18px;flex-wrap:wrap}
  .survey__plate{width:900px;margin-inline:20px}
  .survey__axis-label{font-size:9px;letter-spacing:.18em}
  .datum__figure{font-size:clamp(38px,11.5vw,58px)}

  .beat__line{font-size:clamp(19px,5.4vw,26px)}

  .arrival__line{padding-left:24px}
  .stage__node{left:-24px;width:7px}
  .stage--major .stage__node{width:15px}
  .stage__word{font-size:clamp(24px,7vw,34px)}
  .stage--major .stage__word{font-size:clamp(31px,9vw,46px)}
  .arrival__close{font-size:clamp(18px,5vw,24px)}

  .dawn__stage{min-height:62vh}
  .dawn__time{font-size:clamp(64px,22vw,110px)}
  .dawn__lead{font-size:clamp(21px,6vw,30px);max-width:20ch}

  .observations{grid-template-columns:1fr;border-top:1px solid var(--hairline)}
  .obs,
  .obs:nth-child(odd),
  .obs:nth-child(even){
    padding:15px 0;
    border-left:0;
    border-bottom:1px solid var(--hairline);
  }
  .obs:nth-child(n+3){border-top:0}
  .obs h3{font-size:19px}

  .claim__plate img{aspect-ratio:3/2}
  .ledger__row{grid-template-columns:1fr;gap:7px;padding:14px 0}
  .ledger dd{text-align:left}
  .ledger__row--figure dd{font-size:24px}
  .declaration__body{font-size:clamp(19px,5.2vw,26px)}
}

/* ── ≤ 380px ───────────────────────────────────────────────────────── */
@media (max-width:380px){
  .survey__plate{width:860px;margin-inline:16px}
  .dawn__time{font-size:clamp(58px,21vw,86px)}
}

/* =====================================================================
   VII — THE FOUNDING COLLECTION · breakpoint override'ları
   ===================================================================== */

/* ── ≤ 1024px — künye 11 dar sütuna iner, 01 tam satır ─────────────── */
@media (max-width:1024px){
  .positions{grid-template-columns:repeat(11, minmax(0,1fr))}
  .position--founding{grid-column:1 / -1;min-height:0}
  .position--founding .position__field{align-content:start}
  .position{min-height:clamp(150px,22vh,210px)}
  .position__name{font-size:clamp(22px,3.4vw,30px)}
  .position__note{max-width:52ch}
  .reason{grid-template-columns:minmax(0,.38fr) minmax(0,1fr)}
}

/* ── ≤ 768px ───────────────────────────────────────────────────────── */
@media (max-width:768px){
  .statement-band{min-height:48vh}
  .statement-band__line{max-width:20ch}
  .register__count{font-size:16px}
}

/* ── ≤ 640px — künye dikey sicile döner ────────────────────────────── */
@media (max-width:640px){
  .collection__intro{line-height:1.85}

  .positions{grid-template-columns:1fr}
  .position{
    grid-template-columns:auto 1fr;
    grid-template-rows:auto;
    align-items:baseline;
    gap:18px;
    min-height:0;
    padding:14px 0;
  }
  .position__field{align-content:start;justify-items:end;text-align:right}
  .position__no{font-size:17px}
  .position__mark{font-size:15px}

  .position--founding{
    grid-column:auto;
    padding:18px 0 22px;
  }
  .position--founding .position__field{justify-items:start;text-align:left}
  .position__name{font-size:24px}
  .position__status{margin-top:10px}
  .position__note{margin-top:10px;max-width:38ch}

  .collection__seal{font-size:clamp(19px,5.2vw,27px);max-width:30ch}

  .reason{
    grid-template-columns:1fr;
    gap:9px;
    padding:15px 0;
  }
  .reason dt{font-size:19px}

  .collection__verdict{font-size:clamp(18px,5vw,25px)}
  .collection__subhead{font-size:clamp(23px,6.4vw,32px)}
  .statement-band__line{font-size:clamp(26px,7.6vw,40px);max-width:18ch}
  .collection__closing{font-size:clamp(22px,6vw,32px)}
}

/* ── ≤ 380px ───────────────────────────────────────────────────────── */
@media (max-width:380px){
  .position{gap:14px}
  .statement-band__line{font-size:clamp(24px,7.2vw,32px)}
}