@font-face{font-family:'DM Sans Variable';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/v/dm-sans-latin-ext-wght-normal.woff2) format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'DM Sans Variable';font-style:normal;font-display:swap;font-weight:100 1000;src:url(/v/dm-sans-latin-wght-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Yol Haritan tanıtım sitesi. Tek dosya, paket yok, dış kaynak yok.
   Görünüm: aydınlık, uygulamanın mavisi (Kıvanç, 12 Kasım 2026). Renkler html[data-tema='gunduz'] altında;
   lacivert görünümün kuralları seçimden sonra silindi. Yazı tipi tanımı derlemede başa eklenir. */

:root {
  --yazi-tipi: 'DM Sans Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kap: 72rem;
  --kenar: clamp(1rem, 4vw, 2rem);
  --bolum-bosluk: clamp(3.5rem, 8vw, 6.5rem);
  --ust-yukseklik: 4.25rem;
}

html[data-tema='gunduz'] {
  color-scheme: light;
  --zemin: #ffffff;
  --zemin-2: #eaf6ff;
  --yuzey: #ffffff;
  --cizgi: #dfe5ef;
  --yazi: #2a3547;
  --yazi-2: #5a6a85;
  /* Logo iki görünümde de aynı renklerde: açık zeminde lacivert, koyu zeminde açık */
  --marka: #0f1b33;
  --vurgu: #5d87ff;
  /* Şablon mavisinin üstünde beyaz yazı okunaklı değil (3,3); düğme ve bağlantıda aynı ailenin koyusu (6,0) */
  --vurgu-zemin: #3559c7;
  --vurgu-yazi: #ffffff;
  --baglanti: #3559c7;
  --yol: #5d87ff;
  --yol-sonuk: #cfe3f5;
  --r-dugme: 10px;
  --r-kart: 14px;
  --golge: 0 28px 60px -32px rgb(53 89 199 / 0.45);
  --ust-zemin: rgb(255 255 255 / 0.82);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--ust-yukseklik) + 1rem);
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--yazi);
  font-family: var(--yazi-tipi);
  /* Yazı tipi inene kadar görünen yedek, aynı harf boyunda dursun (sayfa zıplamasın) */
  font-size-adjust: from-font;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}

h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 3.75rem);
  font-weight: 750;
  line-height: 1.04;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: var(--baglanti);
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--vurgu);
  outline-offset: 3px;
  border-radius: 4px;
}

.kap {
  width: min(100% - 2 * var(--kenar), var(--kap));
  margin-inline: auto;
}

.atla {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.6rem 1rem;
  background: var(--vurgu-zemin);
  color: var(--vurgu-yazi);
  border-radius: 8px;
  font-weight: 600;
}

.atla:focus {
  top: 1rem;
}

/* ---------- Üst çubuk ---------- */

.ust {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ust-zemin);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--cizgi);
}

.ust-ic {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--ust-yukseklik);
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  color: var(--marka);
  font-size: 1.3rem;
  font-weight: 750;
  letter-spacing: -0.035em;
  text-decoration: none;
}

.marka svg {
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
}

.menu ul {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.6vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu a {
  display: inline-block;
  padding: 0.5rem 0.35rem;
  color: var(--yazi-2);
  font-size: 0.97rem;
  font-weight: 500;
  text-decoration: none;
}

.menu a:hover,
.menu a[aria-current='page'] {
  color: var(--yazi);
}

.menu a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--vurgu);
}

@media (max-width: 47.49rem) {
  .menu .sayfa-ici {
    display: none;
  }
}

/* ---------- Düğmeler ---------- */

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--r-dugme);
  background: var(--vurgu-zemin);
  color: var(--vurgu-yazi);
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.dugme:hover {
  background: color-mix(in oklab, var(--vurgu-zemin) 86%, var(--yazi));
}

.dugme.ikincil {
  background: transparent;
  border-color: var(--cizgi);
  color: var(--yazi);
}

.dugme.ikincil:hover {
  border-color: var(--yazi-2);
  background: var(--yuzey);
}

.dugme.kucuk {
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
}

.dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ---------- Açılış ---------- */

.acilis {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  isolation: isolate;
  /* Görüntülerin arkasındaki ışık sayfayı yana taşırmasın */
  overflow-x: clip;
}

html[data-tema='gunduz'] .acilis::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 44rem;
  z-index: -1;
  background: linear-gradient(var(--zemin-2), var(--zemin));
  pointer-events: none;
}

.acilis-izgara {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .acilis-izgara {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }

  /* Başlık anlam öbeklerinden kırılır: "Her kampüsün işi," / "her öğrencinin yolu" / "tek yerde." */
  .acilis h1 span {
    display: inline-block;
  }
}

.acilis-yazi {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

.spot {
  max-width: 36rem;
  color: var(--yazi-2);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.5;
}

.referans {
  max-width: 30rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--vurgu);
  color: var(--yazi-2);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* Ürün görüntüleri: tarayıcı penceresi + önünde telefon */

.vitrin {
  position: relative;
  margin: 0 0 clamp(2.5rem, 7vw, 4.5rem);
}

figure {
  margin: 0;
}

.pencere {
  overflow: hidden;
  border: 1px solid var(--cizgi);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--golge);
}

.pencere-ust {
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem;
  background: #eef1f6;
  border-bottom: 1px solid #dfe5ef;
}

.pencere-ust i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #c3cbd9;
}

.pencere img {
  width: 100%;
}

.telefon,
.telefon-tek {
  overflow: hidden;
  border: 7px solid #0b1220;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: var(--golge);
}

.telefon {
  position: absolute;
  right: 3%;
  bottom: -13%;
  width: 29%;
}

@media (max-width: 40rem) {
  .telefon {
    width: 36%;
    border-width: 5px;
    border-radius: 20px;
  }
}

/* Kampüs noktaları tek yolda birleşir */

.huni {
  stroke: var(--yol);
}

.huni-cizgi path {
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  vector-effect: non-scaling-stroke;
}

.huni-nokta circle {
  fill: var(--zemin);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.huni-genis {
  display: none;
  width: 100%;
  height: auto;
}

.huni-dar {
  width: min(100%, 360px);
  height: auto;
}

@media (min-width: 47.5rem) {
  .huni-genis {
    display: block;
  }
  .huni-dar {
    display: none;
  }
}

/* ---------- Bölümler ---------- */

.bolum {
  padding-block: var(--bolum-bosluk);
}

.bolum-bas {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.bolum-bas p {
  color: var(--yazi-2);
  font-size: 1.15rem;
  line-height: 1.5;
}

/* ---------- Yol: dört durak ----------
   Hat sayfanın solundan iner: telefonda en solda, geniş ekranda genişliğin %30'unda.
   Açılıştaki huni de aynı noktada birleşir (ana.html: 360 / 1200 ve 20 / 360). */

.yol {
  padding-top: 0;
}

.yol-govde {
  --hat: 19px;
  position: relative;
  padding-block: clamp(2rem, 5vw, 3.5rem) 0.5rem;
}

/* Yolun kendisi: sönük hat + üstünde kaydırdıkça uzayan dolu hat */
.yol-govde::before,
.yol-govde::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--hat) - 1.5px);
  width: 3px;
  border-radius: 0 0 3px 3px;
}

.yol-govde::before {
  background: var(--yol-sonuk);
}

.yol-govde::after {
  background: var(--yol);
  transform-origin: top;
}

.yol-bas {
  padding-left: 3.75rem;
}

.duraklar {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.durak {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding-left: 3.75rem;
}

.durak h3 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  letter-spacing: -0.025em;
}

.durak p {
  max-width: 35rem;
  color: var(--yazi-2);
  font-size: 1.1rem;
}

.durak-no {
  position: absolute;
  left: calc(var(--hat) - 20.5px);
  top: -0.3rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  border-radius: 50%;
  background: var(--yol);
  color: var(--vurgu-yazi);
  font-weight: 750;
  font-size: 1.05rem;
  box-shadow: 0 0 0 6px var(--zemin);
}

html[data-tema='gunduz'] .durak-no {
  background: var(--vurgu-zemin);
}

@media (min-width: 47.5rem) {
  .yol-govde {
    --hat: 30%;
  }

  .yol-bas {
    margin-left: 30%;
    padding-left: 3.25rem;
  }

  /* Durak adı hattın solunda, açıklaması sağında */
  .durak {
    grid-template-columns: 30% minmax(0, 1fr);
    gap: 0;
    align-items: baseline;
    padding-left: 0;
  }

  .durak h3 {
    padding-right: 3.25rem;
    text-align: right;
  }

  .durak p {
    padding-left: 3.25rem;
  }
}

/* ---------- Modüller ---------- */

.moduller {
  background: var(--zemin-2);
}

.modul {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--cizgi);
}

.modul-yazi {
  display: grid;
  gap: 1rem;
}

.modul-yazi h3 {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
  letter-spacing: -0.025em;
}

.modul-yazi > p {
  color: var(--yazi-2);
}

.isaretli {
  display: grid;
  gap: 0.55rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.isaretli li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 500;
}

/* Madde işareti: küçük bir durak */
.isaretli li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border: 2.5px solid var(--yol);
  border-radius: 50%;
}

.telefon-tek {
  width: min(62%, 16rem);
  margin-inline: auto;
}

/* Tek telefon görüntüsünün yalnız üst bölümü: satır gereksiz uzamasın */
.telefon-tek img {
  aspect-ratio: 390 / 610;
  object-fit: cover;
  object-position: top;
}

@media (min-width: 52rem) {
  .modul {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }

  .modul:nth-of-type(even) .modul-yazi {
    order: 2;
  }
}

.ek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.75rem clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--cizgi);
}

.ek dt {
  font-size: 1.1rem;
  font-weight: 650;
}

.ek dd {
  margin: 0.3rem 0 0;
  color: var(--yazi-2);
}

/* ---------- Roller ---------- */

.rol-listesi {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .rol-listesi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 68rem) {
  .rol-listesi {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.cam {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 1.5rem;
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--yuzey);
}

.cam h3 {
  font-size: 1.15rem;
}

.cam p {
  color: var(--yazi-2);
}

html[data-tema='gunduz'] .cam {
  border-color: transparent;
  background: var(--zemin-2);
}

/* ---------- Güvenlik ---------- */

.guvenlik {
  border-top: 1px solid var(--cizgi);
}

.guvenlik-izgara,
.sss-izgara {
  display: grid;
  gap: clamp(1rem, 4vw, 4rem);
}

@media (min-width: 58rem) {
  .guvenlik-izgara,
  .sss-izgara {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: start;
  }
}

.kurallar {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kurallar li {
  padding-block: 1.1rem;
  border-top: 1px solid var(--cizgi);
  color: var(--yazi-2);
}

.kurallar li:last-child {
  border-bottom: 1px solid var(--cizgi);
}

.kurallar strong {
  color: var(--yazi);
  font-weight: 650;
}

/* ---------- Sık sorulanlar ---------- */

.sss {
  background: var(--zemin-2);
}

.sorular {
  display: grid;
}

.sorular details {
  border-top: 1px solid var(--cizgi);
}

.sorular details:last-child {
  border-bottom: 1px solid var(--cizgi);
}

.sorular summary {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding-block: 1.1rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.12rem;
  font-weight: 600;
}

.sorular summary::-webkit-details-marker {
  display: none;
}

/* İşaret, sorunun hemen önünde: kapalıyken artı, açıkken eksi */
.sorular summary::before {
  content: '+';
  flex: none;
  width: 1ch;
  color: var(--vurgu);
  font-weight: 700;
  text-align: center;
}

.sorular details[open] > summary::before {
  content: '−';
}

.sorular details p {
  max-width: 40rem;
  padding: 0 0 1.3rem 1.8rem;
  color: var(--yazi-2);
}

.sorular details::details-content {
  interpolate-size: allow-keywords;
  overflow: clip;
  contain: layout;
}

.sorular details:not([open])::details-content {
  block-size: 0;
}

/* ---------- Yazılar ---------- */

.yazi-listesi {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yazi-listesi li {
  display: grid;
  gap: 0.4rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--cizgi);
}

.yazi-listesi li:last-child {
  border-bottom: 1px solid var(--cizgi);
}

.yazi-listesi :is(h2, h3) {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.yazi-listesi :is(h2, h3) a {
  color: var(--yazi);
  text-decoration: none;
}

.yazi-listesi :is(h2, h3) a:hover {
  text-decoration: underline;
  text-decoration-color: var(--vurgu);
  text-decoration-thickness: 2px;
}

.yazi-listesi p {
  max-width: 44rem;
  color: var(--yazi-2);
}

.yazi-listesi time,
.kunye {
  color: var(--yazi-2);
  font-size: 0.92rem;
}

.hepsi {
  margin-top: 1.5rem;
  font-weight: 600;
}

/* ---------- Kapanış ve alt ---------- */

.kapanis .kap {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  padding: clamp(2rem, 6vw, 4rem);
  border-radius: calc(var(--r-kart) + 8px);
  background: var(--zemin-2);
}

.kapanis p {
  max-width: 38rem;
  color: var(--yazi-2);
  font-size: 1.15rem;
}

.taslak-notu {
  padding: 0.7rem 1rem;
  border: 1.5px dashed var(--vurgu);
  border-radius: 10px;
  font-size: 0.95rem;
}

.alt {
  padding-block: 2.5rem 3rem;
  border-top: 1px solid var(--cizgi);
  color: var(--yazi-2);
  font-size: 0.95rem;
}

.alt-ic {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.alt .marka {
  font-size: 1.1rem;
}

.alt ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alt a {
  color: var(--yazi-2);
}

.alt-not {
  flex-basis: 100%;
}

/* ---------- Yazı sayfası ---------- */

.yazi-sayfa {
  padding-block: clamp(2rem, 5vw, 4rem) var(--bolum-bosluk);
}

.yazi-sayfa .kap {
  max-width: 46rem;
}

.ekmek ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  color: var(--yazi-2);
  font-size: 0.92rem;
}

.ekmek li + li::before {
  content: '/';
  margin-right: 0.5rem;
  opacity: 0.6;
}

.ekmek a {
  color: var(--yazi-2);
}

.yazi-sayfa h1 {
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.yazi-sayfa .kunye {
  margin-top: 1rem;
}

.yazi-ozet {
  margin-top: 1.5rem;
  color: var(--yazi-2);
  font-size: 1.25rem;
  line-height: 1.5;
}

.govde {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.7;
}

.govde > * + * {
  margin-top: 1.2em;
}

.govde h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.9rem);
  letter-spacing: -0.025em;
}

.govde h3 {
  margin-top: 1.8em;
}

.govde ul,
.govde ol {
  padding-left: 1.4rem;
}

.govde li + li {
  margin-top: 0.45em;
}

.govde li::marker {
  color: var(--vurgu);
  font-weight: 700;
}

.govde strong {
  font-weight: 650;
}

.tablo-kap {
  overflow-x: auto;
  border: 1px solid var(--cizgi);
  border-radius: 12px;
}

.govde table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.4;
}

.govde th,
.govde td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--cizgi);
  text-align: left;
  vertical-align: top;
}

.govde tr:last-child td {
  border-bottom: 0;
}

.govde thead th {
  background: var(--zemin-2);
  font-weight: 650;
}

.kutu {
  padding: 1.1rem 1.3rem;
  border-left: 4px solid var(--vurgu);
  border-radius: 0 12px 12px 0;
  background: var(--zemin-2);
}

.formul {
  display: block;
  padding: 0.9rem 1.1rem;
  border-radius: 10px;
  background: var(--zemin-2);
  font-weight: 600;
  overflow-x: auto;
  white-space: nowrap;
}

.yazi-son {
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 3.5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-kart);
  background: var(--zemin-2);
}

.yazi-son h2 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.yazi-son p {
  color: var(--yazi-2);
}

.liste-sayfa h1 {
  margin-bottom: 0.75rem;
}

.liste-sayfa .yazi-ozet {
  margin: 0 0 2.5rem;
}

.bulunamadi {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  padding-block: var(--bolum-bosluk);
}

/* ---------- Hareket ----------
   Hepsi süs: desteklenmeyen tarayıcıda ve "hareketi azalt" ayarında sayfa son hâliyle durur. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Açılış: tek seferlik. Hatlar çizilir, görüntüler yerine oturur. */
  .huni-cizgi path {
    animation: ciz 1.3s cubic-bezier(0.6, 0, 0.2, 1) backwards;
    animation-delay: calc(0.25s + var(--i, 0) * 0.07s);
  }

  .huni-cizgi path:nth-child(2) { --i: 1; }
  .huni-cizgi path:nth-child(3) { --i: 2; }
  .huni-cizgi path:nth-child(4) { --i: 3; }
  .huni-cizgi path:nth-child(5) { --i: 4; }
  .huni-cizgi path:nth-child(6) { --i: 5; }
  .huni-cizgi path:nth-child(7) { --i: 6; }
  .huni-cizgi path:nth-child(8) { --i: 7; }
  .huni-cizgi path:nth-child(9) { --i: 8; }

  .vitrin {
    animation: otur 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }

  .sorular details::details-content {
    transition:
      block-size 0.3s ease-in-out,
      content-visibility 0.3s,
      display 0.3s;
    transition-behavior: allow-discrete;
  }

  /* Kaydırmaya bağlı: yol uzar, duraklar yanar, modül görüntüleri belirir. */
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .yol-govde {
      view-timeline: --yol block;
    }

    .yol-govde::after {
      animation: uzar linear both;
      animation-timeline: --yol;
      animation-range: cover 45vh cover calc(100% - 55vh);
    }

    .durak-no {
      animation: yanar linear both;
      animation-timeline: view();
      animation-range: cover 38% cover 46%;
    }

    .modul-gorsel {
      animation: belirir linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 80%;
    }

    html[data-tema='gunduz'] .modul-gorsel {
      animation-name: belirir-yumusak;
    }
  }
}

@keyframes ciz {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes otur {
  from {
    opacity: 0;
    translate: 0 28px;
  }
}

@keyframes uzar {
  from {
    scale: 1 0;
  }
}

@keyframes yanar {
  from {
    background: var(--zemin-2);
    color: var(--yazi-2);
    scale: 0.82;
  }
}

@keyframes belirir {
  from {
    opacity: 0;
    translate: 0 40px;
    scale: 0.96;
  }
}

@keyframes belirir-yumusak {
  from {
    opacity: 0.25;
    translate: 0 16px;
  }
}

@media print {
  .ust,
  .huni-kap,
  .kapanis {
    display: none;
  }
}