/* ═══════════════════════════════════════════════════════════════
   Zirve Teknik Servis — BASE (reset + tipografi + ortak desenler)
   Değişkenler tokens.css'ten gelir; bu dosyada hex yazılmaz.
   ═══════════════════════════════════════════════════════════════ */

/* ── Modern reset ── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{min-height:100vh}
img,video,iframe{max-width:100%}
img{max-width:100%;height:auto;display:block}
input,button,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul[class],ol[class]{list-style:none;padding:0}
ul,ol{padding-left:1.25em}
b,strong{font-weight:700}
i{font-style:normal} /* <i> ikon taşıyıcısı olarak kullanılıyor */
small{font-size:var(--fs-sm)}
hr{border:0;border-top:1px solid var(--line);margin-block:var(--sp-3)}
fieldset{border:0;padding:0}
[hidden]{display:none!important}

/* ── Zemin ve gövde ── */
body{
  background:var(--white);
  color:var(--ink);
  font:400 var(--fs-body)/var(--lh-body) var(--font-body);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
}

/* ── Başlık ölçeği (clamp) ── */
:is(h1,h2,h3,h4,h5,h6,.zt-h2,.zt-h3){
  color:var(--navy);
  font-family:var(--font-heading);
  overflow-wrap:break-word;
  text-wrap:balance;
  margin-block:0 .5em;
}
h1,.zt-h1{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
:is(h2,.zt-h2){font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-h2)}
:is(h3,.zt-h3){font-size:var(--fs-h3);font-weight:700;line-height:var(--lh-h3)}
h4{font-size:1.125rem;line-height:1.35;font-weight:700}
h5,h6{font-size:1rem;line-height:1.4;font-weight:700}

/* ── Metin ── */
p{max-width:var(--measure);overflow-wrap:break-word}
p+p{margin-top:.85em}
.zt-lead{font-size:var(--fs-lead);line-height:1.7;color:var(--ink-soft);max-width:var(--measure)}

/* ── Bağlantilar ── */
a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red-deep);text-decoration-thickness:2px}

/* ── Seçim vurgusu: lacivert + beyaz ── */
::selection{background:var(--navy);color:var(--white)}

/* ── Klavye odağı (global) ── */
:focus-visible{outline:3px solid var(--steel);outline-offset:3px}

/* Sticky header altındaki çapalara nefes payı */
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}

/* ── İçeriğe geç (skip link) ── */
.zt-skip{
  position:fixed;top:12px;left:12px;z-index:100;
  background:var(--navy);color:var(--white);
  padding:12px 18px;border-radius:var(--radius-btn);
  font:600 var(--fs-md)/1 var(--font-body);
  text-decoration:none;
  transform:translateY(-160%);
  transition:transform var(--tr-fast) var(--ease);
}
.zt-skip:focus{transform:none}
.zt-skip:focus-visible{outline-color:var(--white)}

/* ── Görünmez ama ekran okuyucuya açık ── */
.zt-visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── Görsel kutusu: oranı CSS tutar, <img> width/height şart ── */
.zt-img{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:var(--ar,4/3);
  background:var(--steel-soft);
  border-radius:var(--img-radius,var(--radius-card));
}
.zt-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── Görsel yoksa (.zt-noimg): sade, kırmızı şerit YOK ──
   steel-soft zemin + %6 lacivert çapraz çizgi dokusu + ortada ikon */
.zt-noimg{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:var(--ar,4/3);
  background-color:var(--steel-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M-7 7 7-7M0 28 28 0M21 35 35 21' fill='none' stroke='%23223C6C' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
  color:var(--steel);
}
.zt-noimg .zt-ico{
  width:56px;height:56px;padding:15px;
  border:1px solid var(--navy-15);border-radius:50%;
}

/* ── Scroll reveal (JS .is-in ekler; bir kez) ── */
.zt-reveal{opacity:0;transform:translateY(16px)}
.zt-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--tr-slow) var(--ease),transform var(--tr-slow) var(--ease);
}
/* JS yüklenemezse içerik görünür kalsın */
html:not(.js) .zt-reveal{opacity:1;transform:none}

/* ── Hareket azaltma: her şeyi kapat ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .zt-reveal{opacity:1;transform:none}
}