/* =========================================================================
   ÖDF Yılmazlar İnşaat — site stili
   Kalıp: bechtel.com anasayfası (bölüm sırası, ölçek, boşluk, kart dili).
   Renk: logo dosyasındaki iki marka rengi (antrasit #2B2B29 · turuncu #F07F19).
   ========================================================================= */

:root {
  --ink: #2B2B29;          /* başlık · marka antrasit */
  --text: #3D4245;         /* gövde metni */
  --muted: #6E7377;
  --line: #E4E6E8;
  --line-strong: #C9CDD1;  /* form kutusu, künye üst çizgisi */
  --dot: #E2E4E6;          /* nokta ızgara */
  --bg: #FFFFFF;
  --bg-soft: #F5F6F7;      /* gri bölüm zemini */
  --dark: #222321;         /* alt bilgi zemini */
  --dark-line: rgba(255, 255, 255, .14);
  --accent: #F07F19;       /* marka turuncusu: çizgi, daire, etiket */
  --accent-text: #B35900;  /* beyaz zeminde turuncu yazı (4,8:1) */
  --accent-soft: #FDE7D3;
  /* Üst bar fotoğraf üstünde TAMAMEN SAYDAM (renk yok, bulanıklık yok, kenarlı şerit yok). Okunurluk fotoğrafın
     tepesinde yukarıdan aşağı sönen AÇIK geçişten gelir (pin #17 "tam tersine rengini aç"); asıl renkli logo +
     antrasit menü. Reddedilenler: düz beyaz bar, buzlu beyaz %52/%32/%14, tepede koyu geçiş (pin #16→#17),
     %58 açıklık + bulanıklık ("hâlâ çok bulanık", pin #21), menü yazısına beyaz hale ("parlama", 06.11).
     Geçiş: en üstte %66 (yazı şeridi), 58 px'te %50, 110 px'te %20, 170 px'te %5, 230 px'te 0 — yazının arkası sakin, aşağısı fotoğraf. */
  --foto-ust: rgba(255, 255, 255, .66);
  --ust-zemin-dolu: rgba(255, 255, 255, .86);
  --izgara: #FBE7D5;       /* fareyi izleyen ızgara çizgisi: çok soluk şeftali (#F6D2AE "fazla koyu" bulundu) */

  --font-title: 'Hanken Grotesk', system-ui, sans-serif;
  --font: 'Inter', system-ui, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, Menlo, monospace;

  --gutter: clamp(20px, 7vw, 100px);
  --h1: clamp(52px, 8.4vw, 120px);
  --h2: clamp(34px, 4.2vw, 60px);
  --body: clamp(17px, 1.4vw, 20px);
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 350 var(--body)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--ink); margin: 0; letter-spacing: -.01em; }
h2 { font-size: var(--h2); font-weight: 400; line-height: 1.15; }
p { margin: 0 0 1.2em; }
svg { width: 20px; height: 20px; }

.atla { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #fff; color: var(--ink); padding: 8px 14px; }
.atla:focus { left: 8px; }

/* Sağ kenarda kaydırma göstergesi */
.ilerleme { position: fixed; top: 0; right: 0; bottom: 0; width: 4px; z-index: 95; pointer-events: none; }
.ilerleme span { position: absolute; right: 0; width: 4px; height: 56px; background: var(--accent); top: 0; transition: top .1s linear; }

/* Etiket: küçük, yer bildiren, eşaralıklı */
.etiket {
  display: block; font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}

/* -------------------------------------------------------------------------
   Bağlantı (.ok-bag) — SİTENİN TEK BAĞLANTI DİLİ (pin #22 girişte seçildi, #28/#30 ile her yere yayıldı):
   yalnız metin + altında ince çizgi; üzerine gelince (pin #25) turuncu çizgi soldan sağa akar, fare çekilince
   sağa toplanır. Kutu, kapsül, ok, dolgu YOK.
   Reddedilenler (05.11): dolu turuncu daireli ok (#6/#11), ok + turuncu çizgi (#15), dolu beyaz düğme (#18),
   cam kapsül (#22), ince çerçeveli hap (#28/#30). HTML'deki ok (.ok-bag__daire) gizli; yalnız .imza ve kart oklarında görünür.
   ------------------------------------------------------------------------- */
/* Pin #32 "tasarımcı gözüyle en iyi model": ferrovial.com giriş bağlantısı ölçülerek alındı (13 px, BÜYÜK HARF,
   2 px harf aralığı, 600, altta 6 px). Küçük-büyük karışık 16–20 px hali "düz internet bağlantısı" gibi duruyordu. */
.ok-bag {
  position: relative; display: inline-flex; align-items: center;
  padding: 0 0 9px; font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(color-mix(in srgb, currentColor 35%, transparent), color-mix(in srgb, currentColor 35%, transparent)) 0 100% / 100% 1px no-repeat;
}
.ok-bag::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
}
.ok-bag:hover::before { transform: scaleX(1); transform-origin: left center; }
.ok-bag--beyaz { color: #fff; }
.ok-bag .ok-bag__daire { display: none; }
.ok-bag__daire { flex: none; display: grid; place-items: center; transition: transform .35s cubic-bezier(.2, .65, .25, 1); }
.imza .ok-bag__daire { order: 2; }
.imza:hover .ok-bag__daire { transform: translateX(5px); }
.ok-bag__daire--buyuk svg { width: 22px; height: 22px; }

/* -------------------------------------------------------------------------
   Üst bar
   ------------------------------------------------------------------------- */
/* Üst bar: fotoğraf üstünde tamamen saydam, antrasit menü yazısı, logo kendi renginde.
   Aşağı kaydırınca gizlenir; fotoğraf geçilince (.ust--dolu) açık cam bar. */
.ust {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; align-items: center; gap: 48px;
  padding: 16px var(--gutter);
  color: var(--ink);
  background: transparent;
  transition: transform .45s ease, padding .3s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
/* Fotoğraf üstünde bulanıklık YOK (pin #21 "hâlâ çok bulanık"; 6 px sönen bulanıklık da reddedildi).
   Menü yazısı KALIN (DM Mono 500, pin #26). Yazı çevresindeki beyaz hale (text-shadow) "parlama" bulundu, KALDIRILDI
   (06.11); okunurluk artık yalnız fotoğraf tepesindeki açık geçişten (--foto-ust, aşağıda): en üst ~70 px yazının
   arkası daha açık, sonra hızla söner. Harfe yapışık ışık/hale/gölge KOYMA. */
.ust--dolu {
  padding-block: 12px; background: var(--ust-zemin-dolu); color: var(--ink); box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
.ust__logo { margin-right: auto; display: block; }
.ust__logo img { height: 50px; width: auto; transition: height .3s ease; }
.ust--dolu .ust__logo img { height: 44px; }
.ust__nav { display: flex; gap: 56px; }
.ust__nav a {
  font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
  padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.ust__nav a:hover { border-bottom-color: currentColor; }
/* Menü düğmesi (pin #8): gri yuvarlak kalktı; üst menü yazılarıyla aynı dilde "MENÜ" + iki çizgi.
   Üzerine gelince kısa alt çizgi tam boya uzar. */
.ust__menu {
  display: inline-flex; align-items: center; gap: 14px; height: 44px;
  font-family: var(--font-mono); font-weight: 500; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
}
.ust__menu-cizgi { display: grid; gap: 7px; width: 26px; }
.ust__menu-cizgi i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: width .3s ease, background-color .3s ease; }
.ust__menu-cizgi i:last-child { width: 16px; justify-self: end; }
.ust__menu:hover .ust__menu-cizgi i { background: var(--accent); }
.ust__menu:hover .ust__menu-cizgi i:last-child { width: 26px; }

/* Tam ekran menü */
.menu {
  position: fixed; inset: 0; z-index: 150; background: var(--dark); color: #fff;
  display: flex; flex-direction: column; padding: 24px var(--gutter) 40px;
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__ust { display: flex; justify-content: space-between; align-items: center; }
.menu__ust img { height: 54px; width: auto; }
.menu__kapat { width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.menu__liste { display: flex; flex-direction: column; margin: auto 0; padding: 48px 0; }
.menu__liste a {
  font-family: var(--font-title); font-size: clamp(36px, 5vw, 64px); line-height: 1.25;
  font-weight: 400; color: #fff; border-bottom: 1px solid var(--dark-line); padding: 8px 0;
}
.menu__liste a:hover { color: var(--accent); }
.menu__alt { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: 16px; color: rgba(255, 255, 255, .75); }

/* -------------------------------------------------------------------------
   1 · Kahraman
   ------------------------------------------------------------------------- */
.kahraman {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; color: #fff; overflow: hidden; background: #1B1B1A;
}
.kahraman__medya { position: absolute; inset: 0; }
.kahraman__medya img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.8s ease; transform: scale(1.06);
}
.kahraman__medya img.aktif { opacity: 1; animation: yavas-yaklas 14s linear forwards; }
@keyframes yavas-yaklas { from { transform: scale(1.06); } to { transform: scale(1); } }
.kahraman__medya::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(18, 18, 17, .72) 0%, rgba(18, 18, 17, .42) 55%, rgba(18, 18, 17, .28) 100%),
    linear-gradient(0deg, rgba(18, 18, 17, .45) 0%, rgba(18, 18, 17, 0) 40%);
  /* başlık için karartma tepede zayıflar: üst barın altı koyu kalmasın */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 80px, #000 260px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .2) 80px, #000 260px);
}
/* Tepede yukarıdan aşağı sönen açıklık (pin #17): renkli logo ve antrasit menü okunur, kenarlı şerit yok */
.kahraman__medya::before, .sayfa-basi::before {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 230px; pointer-events: none;
  background: linear-gradient(180deg, var(--foto-ust) 0, rgba(255, 255, 255, .5) 58px, rgba(255, 255, 255, .2) 110px, rgba(255, 255, 255, .05) 170px, rgba(255, 255, 255, 0) 100%);
}
.kahraman__ic {
  position: relative; z-index: 2; width: 100%;
  padding: 150px var(--gutter) 96px;
}
.kahraman h1 {
  color: #fff; font-size: var(--h1); font-weight: 500; line-height: 1; letter-spacing: -.015em;
  max-width: 8em; margin-bottom: 40px;
}
.kahraman p { max-width: 37em; color: rgba(255, 255, 255, .92); margin-bottom: 44px; }
/* Girişin ana bağlantısı: ortak .ok-bag dili, bir kademe büyük, beyaz çizgi daha belirgin */
.kahraman .ok-bag {
  background-image: linear-gradient(rgba(255, 255, 255, .38), rgba(255, 255, 255, .38));
  font-size: 14px; letter-spacing: .16em; padding-bottom: 10px;
}
/* Pin #92 "altındaki çizgide sürekli bir aksiyon olsun": alt çizginin üstünden kısa, uçları sönen beyaz bir parça
   sürekli soldan sağa akar (aşağı kaydırma işaretindeki akışın yatay hali). Üzerine gelince akış söner, turuncu çizgi
   dolar. Hareket azaltma tercihinde akış durur (genel kural). */
.kahraman .ok-bag { overflow: hidden; } /* alt çizgi %38 (önce %70): akan beyaz parça seçilsin diye, kaydırma işaretiyle aynı oran */
.kahraman .ok-bag::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 36%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0));
  animation: bag-ak 6s cubic-bezier(.45, 0, .55, 1) infinite; /* #95 "daha yavaş": 2,8 sn → 6 sn, daha yumuşak eğri */
  transition: opacity .3s ease;
}
.kahraman .ok-bag:hover::after { opacity: 0; }
@keyframes bag-ak { 0% { transform: translateX(-110%); } 80%, 100% { transform: translateX(290%); } }
/* Giriş fotoğraf gezgini (pin #85 → #90 → #91): sağ altta açıklama (il etiketi + proje adı, bağlantı) ve altında
   eşit ince çizgiler; etkin karenin çizgisi süre boyunca dolar, tıklanınca o kareye geçer. OK YOK (#91 "hem ok hem
   çizgi olmaz"). Blok SABİT genişlik ve açıklama alanı iki satırlık sabit yükseklik: kare değişince hiçbir şey
   yerinden oynamaz, yalnız yazı solup gelir (#91 "her foto değişince oynuyor"). Ortadaki kaydırma çizgisinden uzak. */
.kahraman__gezgin {
  position: absolute; z-index: 2; right: var(--gutter); bottom: 68px; width: min(320px, 30vw);
  --kare-sure: 8s;
}
.kahraman__aciklama { margin: 0 0 16px; display: grid; gap: 6px; height: 76px; align-content: end; transition: opacity .3s ease; }
.kahraman__aciklama.degisiyor { opacity: 0; }
.kahraman__aciklama .etiket { color: var(--accent); }
.kahraman__aciklama a, .kahraman__aciklama > span:not(.etiket) {
  font-family: var(--font-title); font-weight: 500; font-size: 19px; line-height: 1.25; color: #fff;
}
.kahraman__aciklama a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s ease; padding-bottom: 2px; justify-self: start; }
.kahraman__aciklama a:hover { background-size: 100% 1px; }
.kahraman__kontrol { display: block; }
.kahraman__noktalar { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.kahraman__noktalar li { flex: 1; }
.kahraman__noktalar button { display: block; width: 100%; padding: 12px 0; }
.kahraman__noktalar i { position: relative; display: block; height: 2px; background: rgba(255, 255, 255, .35); overflow: hidden; transition: background-color .25s ease; }
.kahraman__noktalar button:hover i { background: rgba(255, 255, 255, .6); }
.kahraman__noktalar i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.kahraman__noktalar button[aria-current="true"] i::after { transform: scaleX(1); }
.kahraman__noktalar button.akiyor i::after { transform: scaleX(0); animation: kare-dol var(--kare-sure) linear forwards; }
@keyframes kare-dol { to { transform: scaleX(1); } }
/* (Kaydırma işareti #33/#41 pin #94 ile kaldırıldı.) */

/* -------------------------------------------------------------------------
   2 · Giriş: solda metin, sağda kenara taşan fotoğraf + nokta ızgara
   ------------------------------------------------------------------------- */
.giris {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px);
  align-items: center; padding: 96px 0 96px var(--gutter);
}
/* Sağ yarıdaki desen (önce nokta ızgara, sonra dökülen turuncu üçgenler) kullanıcı kararıyla KALDIRILDI
   (pin #14, 05.11). Alan boş beyaz; fare ızgarası burada da görünür. Yeniden desen koyma. */
.giris h2 { margin-bottom: 40px; }
.giris .ok-bag { margin-top: 12px; }
.giris__gorsel { margin: 0; overflow: hidden; border-radius: var(--radius) 0 0 var(--radius); }
.giris__gorsel img { width: 100%; height: clamp(360px, 47vw, 680px); object-fit: cover; }

/* -------------------------------------------------------------------------
   3 · 5 · Tam kaplama kapak: başlık solda, metin sağda, en altta
   ------------------------------------------------------------------------- */
.kapak {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: #1B1B1A;
}
.kapak__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* İnsan kapağı (stok, silindir): dar ekranda kadraj silindire kayar, masaüstünde fark yok. */
.kapak__gorsel--silindir { object-position: 58% 50%; }
.kapak::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 17, .18) 0%, rgba(18, 18, 17, .35) 45%, rgba(18, 18, 17, .78) 100%);
}
.kapak__ic {
  position: relative; z-index: 1; width: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: end;
  padding: 0 var(--gutter) clamp(56px, 8vw, 96px);
}
.kapak h2 { color: #fff; margin-bottom: 32px; max-width: 10em; }
.kapak p { color: rgba(255, 255, 255, .9); max-width: 34em; margin: 0; font-size: clamp(16px, 1.25vw, 18px); }

.imza { display: inline-flex; align-items: center; gap: 18px; color: #fff; }
.imza strong { display: block; font-weight: 600; font-size: 18px; }
.imza small { display: block; font-size: 14px; color: rgba(255, 255, 255, .75); }

/* -------------------------------------------------------------------------
   4 · Sahadayız (pin #84 "kurumsal bir yapıya getirelim"): bechtel.com "Creating a Lasting Legacy" düzeni
   ------------------------------------------------------------------------- */
/* Beyaz zemin. Solda metin (1–5), sağda (7–12) dikey il listesi + seçilen ilin proje kartı. Seçili il: soldaki ince
   çizgi turuncu (Bechtel'deki kırmızı hap yerine; kapsül #22'de reddedildi). Kartın tepesinde 5 sn'lik ince turuncu
   süre çizgisi. Geçmiş: #76 gri / fotoğraflı zemin, #81 büyük halka, #83 turuncu zemin + canlı halkalar → #84 "çok uzak". */
.sahada { padding: clamp(80px, 9vw, 136px) var(--gutter); align-items: center; }
.sahada__metin h2 { font-size: clamp(34px, 3.6vw, 52px); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; margin-bottom: 28px; }
.sahada__metin p { font-size: clamp(16px, 1.25vw, 18px); max-width: 32em; }
.sahada__metin .ok-bag { margin-top: 12px; }
.sahada__sag { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; align-items: center; }
.sahada__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sahada__liste button {
  width: 100%; text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); padding: 12px 0 12px 18px; border-left: 2px solid var(--line);
  transition: color .25s ease, border-color .25s ease;
}
.sahada__liste button:hover { color: var(--ink); }
.sahada__liste button[aria-pressed="true"] { color: var(--ink); border-left-color: var(--accent); }
.sahada__kart {
  position: relative; display: block; height: clamp(440px, 36vw, 560px); border-radius: var(--radius); overflow: hidden;
  background: #1B1B1A; color: #fff; isolation: isolate;
}
.sahada__kart img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease, transform 1.6s cubic-bezier(.2, .65, .25, 1); }
.sahada__kart img.gorunur { opacity: 1; }
.sahada__kart:hover img.gorunur { transform: scale(1.03); }
.sahada__kart::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 18, 17, .04) 40%, rgba(18, 18, 17, .8) 100%); }
.sahada__ic { position: absolute; left: 32px; right: 84px; bottom: 30px; transition: opacity .35s ease, transform .35s ease; }
.sahada__ic.degisiyor { opacity: 0; transform: translateY(8px); }
.sahada__ic .etiket { display: block; color: var(--accent); margin-bottom: 10px; }
.sahada__ic strong { display: block; font-family: var(--font-title); font-weight: 500; font-size: clamp(24px, 2.1vw, 32px); line-height: 1.14; }
.sahada__kart .pkart__ok { position: absolute; right: 28px; bottom: 30px; }
.sahada__sure { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--accent); }
.sahada__sure.akiyor { width: 100%; transition: width 5s linear; }

/* -------------------------------------------------------------------------
   6 · İki sütun + öne çıkan projeler
   ------------------------------------------------------------------------- */
.iki-sutun {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px);
  padding: clamp(72px, 9vw, 128px) var(--gutter) 0;
}
.iki-sutun h2 { margin-bottom: 32px; }
.iki-sutun p { font-size: clamp(16px, 1.25vw, 18px); max-width: 34em; }

.pkart {
  position: relative; flex: 0 0 clamp(280px, 34.7vw, 500px); height: clamp(420px, 46vw, 664px);
  border-radius: var(--radius); overflow: hidden; color: #fff; scroll-snap-align: start; background: #1B1B1A;
}
.pkart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pkart::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 18, 17, .25) 0%, rgba(18, 18, 17, .35) 50%, rgba(18, 18, 17, .82) 100%);
}
.pkart__ic { position: absolute; z-index: 1; left: 28px; right: 84px; bottom: 28px; }
.pkart strong { display: block; font-family: var(--font-title); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; margin-top: 6px; }
.pkart__aciklama {
  display: block; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88);
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s ease, opacity .5s ease, margin .5s ease;
}
.pkart:hover .pkart__aciklama, .pkart:focus-visible .pkart__aciklama { max-height: 120px; opacity: 1; margin-top: 12px; }
@media (hover: none) { .pkart__aciklama { max-height: none; opacity: 1; margin-top: 12px; } }
/* Kart oku: dairesiz beyaz ok; üzerine gelince çapraz yukarı kayar */
.pkart__ok { position: absolute; z-index: 1; right: 24px; bottom: 28px; }
.pkart__ok svg { width: 26px; height: 26px; }
/* Kart oku (pin #86): çapraz ok yerine YAN ok; üzerine gelince sağa kayar */
.pkart:hover .pkart__ok, .sahada__kart:hover .pkart__ok { transform: translateX(6px); }

/* -------------------------------------------------------------------------
   7 · Öne çıkan projeler — pin #53: bechtel.com/projects düzeni. Solda kayarken yerinde duran büyük kart
   (fotoğraf + "30'u Aşkın Proje" + Tüm Projeler), sağda küçük etiket ve alt alta geniş proje kartları (.pkart:
   konum etiketi + ad + ok). Seçim efekti yok. Beyaz zemin: fare ızgarası arkasından geçmez (pin #20).
   ------------------------------------------------------------------------- */
.onecikan { padding: clamp(72px, 9vw, 128px) var(--gutter) 0; background: var(--bg); }
.onecikan h2 { margin-bottom: 40px; }
.onecikan__izgara { align-items: start; }
.onecikan__vitrin {
  position: sticky; top: 104px; display: flex; flex-direction: column; justify-content: flex-end;
  height: min(640px, calc(100vh - 140px)); min-height: 420px; padding: 36px; border-radius: var(--radius);
  overflow: hidden; isolation: isolate; color: #fff; background: #1B1B1A;
}
.onecikan__vitrin img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2, .65, .25, 1); }
.onecikan__vitrin::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 18, 17, .05) 35%, rgba(18, 18, 17, .78) 100%); }
.onecikan .onecikan__vitrin:hover img { transform: scale(1.04); }
.onecikan__vitrin-ic { display: grid; gap: 14px; justify-items: start; }
.onecikan__vitrin-ic strong { font-family: var(--font-title); font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; }
.onecikan__vitrin-ic > span:not(.ok-bag) { font-size: 16px; color: rgba(255, 255, 255, .9); max-width: 26em; margin-bottom: 8px; }
.onecikan__vitrin:hover .ok-bag::before { transform: scaleX(1); transform-origin: left center; }
.onecikan__kartlar { display: grid; gap: var(--kolon-bosluk, 24px); align-content: start; }
.onecikan__etiket { color: var(--muted); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.onecikan__kart { flex: none; height: clamp(260px, 22vw, 330px); }
.onecikan .onecikan__kart img { transition: transform 1.4s cubic-bezier(.2, .65, .25, 1); }
.onecikan .onecikan__kart:hover img { transform: scale(1.05); }
/* Fotoğrafı olmayan proje kartı: koyu zemin, aynı yazı düzeni */
.pkart--yazi { background: var(--ink); }
.pkart--yazi::after { display: none; }

/* Ne Yapıyoruz (pin #60): yapışkan alan sekmeleri + her alan için .onecikan bloğu (bechtel.com/projects "pazar" düzeni).
   Sekme: üst menüyle aynı dil (DM Mono, büyük harf); bulunulan alan antrasit + turuncu alt çizgi, diğerleri soluk. */
.alan-sekme {
  position: sticky; top: 68px; z-index: 40; display: flex; gap: 40px; flex-wrap: wrap;
  padding: 18px var(--gutter); background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.alan-sekme a {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); padding: 6px 0; border-bottom: 2px solid transparent; transition: color .25s ease, border-color .25s ease;
}
.alan-sekme a:hover { color: var(--ink); }
.alan-sekme a.aktif { color: var(--ink); border-bottom-color: var(--accent); }
.alan-blok { padding-top: clamp(56px, 7vw, 96px); scroll-margin-top: 130px; }
.alan-blok:last-of-type { padding-bottom: clamp(72px, 9vw, 128px); }
.alan-blok .onecikan__vitrin { top: 140px; height: min(600px, calc(100vh - 180px)); }
.alan-blok .onecikan__vitrin-ic .etiket { color: var(--accent); }
.alan-blok__liste { display: grid; gap: var(--kolon-bosluk, 24px); }
@media (max-width: 1080px) {
  .alan-sekme { top: 68px; gap: 8px 24px; padding-block: 14px; }
}
@media (max-width: 640px) {
  .alan-sekme { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 22px; }
  .alan-sekme a { white-space: nowrap; }
}

/* -------------------------------------------------------------------------
   8 · Dört iş alanı (pin #12, seçenek 12-A): tarihçenin yerine. Tarihçe Kurumsal sayfasında;
   basın için ayrı sayfa olduğundan anasayfaya haber şeridi konmadı (kullanıcı kararı 05.11).
   ------------------------------------------------------------------------- */
.alanlar { padding: clamp(80px, 10vw, 140px) var(--gutter) clamp(80px, 9vw, 128px); }
.alanlar h2 { margin-bottom: 40px; max-width: 12em; }
.alanlar__izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
/* Fotoğraf kartı (pin #43; #38'deki çerçeveli + yükselen + gölgeli kart "estetik değil" bulundu, kaldırıldı).
   Projeler sayfasındaki proje kartıyla (.pkart) aynı dil: fotoğraf kartın tamamı, yazı altta fotoğrafın üstünde.
   Üzerine gelince: fotoğraf yavaşça yakınlaşır, alt karartma koyulaşır, kısa açıklama yumuşakça açılır, çizgi akar.
   Kart yerinden OYNAMAZ (yükselme/gölge yok). Dokunmatikte açıklama baştan açık. */
.alanlar__alan {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 4; padding: 28px; border-radius: var(--radius); overflow: hidden; isolation: isolate;
  color: #fff; background: #1B1B1A;
}
.alanlar__alan figure { position: absolute; inset: 0; z-index: -2; margin: 0; }
.alanlar__alan img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s cubic-bezier(.2, .65, .25, 1); }
.alanlar__alan::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18, 18, 17, .05) 30%, rgba(18, 18, 17, .78) 100%);
  transition: opacity .5s ease;
}
.alanlar__alan::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: linear-gradient(180deg, rgba(18, 18, 17, .15) 0%, rgba(18, 18, 17, .88) 100%);
  transition: opacity .5s ease;
}
.alanlar .alanlar__alan:hover img, .alanlar .alanlar__alan:focus-visible img { transform: scale(1.06); }   /* .alanlar öneki: beliriş kuralı (.hareket .gorunur img) yakınlaşmayı ezmesin */
.alanlar__alan:hover::before, .alanlar__alan:focus-visible::before { opacity: 1; }
.alanlar__alan h3 { color: #fff; font-size: clamp(21px, 1.8vw, 26px); font-weight: 500; margin: 0 0 14px; }
.alanlar__alan p {
  font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .88); margin: 0;
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .45s ease, margin .55s ease;
}
.alanlar__alan:hover p, .alanlar__alan:focus-visible p { max-height: 8em; opacity: 1; margin-bottom: 18px; }
@media (hover: none) { .alanlar__alan p { max-height: none; opacity: 1; margin-bottom: 16px; } }
.alanlar__alan .ok-bag { color: #fff; font-size: 12px; align-self: flex-start; background-image: linear-gradient(rgba(255, 255, 255, .6), rgba(255, 255, 255, .6)); }
.alanlar__alan:hover .ok-bag::before, .alanlar__alan:focus-visible .ok-bag::before { transform: scaleX(1); transform-origin: left center; }

/* -------------------------------------------------------------------------
   Alt bilgi
   ------------------------------------------------------------------------- */
/* Açık gri zemin: asıl (renkli) logo koyu zeminde okunmadığı için (pin #5).
   Pin #44: bağlantı sütunları + alt kısım TEK PARÇA ve 12 kolonluk ızgarada — solda (1–5) logo, iletişim, adresler;
   sağda (7–12) dört bağlantı sütunu; en altta ince çizgiyle telif ve yasal bağlantılar. Sütun başlıkları üst menüyle
   aynı dilde (DM Mono, büyük harf, geniş aralık). */
.alt { background: var(--bg-soft); color: var(--muted); border-top: 1px solid var(--line); padding: clamp(64px, 7vw, 96px) var(--gutter) 28px; font-size: 14px; line-height: 1.5; }
.alt__ust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--kolon-bosluk, 24px); padding-bottom: clamp(56px, 6vw, 80px); }
.alt__kunye { grid-column: 1 / span 5; display: grid; gap: 28px; align-content: start; justify-items: start; }
.alt__kunye img { height: 76px; width: auto; }
.alt__iletisim a { display: block; font-family: var(--font-title); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; color: var(--ink); transition: color .2s ease; }
.alt__iletisim a:hover { color: var(--accent-text); }
.alt__adresler { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.alt address { font-style: normal; font-size: 14px; }
.alt address strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.alt__baglantilar { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--kolon-bosluk, 24px); align-content: start; }
.alt h4 { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink); margin-bottom: 22px; }
.alt__baglantilar a { display: block; font-size: 15px; color: var(--text); margin-bottom: 12px; transition: color .2s ease; }
.alt__baglantilar a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.alt__alt { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-strong); font-size: 13px; }
.alt__alt nav { display: flex; gap: 28px; flex-wrap: wrap; }
.alt__alt a { transition: color .2s ease; }
.alt__alt a:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   Tablet
   ------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ust__nav { display: none; }
  .kahraman__ic { padding-bottom: 72px; }
  .giris { grid-template-columns: 1fr; padding-right: 0; }
  .giris__metin { padding-right: var(--gutter); }
  .kapak__ic { grid-template-columns: 1fr; gap: 24px; }
  .kapak h2 { margin-bottom: 24px; }
  .kapak__ic > div { order: 0; }
  .iki-sutun { grid-template-columns: 1fr; gap: 8px; }
  .onecikan__vitrin { position: relative; top: auto; height: 380px; min-height: 0; margin-bottom: var(--kolon-bosluk, 24px); }
  .alanlar__izgara { grid-template-columns: 1fr 1fr; }
  .alt__kunye, .alt__baglantilar { grid-column: 1 / -1; }
  .alt__baglantilar { margin-top: 48px; }
}

/* -------------------------------------------------------------------------
   Telefon
   ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .ust { padding-block: 14px; }
  .ust__logo img { height: 44px; }
  .kahraman__ic { padding-top: 120px; }
  .kahraman__medya::after { background: linear-gradient(180deg, rgba(18, 18, 17, .5) 0%, rgba(18, 18, 17, .5) 45%, rgba(18, 18, 17, .72) 100%); }
  .kahraman h1 { margin-bottom: 28px; }
  .kahraman p { margin-bottom: 32px; }
  /* Telefonda gezgin tam genişlik; ortadaki kaydırma işareti ona değmesin diye gizlenir (dokunmatikte zaten kaydırılır) */
  .kahraman__gezgin { left: var(--gutter); right: var(--gutter); width: auto; max-width: none; bottom: 26px; }
  .kahraman__aciklama { margin-bottom: 10px; height: 66px; }
  .kahraman__aciklama a, .kahraman__aciklama > span:not(.etiket) { font-size: 17px; }
  .giris { padding-block: 72px; }
  .giris h2 { margin-bottom: 28px; }
  .giris__gorsel img { height: 300px; }
  .kapak { min-height: 92svh; }
  .sahada__sag { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sahada__liste { display: flex; gap: 22px; overflow-x: auto; }
  .sahada__liste button { border-left: 0; border-bottom: 2px solid var(--line); padding: 10px 0; white-space: nowrap; }
  .sahada__liste button[aria-pressed="true"] { border-bottom-color: var(--accent); }
  .sahada__kart { height: 380px; }
  .pkart { height: 460px; }
  .pkart__ic { left: 22px; right: 74px; bottom: 22px; }
  .pkart__ok { right: 18px; bottom: 22px; }
  .onecikan__vitrin { height: 300px; padding: 22px; }
  .onecikan__kart { height: 240px; }
  .alanlar__izgara { gap: 12px; }
  .alanlar__alan { padding: 16px; aspect-ratio: 3 / 4.4; }
  .alanlar__alan h3 { font-size: 18px; margin-bottom: 10px; }
  .alanlar__alan p { font-size: 13px; }
  .alt__baglantilar { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .alt__adresler { grid-template-columns: 1fr; gap: 16px; }
  .alt__alt { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Bölüm geçişleri (pin #4): öğe ekrana girerken yükselip belirir, çıkarken
   gittiği yöne doğru söner. Sınıfları js/site.js verir; JS yoksa hiçbiri gizlenmez.
   ------------------------------------------------------------------------- */
.hareket .belir {
  opacity: 0; transform: translate3d(0, 36px, 0);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2, .65, .25, 1);
}
.hareket .belir.belir--ustte { transform: translate3d(0, -28px, 0); }
.hareket .belir.gorunur {
  opacity: 1; transform: none;
  transition-duration: 1s, 1.2s;
  transition-delay: var(--gecikme, 0s);
}
/* Fotoğraflar belirirken hafifçe yerine oturur */
.hareket .giris__gorsel img, .hareket .kart-izgara .pkart img,
.hareket .kapak__gorsel, .hareket .sayfa-basi__gorsel {
  transform: scale(1.08); transition: transform 2.2s cubic-bezier(.2, .65, .25, 1);
}
.hareket .gorunur img, .hareket .gorunur > .kapak__gorsel, .hareket .gorunur > .sayfa-basi__gorsel { transform: none; }

/* -------------------------------------------------------------------------
   Fareyi izleyen ızgara (atlassian.com'daki gibi): sayfanın arkasında tek katman,
   yalnız imlecin çevresinde görünür. Dolu zeminli bölümler (fotoğraf, gri bant,
   beyaz kutu, alt bilgi) onu örter; böylece yalnız boş beyaz alanlarda çıkar.
   ------------------------------------------------------------------------- */
body { position: relative; }
.isik-izgara {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Yalnız çizgi: imleç altındaki turuncu ışık (fon) kullanıcı isteğiyle kaldırıldı (05.11), geri koyma */
  background-image:
    linear-gradient(var(--izgara) 1px, transparent 1px),
    linear-gradient(90deg, var(--izgara) 1px, transparent 1px);
  background-size: 40px 40px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(circle 340px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
  mask-image: radial-gradient(circle 340px at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, .5) 45%, transparent 100%);
  opacity: 0; transition: opacity .5s ease;
}
.isik-izgara.acik { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .kahraman__medya img { transform: none; }
}

/* =========================================================================
   ALT SAYFALAR
   ========================================================================= */

/* Sayfa başı: fotoğraflı (varsayılan) ve sade (fotoğrafsız) */
.sayfa-basi {
  position: relative; min-height: clamp(440px, 68vh, 700px); display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; background: #1B1B1A;
}
.sayfa-basi__gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sayfa-basi__gorsel[hidden] { display: none; }
.sayfa-basi::after {
  content: ""; position: absolute; inset: 0;
  /* Tepedeki açıklık ::before'da (anasayfa girişiyle aynı); burada yalnız alttaki başlık karartması */
  background: linear-gradient(0deg, rgba(18, 18, 17, .8) 0%, rgba(18, 18, 17, .35) 50%, rgba(18, 18, 17, .05) 100%);
}
.sayfa-basi__ic { position: relative; z-index: 1; width: 100%; padding: 160px var(--gutter) clamp(48px, 6vw, 88px); }
.sayfa-basi .etiket { color: var(--accent); margin-bottom: 18px; }
.sayfa-basi h1 {
  color: #fff; font-size: clamp(42px, 6.2vw, 92px); font-weight: 500; line-height: 1.03;
  letter-spacing: -.015em; max-width: 13em; margin: 0 0 22px;
}
.sayfa-basi p { margin: 0; max-width: 38em; color: rgba(255, 255, 255, .9); }
/* İnce sayfa başı (pin #65 Basın: "bu kadar uzun olmasına gerek yok"): yükseklik yarıya yakın, fotoğraf geniş bant */
.sayfa-basi--ince { min-height: clamp(340px, 46vh, 460px); }
.sayfa-basi--ince .sayfa-basi__ic { padding-top: 132px; padding-bottom: clamp(36px, 4vw, 56px); }
.sayfa-basi--ince h1 { margin-bottom: 14px; }
.sayfa-basi--sade { min-height: 0; background: var(--bg-soft); color: var(--ink); }
.sayfa-basi--sade::before, .sayfa-basi--sade::after, .sayfa-basi--sade .sayfa-basi__gorsel { display: none; }
.sayfa-basi--sade .sayfa-basi__ic { padding-top: 168px; }
.sayfa-basi--sade h1 { color: var(--ink); font-size: clamp(38px, 4.8vw, 68px); }
.sayfa-basi--sade p { color: var(--text); }
.sayfa-basi--sade .etiket { color: var(--accent-text); }

/* Bölüm iskeleti */
.bolum { padding: clamp(72px, 9vw, 128px) var(--gutter); }
.bolum--gri { background: var(--bg-soft); }
.bolum--ayrac { border-top: 1px solid var(--line); }
.bolum__baslik { margin-bottom: clamp(32px, 4vw, 56px); max-width: 16em; }
.duzen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.duzen > :first-child h2 { position: sticky; top: 120px; }
.metin p, .metin li { font-size: clamp(16px, 1.25vw, 18px); max-width: 40em; }
.metin p:last-child { margin-bottom: 0; }
.metin .ok-bag { margin-top: 12px; }

/* Kurumsal · Vizyon ve Değerler (pin #23/#24, K-A; bechtel.com vizyon-değerler-taahhütler düzeni):
   tek büyük vizyon cümlesi · beş değer, her birinde iki taahhüt · kısa kalite paragrafı. */
.vizyon-ust { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: end; padding-bottom: clamp(40px, 5vw, 56px); }
.vizyon-ust .etiket { color: var(--accent-text); margin-bottom: 14px; }
.vizyon-ust h2 { font-size: clamp(36px, 4.4vw, 60px); font-weight: 500; line-height: 1.05; }
.vizyon-ust p { font-size: clamp(16px, 1.25vw, 18px); max-width: 34em; margin: 0; }
.degerler-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.degerler-liste > li {
  display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 7fr); gap: 24px; align-items: baseline;
  padding: 32px 0; border-bottom: 1px solid var(--line-strong);
}
.degerler-liste__no { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.degerler-liste h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.01em; }
.degerler-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.degerler-liste ul li { position: relative; padding-left: 20px; font-size: clamp(16px, 1.25vw, 17px); }
.degerler-liste ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 1.5px; background: var(--accent); }
.kalite-ozet { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); padding-top: clamp(40px, 5vw, 56px); scroll-margin-top: 120px; }
.kalite-ozet h3 { font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; }
.kalite-ozet p { font-size: clamp(16px, 1.25vw, 18px); max-width: 40em; margin: 0; }

/* Başkan mesajı imzası */
.imza-blok { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 16px; }
.imza-blok strong { display: block; color: var(--ink); font-weight: 600; }
.imza-blok span { color: var(--muted); }

/* Kurumsal tarihçe listesi */
.zaman { list-style: none; margin: 0; padding: 0; }
.zaman li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--line); }
.zaman li:last-child { border-bottom: 1px solid var(--line); }
.zaman__yil { font-family: var(--font-title); font-size: clamp(28px, 2.4vw, 36px); line-height: 1; color: var(--ink); }
.zaman h3 { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; margin-bottom: 8px; }
.zaman p { margin: 0; font-size: 16px; max-width: 46em; }

/* Kurumsal tarihçe akışı (pin #56; js/site.js "Kurumsal tarihçe akışı" bloğu bu yapıyı kurar, JS yoksa .zaman listesi kalır).
   12 kolon: solda (1–5) büyük yıl sabit durur ve kaydırdıkça değirmen çarkı gibi dönerek değişir; sağda (7–12) yıllar
   ve o yıl başlayan projeler. Kolon aralığının ortasında ince çizgi okunan yere kadar turuncuyla dolar. */
.akis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--kolon-bosluk, 24px); }
.akis__sol { grid-column: 1 / span 5; }
.akis__yil {
  position: sticky; top: 140px; height: 1em; overflow: hidden;
  font-family: var(--font-title); font-weight: 500; font-size: clamp(72px, 9vw, 140px); line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.akis__teker { display: flex; flex-direction: column; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.akis__teker span { display: block; height: 1em; }
.akis__sag { grid-column: 7 / -1; position: relative; }
.akis__cizgi { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--kolon-bosluk, 24px) / 2); width: 1px; background: var(--line-strong); }
.akis__cizgi i { position: absolute; top: 0; bottom: 0; left: -.5px; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; }
.akis__liste { list-style: none; margin: 0; padding: 0; }
.akis__adim { position: relative; padding-bottom: 56px; }
.akis__adim:last-child { padding-bottom: 0; }
.akis__adim::before {
  content: ""; position: absolute; top: .3em; left: calc(-1 * var(--kolon-bosluk, 24px) / 2 - 5.5px);
  width: 11px; height: 11px; border-radius: 50%; background: var(--bg-soft); border: 1.5px solid var(--line-strong);
  transition: background-color .4s ease, border-color .4s ease;
}
.akis__adim.gecti::before { background: var(--accent); border-color: var(--accent); }
.akis__yil-kucuk { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .12em; color: var(--muted); margin-bottom: 10px; transition: color .4s ease; }
.akis__adim.gecti .akis__yil-kucuk { color: var(--accent-text); }
.akis__adim h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; margin-bottom: 8px; }
.akis__adim > p { font-size: 16px; margin: 0 0 16px; max-width: 40em; }
.akis__projeler { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.akis__projeler li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.akis__projeler a { color: var(--ink); transition: color .2s ease; }
.akis__projeler a:hover { color: var(--accent-text); }
.akis__projeler span { color: var(--muted); font-size: 14px; white-space: nowrap; }
@media (max-width: 1080px) {
  .akis { grid-template-columns: minmax(0, 1fr); }
  .akis__sol { display: none; }
  .akis__sag { grid-column: 1 / -1; padding-left: 28px; }
  .akis__cizgi { left: 6px; }
  .akis__adim::before { left: -27.5px; }
}

/* Projeler: öne çıkanlar ızgarası + tür sekmeleri + liste */
/* Öne çıkanlar: üstte 2 büyük, altta 3 kart (6 sütunlu ızgara) */
.kart-izgara { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.kart-izgara .pkart { grid-column: span 2; height: clamp(380px, 30vw, 480px); }
.kart-izgara .pkart:nth-child(-n+2) { grid-column: span 3; height: clamp(420px, 38vw, 580px); }
.sekmeler { display: flex; flex-wrap: wrap; gap: 8px 32px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.sekmeler button {
  padding: 14px 0; font-size: 16px; font-weight: 500; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .25s ease, border-color .25s ease;
}
.sekmeler button:hover { color: var(--ink); }
.sekmeler button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.liste-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 24px; }
.liste-ust span { font-size: 15px; color: var(--muted); }
.psatir {
  display: grid; grid-template-columns: 110px minmax(0, 2.4fr) 120px 160px minmax(0, 1.5fr); gap: 24px;
  align-items: baseline; padding: 18px 8px; border-bottom: 1px solid var(--line); font-size: 15px;
  transition: background-color .2s ease;
}
.psatir:hover { background: var(--bg-soft); }
.psatir:hover .psatir__ad { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.psatir__yil { color: var(--muted); font-variant-numeric: tabular-nums; }
.psatir__ad { font-family: var(--font-title); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; color: var(--ink); line-height: 1.3; }
.psatir__isveren { color: var(--muted); }
.psatir--kisa { grid-template-columns: 110px minmax(0, 1fr) 140px; }

/* Proje detayı künyesi */
.kunye-liste { margin: 0; border-top: 1px solid var(--line-strong); }
.kunye-liste div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.kunye-liste dt { font-size: 14px; color: var(--muted); }
.kunye-liste dd { margin: 0; font-size: 17px; color: var(--ink); }
.kapsam-metni { font-family: var(--font-title); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.3; color: var(--ink); margin: 0 0 32px; max-width: 22em; }

/* Ne yapıyoruz: dönüşümlü fotoğraf + metin satırları */
.alan { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); }
.alan:first-child { border-top: 0; padding-top: 0; }
.alan:nth-child(even) .alan__gorsel { order: 2; }
.alan__gorsel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.alan h2 { margin-bottom: 20px; }
.alan p { font-size: clamp(16px, 1.25vw, 18px); max-width: 34em; }
.alan__sayi { font-size: 15px; color: var(--muted); margin-bottom: 20px; }

/* Kariyer değerleri */
.degerler { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.degerler > div { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.degerler h3 { font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; margin-bottom: 10px; }
.degerler p { font-size: 16px; margin: 0; }

/* Basın */
.haberler { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 5vw, 72px) clamp(24px, 3vw, 48px); }
.haber img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); margin-bottom: 22px; }
.haber time { display: block; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.haber h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.25; margin-bottom: 12px; }
.haber p { font-size: 16px; margin: 0; max-width: 34em; }
/* Güncel haberler (05.11): geniş satır — büyük fotoğraf + küçük kareler | metin. Küçük kareye tıklayınca
   büyük fotoğraf değişir (js/site.js "Haber galerisi"). Eski haberler altta, iki sütunlu ızgarada. */
.haber-guncel {
  display: grid; gap: clamp(64px, 7vw, 112px);
  margin-bottom: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); border-bottom: 1px solid var(--line);
}
.haber--genis { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.haber--genis .haber__ana { margin-bottom: 12px; }
.haber__kucukler { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }   /* kaç kare varsa satırı eşit doldurur */
.haber__kucuk { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: var(--radius); opacity: .5; transition: opacity .25s ease; }
.haber__kucuk:hover, .haber__kucuk[aria-pressed="true"] { opacity: 1; }
.haber__kucuk:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.haber .haber__kucuk img { display: block; margin: 0; }
.haber--genis .haber__kaynak { font-size: 13px; color: var(--muted); margin-top: 12px; }
.haber__metin { padding-top: 4px; }
.haber--genis h2 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 500; line-height: 1.15; margin-bottom: 22px; }
.haber--genis .haber__metin p { font-size: 17px; margin-bottom: 16px; max-width: 32em; }
.haber--genis .ok-bag { margin-top: 12px; }

/* İletişim — pin #82, kullanıcı seçimi B: ferrovial.com/en/contact düzeni. Üstte soru başlığı (1–5) + kısa bilgi (7–12),
   altında bölüm sekmeleri (DM Mono, aktif turuncu alt çizgi), form 1–7, ofisler 9–12. Alan etiketleri büyük harfli
   küçük mono; alanlar kutu değil İNCE ALT ÇİZGİ (kapsül #22'de reddedildi), odakta çizgi turuncu. */
.ilt-ust { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--kolon-bosluk); align-items: end; padding-bottom: 40px; }
.ilt-ust h2 { grid-column: 1 / span 5; font-size: clamp(34px, 3.4vw, 48px); font-weight: 500; line-height: 1.1; margin: 0; }
.ilt-ust > div { grid-column: 7 / -1; }
.ilt-ust p { margin: 0 0 14px; max-width: 36em; }
.ilt-ust a { display: inline-block; margin-right: 28px; font-weight: 600; color: var(--ink); }
.ilt-ust a:hover { color: var(--accent-text); }
.ilt-sekme { display: flex; gap: 40px; border-bottom: 1px solid var(--line); margin-bottom: 48px; }
.ilt-sekme a {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); padding: 16px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease;
}
.ilt-sekme a:hover { color: var(--ink); }
.ilt-sekme a.aktif { color: var(--ink); border-bottom-color: var(--accent); }
.iletisim-izgara { display: grid; align-items: start; }
.iletisim-izgara > form.form { grid-column: 1 / span 7; }
.iletisim-izgara > aside.ilt-ofisler { grid-column: 9 / -1; }
#iletisimFormu, #merkez, #ankara { scroll-margin-top: 120px; }
.form { display: grid; gap: 22px; }
.form__ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form label { display: grid; gap: 8px; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.form .zorunlu { color: var(--accent-text); font-weight: 500; }
.form input, .form select, .form textarea {
  width: 100%; height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent;
  font: 400 16px/1.4 var(--font); letter-spacing: 0; text-transform: none; color: var(--ink); transition: border-color .2s ease;
}
.form select { cursor: pointer; }
.form textarea { height: auto; min-height: 130px; padding-top: 10px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--accent); }
.form .onay { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font); font-weight: 400; font-size: 14px; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--text); }
.form .onay input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--ink); }
.form .onay a { text-decoration: underline; text-underline-offset: 3px; }
.dugme {
  justify-self: start; height: 52px; padding: 0 28px; border-radius: 4px; background: var(--ink); color: #fff;
  font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; gap: 14px; transition: background .25s ease;
}
.dugme:hover { background: #111110; }
.form__not { font-size: 14px; color: var(--muted); margin: 0; }
.ilt-ofisler { display: grid; gap: 40px; align-content: start; }
.ofis h3 { font-size: 22px; font-weight: 500; margin-bottom: 10px; }
.ofis address { font-style: normal; font-size: 16px; margin-bottom: 12px; }
.ofis a { display: block; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.ofis .ok-bag { display: inline-flex; margin-top: 12px; font-size: 12px; }
@media (max-width: 1080px) {
  .ilt-ust { grid-template-columns: minmax(0, 1fr); }
  .ilt-ust > * { grid-column: 1 / -1 !important; }
  .ilt-ust h2 { margin-bottom: 20px; }
  .ilt-sekme { gap: 24px; overflow-x: auto; }
  .ilt-sekme a { white-space: nowrap; }
  .ilt-ofisler { margin-top: 56px; }
}

/* Yasal metinler */
.yasal-metin { max-width: 780px; }
.yasal-metin h2 { font-size: clamp(22px, 1.8vw, 26px); font-weight: 500; margin: 44px 0 14px; }
.yasal-metin h2:first-child { margin-top: 0; }
.yasal-metin p, .yasal-metin li { font-size: 17px; }
.yasal-metin ul { padding-left: 1.2em; margin: 0 0 1.2em; }
.yasal-metin a { text-decoration: underline; text-underline-offset: 3px; }
.yasal-metin .not { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }

@media (max-width: 1080px) {
  .duzen, .iletisim-izgara, .vizyon-ust, .kalite-ozet { grid-template-columns: 1fr; }
  .vizyon-ust, .kalite-ozet { gap: 20px; }
  .duzen > :first-child h2 { position: static; }
  .degerler-liste > li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; }
  .degerler-liste ul { grid-column: 2; }
  .psatir { grid-template-columns: 90px minmax(0, 1fr) 110px; }
  .psatir__tur, .psatir__isveren { display: none; }
  .alan { grid-template-columns: 1fr; gap: 28px; }
  .alan:nth-child(even) .alan__gorsel { order: 0; }
  .haber--genis { grid-template-columns: 1fr; gap: 28px; }
  .degerler { grid-template-columns: 1fr 1fr; }
  .kart-izgara { grid-template-columns: 1fr 1fr; }
  .kart-izgara .pkart, .kart-izgara .pkart:nth-child(-n+2) { grid-column: auto; height: 420px; }
}
@media (max-width: 640px) {
  .sayfa-basi { min-height: 78svh; }
  .sayfa-basi__ic { padding-top: 120px; }
  .sayfa-basi--sade .sayfa-basi__ic { padding-top: 120px; }
  .zaman li { grid-template-columns: 1fr; gap: 10px; }
  .psatir { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .psatir__il { color: var(--muted); }
  .psatir--kisa { grid-template-columns: 1fr; }
  .kunye-liste div { grid-template-columns: 1fr; gap: 4px; }
  .degerler, .haberler, .form__ikili { grid-template-columns: 1fr; }
  .haber__kucukler { gap: 8px; }
  .kart-izgara { grid-template-columns: 1fr; }
  .kart-izgara .pkart, .kart-izgara .pkart:nth-child(-n+2) { grid-column: auto; height: 420px; }
}

/* =========================================================================
   HİZALAMA IZGARASI (pin #40 "tüm sitede her şey tam hizalı olacak") — 2026-11-06
   Tek 12 kolonluk ızgara, kolon arası 24 px. İki sütunlu HER bölümde sol taraf 1–5, sağ taraf 7–12:
   sağ sütunlar her sayfada AYNI dikey çizgiden başlar (1512 px'te x=768). 4'lü ve 6'lı kart sıraları
   (uzmanlık alanları, kariyer değerleri, öne çıkan projeler) aynı ızgaraya oturur (4./7./10. kolon).
   Öncesi ölçüldü: sağ sütun 596–907 arası dokuz farklı noktadaydı. Yeni iki sütunlu bölüm de bu bloğa eklenir.
   Bu blok dosyanın SONUNDA durur ki bileşen kurallarının üstüne geçsin.
   ========================================================================= */
:root { --kolon-bosluk: 24px; --orta-ic: clamp(20px, 3vw, 40px); }

.giris, .kapak__ic, .orta, .iki-sutun, .onecikan__izgara, .duzen, .vizyon-ust, .kalite-ozet,
.degerler-liste > li, .alan, .iletisim-izgara, .haber--genis {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--kolon-bosluk);
}
/* Sol içerik: 1–5 · sağ içerik: 7–12 */
.giris__metin, .kapak__ic > :first-child, .iki-sutun > :first-child, .duzen > :first-child,
.vizyon-ust > :first-child, .kalite-ozet > :first-child, .iletisim-izgara > :first-child { grid-column: 1 / span 5; }
.giris__gorsel, .kapak__ic > :last-child, .iki-sutun > :last-child, .duzen > :last-child,
.vizyon-ust > :last-child, .kalite-ozet > :last-child, .iletisim-izgara > :last-child { grid-column: 7 / -1; }

/* Giriş: fotoğraf 7. kolondan başlar ve sağ kenara taşar (ızgara hesabı için sağ dolgu geri geldi) */
.giris { padding-right: var(--gutter); }
.giris__gorsel { margin-right: calc(-1 * var(--gutter)); }

/* Görsel + metin: görsel 6 kolon, metin 7. kolondan */
.onecikan__vitrin, .haber--genis > :first-child { grid-column: 1 / span 6; }
.onecikan__kartlar, .haber--genis > :last-child { grid-column: 7 / -1; }
.alan .alan__gorsel { grid-column: 1 / span 6; grid-row: 1; }
.alan > div:not(.alan__gorsel) { grid-column: 7 / -1; grid-row: 1; }
.alan:nth-child(even) .alan__gorsel { grid-column: 7 / -1; order: 0; }
.alan:nth-child(even) > div:not(.alan__gorsel) { grid-column: 1 / span 5; }

/* Sahadayız: metin 1–5, il listesi + kart 7–12 (sayfanın sağ sütun çizgisi) */
.sahada__metin { grid-column: 1 / span 5; }
.sahada__sag { grid-column: 7 / -1; }

/* Kurumsal değerler: numara 1. kolon, başlık 2–5, taahhütler 7–12 */
.degerler-liste > li { gap: 0 var(--kolon-bosluk); }
.degerler-liste__no { grid-column: 1; }
.degerler-liste > li > h3 { grid-column: 2 / span 4; }
.degerler-liste > li > ul { grid-column: 7 / -1; }

/* Kurumsal tarihçe: yıl 1–5, açıklama 7–12 (sayfanın geri kalanıyla aynı çizgi) */
.zaman li { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--kolon-bosluk); }
.zaman__yil { grid-column: 1 / span 5; }
.zaman li > div { grid-column: 7 / -1; }

/* Eşit kartlı sıralar: kolon arası ortak */
.alanlar__izgara, .degerler, .kart-izgara, .haberler { column-gap: var(--kolon-bosluk); }

@media (max-width: 1080px) {
  .giris, .kapak__ic, .orta, .iki-sutun, .onecikan__izgara, .duzen, .vizyon-ust, .kalite-ozet, .alan,
  .iletisim-izgara, .haber--genis { grid-template-columns: minmax(0, 1fr); }
  .giris > *, .kapak__ic > *, .orta > *, .iki-sutun > *, .onecikan__izgara > *, .duzen > *, .vizyon-ust > *,
  .kalite-ozet > *, .alan > *, .iletisim-izgara > *, .haber--genis > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .giris { padding-right: 0; }
  .giris__gorsel { margin-right: 0; }
  .sahada__sag { margin-top: 48px; }
  .zaman li { grid-template-columns: 110px minmax(0, 1fr); }
  .zaman__yil { grid-column: 1; }
  .zaman li > div { grid-column: 2; }
  .degerler-liste > li { grid-template-columns: 44px minmax(0, 1fr); gap: 14px 16px; }
  .degerler-liste__no { grid-column: 1; }
  .degerler-liste > li > h3, .degerler-liste > li > ul { grid-column: 2; }
}
/* Alt bilgi: 1081–1300 px arasında sağdaki dört sütun dar kalıyor; yazı bir kademe küçülür */
@media (min-width: 1081px) and (max-width: 1300px) {
  .alt__baglantilar a { font-size: 14px; }
  .alt h4 { letter-spacing: .1em; }
}
/* Uzmanlık kartları dokunmatikte: koyu geçiş baştan güçlü (yazı açık fotoğrafa taşmasın); telefonda açıklama gizli,
   kart yalnız başlık + proje sayısı (dar kartta yazı yığılmasın) */
@media (hover: none) { .alanlar__alan::before { opacity: 1; } }
@media (max-width: 640px) { .alanlar__alan p { display: none; } }

/* =========================================================================
   PROJE GALERİSİ (proje.html #projeGaleri) + fotoğraf büyütme perdesi (js "Fotoğraf büyütme")
   Kareler doğal boyutlarının üstüne büyütülmez: eski sitenin 640 px kareleri ızgarada küçük durur,
   tam boy yalnız perdede. Tek fotoğraflı projede kare tek sütunda kalır (auto-fill).
   ------------------------------------------------------------------------- */
.pgaleri { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.pgaleri__kare { display: block; padding: 0; border: 0; background: var(--bg-soft); cursor: zoom-in; border-radius: var(--radius); overflow: hidden; }
.pgaleri__kare img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.pgaleri__kare:hover img { transform: scale(1.03); }
.pgaleri__kare:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.buyut { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 56px 72px; background: rgba(34, 35, 33, .94); cursor: zoom-out; }
.buyut img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius); cursor: default; }
.buyut button { position: absolute; border: 0; background: none; color: #fff; cursor: pointer; font: 300 44px/1 Inter, sans-serif; padding: 8px 14px; opacity: .8; }
.buyut button:hover, .buyut button:focus-visible { opacity: 1; outline: none; color: var(--accent); }
.buyut__kapat { top: 12px; right: 16px; }
.buyut__ok--geri { left: 12px; top: 50%; transform: translateY(-50%); }
.buyut__ok--ileri { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) { .buyut { padding: 56px 12px; } .buyut__ok { top: auto; bottom: 12px; transform: none; } }

/* -------------------------------------------------------------------------
   DİLLER (06.11): /en /ru /ar sayfaları araclar/dil.mjs ile Türkçe sayfalardan üretilir.
   Dil seçici alt bilginin EN ALTINDA (kullanıcı: "sitenin en sonunda"); her dil kendi adı ve yazısıyla.
   Türkçe yazı tiplerinde (Hanken Grotesk, DM Mono) Kiril ve Arap harfi yok → Rusçada Inter Tight + IBM Plex Mono,
   Arapçada her rolde IBM Plex Sans Arabic (dil.mjs o sayfalara yükler). Arap harfleri birbirine bağlandığı için
   Arapçada harf aralığı SIFIR (geniş aralıklı büyük harf dili Arapçada harfleri koparır).
   ------------------------------------------------------------------------- */
.alt__alt > span { margin-right: auto; }
.alt__alt .alt__dil { gap: 20px; padding-left: 28px; border-left: 1px solid var(--line-strong); }
.alt__dil a[aria-current="true"] { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .alt__alt .alt__dil { padding-left: 0; border-left: 0; }
}

html[lang="ru"] {
  --font-title: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
html[lang="ar"] {
  --font-title: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-mono: 'IBM Plex Sans Arabic', system-ui, sans-serif;
}
html[lang="ar"] body { font-weight: 400; line-height: 1.7; }
html[lang="ar"] *, html[lang="ar"] *::before, html[lang="ar"] *::after { letter-spacing: 0 !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.35; }
:lang(ar) { letter-spacing: 0; }

/* ---------- Arapça: sağdan sola. Izgara ve flex kendiliğinden döner; burada yalnız sola/sağa sabitlenmiş
   konumlar, kenar çizgileri, akış yönleri ve oklar aynalanır. Türkçe sayfalara hiçbir etkisi yok. ---------- */
[dir="rtl"] .atla { left: auto; right: -9999px; }
[dir="rtl"] .atla:focus { right: 8px; }
[dir="rtl"] .ilerleme, [dir="rtl"] .ilerleme span { right: auto; left: 0; }
[dir="rtl"] .ust__logo { margin-right: 0; margin-left: auto; }
[dir="rtl"] .alt__alt > span { margin-right: 0; margin-left: auto; }
[dir="rtl"] .alt__alt .alt__dil { padding-left: 0; border-left: 0; padding-right: 28px; border-right: 1px solid var(--line-strong); }
/* Oklar: tüm yan oklar sola baksın, üzerine gelince sola kaysın */
[dir="rtl"] svg use[href="#ok-sag"], [dir="rtl"] svg use[href="#ok-capraz"] { transform: scaleX(-1); transform-origin: center; transform-box: fill-box; }
[dir="rtl"] .imza:hover .ok-bag__daire { transform: translateX(-5px); }
[dir="rtl"] .pkart:hover .pkart__ok, [dir="rtl"] .sahada__kart:hover .pkart__ok { transform: translateX(-6px); }
/* Bağlantı alt çizgisi sağdan sola akar */
[dir="rtl"] .ok-bag::before { transform-origin: left center; }
[dir="rtl"] .ok-bag:hover::before, [dir="rtl"] .onecikan__vitrin:hover .ok-bag::before,
[dir="rtl"] .alanlar__alan:hover .ok-bag::before, [dir="rtl"] .alanlar__alan:focus-visible .ok-bag::before { transform-origin: right center; }
[dir="rtl"] .kahraman .ok-bag::after { left: auto; right: 0; animation-name: bag-ak-rtl; }
@keyframes bag-ak-rtl { 0% { transform: translateX(110%); } 80%, 100% { transform: translateX(-290%); } }
/* Giriş gezgini sol altta, çizgiler sağdan dolar */
[dir="rtl"] .kahraman__gezgin { right: auto; left: var(--gutter); }
[dir="rtl"] .kahraman__noktalar i::after { transform-origin: right; }
/* Sahadayız: il listesinin çizgisi sağda, kart yazısı ve oku aynalı */
[dir="rtl"] .sahada__liste button { text-align: right; padding: 12px 18px 12px 0; border-left: 0; border-right: 2px solid var(--line); }
[dir="rtl"] .sahada__liste button[aria-pressed="true"] { border-right-color: var(--accent); }
[dir="rtl"] .sahada__ic { left: 84px; right: 32px; }
[dir="rtl"] .sahada__kart .pkart__ok { right: auto; left: 28px; }
[dir="rtl"] .sahada__sure { left: auto; right: 0; }
[dir="rtl"] .pkart__ic { left: 84px; right: 28px; }
[dir="rtl"] .pkart__ok { right: auto; left: 24px; }
/* Kurumsal: değer maddeleri ve tarihçe çizgisi sağda */
[dir="rtl"] .degerler-liste ul li { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .degerler-liste ul li::before { left: auto; right: 0; }
[dir="rtl"] .akis__cizgi { left: auto; right: calc(-1 * var(--kolon-bosluk, 24px) / 2); }
[dir="rtl"] .akis__cizgi i { left: auto; right: -.5px; }
[dir="rtl"] .akis__adim::before { left: auto; right: calc(-1 * var(--kolon-bosluk, 24px) / 2 - 5.5px); }
[dir="rtl"] .ilt-ust a { margin-right: 0; margin-left: 28px; }
[dir="rtl"] .yasal-metin ul { padding-left: 0; padding-right: 1.2em; }
/* Giriş fotoğrafı sol kenara taşar */
[dir="rtl"] .giris { padding-right: 0; padding-left: var(--gutter); }
[dir="rtl"] .giris__gorsel { margin-right: 0; margin-left: calc(-1 * var(--gutter)); }
/* Telefon numarası sağdan sola akışta ters dizilmesin ("80 25 325 (462) 90+"): numara soldan sağa, yeri sağda kalır */
[dir="rtl"] a[href^="tel:"] { direction: ltr; unicode-bidi: isolate; text-align: right; }
/* Büyütme perdesi */
[dir="rtl"] .buyut__kapat { right: auto; left: 16px; }
[dir="rtl"] .buyut__ok--geri { left: auto; right: 12px; }
[dir="rtl"] .buyut__ok--ileri { right: auto; left: 12px; }
@media (max-width: 1080px) {
  [dir="rtl"] .giris { padding-left: 0; }
  [dir="rtl"] .giris__metin { padding-right: 0; padding-left: var(--gutter); }
  [dir="rtl"] .giris__gorsel { margin-left: 0; }
  [dir="rtl"] .akis__sag { padding-left: 0; padding-right: 28px; }
  [dir="rtl"] .akis__cizgi { left: auto; right: 6px; }
  [dir="rtl"] .akis__adim::before { left: auto; right: -27.5px; }
}
@media (max-width: 640px) {
  [dir="rtl"] .kahraman__gezgin { left: var(--gutter); right: var(--gutter); }
  [dir="rtl"] .sahada__liste button { border-right: 0; padding: 10px 0; }
  [dir="rtl"] .pkart__ic { left: 74px; right: 22px; }
  [dir="rtl"] .pkart__ok { right: auto; left: 18px; }
}