/* RİF ASFALT — Sultangazi / İstanbul
   Tasarım dili: kireç grisi zemin, asfalt siyahı, hi-vis sarı vurgu.
   Ölçüler ve renkler "Rif Asfalt v3" tasarım dosyasından birebir alınmıştır. */

:root {
  --hivis: #F5C518;   /* hi-vis sarı — vurgu */
  --amber: #E0A800;   /* kesikli yol çizgisi */
  --asfalt: #14161A;  /* metin ve zemin siyahı */
  --kirec: #EDECE8;   /* sayfa zemini */
  --kirec-2: #DCDBD6; /* ikincil zemin */
  --kirec-3: #F7F6F3; /* kart zemini */
  --freze: #83867F;   /* ikincil metin */
  --panel: #24282E;   /* koyu kart */
  --panel-koyu: #1B1E23;
  --cizgi-koyu: #3A3F47;
  --uyari: #D93A17;

  /* Frezelenmiş yüzey dokusu — açık ve koyu zemin için iki varyant */
  --doku-acik: repeating-linear-gradient(90deg, rgba(20,22,26,.11) 0 1px, transparent 1px 5px);
  --doku-koyu: repeating-linear-gradient(90deg, rgba(240,239,235,.16) 0 1px, transparent 1px 5px);

  /* Köşeleri kertilmiş "kilit" formu — butonlar ve kartlar */
  --kilit: polygon(0% 0%, calc(100% - 14px) 0%, calc(100% - 14px) 32%, 100% 32%,
                   100% 68%, calc(100% - 14px) 68%, calc(100% - 14px) 100%,
                   0% 100%, 0% 68%, 14px 68%, 14px 32%, 0% 32%);
  --kilit-kucuk: polygon(0% 0%, calc(100% - 8px) 0%, calc(100% - 8px) 36%, 100% 36%,
                         100% 64%, calc(100% - 8px) 64%, calc(100% - 8px) 100%,
                         0% 100%, 0% 64%, 8px 64%, 8px 36%, 0% 36%);

  --serit: 12px;      /* sol kenardaki ilerleme şeridi */
  --baslik-h: 70px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-left: var(--serit);
  background: var(--kirec);
  color: var(--asfalt);
  font-family: "Familjen Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--asfalt); }
a:hover { color: var(--uyari); }
:focus-visible { outline: 2px solid var(--uyari); outline-offset: 3px; }
table { border-collapse: collapse; }
img { max-width: 100%; }

/* ---------- tipografi yardımcıları ---------- */

/* Anybody — sıkıştırılmış, geniş başlık yüzü */
.baslik {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: .86;
  margin: 0;
}
.baslik-xl { font-size: clamp(28px, 4.6vw, 62px); }
.baslik-l  { font-size: clamp(24px, 3.4vw, 44px); line-height: .9; }

/* Martian Mono — etiket, sayı ve teknik veri yüzü */
.mono {
  font-family: 'Martian Mono', ui-monospace, monospace;
}
.etiket {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--freze);
}
.giris {
  max-width: 60ch;
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.55;
}

.bolum { padding: 8px 24px 0; scroll-margin-top: 80px; }

/* ---------- açılış animasyonu ---------- */

@keyframes serimUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* JS yüklenmezse içerik yine görünür kalsın: opaklık yalnızca .anim-hazir
   sınıfı eklendiğinde sıfırlanır. */
.anim-hazir [data-anim]:not(.gorundu) { opacity: 0; }
[data-anim].gorundu { animation: serimUp .7s cubic-bezier(.16,1,.3,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* ---------- sol kenar: kaydırma ilerlemesi ---------- */

.serit {
  position: fixed; left: 0; top: 0;
  width: var(--serit); height: 100vh;
  z-index: 50;
  background: var(--kirec-2);
}
.serit-dolu {
  position: absolute; left: 0; top: 0;
  width: var(--serit); height: 0;
  background: var(--asfalt);
}
/* şeridin ortasındaki kesikli yol çizgisi */
.serit-dolu::after {
  content: ""; position: absolute;
  left: 5px; top: 0; bottom: 0; width: 2px;
  background-image: repeating-linear-gradient(180deg, var(--amber) 0 18px, transparent 18px 34px);
}

/* ---------- sağ alt: HMI durum kutusu ---------- */

.hmi {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  min-width: 148px; padding: 10px 16px;
  background: var(--panel);
  border: 1px solid var(--cizgi-koyu);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.45);
}
/* dört köşedeki vida başları */
.hmi::before, .hmi::after,
.hmi > .vida::before, .hmi > .vida::after {
  content: ""; position: absolute;
  width: 7px; height: 7px; border-radius: 50%;
  background: #4A4F58;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
}
.hmi::before { left: 6px; top: 6px; }
.hmi::after  { right: 6px; top: 6px; }
.hmi > .vida::before { left: 6px; bottom: 6px; }
.hmi > .vida::after  { right: 6px; bottom: 6px; }

.hmi-etiket { font-size: 9.5px; letter-spacing: .14em; color: var(--freze); }
.hmi-deger  { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--hivis); margin-top: 4px; }

/* ---------- üst bar ---------- */

.ustbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--kirec);
  border-bottom: 2px solid var(--asfalt);
}
.ustbar-ic {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: clamp(12px, 1.6vw, 26px);
  padding: 0 20px; height: var(--baslik-h);
  overflow: hidden;
}
.logo { display: flex; align-items: center; text-decoration: none; flex: none; white-space: nowrap; }
.logo span {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: 20px; letter-spacing: -.03em; line-height: 1;
  color: var(--asfalt);
}
.logo-blok { width: 10px; height: 18px; background: var(--hivis); margin: 0 6px; }

.ustbar-ic nav { display: flex; flex-wrap: nowrap; gap: clamp(10px, 1.3vw, 20px); min-width: 0; overflow: hidden; margin-left: 12px; }
.ustbar-ic nav a {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.ustbar .bosluk { flex: 1 1 auto; min-width: 8px; }
.ustbar-tel {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 12.5px; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; flex: none;
}

/* ---------- butonlar ---------- */

.dugme {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 26px; flex: none; white-space: nowrap;
  border: 0; cursor: pointer; text-decoration: none;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  clip-path: var(--kilit);
}
.dugme-sari  { background: var(--hivis); color: var(--asfalt); }
.dugme-cizgi { background: transparent; color: var(--asfalt); outline: 1.5px solid var(--asfalt); outline-offset: -1.5px; }
.dugme-hayalet {
  background: rgba(20,22,26,.4); color: #FFF;
  outline: 1.5px solid rgba(255,255,255,.7); outline-offset: -1.5px;
}
.dugme-kucuk {
  height: 38px; padding: 0 16px; font-size: 11px;
  clip-path: var(--kilit-kucuk);
}

/* ---------- hero ---------- */

.hero {
  position: relative; min-height: 88vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--asfalt);
}
.hero-foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 62%;
}
.hero-perde {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,22,26,.88) 0%, rgba(20,22,26,.72) 42%, rgba(20,22,26,.28) 100%);
}
.hero-serit { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--hivis); }
.hero-ic { position: relative; padding: 120px 24px 44px; }

.hero-rozet { display: flex; align-items: center; gap: 14px; }
.hero-rozet span:not(.cubuk) {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .18em;
  color: var(--kirec); text-transform: uppercase;
}
.cubuk { width: 4px; height: 26px; background: var(--hivis); flex: none; }

.hero h1 {
  margin: 20px 0 0;
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(40px, 8vw, 124px);
  line-height: .88; letter-spacing: -.03em;
  text-transform: uppercase; color: #FFF; max-width: 16ch;
}
.hero h1 span { display: block; }
.hero h1 .vurgu { color: var(--hivis); }
.hero-dugmeler { display: flex; margin-top: 32px; flex-wrap: wrap; }

/* künye şeridi — hero altı dört sayı */
.kunye {
  position: relative;
  border-top: 1px solid rgba(255,255,255,.28);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(20,22,26,.72);
}
.kunye > div { padding: 22px 20px 26px; }
.kunye > div + div { border-left: 1px solid rgba(255,255,255,.28); }
.kunye-deger {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 115, 'wght' 800;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1; letter-spacing: -.02em; color: #FFF;
}
.kunye-etiket {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; color: #B9B8B3; margin-top: 9px;
}

/* ---------- bölüm ayracı: frezelenmiş şerit + kesikli çizgi ---------- */

.ayrac {
  height: 72px; width: 100%;
  display: flex; align-items: center;
  background-image: var(--doku-acik);
}
.ayrac-koyu { background-image: var(--doku-koyu); }
.ayrac > div {
  height: 2px; width: 100%;
  background-image: repeating-linear-gradient(90deg, var(--amber) 0 44px, transparent 44px 72px);
}

/* ---------- makine şeridi (yatay kaydırmalı) ---------- */

.ray { background: var(--asfalt); color: var(--kirec); padding: 32px 0 36px; border-top: 1px solid var(--cizgi-koyu); }
.ray-bas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 0 24px 22px;
}
.ray-bag {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; text-decoration: none;
  color: var(--hivis); white-space: nowrap;
}
.ray-bag span { width: 26px; height: 2px; background: var(--hivis); }
.ray-liste {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 0 24px 8px; scroll-snap-type: x mandatory;
}
.ray-kart {
  flex: 0 0 258px; scroll-snap-align: start; margin: 0;
  background: var(--panel); border: 1px solid var(--cizgi-koyu);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.ray-kart figcaption { padding: 14px 16px 16px; border-top: 1px solid var(--cizgi-koyu); }
.ray-no { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--hivis); }
.ray-ad {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 16px; line-height: 1.05; letter-spacing: -.02em;
  text-transform: uppercase; margin-top: 8px; color: var(--kirec);
}
.ray-islev { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 11px; color: var(--freze); margin-top: 7px; }

/* ---------- fotoğraf ve yer tutucu ---------- */

.foto { display: block; width: 100%; object-fit: cover; }
.foto-ray { height: 172px; background: var(--panel-koyu); }
.foto-park { height: 200px; background: var(--panel-koyu); border-bottom: 1px solid var(--cizgi-koyu); }
.foto-yapi { height: 196px; background: var(--kirec-2); }

/* Fotoğraf henüz yerine konmadıysa tasarımın kendi tarama dokulu yer tutucusu */
.yertutucu {
  display: flex; align-items: flex-end;
  padding: 14px;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em; color: var(--freze);
}
.yertutucu-koyu { background: var(--panel-koyu); background-image: var(--doku-koyu); }
.yertutucu-acik { background: var(--kirec-2); background-image: var(--doku-acik); }
.yertutucu.foto-ray { padding: 12px; font-size: 9.5px; }
.yertutucu.foto-park { border-bottom: 1px solid var(--cizgi-koyu); }

/* ---------- zincir: beş halka ---------- */

.halkalar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.halka {
  display: flex; flex-direction: column;
  min-height: 196px; padding: 22px 26px;
  background: var(--kirec-2);
  border: 1px solid var(--asfalt);
  transition: background-color .18s linear;
}
.halka:hover { background-color: var(--hivis); }
/* nakliye halkası — üzerine gelince freze dokusu da açılır */
.halka-dokulu:hover { background-image: var(--doku-acik); }
.halka-no { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .14em; color: var(--freze); }
.halka-ad {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: 19px; line-height: 1; letter-spacing: -.02em;
  margin-top: 14px; text-transform: uppercase;
}
.halka-alt { font-size: 13.5px; line-height: 1.45; margin-top: 10px; min-height: 58px; }
.halka-kim {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .12em; color: var(--freze);
  border-top: 1px solid rgba(20,22,26,.25); padding-top: 9px;
}

/* ---------- firma ---------- */

.firma-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px; margin-top: 22px; align-items: start;
}
.firma-grid .giris + .giris { margin-top: 14px; }

/* Sıra bir öncelik bildirmediği için numara yerine hi-vis kama kullanılıyor. */
.neden { list-style: none; margin: 0; padding: 0; display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--asfalt); }
.neden li { background: var(--kirec); padding: 20px 20px 22px; }
.neden h3 {
  margin: 0; font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 116, 'wght' 800;
  font-size: 16px; line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase;
  display: flex; align-items: center; gap: 9px;
}
.neden h3::before { content: ""; width: 4px; height: 15px; background: var(--hivis); flex: none; }
.neden p { margin: 9px 0 0; font-size: 14px; line-height: 1.5; color: #3C4147; }

/* Şerit yüksekliği sabit: kaynak görselin oranı ne olursa olsun aynı bant
   yüksekliğinde durur, taşan kısım kırpılır. */
.firma-bant {
  display: block; width: 100%;
  height: clamp(150px, 15vw, 230px);
  object-fit: cover; object-position: 50% 55%;
  margin-top: 34px; border: 1px solid var(--asfalt);
}

/* ---------- vizyon & misyon ---------- */

.vizyon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.vm { border: 1px solid var(--asfalt); background: var(--kirec-3); padding: 26px; margin: 0; }
.vm-one {
  margin: 14px 0 0; font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(17px, 1.9vw, 21px); line-height: 1.18; letter-spacing: -.02em;
  text-wrap: balance;
}
.vm p:last-child { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: #3C4147; }

/* ---------- makine kartı açıklaması ---------- */

.park-aciklama {
  margin: 0 0 16px; font-size: 13.5px; line-height: 1.5;
  color: var(--freze); text-wrap: pretty;
}

/* ---------- künye ek satırları ---------- */

.yol-tarifi {
  display: inline-block; margin-top: 8px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hivis) !important; text-decoration: none;
}
.yol-tarifi:hover { text-decoration: underline; }

/* ---------- sabit iletişim ---------- */

/* HMI kutusunun hemen üstünde; solda künye rakamlarının üstüne biniyordu. */
.wa-buton {
  position: fixed; right: 20px; bottom: 86px; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: #25D366; color: #0B3D22;
  border: 2px solid var(--asfalt);
  box-shadow: 0 3px 0 rgba(20,22,26,.28);
  transition: transform .14s ease;
}
.wa-buton:hover { transform: translateY(-2px); color: #0B3D22; }

/* Mobilde sayfa dibinde sabit ara / WhatsApp / keşif çubuğu. */
.mobil-cubuk { display: none; }

/* ---------- 404 ---------- */

.hata { min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
        background: var(--asfalt); color: var(--kirec); }
.hata-ic { padding: 40px 24px; }
.hata h1 {
  margin: 16px 0 0; font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(34px, 7vw, 78px); line-height: .9; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--kirec);
}
.hata p { max-width: 52ch; margin: 20px 0 0; font-size: 16px; line-height: 1.55; color: var(--freze); }
.hata-dugmeler { display: flex; gap: 0; margin-top: 30px; flex-wrap: wrap; }
.hata .dugme-cizgi { color: var(--kirec); outline-color: var(--kirec); }

/* ---------- işler tablosu ---------- */

.uyari-notu {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .1em;
  color: var(--uyari); margin: 24px 0 10px;
}
.isler { width: 100%; table-layout: fixed; }
.isler thead tr { border-top: 2px solid var(--asfalt); border-bottom: 2px solid var(--asfalt); }
.isler th {
  text-align: left; padding: 12px 10px; font-weight: 400;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; color: var(--freze);
}
.isler th:first-child { padding-left: 14px; }
.isler th:last-child { text-align: right; padding-right: 14px; }
.s-yil { width: 70px; }
.s-konum { width: 140px; }
.s-tur { width: 280px; }
.s-alan { width: 250px; }

.isler tbody tr { border-bottom: 1px solid var(--asfalt); transition: background-color .16s linear; }
.isler tbody tr:hover { background: var(--hivis); }
.isler td { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 12px; padding: 0 10px; }
.isler td:first-child { height: 64px; padding-left: 14px; font-size: 13px; font-weight: 600; }
.isler td:last-child { padding-right: 14px; }
.alan-hucre { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
/* satır fotoğrafı yalnızca o satırın üzerine gelindiğinde belirir */
.satir-foto {
  width: 120px; height: 80px; object-fit: cover; display: block;
  background: var(--kirec-2); flex: none;
  opacity: 0; transition: opacity .16s linear;
}
tr:hover .satir-foto { opacity: 1; }
.m2 { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

.idareler {
  margin-top: 22px;
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 11.5px; line-height: 2;
}
.idareler span { display: block; }
.idareler span::before { content: "/"; color: var(--amber); margin-right: 10px; }

/* ---------- yol katmanları ---------- */

.katmanlar { margin-top: 28px; border-top: 1px solid var(--asfalt); }
.katman {
  display: flex; align-items: center; gap: 24px;
  padding: 0 14px;
  border-bottom: 1px solid var(--asfalt);
  background-position-x: 0;
  transition: background-position-x .25s linear;
}
.katman:hover { background-image: var(--doku-acik); background-position-x: 5px; }
.katman-ad {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: clamp(16px, 2vw, 24px); line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; flex: none; width: 290px;
}
/* katman içeriği yalnızca hover'da açılır */
.katman-icerik {
  flex: 1; min-width: 0;
  font-size: 14.5px; line-height: 1.5;
  opacity: 0; transition: opacity .18s linear;
}
.katman:hover .katman-icerik { opacity: 1; }
.katman-kalinlik {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .08em; color: var(--freze);
  flex: none; width: 88px; text-align: right;
}

/* ---------- yapı işleri kartları ---------- */

.yapi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 30px; }
.yapi-kart { margin: 0; border: 1px solid var(--asfalt); background: var(--kirec-3); }
.yapi-kart figcaption { padding: 16px 18px 20px; border-top: 1px solid var(--asfalt); }
.yapi-no { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--freze); }
.yapi-ad {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 116, 'wght' 800;
  font-size: 19px; line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase; margin-top: 10px;
}
.yapi-aciklama { margin: 9px 0 0; font-size: 14.5px; line-height: 1.5; text-wrap: pretty; }

/* ---------- makine parkı ---------- */

.park { background: var(--asfalt); color: var(--kirec); scroll-margin-top: 80px; }
.park-ic { padding: 16px 24px 40px; }
.park-giris { max-width: 62ch; margin: 18px 0 0; font-size: 16px; line-height: 1.55; color: var(--freze); }
.park-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.park-kart {
  position: relative; background: var(--panel);
  border: 1px solid var(--cizgi-koyu);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.45);
}
.park-govde { padding: 22px 24px 24px; }
.park-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.park-ad {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 19px; line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--kirec);
}
.park-no { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--hivis); }
/* etiket | ince ayraç | değer */
.park-tablo { display: grid; grid-template-columns: 88px 1px minmax(0, 1fr); gap: 0 14px; }
.park-tablo dt {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 10px; letter-spacing: .14em; color: var(--freze); padding: 5px 0; margin: 0;
}
.park-tablo .ayirici { background: var(--cizgi-koyu); }
.park-tablo dd {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; color: var(--kirec); padding: 5px 0; margin: 0;
}

/* ---------- yeterlilik ---------- */

.yeterlilik-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.yeterlilik-kart { background: var(--kirec-2); padding: 26px; border: 1px solid var(--asfalt); }
.yeterlilik-deger {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 115, 'wght' 800;
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1; letter-spacing: -.02em; margin-top: 12px;
}
.yeterlilik-not { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; }

/* ---------- sık sorulanlar ---------- */

summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
.sss-liste { margin-top: 26px; max-width: 96ch; border-top: 1px solid var(--asfalt); }
.sss-liste details { border-bottom: 1px solid var(--asfalt); }
.sss-liste summary { display: flex; align-items: center; gap: 14px; padding: 18px 0; }
.sss-kare { width: 12px; height: 12px; background: var(--hivis); flex: none; }
.sss-soru { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.sss-cevap { margin: 0 0 20px 26px; font-size: 15.5px; line-height: 1.65; max-width: 78ch; text-wrap: pretty; }

/* ---------- teklif ---------- */

.teklif { padding: 56px 24px 64px; scroll-margin-top: 80px; }
.teklif-kutu {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr);
  align-items: stretch;
  border: 2px solid var(--asfalt); background: var(--kirec-3);
}
.teklif-sol { display: flex; flex-direction: column; }
.teklif-sol > div { padding: 34px 24px 30px; }
.teklif h2 { font-size: clamp(28px, 3.8vw, 52px); }
.teklif-not { max-width: 62ch; margin: 12px 0 26px; font-size: 15px; line-height: 1.55; color: #3C4147; }

/* Form yerine doğrudan kanallar: ara, yaz, e-posta gönder. */
.iletisim-kanallar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
                     background: var(--asfalt); border: 1px solid var(--asfalt); margin-top: 4px; }
.kanal {
  display: flex; flex-direction: column; gap: 6px;
  padding: 22px 20px 24px; background: var(--kirec);
  text-decoration: none; color: var(--asfalt);
  transition: background-color .16s linear;
}
.kanal:hover { background: var(--hivis); color: var(--asfalt); }
.kanal-wa:hover { background: #25D366; }
.kanal-etiket { font-family: 'Martian Mono', ui-monospace, monospace;
                font-size: 9.5px; letter-spacing: .14em; color: var(--freze); }
.kanal:hover .kanal-etiket { color: rgba(20,22,26,.62); }
.kanal-deger {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: clamp(15px, 1.5vw, 19px); line-height: 1.05; letter-spacing: -.02em;
  word-break: break-word;
}
.kanal-not { font-size: 13px; line-height: 1.45; color: #3C4147; }
/* E-posta adresi alan adının ortasından bölünmesin: sıkı harf aralığını
   bırakıp biraz küçültüyoruz, böylece en dar sütunda bile tek satır kalıyor. */
.kanal-eposta .kanal-deger {
  font-size: clamp(12px, 1.05vw, 13.5px);
  letter-spacing: 0;
  white-space: nowrap;
}
.kanal:hover .kanal-not { color: rgba(20,22,26,.72); }

.adimlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border-top: 2px solid var(--asfalt); }
.adimlar > div { padding: 16px 18px; }
.adimlar > div:first-child { padding-left: 0; }
.adimlar > div:last-child { padding-right: 0; }
.adimlar > div + div { border-left: 1px solid rgba(20,22,26,.35); }
.adim-no { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em; color: var(--freze); }
.adim-metin { font-size: 14.5px; line-height: 1.5; margin-top: 8px; }

/* künye paneli */
.teklif-sag { background: var(--asfalt); color: var(--kirec); display: flex; flex-direction: column; }
.teklif-sag-bas { padding: 14px 24px; border-bottom: 1px solid var(--cizgi-koyu); }
.teklif-sag-bas span { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.kunye-tablo {
  padding: 24px; display: grid;
  grid-template-columns: 88px minmax(0, 1fr); gap: 14px 16px;
  font-family: 'Martian Mono', ui-monospace, monospace;
}
.kunye-tablo dt { font-size: 9.5px; letter-spacing: .14em; color: var(--freze); margin: 0; }
.kunye-tablo dd { font-size: 12px; line-height: 1.6; margin: 0; font-style: normal; }
.kunye-tablo a { color: var(--kirec); text-decoration: none; }

.tel-blok { display: block; margin: 0 24px; padding: 18px 20px; background: var(--hivis); color: var(--asfalt); text-decoration: none; }
.tel-blok-etiket { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 9.5px; letter-spacing: .14em; }
.tel-blok-no {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 115, 'wght' 800;
  font-size: 26px; line-height: 1; letter-spacing: -.02em; margin-top: 9px;
}
.irtibat { padding: 24px; margin-top: auto; }
.irtibat-liste { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 12px; line-height: 2; margin-top: 10px; }
.irtibat-liste a { color: var(--kirec); text-decoration: none; }
.tarama-serit { height: 34px; background-image: var(--doku-koyu); }

/* ---------- alt bilgi ---------- */

.altbilgi { background: var(--asfalt); color: var(--kirec); }
.altbilgi-ic { padding: 14px 24px 30px; }
.altbilgi-dev {
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 125, 'wght' 800;
  font-size: clamp(48px, 13vw, 190px);
  line-height: .82; letter-spacing: -.03em; color: var(--panel);
}
.altbilgi-kvkk {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 11px; line-height: 1.9; color: var(--freze);
  margin-top: 18px; scroll-margin-top: 80px;
}
.altbilgi-kvkk a { color: var(--freze); text-decoration: none; }

/* ---------- uyarlanabilir yerleşim ---------- */

@media (max-width: 1100px) {
  .firma-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .yapi-grid, .park-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halkalar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .teklif-kutu { grid-template-columns: minmax(0, 1fr); }
  .s-tur, .s-alan { width: auto; }
}

@media (max-width: 860px) {
  .ustbar-ic nav { display: none; }   /* dar ekranda menü kategori panelinde */
  .kunye { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kunye > div:nth-child(odd) { border-left: 0; }
  .kunye > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.28); }
  .yeterlilik-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* dar ekranda hover yok: katman içerikleri hep açık dursun */
  .katman-icerik { opacity: 1; }
  .katman { height: auto !important; padding: 16px 14px; flex-wrap: wrap; gap: 10px; }
  .katman-ad { width: 100%; }
  /* tabloda ikincil sütunları gizle */
  .isler .s-konum, .isler .s-tur,
  .isler td:nth-child(3), .isler td:nth-child(4) { display: none; }
  .satir-foto { display: none; }
}

@media (max-width: 620px) {
  .yapi-grid, .park-grid, .halkalar, .adimlar,
  .neden, .vizyon-grid, .iletisim-kanallar { grid-template-columns: minmax(0, 1fr); }
  .vizyon-grid { gap: 10px; }
  .adimlar > div + div { border-left: 0; border-top: 1px solid rgba(20,22,26,.35); }
  .adimlar > div { padding: 16px 0; }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form .genis, .form-alt { grid-column: span 1; }
  .hero-ic { padding: 90px 20px 36px; }
  .hmi { display: none; }

  /* Mobilde hero kutusu 0.51 oranında; 1.66 oranındaki görselin yalnızca
     ortadaki ~%31'i görünüyor, gerisi yanlardan kırpılıyor. Ana özne
     karenin tam ortasında değilse bu değerle kaydırılır. */
  .hero-foto { object-position: 56% 58%; }

  /* Sabit çubuk WhatsApp'ı zaten taşıyor; yüzen buton gereksiz kalıyor. */
  .wa-buton { display: none; }
  .mobil-cubuk {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--asfalt);
  }
  .mobil-cubuk a {
    display: flex; align-items: center; justify-content: center;
    height: 54px; text-decoration: none;
    font-family: 'Martian Mono', ui-monospace, monospace;
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  }
  .mc-ara { background: var(--hivis); color: var(--asfalt); }
  .mc-wa { background: #25D366; color: #0B3D22; }
  .mc-teklif { background: var(--asfalt); color: var(--kirec); }
  /* çubuğun altında içerik kalmasın (54px yükseklik + 2px üst kenarlık) */
  body { padding-bottom: 56px; }

  /* Dar ekranda üst bara logo + telefon + buton sığmıyor. Telefonu sarı
     CTA'ya çevirip butonu düşürüyoruz: mobilde aranmak formdan önce gelir.
     "Teklif Al" hedefi hero'daki "Keşif isteyin" ile korunuyor. */
  .ustbar-ic { padding: 0 12px; gap: 10px; }
  .logo span { font-size: 17px; }
  .logo-blok { width: 8px; height: 15px; margin: 0 4px; }
  .ustbar .dugme-kucuk { display: none; }
  .ustbar-tel {
    display: flex; align-items: center;
    height: 36px; padding: 0 14px;
    background: var(--hivis); color: var(--asfalt);
    font-size: 12px; clip-path: var(--kilit-kucuk);
  }

  /* rakam + ₺ tek satırda kalsın */
  .kunye > div { padding: 18px 14px 20px; }
  .kunye-deger { font-size: 17px; white-space: nowrap; }
}

/* ================================================================
   Hero vinci — başlığı yerine indirir, menü levhasını taşır
   ================================================================ */

/* --- üstbardaki menü düğmesi --- */
.menu-dugme {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin-left: 6px; padding: 0 12px; height: 38px;
  background: transparent; border: 0; cursor: pointer; color: var(--asfalt);
  outline: 1.5px solid transparent; outline-offset: -1.5px;
  transition: outline-color .18s, background-color .18s;
}
.menu-dugme:hover, .menu-dugme:focus-visible { outline-color: var(--asfalt); }
.menu-ikon { width: 15px; height: 18px; flex: none; }
.menu-etiket {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.menu-dugme[aria-expanded="true"] { background: var(--asfalt); color: var(--kirec); }

/* --- vinç katmanı --- */
.vinc-katman {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  overflow: hidden;
}
.vinc-govde {
  position: absolute; right: 0; top: 0;
  width: min(1400px, 114%); height: 100%;
  opacity: .95;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
}
.v-sari  { fill: var(--hivis); }
.v-koyu  { fill: #0F1114; }
.v-amber { fill: var(--amber); }
.v-kafes { stroke: #0F1114; stroke-width: 2.2; opacity: .5; fill: none; }
.v-gergi { stroke: #0F1114; stroke-width: 2.4; fill: none; opacity: .8; }

/* halat + kanca: sol/sağ araba hareketi ve iniş */
.hv-hat {
  position: absolute; top: 0; left: 0; width: 40px; z-index: 6;
  pointer-events: none; will-change: transform;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5));
}
.hv-halat {
  width: 3px; margin: 0 auto; height: 0;
  background: var(--hivis); opacity: .95;
}
.hv-kanca { display: block; width: 40px; height: 52px; margin-top: -2px; }

/* bekleme: bom ucunda çok hafif salınım */
.hero.vinc-hazir .hv-hat { animation: kancaSalinim 5.2s ease-in-out infinite; }
@keyframes kancaSalinim {
  0%, 100% { transform: translate(var(--kx, 0), var(--ky, 0)) rotate(0deg); }
  50%      { transform: translate(var(--kx, 0), var(--ky, 0)) rotate(.9deg); }
}

/* --- hero başlığı: vinçle inen satırlar --- */
.hero-baslik .hb-satir { display: block; }
.hero.vinc-var .hb-satir { opacity: 0; }

/* --- kategori levhası: kancadan sarkar --- */
/* Levha hero'nun sağ yarısında iner: sol yarıda başlık ve butonlar
   okunur kalsın, sağ yarı makinelerin sahnesi olsun. */
.kat-panel {
  position: absolute; right: 2.5%; top: 0; z-index: 4;
  width: min(310px, 30%);
  pointer-events: none;
}
.kat-panel[hidden] { display: none; }
.kat-panel.acik { pointer-events: auto; }

.kat-sapan { height: 40px; }
.kat-sapan svg { width: 100%; height: 100%; display: block; }

.kat-levha {
  background: var(--asfalt);
  border: 2px solid var(--hivis);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.kat-baslik {
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--cizgi-koyu);
}
.kat-etiket {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 9.5px; letter-spacing: .18em; color: var(--freze);
}
.kat-liste { display: grid; grid-template-columns: minmax(0, 1fr); }
/* dikey tabela: numarası solda, adı sağda tek satır */
.kat-liste a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 16px; text-decoration: none;
  border-bottom: 1px solid var(--cizgi-koyu);
  color: var(--kirec); transition: background-color .18s, padding-left .18s;
}
.kat-liste a:last-child { border-bottom: 0; }
.kat-liste a:hover, .kat-liste a:focus-visible { padding-left: 22px; }
.kat-liste a:hover, .kat-liste a:focus-visible { background: var(--panel); }
.kat-liste a:hover .kat-ad, .kat-liste a:focus-visible .kat-ad { color: var(--hivis); }
.kat-no {
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 9px; letter-spacing: .14em; color: var(--freze); flex: none;
}
.kat-ad {
  display: block;
  font-family: Anybody, sans-serif;
  font-variation-settings: 'wdth' 118, 'wght' 800;
  font-size: 18px; line-height: 1; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--kirec);
  transition: color .18s;
}

@media (max-width: 860px) {
  .menu-etiket { display: none; }
  .menu-dugme { padding: 0 8px; }
  .vinc-govde { height: 46%; width: 150%; }
  .kat-panel { right: 3%; width: min(280px, 46%); }
  .kat-ad { font-size: 16px; }
}
@media (max-width: 620px) {
  .kat-panel { right: 0; left: 0; width: auto; margin: 0 12px; }
  .kat-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kat-liste a { border-right: 1px solid var(--cizgi-koyu); }
  .kat-liste a:nth-child(even) { border-right: 0; }
}
@media (max-width: 620px) {
  .menu-dugme { margin-left: 0; padding: 0 4px; height: 34px; }
  .ustbar-ic { gap: 4px; padding: 0 8px; }
  .ustbar-tel { padding: 0 8px; }
  .vinc-govde { display: none; }        /* dar ekranda kule sığmıyor */
  .hv-hat { display: none; }
  .kat-sapan { display: none; }
}

/* hareket azaltma: vinç durur, içerik doğrudan görünür */
@media (prefers-reduced-motion: reduce) {
  .hero.vinc-var .hb-satir { opacity: 1; }
  .hero.vinc-hazir .hv-hat { animation: none; }
}

/* --- proje modelleme: üstbardan açılan 3B araç --- */
.modelleme-dugme {
  display: flex; align-items: center; gap: 8px; flex: none;
  margin-left: 10px; padding: 0 14px; height: 38px;
  text-decoration: none; white-space: nowrap;
  color: var(--asfalt); background: transparent;
  outline: 1.5px solid var(--asfalt); outline-offset: -1.5px;
  clip-path: var(--kilit-kucuk);
  font-family: 'Martian Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  transition: background-color .18s, color .18s;
}
.modelleme-dugme:hover, .modelleme-dugme:focus-visible {
  background: var(--asfalt); color: var(--kirec);
}
.modelleme-ikon { width: 17px; height: 17px; flex: none; }

@media (max-width: 980px) {
  .modelleme-dugme span { display: none; }
  .modelleme-dugme { padding: 0 10px; gap: 0; }
}
@media (max-width: 620px) {
  .modelleme-dugme { margin-left: 4px; padding: 0 8px; height: 34px; }
  .modelleme-ikon { width: 16px; height: 16px; }
}

/* --- teslimat: kamyon ve uçan kategori kartı --- */
.teslim-kamyon {
  position: absolute; left: 0; bottom: 176px; z-index: 5;
  width: 176px; opacity: 0; pointer-events: none;
  transform: translateX(120vw);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.teslim-kamyon svg { width: 100%; height: auto; display: block; }
.teslim-kamyon.yolda { opacity: 1; }
/* sahneye sağdan girerken araç ters yöne bakar */
.teslim-kamyon.geri svg { transform: scaleX(-1); }
.tk-teker { transform-box: fill-box; transform-origin: 50% 50%; }
.teslim-kamyon.yolda .tk-teker { animation: tkDon 1s linear infinite; }
.teslim-kamyon.duruyor .tk-teker { animation: tkDon 3.2s linear infinite; }
@keyframes tkDon { to { transform: rotate(360deg); } }
.tk-duman circle { fill: rgba(240,239,235,.3); opacity: 0; }
.teslim-kamyon.yolda .tk-duman circle { animation: tkDuman 2.6s ease-out infinite; }
.teslim-kamyon.yolda .tk-duman circle:nth-child(2) { animation-delay: 1.3s; }
@keyframes tkDuman {
  0%   { opacity: 0; transform: translate(0,0) scale(.6); }
  25%  { opacity: .55; }
  100% { opacity: 0; transform: translate(20px,-22px) scale(1.8); }
}

/* kancaya bağlanıp kamyona taşınan kategori kartı */
.ucan-kart {
  position: absolute; z-index: 5; pointer-events: none;
  transform-origin: 50% 100%;   /* kasaya otururken alt kenar sabit kalsın */
  background: var(--asfalt); border: 2px solid var(--hivis);
  padding: 14px 16px 16px; will-change: transform;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
}
.ucan-kart .kat-no { color: var(--freze); }
.ucan-kart .kat-ad { color: var(--hivis); }
/* kasaya yüklenen kart: kamyonun içinde küçük bir sandık gibi durur */
.ucan-kart.kasada {
  padding: 5px 7px; border-width: 1.5px;
  box-shadow: none; z-index: 2;
}
.ucan-kart.kasada .kat-no { font-size: 6.5px; }
.ucan-kart.kasada .kat-ad { font-size: 10px; }
.ucan-kart.kasada { display: flex; align-items: baseline; gap: 5px; }

/* kart alınınca levhada boşluk kalır */
.kat-liste a.tasindi { visibility: hidden; }

/* teslim edilen bölümde kısa vurgu */
.teslim-vurgu { animation: teslimFlas 1.5s ease-out; }
@keyframes teslimFlas {
  0%   { box-shadow: inset 0 0 0 3px var(--hivis); }
  70%  { box-shadow: inset 0 0 0 3px var(--hivis); }
  100% { box-shadow: inset 0 0 0 3px rgba(245,197,24,0); }
}

@media (max-width: 860px) {
  .teslim-kamyon { width: 132px; bottom: 130px; }
}
@media (max-width: 620px) {
  .teslim-kamyon { display: none; }
}

/* --- yapı işleri: kule vinç sahnesi --- */
.vinc-sahne {
  position: relative; margin-top: 26px; overflow: hidden;
  background: var(--kirec-3); border: 1px solid var(--asfalt);
}
/* şantiye zemini tam genişlik */
.vinc-sahne::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px;
  background: var(--kirec-2); border-top: 2px solid var(--asfalt);
}
.vinc-svg { position: relative; z-index: 1; width: 100%; height: 190px; display: block; }
.vinc-kule    { fill: var(--hivis); }
.vinc-kafes   { stroke: var(--asfalt); stroke-width: 1.6; opacity: .55; }
.vinc-halat   { stroke: var(--asfalt); stroke-width: 1.6; transform-origin: 50% 0; }
.vinc-sapan   { stroke: var(--asfalt); stroke-width: 1.4; fill: none; }
.vinc-modul rect { fill: var(--kirec-2); stroke: var(--asfalt); stroke-width: 2; }
.vinc-modul   { transform-origin: 50% -30%; }   /* halattan sarkar gibi döner */
.vinc-iz      { fill: #C9C8C3; opacity: 0; }
.vinc-toz circle { fill: #B7B6B1; opacity: 0; }
.vinc-bom     { transform-origin: 4% 50%; }

/* bekleme: bom ve kanca çok hafif salınır — sahne hiç donmaz */
.vinc-bom   { animation: bomSalin 7s ease-in-out infinite; }
.vinc-kanca { animation: kancaSalin 4.6s ease-in-out infinite; }
.vinc-sahne.calisiyor .vinc-kanca { animation: none; }
@keyframes bomSalin {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(.5deg); }
}
@keyframes kancaSalin {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(1.6deg); }
}

/* --- dar ekranda üstbar tek satırda kalsın --- */
@media (max-width: 860px) {
  .ustbar-ic { gap: 6px; padding: 0 10px; }
  .ustbar-tel { padding: 0 10px; }
}

/* --- hareket azaltma: animasyon yok, panel doğrudan açılır --- */
@media (prefers-reduced-motion: reduce) {
}