/* ==========================================================================
   Delta Motor — Bilesenler
   Her bilesen tek sinif kokunden turer (.btn, .bay, .spec ...). Element
   secici ile bosluk verilmez; boylece bolum kurallariyla cakisma olmaz.
   ========================================================================== */

/* --- Dugme -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: 0.8125rem var(--s-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--c-invert-bg);
  color: var(--c-invert-fg);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-fast) var(--e-out),
              color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}

.btn:hover { background: var(--c-ink-hover); }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-red); color: var(--c-on-brand); }
.btn--primary:hover { background: var(--c-red-deep); }

.btn--blue { background: var(--c-blue); color: var(--c-on-brand); }
.btn--blue:hover { background: var(--c-blue-deep); }

.btn--ghost {
  background: transparent;
  color: var(--c-ink);
  border-color: var(--c-edge-ctl);
}

.btn--ghost:hover {
  background: var(--c-surface);
  border-color: var(--c-ink);
}

.btn--on-ink {
  background: transparent;
  color: var(--c-invert-fg);
  border-color: var(--c-invert-edge);
}

.btn--on-ink:hover {
  background: var(--c-invert-fg);
  color: var(--c-invert-bg);
  border-color: var(--c-invert-fg);
}

/* --- Ikon dugmesi — tema anahtari ve kullanici girisi ------------------- */

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  padding: 0;
  background: transparent;
  color: var(--c-ink-mute);
  border: 1px solid var(--c-edge-ctl);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out),
              border-color var(--d-fast) var(--e-out),
              background var(--d-fast) var(--e-out);
}

.icon-btn:hover {
  color: var(--c-ink);
  border-color: var(--c-line-strong);
  background: var(--c-surface);
}

.icon-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Tema anahtari: iki ikondan yalnizca biri gorunur */
.icon-btn__moon { display: none; }

:root[data-theme='dark'] .icon-btn__sun  { display: none; }
:root[data-theme='dark'] .icon-btn__moon { display: block; }

/* --- WhatsApp dugmesi — sag altta sabit --------------------------------- */

.wa {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  height: 3.25rem;
  padding-inline: 1rem;
  background: #1FA855;           /* WhatsApp marka yesili — temadan bagimsiz */
  color: #fff;
  border-radius: 999px;
  box-shadow: var(--sh-lg);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--d-fast) var(--e-out),
              transform var(--d-base) var(--e-out),
              opacity var(--d-base) var(--e-out),
              visibility var(--d-base) var(--e-out);
}

.wa:hover {
  background: #17853F;
  transform: translateY(-2px);
}

.wa:active { transform: translateY(0); }

/* Alt bilgi ekrana girdiginde cekilir: sabit dugme footer linklerinin
   ustune biniyordu. Mobil menu acikken de gizlenir. Zaten footer'da ve
   iletisim sayfasinda WhatsApp baglantisi var, erisim kaybolmuyor. */
.wa.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem) scale(0.92);
  pointer-events: none;
}

.wa svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* Etiket dar ekranda gizlenir, dugme daireye doner */
.wa__label { display: none; }

@media (min-width: 560px) {
  .wa__label { display: inline; }
}

@media (max-width: 559px) {
  .wa {
    width: 3.25rem;
    padding-inline: 0;
    justify-content: center;
  }
}

.btn--sm { padding: 0.5rem var(--s-4); font-size: var(--t-xs); }
.btn--block { width: 100%; }

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Lift panosu (hero'nun tezi) ---------------------------------------
   Atolyenin o anki durumu: uc lift, her birinin bir sonraki bos 30dk slotu.
   ----------------------------------------------------------------------- */

.bays {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .bays { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bays__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s-4);
}

.bays__date {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
}

.bay {
  position: relative;
  display: grid;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--c-surface);
  transition: background var(--d-base) var(--e-out);
}

.bay::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: var(--c-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}

.bay.is-full::before { background: var(--c-red); }
.bay.is-ready::before { transform: scaleX(1); }

/* Kart basligi. Tipografiyi `.h5` sinifi verir; burada YALNIZ renk kalir —
   font-family/size yeniden yazilirsa `.h5`i ezer (components.css base.css'ten
   sonra yuklenir) ve baslik yine mono 12px goruntur. */
.bay__id {
  color: var(--c-ink);
}

.bay__state {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--c-ink-mute);
}

.bay__state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
  flex: none;
}

.bay.is-full .bay__state::before { background: var(--c-red); }

.bay__focus {
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-line);
}


/* --- Banner — 1920x540 gorsel zemin, metin uzerinde ----------------------
   ORTAK BILESEN (yol haritasi madde 1). Sayfa basi banner'lari bunu kullanir;
   sayfaya ozel CSS yazilmaz.

   Kullanim:
     <section class="banner">
       <div class="banner__bg">
         <img src="..." alt="..." width="1920" height="540"
              fetchpriority="high" decoding="async">
       </div>
       <div class="wrap">
         <div class="banner__inner">
           <p class="label">Ust baslik</p>
           <h1 class="d2">Baslik</h1>
           <p class="lead">Aciklama</p>
         </div>
       </div>
     </section>

   Uc kural, hepsi olcumle bulundu (bkz. docs/REVIZYONLAR.md R10-R14):

   1. Yukseklik `aspect-ratio` ile verilir, `vw` ile DEGIL. `clamp(...,vw,...)`
      genis ekranda tavana carpip orani bozuyordu.
   2. Ayni kutuya `aspect-ratio` ile birlikte `min-height`/`max-height`
      YAZILMAZ — tarayici yuksekligi sinirlayip GENISLIGI orandan yeniden
      hesapliyor ve kutu kapsayicisini asiyor (olculdu: 760px ekranda
      banner 910px genisligindeydi). Taban yukseklik `.banner > .wrap`ta.
   3. Perde ortada hafif kalir ki gorsel yasasin; metnin oldugu alt bant
      koyulasir. Okunabilirlik perdeden DEGIL iki katmanli text-shadow'dan
      gelir. Yeni bir gorsel konuldugunda kontrast YENIDEN OLCULUR —
      kural renk degil olcum (bkz. DESIGN.md "Gorsel uzerinde metin").
   -------------------------------------------------------------------------- */

.banner {
  position: relative;
  padding: 0;
  aspect-ratio: 32 / 9;

  /* Kapsam icinde jeton devri: acik temadaki #0B45D0 koyu perde uzerinde
     okunmuyor. Bilesen icindeki her --c-blue kullanimi acik maviye doner. */
  --c-blue: var(--c-blue-invert);
}

.banner__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0B0F1A;
}

.banner__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,
      rgba(8, 11, 18, 0.52) 0%,
      rgba(8, 11, 18, 0.24) 52%,
      rgba(8, 11, 18, 0.04) 100%),
    linear-gradient(to bottom,
      rgba(8, 11, 18, 0.44) 0%,
      rgba(8, 11, 18, 0.10) 26%,
      rgba(8, 11, 18, 0.54) 62%,
      rgba(8, 11, 18, 0.88) 100%);
}

/* Sarmalayici sahneyi doldurur ki metin banner'in ALTINA yaslansin.
   Yuzde taban `.banner`in oranindan gelen kesin yuksekligi cozer; dar
   ekranda icerik bundan uzun olur ve bolumu kendisi buyutur — genislik
   hicbir zaman kapsayiciyi asmaz. */
.banner > .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  min-height: 100%;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

/* Iki sutun: metin (esner) + istege bagli not (kendi genisligi kadar).
   Not yoksa metin tum genisligi almaz — `.banner__text`in max-width'i
   satir uzunlugunu okunur tutar. */
.banner__inner {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  width: 100%;
}

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

.banner__text {
  max-width: 58rem;
  min-width: 0;
}

.banner__text > * { min-width: 0; }

/* Yan not — mono, sol kenarinda mavi cizgi. Kapsam icindeki --c-blue devri
   sayesinde koyu perde uzerinde acik maviye doner. */
.banner__note {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-invert-mute);
  text-shadow: 0 1px 8px rgba(8, 11, 18, 0.7);
  padding-left: var(--s-4);
  border-left: 2px solid var(--c-blue);
  max-width: 22rem;
  line-height: 1.7;
}

/* Perde uzerinde metin. Govde metni TAM beyaz, kisik gri degil — olculdu:
   --c-invert-mute parlak karelerde 2-3:1'e dusuyor. Hiyerarsi renkten
   degil OLCEKTEN gelir. */
.banner .label {
  color: var(--c-invert-fg);
  letter-spacing: 0.2em;
  margin-bottom: 1.7em;
  text-shadow: 0 1px 8px rgba(8, 11, 18, 0.7);
}

/* Banner basligi genel `.d1/.d2` olceginden DAHA KUCUK (kullanici istegi
   2026-09-02: "cok buyuk, daha estetik olsun"). Token'lar degistirilmedi —
   `--t-3xl/--t-4xl` sayfa govdesindeki bolum basliklarinda da kullaniliyor,
   oraya dokunmak butun sayfalarin hiyerarsisini kaydirirdi. Kucultme
   yalnizca banner kapsaminda.
   Olcek: 3,75rem (60px) -> 3,125rem (50px) ust sinir (kullanici
   2026-09-02: "hero ana baslik 50px"); mobilde 34 -> 28px. */
.banner .d1,
.banner .d2 {
  font-size: 37px; /* ust sinir 50px */
  color: var(--c-invert-fg);
  margin-bottom: 0.44em;
  text-wrap: balance;
  text-shadow:
    0 1px 2px rgba(8, 11, 18, 0.55),
    0 8px 30px rgba(8, 11, 18, 0.45);
}

.banner .lead {
  font-size: 15.5px;
  color: var(--c-invert-fg);
  max-width: 44rem;
  text-shadow: 0 1px 3px rgba(8, 11, 18, 0.6), 0 2px 14px rgba(8, 11, 18, 0.55);
}


/* --- Kilometre olcegi alt notu ------------------------------------------
   Eskiden home.css'teydi; anasayfadaki bakim bolumu bakim.html'e tasininca
   (2026-08-28) oraya erisilemez oldu — bakim.html home.css YUKLEMIYOR ve
   not stilsiz kaliyordu. Ortak dosyaya alindi. */
.journey__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-6);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
}

.journey__hint {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
}

/* KALDIRILDI (2026-09-01): bu override, bolum boslugu 100px oldugunda
   banner ile icerik arasinda 150px'lik olu bosluk olusmasina karsi
   konmustu. `--sec-y` 36px'e inince sebebi kalmadi; ustelik override
   (48px) artik normal bolum boslugundan GENIS kalarak kendisi bir
   istisna uretiyordu. Deger tek kaynaktan (`--sec-y`) yonetilir. */


/* --- Sekmeli icerik — Scooter / Motosiklet ------------------------------
   ORTAK BILESEN (yol haritasi madde 2). Ayni isi yapan iki arac tipini
   yan yana degil UST USTE anlatir; okuyucu kendi tipini secer.

   Kullanim:
     <div class="tabs" data-tabs>
       <div class="tabs__list" role="tablist" aria-label="Araç tipi">
         <button class="tabs__tab" type="button" role="tab"
                 id="t-sc" aria-controls="p-sc" aria-selected="true">Scooter</button>
         <button class="tabs__tab" type="button" role="tab"
                 id="t-mt" aria-controls="p-mt" aria-selected="false">Motosiklet</button>
       </div>
       <div class="tabs__panel" role="tabpanel" id="p-sc" aria-labelledby="t-sc">…</div>
       <div class="tabs__panel" role="tabpanel" id="p-mt" aria-labelledby="t-mt" hidden>…</div>
     </div>

   `hidden` MARKUP'ta durur, JS eklemez: aksi halde sayfa acilirken tum
   paneller bir an gorunup sonra gizlenir ve yerlesim ziplar. Betik
   calismazsa ilk panelin icerigi okunur kalir — anlamli bir yedek.

   Aktif sekme KIRMIZI: DESIGN.md'ye gore kirmizi "dikkat ve eylem, aktif
   durak" demek; mavi yapisal olani anlatir.
   -------------------------------------------------------------------------- */

.tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-line);
}

.tabs__tab {
  position: relative;
  padding: 0 0 var(--s-3);
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-ink-faint);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}

/* Alt cizgi ayri bir katman: `border-bottom` kullanilsaydi sekme yuksekligi
   secili/secisiz durumda 1px degisip satiri oynatirdi. */
.tabs__tab::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--e-out);
}

.tabs__tab:hover { color: var(--c-ink-mute); }

.tabs__tab[aria-selected='true'] {
  color: var(--c-ink);
}

.tabs__tab[aria-selected='true']::after { transform: scaleX(1); }

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

.tabs__panel:focus { outline: none; }

/* --- Marka paneli ------------------------------------------------------- */

.marks {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mark {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.mark:hover {
  border-color: var(--c-line-strong);
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}

.mark__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--c-surface-alt);
  overflow: hidden;
}

.mark__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--e-out);
}

.mark:hover .mark__media img { transform: scale(1.03); }

.mark__flag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: 0.3rem var(--s-3);
  background: var(--c-invert-bg);
  color: var(--c-invert-fg);
  font-family: var(--f-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-radius: var(--r-sm);
}

.mark--blue .mark__flag { background: var(--c-blue); }
.mark--red  .mark__flag { background: var(--c-red); }

.mark__body {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: var(--s-5);
}

.mark__models {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.mark__models li {
  padding: 0.25rem var(--s-3);
  background: var(--c-surface-alt);
  border-radius: var(--r-sm);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--c-ink-mute);
}

/* --- Hizmet listesi — numarali degil, cunku sira bilgi tasimiyor -------- */

.services {
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border-block: 1px solid var(--c-line);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Satirlar: ikon / ad / aciklama(esner) / sure — sureler ayni hizada biter */
.service {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
  background: var(--c-bg);
  transition: background var(--d-base) var(--e-out);
}

.service:hover { background: var(--c-surface); }

/* 28px'ten 36px'e cikarildi. Boyutun yani sira CIZGI AGIRLIGINI da
   duzeltiyor: yeni ikonlar 48 birimlik viewBox'ta `stroke-width: 2.25`
   ile cizili, 28px'e kuculunce cizgi 1.31px kaliyordu — onceki 24 birimlik
   ikonlar (stroke 1.5) 1.75px cizdigi icin kartlar gozle gorulur bicimde
   incelesmisti. 36px'te cizgi 1.69px: eski agirliga donuyor. */
.service__icon {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--c-blue);
  margin-bottom: var(--s-3);
}

.service__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  line-height: 1.1;
}

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

.service__meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: var(--s-3);
  margin-top: var(--s-1);
  border-top: 1px solid var(--c-line);
}

/* --- Kilometre olcegi (bakim yolculugu onizlemesi) ---------------------
   Yatay olcek. Duraklar gercek bakim araliklarini tasidigi icin sirali
   numaralandirma burada bilgi tasir.
   ----------------------------------------------------------------------- */

.kmscale {
  position: relative;
  margin-top: var(--s-6);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.kmscale__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 14.5rem;
  gap: var(--s-5);
  min-width: max-content;
  padding-top: var(--s-6);
  padding-bottom: var(--s-2);
}

/* Olcegin ana cizgisi + tirnaklar */
.kmscale__track::before {
  content: '';
  position: absolute;
  top: 0.6875rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--c-line-strong);
}

.kmstop {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-2);
}

.kmstop::before {
  content: '';
  position: absolute;
  top: 0.3125rem;
  left: 0;
  width: 1px;
  height: 0.75rem;
  background: var(--c-line-strong);
  transition: background var(--d-base) var(--e-out),
              height var(--d-base) var(--e-out);
}

.kmstop::after {
  content: '';
  position: absolute;
  top: 0.375rem;
  left: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-line-strong);
  transition: background var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.kmstop:hover::after,
.kmstop:focus-within::after {
  background: var(--c-red);
  border-color: var(--c-red);
  transform: scale(1.3);
}

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

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

.kmstop__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-variation-settings: 'wdth' var(--wdth-tight);
  font-size: var(--t-base);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}

.kmstop__note {
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-ink-mute);
}

/* --- Teknik kunye tablosu (istatistik karti degil, spec sayfasi) -------- */

.spec {
  border-top: 1px solid var(--c-line-strong);
}

/* Satir boslugu ve deger puntosu, kunye bloklarinin yanindaki kare gorsele
   sigacak sekilde olculdu (hakkimizda `.facts`): --s-4 padding ve --t-xl
   deger ile satir 87px tutuyor, alti satir 525px'e cikip gorseli asiyordu.
   --s-2 + --t-lg ile satir 44px. Iki sayfada da (index `.shop`,
   hakkimizda `.facts`) ayni oldugu icin kural bilesenin kendisinde. */
.spec__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4);
  align-items: baseline;
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--c-line);
}

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

.spec__val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-lg);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: right;
}

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

/* --- Cagri seridi ------------------------------------------------------- */

.cta-band {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .cta-band {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-7);
  }
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* --- Form primitifleri --------------------------------------------------
   Randevu ve iletisim sayfalari paylasir.
   ----------------------------------------------------------------------- */

.field {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

/* --- Sifre alani: goz dugmesi ------------------------------------------
   Dugme girdinin ICINDE sagda durur. Girdiye SAG DOLGU verilir, yoksa
   uzun bir sifre dugmenin altina girer. Dugme 44px dokunma hedefinde;
   ikon 20px ama tiklanabilir alan tam yukseklik. */
.input-goz {
  position: relative;
  display: grid;
}

.input-goz .input {
  padding-right: 3rem;
}

.input-goz__btn {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-ink-faint);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}

.input-goz__btn:hover { color: var(--c-ink); }

.input-goz__btn:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

.input-goz__btn svg { width: 1.25rem; height: 1.25rem; }

/* Sifre GORUNUR haldeyken cizik kalkar: ikon "acik goz" olur.
   Basili durum `aria-pressed`ten okunur, ayri bir sinif tutulmaz. */
.input-goz__btn[aria-pressed='true'] { color: var(--c-blue); }
.input-goz__btn[aria-pressed='true'] .input-goz__cizik { display: none; }

.field__label {
  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-mute);
}

.field__label span {
  color: var(--c-red);
  margin-left: 0.15rem;
}

.field__hint {
  font-size: var(--t-sm);
  color: var(--c-ink-faint);
}

.input,
.select,
.textarea {
  width: 100%;
  padding: 0.75rem var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-edge-ctl);
  border-radius: var(--r-sm);
  font-size: var(--t-base);
  color: var(--c-ink);
  transition: border-color var(--d-fast) var(--e-out),
              box-shadow var(--d-fast) var(--e-out);
}

.input::placeholder,
.textarea::placeholder { color: var(--c-ink-faint); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--c-ink-faint); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px var(--c-blue-wash);
}

.textarea {
  min-height: 6.5rem;
  resize: vertical;
  line-height: 1.5;
}

/* Telefon gibi alanlarda rakamlar mono */
.input--num { font-family: var(--f-mono); }

.select {
  appearance: none;
  padding-right: var(--s-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink-mute) 50%),
    linear-gradient(135deg, var(--c-ink-mute) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 2px),
    calc(100% - 1rem) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* Gecersiz alan — yalnizca gonderme denemesinden sonra isaretlenir */
.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: var(--c-red);
}

.field__error {
  font-size: var(--t-sm);
  color: var(--c-red);
}

.field:not(.is-invalid) .field__error { display: none; }

/* Onay kutusu */
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--c-ink-mute);
  cursor: pointer;
}

.check input {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15rem;
  accent-color: var(--c-blue);
}

/* --- Teknik cizimlerin koyu mod uyarlamasi ------------------------------
   Cizimler acik zeminli uretildi; koyu modda parlak blok olarak duruyorlar.
   invert + hue-rotate ikilisi zemini karartirken mavi ve kirmizi vurgulari
   yerinde tutar.

   Secici bilerek `img[src$='.svg']` — gercek fotograflar (.jpg) geldiginde
   kural kendiliginden devre disi kalir. Fotografa invert uygulanmasi felaket
   olurdu; bu yuzden kaldirmayi hatirlamak gerekmiyor.
   ----------------------------------------------------------------------- */

:root[data-theme='dark'] .hero__media img[src$='.svg'],
:root[data-theme='dark'] .mark__media img[src$='.svg'],
:root[data-theme='dark'] .shop__media img[src$='.svg'],
:root[data-theme='dark'] .stop__figure img[src$='.svg'],
:root[data-theme='dark'] .story__media img[src$='.svg'],
:root[data-theme='dark'] .map img[src$='.svg'] {
  filter: invert(0.91) hue-rotate(180deg);
}

/* --- Aciga cikma animasyonu -------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--d-slow) var(--e-out),
              transform var(--d-slow) var(--e-out);
  transition-delay: var(--delay, 0ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Akis modu: GSAP ScrollTrigger devraldiginda main.js bu sinifi <html>'e
   ekler. CSS gecisi kapatilir — GSAP her karede inline stil yazarken
   transition da ayni ozellikleri surukleyip hareketi titretiyordu. */
.flow-on .reveal {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}


/* --- Akordeon (`.acc`) — ORTAK BILESEN --------------------------------
   Once yalniz servis kunyelerinde vardi ve kurallari servis.css'teydi;
   bakim yolculugundaki is listeleri de acilir-kapanir olunca (kullanici
   istegi 2026-09-02) buraya tasindi. Sayfaya OZEL kurallar
   (`.sheet__side.acc`, `.acc .sheet__tasks`) servis.css'te kaldi.

   Kullanim:
     <div class="acc" data-acc>
       <div class="acc__item">
         <h3 class="acc__title">
           <button class="acc__head" type="button" id="X-h"
                   aria-controls="X" aria-expanded="true">
             Baslik <span class="acc__sign" aria-hidden="true"></span>
           </button>
         </h3>
         <div class="acc__panel" id="X" role="region" aria-labelledby="X-h">
           <div class="acc__inner"> ... </div>
         </div>
       </div>
     </div>
   Acilip kapanma `grid-template-rows: 1fr <-> 0fr` ile; yukseklik JS'te
   OLCULMEZ. Baslangic durumu ve `is-ready` sinifi main.js initAccordion'da.
   -------------------------------------------------------------------- */
.acc__item {
  border-bottom: 1px solid var(--c-line);
}

.acc__title {
  margin: 0;
}

.acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding-block: var(--s-3);
  border: 0;
  background: none;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--c-ink-faint);
  cursor: pointer;
  transition: color var(--d-fast) var(--e-out);
}

.acc__head:hover,
.acc__head[aria-expanded='true'] {
  color: var(--c-ink);
}

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

/* Isaret: yatay cizgi sabit, dikey cizgi acilinca ortadan buzulup kaybolur
   (+ -> -). Olcu `.sheet__task::before` ile ayni: 0.75rem x 1px, mavi. */
.acc__sign {
  position: relative;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
}

.acc__sign::before,
.acc__sign::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 1px;
  background: var(--c-blue);
}

.acc__sign::after {
  transform: rotate(90deg);
  transition: transform var(--d-base) var(--e-out);
}

.acc__head[aria-expanded='true'] .acc__sign::after {
  transform: rotate(90deg) scaleX(0);
}

.acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}

.acc__item[data-open='false'] .acc__panel {
  grid-template-rows: 0fr;
}

/* `min-height: 0` olmadan izgara satiri icerigin altina inmez ve 0fr
   hicbir sey yapmaz. */
.acc__inner {
  min-height: 0;
  padding-bottom: var(--s-4);
}

/* Gecis ilk boyamadan SONRA acilir: initAccordion baslangicta iki blogu
   kapatir, gecis o an aktif olsaydi sayfa acilirken kapanma oynardi. */
.acc.is-ready .acc__panel {
  transition: grid-template-rows var(--d-base) var(--e-out);
}

.acc.is-ready .acc__inner {
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}

.acc.is-ready .acc__item[data-open='false'] .acc__inner {
  opacity: 0;
  transform: translateY(-4px);
}

/* Kapsam listesi akordeonun icinde: ust cizgisi ve son satirin alt cizgisi
   akordeonun kendi ayraclariyla ust uste binerdi. */