/* ==========================================================================
   Delta Motor — Bakim Yolculugu sayfasi
   Her durak bir sahne. Govde metni kayarken gorsel yapisir; arkada devasa
   kilometre rakami zeminden gecer.
   ========================================================================== */

/* --- Giris -------------------------------------------------------------- */

.journey-intro {
  position: relative;
  padding-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
}

.journey-intro__head {
  display: grid;
  gap: var(--s-4);
  max-width: 22ch;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.journey-intro__body {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .journey-intro__body {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* Yolculugun kunyesi — sayfanin sozlesmesi */
.journey-facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-line-strong);
  min-width: 0;
}

.journey-facts__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.journey-facts__key {
  font-size: var(--t-base);
  color: var(--c-ink-mute);
}

.journey-facts__val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* --- Durak (sahne) ------------------------------------------------------ */

.stop {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 7rem);
  overflow: hidden;
  border-top: 1px solid var(--c-line);
}

/* SIRALAMA BAGLAMI: duraklar artik `<main>`in degil `.tabs__panel`in
   cocugu. Eskiden banner 1. eleman oldugu icin 01/03/05 EVEN'di; panel
   icinde ayni duraklar ODD oluyor. Alternasyonun gorunumu ayni kalsin
   diye odd/even takas edildi — bu kural degistirilecekse ikisi birden
   degismeli, yoksa zemin ile zikzak birbirinden kayar. */
.tabs__panel > .stop:nth-child(odd) {
  background: var(--c-surface);
}

/* align-items: start VERME — sutunlar satir yuksegine uzamazsa
   icerideki position: sticky yapisacak alan bulamaz. */
.stop__inner {
  position: relative;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
}

/* Zikzak, acik yerlestirmeyle: `order` kullanilmaz, cunku order sutun
   atamasini da degistirir ve gorsel duraktan duraga boyut degistirir.
   Gorsel her zaman dar izde kalir, sadece hangi tarafta durdugu degisir. */
@media (min-width: 980px) {
  .stop__inner {
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1fr);
  }

  .stop__media { grid-row: 1; grid-column: 1; }
  .stop__text  { grid-row: 1; grid-column: 2; }

  /* Bkz. yukaridaki SIRALAMA BAGLAMI notu: panel icinde odd -> even. */
  .tabs__panel > .stop:nth-child(even) .stop__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr);
  }

  .tabs__panel > .stop:nth-child(even) .stop__media { grid-column: 2; }
  .tabs__panel > .stop:nth-child(even) .stop__text  { grid-column: 1; }
}

/* Gorsel: metin kayarken yerinde kalir */
.stop__media {
  min-width: 0;
}

@media (min-width: 980px) {
  .stop__figure {
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
  }
}

/* Sag grafik: baslik - kare cerceve (cizim + etiketler) - alt bilgi.
   Kare oran artik FIGURE'de degil `.stop__frame`de; figure ust ve alt
   satiri da tasidigi icin kare kalsaydi cizim ezilirdi. */
.stop__figure {
  display: grid;
  gap: var(--s-3);
}

/* `position: relative` KALDIRILDI: tek kullanicisi cizim uzerine mutlak
   konumlanan olcu etiketleriydi, onlar da kaldirildi (kullanici karari
   2026-09-01: gerekli bilgi zaten baslik ve aciklama metinlerinde). */
.stop__frame {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-bg);
  overflow: hidden;
}

.tabs__panel > .stop:nth-child(odd) .stop__frame { background: var(--c-surface-alt); }

.stop__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fareyle uzerine gelince 2x yakinlasma (kullanici istegi 2026-09-01).
   Buyuyen sey GORSEL, cerceve degil: `.stop__frame` zaten `overflow: hidden`
   tasidigi icin tasan kisim kirpilir ve kutunun olcusu degismez — sayfa
   duzeni hic oynamaz, alttaki duraklar ziplamaz.

   `hover: hover`: dokunmatik cihazda hover yoktur; kural disarida birakilmazsa
   ilk dokunusta gorsel buyur ve parmak cekilince buyumus halde kalir.

   `prefers-reduced-motion: no-preference`: 2x buyuk bir hareket, azaltilmis
   hareket tercihinde hic olusmaz (DESIGN.md kurali). Yalnizca sureyi 1ms'e
   indirmek yetmez — hareketin kendisi kalkmali. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .stop__frame img {
    transition: transform var(--d-slow) var(--e-out);
  }

  .stop__frame:hover img {
    transform: scale(2);
  }
}

/* --- Cizim uzerindeki arac tipi secicisi --------------------------------
   Sayfanin ustundeki ana sekmenin TEKRARI, ayri bir durum tutmaz: tiklama
   ana sekmeyi tetikler, secili gorunum `arac-tipi-degisti` olayindan
   yansitilir (main.js initAracSecici). Tek dogru kaynak ana sekmedir;
   burada ayri bir state tutulsaydi ikisi birbirinden kayardi.
   Gercek `role="tab"` DEGIL: ayni paneli kontrol eden ikinci bir tablist,
   ekran okuyucuya iki ayri sekme kumesi gibi duyurulurdu. `role="group"` +
   `aria-pressed` ile "iki durumlu secim" olarak okunur. */
/* Cizimin UZERINDE degil, cizim alaninin USTUNDE (kullanici istegi):
   akista duran bagimsiz bir serit. Mutlak konumdayken teknik cizimin sol
   ust kosesini ortuyordu; cizimler olcu grafigi oldugu icin uzerlerine
   kutu binmesi okumayi bozuyordu. `justify-self: start` sart —
   `.stop__figure` bir grid ve serit tek basina tam genislige yayilirdi. */
.frame-switch {
  justify-self: start;
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
}

.frame-switch__btn {
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: calc(var(--r-sm) - 2px);
  background: transparent;
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  /* BOYUT DEGISMEZ: gecis yalniz renk/zeminde. Kullanici istegi (buton
     hover'da buyumesin); ayrica cizim uzerinde duran bir ogenin buyumesi
     altindaki grafigi ortiyor ve olcu izlenimini bozuyor. */
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out);
}

.frame-switch__btn[aria-pressed='false']:hover {
  background: var(--c-surface);
  color: var(--c-ink);
}

/* Aktif dugme, "Randevu Al" birincil dugmesiyle AYNI renk (kullanici
   istegi): `.btn--primary` -> kirmizi zemin + marka ustu metin. Punto ve
   dolgu KORUNDU — `.btn`in olculerine gecmek dugmeyi buyuturdu, oysa
   "boyut buyumesin" kurali bu bilesende gecerli.
   Hover'da renk DEGISMEZ: aktif dugmeye tiklamak bir sey yapmaz
   (JS erken doner), degisen bir renk bosuna tiklanabilir izlenimi verir.
   Bu yuzden `cursor: default` da veriliyor. */
.frame-switch__btn[aria-pressed='true'] {
  background: var(--c-red);
  color: var(--c-on-brand);
  cursor: default;
}

.frame-switch__btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.stop__text {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  min-width: 0;
}

/* Durak basligi: sira no + kilometre + ad */
.stop__index {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.stop__no {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
}

.stop__km {
  font-family: var(--f-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--c-blue);
}

.stop__km small {
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  color: var(--c-ink-faint);
  margin-left: 0.4rem;
}

.stop__name {
  margin-top: var(--s-1);
}

/* Hikaye — sahnenin anlatimi */
.stop__story {
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--c-ink-mute);
  max-width: 44ch;
  text-wrap: pretty;
}

/* --- Is listesi --------------------------------------------------------- */

.tasks {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-line-strong);
}

.tasks__title {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
}

.task {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--c-line);
  font-size: var(--t-base);
  line-height: 1.5;
}

/* Isaret: onay degil, olcu tirnagi — yapilan is olculur */
.task::before {
  content: '';
  width: 0.75rem;
  height: 1px;
  margin-top: 0.75em;
  background: var(--c-blue);
}

.tasks--self .task::before { background: var(--c-red); }

/* --- Uyari notu --------------------------------------------------------- */

/* Uyari kutusu FIGURE ICINDE, cercevenin hemen altinda (kullanici karari
   2026-09-01: "kirmizi olan alan resmin hemen altina gelicek"). Metin
   sutununda degil de burada durmasinin teknik sonucu: `.stop__figure`
   >=980px'te sticky oldugu icin kutu da gorselle BIRLIKTE yapisir.
   Disarida biraksaydik gorsel yapisirken kutu yukari kayar, ikisi
   birbirinden ayrilirdi. Varyant yok: butun kutular kirmizi. */
.stop__note {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-5);
  background: var(--c-red-wash);
  border-left: 3px solid var(--c-red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.stop__note-title {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-red);
}

.stop__note-body {
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--c-ink);
}

/* --- Durak kunyesi: sure ve lift ---------------------------------------- */

.stop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-line);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}

.stop__meta strong {
  font-weight: 500;
  color: var(--c-ink);
}

/* --- Kapanis ------------------------------------------------------------ */

.after {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 900px) {
  .after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* Tekrar eden dongu — bundan sonrasi */
.cycle {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-invert-edge);
}

.cycle__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-invert-line);
}

.cycle__km {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  font-weight: 500;
  color: var(--c-invert-fg);
  min-width: 7.5rem;
}

.cycle__what {
  font-size: var(--t-base);
  color: var(--c-invert-mute);
}