/*
 * Master İmar — kurumsal tanıtım sitesi (Faz d, Tur 2 — Longines TR pivotu).
 * tokens.css + base.css'ten sonra yüklenir. Yapı design-reference/anasayfa.html,
 * iletisim.html, sss.html mockup'larından BİREBİR port edildi; tasarım dili
 * master-arayuz skill'i (.claude/skills/master-arayuz/). Skill'in önneksiz
 * seçicileri `mi-` önekiyle taşındı, DURUM class'ları (acik/etkin/etkin-N/
 * secili/secim-var/is-stuck/is-current/markali) BİLEREK öneksiz kaldı — bu
 * JS sözleşmesinin parçası. Tam eşleme tablosu: PROJE.md.
 *
 * Tek cam dokunuşu YOK (Tur 1'in navbar blur'ü kaldırıldı — spec'te navbar
 * yalnız scroll'da hafif gölge alır). Koyu blok: üç alan bandının kapalı/hover
 * durumu (--mi-accent-strong/--mi-accent-mid, sahibi geri bildirimi — bkz. commit
 * notu). Hero'nun gradient zemini foto-öncesi placeholder istisnası (PROJE.md §3).
 */

/* ── Kurumsal site tipografi/zemin — panel'i (mi-* base.css) etkilemez ───── */
body.mi-site {
  background: var(--mi-surface);
  font-size: 15.5px;
  overflow-x: hidden;
}
/* base.css'in button resti border/background bırakıyor (yalnız font/color) —
   bu sitede DÜZİNELERCE <button> düz metin/liste satırı gibi davranıyor
   (mi-oge, mi-alan__yuz, mi-sss__b, mi-ekip__k...), tarayıcı varsayılan buton
   çerçevesi olmadan. :where() ile SIFIR özgüllük — yoksa `.mi-site button`
   (0,1,1) tek class'lı bileşen seçicilerini (`.mi-oge` vb., 0,1,0) eziyordu;
   .mi-oge/.mi-sss__b'nin kendi padding/border-bottom'ı hiç görünmüyordu
   (bulunan gerçek hata — satırlar borderısız ve yarı yükseklikte render oluyordu). */
:where(.mi-site) button {
  background: none;
  border: 0;
  padding: 0;
  text-align: inherit;
}
.mi-site ::selection { background: var(--mi-accent); color: var(--mi-on-dark); }
.mi-site h1, .mi-site h2, .mi-site h3, .mi-site h4 {
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.mi-container-site { max-width: var(--mi-container-site); margin-inline: auto; padding-inline: var(--mi-gutter-site); }
.mi-bleed { padding-inline: var(--mi-gutter-site); }
.mi-kicker {
  font-size: var(--mi-t-mikro);
  letter-spacing: var(--mi-tr-mikro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--mi-ink-soft);
}
.mi-kicker--onDark { color: var(--mi-on-dark-soft); }
.mi-alan__bos { color: var(--mi-ink-soft); font-size: 0.85rem; padding: var(--mi-space-4) 0; }

/* ── Masthead — tek satır 64px, beyaz, cam YOK ────────────────────────────── */
.mi-masthead {
  position: fixed; inset: 0 0 auto 0; z-index: var(--mi-z-nav); height: var(--mi-nav-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  padding-inline: var(--mi-gutter-site);
  background: var(--mi-surface); border-bottom: 1px solid var(--mi-line);
  transition: box-shadow var(--mi-dur) var(--mi-ease);
}
.mi-masthead.is-stuck { box-shadow: 0 1px 0 var(--mi-line), 0 8px 24px rgba(15, 26, 48, 0.07); }
.mi-mast-nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); justify-self: start; }
.mi-navlink {
  position: relative; font-size: var(--mi-t-mikro); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500; padding: 6px 0; white-space: nowrap;
  /* Explicit renk — Tur A'da eklenen POST-formlu <button class="mi-navlink">
     (Çıkış) UA/reset zincirinden --mi-ink'e (değil --mi-accent'e) düşüyordu;
     kalite kapısı 1. tur bulgusu (ölçüldü: buton rgb(22,26,32) ≠ link
     rgb(27,42,74)). Class seviyesinde sabitlemek <a>/<button> ayrımını ortadan
     kaldırır, gelecekte eklenecek form-tabanlı nav öğeleri de otomatik uyar. */
  color: var(--mi-accent);
}
.mi-navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--mi-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mi-dur) var(--mi-ease);
}
.mi-navlink:hover::after, .mi-navlink:focus-visible::after, .mi-navlink.is-current::after { transform: scaleX(1); }
.mi-mast-logo { justify-self: center; display: flex; align-items: center; }
.mi-mast-logo--devir {
  opacity: 0; transform: translateY(5px); pointer-events: none;
  transition: opacity var(--mi-dur) var(--mi-ease), transform var(--mi-dur) var(--mi-ease);
}
.mi-masthead.markali .mi-mast-logo--devir { opacity: 1; transform: none; pointer-events: auto; }
/* aspect-ratio — logo_mark_grey.png'in gerçek oranı (504×617). Görsel
   yüklenmeden ÖNCE kutunun genişliğini/yüksekliğini önceden ayırır: bu
   olmadan tarayıcı `height:34px; width:auto` çiftinden genişliği ancak
   görsel indirilip decode edilince öğrenir — o ana kadar 0 genişlikte,
   yüklenince aniden gerçek genişliğine "zıplıyor" (mobilde ağ daha yavaş
   olduğundan bu sıçrama belirgin fark ediliyor — sahibi geri bildirimi:
   "logolar kayıyor bazen"). Oran doğru olduğundan görünen boyut DEĞİŞMEZ,
   yalnız yer önceden ayrılır (kalite kapısı mobil turu). */
.mi-mast-logo .mi-logo-mark { height: 34px; width: auto; aspect-ratio: 504 / 617; }
.mi-mast-right { justify-self: end; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 22px); }
.mi-mast-burger {
  display: none; width: 34px; height: 34px; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
}
.mi-mast-burger span {
  display: block; width: 19px; height: 1px; background: currentColor;
  transition: transform var(--mi-dur) var(--mi-ease), opacity 0.2s;
}
.mi-mast-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mi-mast-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mi-mast-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Topografya zemini (yalnız hero) ──────────────────────────────────────── */
.mi-topo-katman { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.mi-topo-katman canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── HERO — sayfadaki tek tam ekran bölüm ─────────────────────────────────── */
.mi-hero {
  position: relative; height: 100svh; min-height: 540px; display: flex; align-items: flex-end;
  overflow: hidden; color: var(--mi-ink); padding-top: var(--mi-nav-h); background: var(--mi-hero-bg);
}
.mi-hero__vignette { position: absolute; inset: 0; pointer-events: none; background: var(--mi-hero-veil); }
/* width: max-content — ASIL bulunan hata (sahibi: "logo altındaki yazı
   daralıyor, normal boyutunda değil"). `left:50%` + `transform:translate(-50%,
   -50%)` yalnız BOYAMA aşamasında öteler; `width:auto` (varsayılan) olan
   mutlak-konumlu bir kutunun shrink-to-fit genişliği tarayıcıda `left`
   OFSETİNİ transform'dan BAĞIMSIZ hesaplar — yani mevcut kod dar bir mobil
   ekranda (ör. 390px) bu kutuya yalnız YARISINI (~195px) "kullanılabilir
   genişlik" olarak veriyordu. `.mi-logo-word` (1280×159, oran ~8:1) o
   yükseklikte doğal genişliği bu yarıyı AŞIYOR — base.css'in genel
   `img{max-width:100%}` kuralı devreye girip genişliği zorla kısıyor,
   YÜKSEKLİK sabit kaldığından (clamp) yazı GERÇEK ORANINDAN dar/sıkışık
   görünüyordu (390px'te ölçüldü: 195px yerine olması gereken ~258px —
   ölçülüp doğrulandı; `.mi-mast-logo`/`.mi-footer__brand`'daki `aspect-ratio`
   eklemesiyle İLGİSİZ, transform öncesinde de AYNI şekilde bozuktu — kalite
   kapısı 2. tur bulgusu). Bu kutuya `width:max-content` vermek shrink-to-fit'i
   konum ofsetinden değil GERÇEK içerik genişliğinden hesaplatır — mark (ikon)
   zaten sığdığından görünüşü DEĞİŞMEZ, yalnız word (yazı) artık gerçek
   oranında render olur. */
.mi-hero__mark {
  position: absolute; left: 50%; top: calc(40% - var(--mi-space-6)); transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.8vh, 32px);
  width: max-content;
  pointer-events: none; will-change: opacity, transform;
}
/* aspect-ratio — .mi-mast-logo .mi-logo-mark'taki AYNI CLS gerekçesi (mobil
   turu); logo_word_grey.png oranı 1280×159. */
.mi-hero__mark .mi-logo-mark { height: clamp(96px, 16vh, 190px); aspect-ratio: 504 / 617; }
.mi-hero__mark .mi-logo-word { height: clamp(24px, 3.8vh, 46px); aspect-ratio: 1280 / 159; }
.mi-hero__rule { width: clamp(36px, 5.2vh, 68px); height: 1px; background: var(--mi-accent); opacity: 0.5; }
.mi-hero__copy {
  position: relative; z-index: 2; width: 100%;
  padding-top: clamp(24px, 3.9vh, 40px);
  /* alttaki daha büyük boşluk .mi-hero__cue (kaydır butonu) ile çakışmasın diye
     bloğu yukarı iter — cue kendi yüksekliği + alt konumuyla (~65-90px) burada
     hesaba katıldı. */
  padding-bottom: clamp(72px, 12vh, 136px);
}
.mi-hero__in { max-width: min(46rem, 62vw); margin-inline: auto; text-align: center; }
/* #mi-hero-mark'ın (sürekli scroll'a bağlı sönen dekoratif kap) DIŞINDA —
   bkz. anasayfa.html yorumu. Kendi kutusu her zaman tam opak/odaklanabilir. */
/* Logo (.mi-hero__mark, top:% ile konumlanan absolute kap) ile h1 (akışta,
   .mi-hero__copy'nin alt-hizalı flex konumuna bağlı) İKİ FARKLI konumlama
   sistemi kullanıyor — biri viewport yüksekliğinin yüzdesi, diğeri içerik
   yüksekliğine bağlı akış. Aradaki boşluk piksel-sabit bir marj ile
   bölünseydi (`margin: 0 auto Npx` gibi) MacBook (kısa viewport) ile 2K
   harici monitör (uzun viewport) arasında oranı kayardı (bulunan gerçek
   hata — kısa viewport'ta ortaya yakın, uzunda belirgin aşağıda). Bu yüzden
   >=861px kırılımında buton mutlak konumlanır — ama bunu BURADA (CSS'te)
   koşulsuz yapmak yerine hero-giris.js'e BIRAKILDI: hem `position:absolute`
   hem gerçek `top` değeri JS tek seferde, ATOMİK olarak inline style ile
   yazılır (mark'ın alt kenarı ile h1'in üst kenarının ÖLÇÜLMÜŞ ortası —
   viewport yüksekliği/DPI ne olursa olsun doğru). Aşağıdaki taban kural
   (normal akış) JS koşana kadar HEM mobilde HEM masaüstünde geçerli kalır —
   sabit bir CSS `top:%`/statik-konum yedeği denendi ve ikisi de ölçülünce
   h1 ile ÖRTÜŞÜYORDU (kalite kapısı 2. tur bulgusu): tek güvenli yedek,
   zaten bilinen (kusurlu ama örtüşmesiz) eski akış konumunun kendisi. */
.mi-hero__giris { display: flex; width: fit-content; margin: 0 auto clamp(38px, 6.5vh, 68px); }
.mi-hero h1 {
  font-weight: 300; font-size: var(--mi-t-hero); line-height: 1.05; max-width: 22ch;
  /* max-width içeriği kısıyor, margin-inline:auto olmadan kutu kendisi
     .mi-hero__in'in solunda kalıyordu — metin kutu İÇİNDE ortalı görünse de
     kutunun kendisi sayfaya göre ortalı DEĞİLDİ (ölçülüp yakalandı: h1 merkezi
     667px, sayfa merkezi 713px). */
  margin-block: clamp(14px, 2.2vh, 24px) clamp(14px, 2.2vh, 22px);
  margin-inline: auto;
}
/* display:block — vurgulu kısım ("birlikte yönetiyoruz.") pencere
   daraldıkça bazı genişliklerde düz metnin ("Gayrimenkullerinizi") SON
   kelimesiyle AYNI satıra düşüyordu; farklı ağırlık/renk aynı satırda yan
   yana garip duruyordu (sahibi bulgusu). Bloklaştırmak vurguyu HER ZAMAN
   kendi satırında başlatır — genişlik ne olursa olsun iki metin asla aynı
   satırı paylaşmaz. */
.mi-hero h1 b { display: block; font-weight: 600; color: var(--mi-accent); }
.mi-hero__lead {
  font-weight: 300; color: var(--mi-ink-soft); max-width: 48ch; margin-inline: auto;
  font-size: clamp(1rem, 1.4vh + 0.36vw, 1.22rem);
}
/* width: max-content — .mi-hero__mark'taki AYNI shrink-to-fit hatasına karşı
   önleyici (sayfa geneli tarama, mobil turu): bugüne kadar bu kutunun içeriği
   (ikon + "KAYDIRIN") her zaman kendi yarı-genişlik payına sığdığından
   görünürde bozulma YOKTU, ama aynı `left:50%` + `transform:translateX(-50%)`
   deseni taşıdığından ölçülmeden "güvenli" sayılamazdı. */
.mi-hero__cue {
  position: absolute; left: 50%; bottom: clamp(14px, 2.4vh, 28px); z-index: 3; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--mi-ink-soft);
  font-size: 0.62rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.85; padding: 8px 14px;
  width: max-content;
  transition: opacity var(--mi-dur) var(--mi-ease), transform var(--mi-dur) var(--mi-ease);
}
.mi-hero__cue:hover { opacity: 1; transform: translateX(-50%) translateY(3px); color: var(--mi-accent); }
.mi-hero__cue .mi-ok {
  width: 15px; height: 25px; border: 1px solid currentColor; border-radius: 9px; position: relative; opacity: 0.7;
}
.mi-hero__cue .mi-ok::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 5px;
  background: currentColor; transform: translateX(-50%);
}
.reveal-active .mi-hero__cue .mi-ok::after { animation: mi-cue 1.9s var(--mi-ease) infinite; }
@keyframes mi-cue {
  0% { opacity: 0; transform: translate(-50%, -3px); }
  30% { opacity: 1; }
  60% { opacity: 1; transform: translate(-50%, 8px); }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

/* ══════════ ÜÇ ALAN — hero gibi tam ekran ikinci bölüm, 12 birim ══════════
   Sahibi bulgusu: eski daraltılmış band (clamp 330–540px) hero'dan sonraki
   scroll'da ekranın yalnız bir kısmını dolduruyordu, "tüm ekran mavi olacak"
   istendi. `calc(100svh - var(--mi-nav-h))` — hero'nun `height:100svh` +
   `padding-top:var(--mi-nav-h)` İKİLİSİNİN aynı görsel sonucu, ama .mi-alanlar
   sayfa akışında hero'nun ALTINDA başladığı ve `scroll-margin-top` ile sabit
   navbar'ın hemen ALTINA hizalandığı için (üstte boşluk DEĞİL, navbar'ın
   kendisi kalır) burada padding değil doğrudan yükseklikten navbar payı
   düşülüyor — aksi halde bölüm 100svh + navbar kadar taşar, alt kenarı
   ekranın dışında kalırdı. */
.mi-alanlar {
  position: relative; overflow: hidden; background: var(--mi-surface);
  border-block: 1px solid var(--mi-line); scroll-margin-top: var(--mi-nav-h);
  height: calc(100svh - var(--mi-nav-h)); min-height: 480px;
  transition: height 0.68s var(--mi-ease-panel);
}
.mi-alanlar.acik { height: calc(100svh - var(--mi-nav-h)); min-height: 560px; }
.mi-alan {
  position: absolute; top: 0; height: 100%; overflow: hidden; scroll-margin-top: var(--mi-nav-h);
  background: var(--mi-accent-strong); color: var(--mi-on-dark);
  transition: left 0.68s var(--mi-ease-panel), width 0.68s var(--mi-ease-panel),
              background var(--mi-dur) var(--mi-ease), color var(--mi-dur) var(--mi-ease);
  will-change: left, width;
}
.mi-alan[data-s="0"] { left: 0; width: 33.34%; }
.mi-alan[data-s="1"] { left: 33.33%; width: 33.34%; }
.mi-alan[data-s="2"] { left: 66.66%; width: 33.33%; }
.mi-alan::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 7;
  box-shadow: inset -1px 0 0 var(--mi-on-dark);
}
.mi-alan[data-s="2"]::after { box-shadow: none; }
.mi-alan:hover { background: var(--mi-accent-mid); }

.mi-alan__yuz {
  position: absolute; inset: 0; z-index: 4; width: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 10px; text-align: center;
  transition: opacity 0.28s var(--mi-ease), transform 0.45s var(--mi-ease), visibility 0s linear;
}
.mi-alan__ad {
  font-size: clamp(0.98rem, 1.5vh + 0.42vw, 1.62rem); font-weight: 400;
  transition: transform var(--mi-dur) var(--mi-ease), color var(--mi-dur) var(--mi-ease);
}
.mi-alan:hover .mi-alan__ad { transform: translateY(-2px); }

.mi-alan__ac {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--mi-ease), visibility 0s linear 0.3s;
}
.mi-alanlar.acik .mi-alan.etkin .mi-alan__ac {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.38s var(--mi-ease) 0.3s, visibility 0s linear;
}
.mi-alanlar.acik .mi-alan.etkin .mi-alan__yuz {
  /* opacity:0 tek başına yeterli değildi: buton görünmez ama Tab sırasında
     hâlâ odaklanabiliyordu (WCAG 2.4.7) — panel açıkken kapalı-yüz görünmez
     olduğu anda erişilebilirlik ağacından da çıkar (.mi-alan__ac ile aynı
     desen); solma bitene kadar (0.28s) gecikmeli, kapanışta anında geri gelir. */
  opacity: 0; pointer-events: none; transform: translateY(10px); visibility: hidden;
  transition: opacity 0.28s var(--mi-ease), transform 0.45s var(--mi-ease), visibility 0s linear 0.28s;
}
.mi-alan__bas {
  position: relative; flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px;
  padding: clamp(14px, 2.2vh, 26px) clamp(20px, 2.4vw, 38px) clamp(10px, 1.5vh, 18px);
  border-bottom: 1px solid var(--mi-line);
}
.mi-alan__bas h2 {
  font-size: clamp(1.15rem, 1.9vh + 0.55vw, 2rem); font-weight: 600; letter-spacing: -0.02em;
}
.mi-alan__bas-btn {
  /* Başlık metninin kendisi kapatma eylemi — gerçek <button> (bkz.
   * alanlar.js), .mi-alan__kapat/Esc'e ek üçüncü bir yol. h2'nin erişilebilir
   * adı İÇERİĞİNDEN hesaplanır — butonun içine .mi-vh ile "kapatır" gibi bir
   * ek metin koymak, aria-label ile AYNI sonucu (h2'nin adının kirlenmesi,
   * kalite kapısı 1. tur bulgusu — ölçüldü: "Hizmetlerimiz" değil
   * "Hizmetlerimiz — panelini kapat" duyuruluyordu) verirdi. Bu yüzden eylem
   * ipucu butonun İÇİNDE değil, h2'nin DIŞINDA duran ayrı bir .mi-vh
   * <span>'e taşındı ve `aria-describedby` ile bağlandı: heading gezinmesi
   * (H tuşu) yalnız "Hizmetlerimiz" duyurur, butona odaklanınca ekran
   * okuyucu adı + açıklamayı birlikte okur. */
  font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer;
  transition: color var(--mi-dur) var(--mi-ease);
}
.mi-alan__bas-btn:hover, .mi-alan__bas-btn:focus-visible { color: var(--mi-accent); }
.mi-alan__kapat {
  margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--mi-ink-soft); transition: color var(--mi-dur) var(--mi-ease);
}
.mi-alan__kapat:hover { color: var(--mi-accent); }
.mi-alan__kapat svg { width: 14px; height: 14px; }

/* Hakkımızda panel açıklaması (Blok.alt_metin) — başlığın altında, kart
   ızgarasının üstünde; boşsa şablon hiç render etmiyor, burada yer tutucu
   boşluk bırakmayan tek koşul o. */
.mi-alan__aciklama {
  flex: 0 0 auto; padding: clamp(10px, 1.6vh, 18px) clamp(20px, 2.4vw, 38px) 0;
  max-width: 60ch; color: var(--mi-ink-soft); font-weight: 300;
  font-size: clamp(0.92rem, 1.05vh + 0.2vw, 1.04rem); line-height: 1.7;
}

.mi-alan__ic { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 0fr; transition: grid-template-columns 0.6s var(--mi-ease-panel); }
.mi-alan.secili .mi-alan__ic { grid-template-columns: 1fr 2fr; }
.mi-liste-kutu {
  /* min-height:0 ŞART: .mi-alan__ic bir grid konteyneri, grid öğelerinin
     varsayılan min-block-size'ı auto'dur (içeriğe göre) — bu olmadan kutu
     satır sayısı ne olursa olsun (5, 50, 500...) tüm listeyi sığdıracak
     kadar büyür, aşağıdaki overflow-y:auto asla devreye girmez ve liste
     sayfayı (footer'a kadar) taşırır (bulunan gerçek hata — "kaydıramıyorum"
     şikayetinin kökü, .mi-detay/.mi-ekip-kutu ile aynı kalıp).
     justify-content İÇİN `safe center` ŞART (kalite kapısı 1. tur RET —
     yüksek): düz `center` taşan içeriği İKİ YANA eşit dağıtır, üstteki
     taşma scroll bölgesine hiç girmez (scrollTop negatif olamaz) — liste
     dolduğunda scrollbar görünür ama "01" gibi ilk kalemler kalıcı
     kaybolur ("kaydıramıyorum" "başa dönemiyorum"a dönüşürdü). `safe`
     taşma VARSA tarayıcıyı flex-start'a düşürür, taşma YOKSA (az öğe)
     gerçek ortalamayı korur — iki durumda da doğru. */
  min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: safe center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(12px, 2vh, 24px) clamp(18px, 2vw, 34px);
  scrollbar-width: thin; scrollbar-color: var(--mi-line) transparent;
}
.mi-liste-kutu::-webkit-scrollbar { width: 3px; }
.mi-liste-kutu::-webkit-scrollbar-thumb { background: var(--mi-line); }
.mi-liste { width: 100%; border-top: 1px solid var(--mi-line); }
/* Satır geçişi (hover/seçim) TAMAMEN transform+opacity üzerinden — önceki
   sürüm .mi-oge'nin kendisinde padding-left VE font-size'ı animasyonluyordu,
   ikisi de LAYOUT tetikler (satır dolgusu/karakter ölçümü) ve seçim
   değiştiğinde AYNI ANDA onlarca satır birden yeniden akışa giriyordu —
   "takılma/donma" hissinin kökü (bulunan gerçek şikayet). Satırın kendisi
   (.mi-oge — border-bottom'u taşıyan, tam genişlik kutu) artık YALNIZ
   `color` geçişi taşıyor (paint, ucuz); indirim/büyüme efekti YENİ bir iç
   sarmalayıcıya (.mi-oge__ic — no+başlık, ok İÇERMEZ) taşındı, o da yalnız
   `transform`/`opacity` animasyonluyor (compositor'da, GPU'da) — satırın
   genişliği/sınırı/ok konumu (.mi-oge__ok, zaten transform+opacity idi,
   dokunulmadı) YERİNDE kalıyor, yalnız numara+başlık kayıyor/büyüyor. */
.mi-oge {
  display: flex; align-items: baseline; gap: 14px; width: 100%; text-align: left;
  padding: clamp(7px, 1.1vh, 13px) 2px; color: var(--mi-ink); border-bottom: 1px solid var(--mi-line);
  font-size: clamp(0.92rem, 1.05vh + 0.28vw, 1.18rem); font-weight: 400;
  transition: color var(--mi-dur) var(--mi-ease);
}
.mi-oge__ic {
  display: flex; align-items: baseline; gap: 14px; min-width: 0;
  transform: translateX(0) scale(1); transform-origin: left center;
  transition: transform var(--mi-dur) var(--mi-ease), opacity var(--mi-dur) var(--mi-ease);
}
.mi-oge__no { flex: 0 0 auto; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--mi-accent); font-weight: 600; min-width: 24px; }
.mi-oge__ok {
  flex: 0 0 auto; margin-left: auto; color: var(--mi-accent); opacity: 0; transform: translateX(-5px);
  transition: opacity var(--mi-dur) var(--mi-ease), transform var(--mi-dur) var(--mi-ease);
}
.mi-oge:hover .mi-oge__ic { transform: translateX(8px) scale(1); will-change: transform; }
.mi-oge:hover .mi-oge__ok { opacity: 0.65; transform: none; }
.mi-liste.secim-var .mi-oge .mi-oge__ic { opacity: 0.4; transform: translateX(0) scale(0.92); }
.mi-liste.secim-var .mi-oge:hover .mi-oge__ic { opacity: 0.72; }
.mi-liste.secim-var .mi-oge.acik .mi-oge__ic { opacity: 1; font-weight: 500; transform: translateX(6px) scale(1.1); will-change: transform; }
.mi-oge.acik { border-bottom-color: var(--mi-accent); }
.mi-oge.acik .mi-oge__ok { opacity: 1; transform: none; }

.mi-detay {
  /* min-height:0 — .mi-liste-kutu yorumundaki aynı grid-öğesi kalıbı: uzun
     bir açıklama metni olduğunda .mi-detay__in'in overflow-y:auto'su da
     bu olmadan devreye girmezdi. */
  min-width: 0; min-height: 0; position: relative; overflow: hidden; border-left: 1px solid var(--mi-line);
  scroll-margin-top: var(--mi-nav-h);
  /* justify-content: safe center — .mi-liste-kutu'daki aynı gerekçe: uzun
     bir açıklama metninin başı düz `center` ile scroll'dan erişilemez kalırdı. */
  display: flex; flex-direction: column; justify-content: safe center;
  opacity: 0; transform: translateX(16px);
  transition: opacity 0.4s var(--mi-ease), transform 0.5s var(--mi-ease);
}
.mi-alan.secili .mi-detay { opacity: 1; transform: none; transition-delay: 0.16s; }
/* Kişi değişimi (zaten seçili biri varken BAŞKA bir kişiye tıklamak) —
   `.mi-detay__in`nin görünürlüğü `hidden` özniteliğiyle (DISCRETE, geçişsiz)
   değişir; `.mi-detay` konteynerinin kendi opacity'si bu durumda zaten 1'de
   SABİT kaldığından (yalnız İÇERİK değişiyor) kişiden kişiye içerik ANİDEN
   değişiyordu (bulunan gerçek şikayet: "kişiler aniden tak diye beliriyor").
   ekip-detay.js `.gecis`i soldur+beliriv boyunca SÜREKLİ takar (yalnız
   `.gecis-sifir` alt-durumu opacity hedefini değiştirir) — `.gecis` tek
   başına transition-duration/delay'i KISA (0.18s, gecikmesiz) sabitler;
   aksi halde `.gecis` kaldırılır kaldırılmaz opacity, yukarıdaki temel
   kuralın 0.16s gecikmesine geri düşer ve "beliriv" yarısı YENİDEN yavaş/
   gecikmeli olurdu (ilk turda bulunan gerçek hata — kalite kapısı öncesi).
   Özgüllük (0,4,0) > temel kuralın (0,3,0), süre/gecikme her koşulda kazanır. */
.mi-alan.secili .mi-ekip-detay.gecis { transition-duration: 0.18s; transition-delay: 0s; }
.mi-alan.secili .mi-ekip-detay.gecis.gecis-sifir { opacity: 0; }
.mi-detay__in {
  /* width:100% ŞART: bu olmadan kutu, JS'in doldurduğu başlık/metin
     içeriğinin doğal (shrink-to-fit) genişliğine göre daralıyor — kutunun
     kendisi konteynerin GERÇEK genişliğine göre değil, İÇERİĞE göre
     boyutlanıyordu. margin-inline:auto bu durumda da simetrik kaldığından
     (normal blok kutusunda auto kenar boşlukları her zaman eşit bölünür)
     çıplak gözle fark edilmiyordu, ama içerik uzunluğuna göre kutunun
     GENİŞLİĞİ (dolayısıyla iç hizalamanın referans aldığı eksen) değişken
     kalıyordu — sahibi geri bildirimi "farklı ekran çözünürlüklerinde
     değişkenlik gösteriyor" tam bunun belirtisiydi. width:100% ile kutu
     HER ZAMAN panelin (.mi-detay) gerçek genişliğine sabitlenir, ortalama
     yalnız bu sabit eksene göre hesaplanır. */
  width: 100%;
  /* max-width 44rem → 52rem → 58rem + yatay padding daraltıldı (sahibi geri
     bildirimi, iki turda: "kenarda kalan boşluklar çok fazla, yazının kenar
     kısımlarını daha dışa gelecek şekilde genişletelim") — .mi-detay__metin'in
     kendi max-width'i (aşağıda) asıl metin genişliğini belirlediğinden
     buradaki genişleme onunla birlikte metni gerçekten kenara yaklaştırır. */
  padding: clamp(16px, 2.8vh, 38px) clamp(10px, 1.2vw, 24px); max-width: 58rem;
  margin-inline: auto; text-align: center;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--mi-line) transparent;
}
.mi-detay__in::-webkit-scrollbar { width: 3px; }
.mi-detay__in::-webkit-scrollbar-thumb { background: var(--mi-line); }
.mi-detay__kick {
  /* margin-inline:auto ŞART: base.css'in genel `p { max-width: 68ch; }`
     resetlemesi bu elemanı (bir <p>) mikro font-boyutunda ~68ch'e (ölçülen:
     ~515px) sıkıştırıyor — konteyner (.mi-detay__in) bundan daha genişse
     (ör. 629px) kutu, auto kenar boşluğu OLMADAN sola yaslı kalıyor (bulunan
     gerçek hata: EKİP etiketi/ünvan sola kaymış duruyordu, .mi-detay__bas
     bir <h3> olduğundan bu resetten etkilenmiyor, ikisi arasında tutarsızlık
     yaratıyordu). .mi-detay__metin zaten AYNI deseni (kendi max-width'i +
     margin-inline:auto) kullanıyor, buradaki de onunla tutarlı. */
  display: flex; align-items: center; justify-content: center; gap: 14px; font-size: var(--mi-t-mikro);
  letter-spacing: var(--mi-tr-mikro); text-transform: uppercase; color: var(--mi-ink-soft); font-weight: 500;
  margin-inline: auto;
}
.mi-detay__kick::before, .mi-detay__kick::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mi-line); }
.mi-detay__bas { font-size: clamp(1.15rem, 1.9vh + 0.55vw, 2rem); font-weight: 300; letter-spacing: -0.016em; margin: 12px 0 clamp(12px, 2vh, 22px); line-height: 1.14; }
.mi-detay__gorsel {
  width: 100%; aspect-ratio: 16 / 9; max-height: min(28vh, 240px);
  border: 1px solid var(--mi-line); background: var(--mi-accent-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: var(--mi-ink-soft); font-size: 0.72rem; text-align: center; padding: 14px;
  margin-bottom: clamp(12px, 2vh, 22px); overflow: hidden;
}
/* border/background/padding yalnız BOŞ yer tutucu (ikon+ipucu metni) içindir —
   gerçek bir fotoğraf yüklenince (alanlar.js gorselSlot'a <img> ekliyor) çerçeve
   kalksın diye fotoğraf tam kutuyu kaplasın istendi. */
.mi-detay__gorsel:has(img) { border: 0; background: none; padding: 0; }
.mi-detay__gorsel svg { width: 32px; height: 32px; opacity: 0.5; }
.mi-detay__gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Hizmetler/Projeler fotoğrafı gerçek görsel yüklenince dikeyde KESİLMESİN
   (bulunan gerçek şikayet: "Basko Sitesi" görseli üstten/alttan kırpılıyordu).
   ÖNCEKİ TUR: kutu sabit 16:9 + max-height bırakılıp yalnız object-fit:contain
   verilmişti (kalite kapısı 1. tur RET'ine karşı en güvenli çözüm) — ama sahibi
   canlı sonucu görünce portre/kare görsellerin bu sabit kutu içinde ÇOK KÜÇÜK
   kaldığını (kutu yüksekliğe göre daraltıyor, genişlik heba oluyor) bildirdi.
   BU TUR (sahibi kararı, kalite kapısı çalıştırılmadı): genişlik eskisi gibi
   %100 (panel genişliği) kalsın, kutu YÜKSEKLİĞİ artık görselin doğal oranına
   göre serbest (aspect-ratio/max-height kaldırıldı) — böylece görsel HEM büyük
   HEM kırpılmadan görünür. Bilinen ödünleşim (bkz. memory
   feedback_gorsel-kutu-sabit-boyut-tasma-olcumu): kutu boyutu artık görsel
   yükleme anına bağlı olduğundan çok uzun portre görsellerde panel scroll
   gerektirebilir (.mi-detay__in zaten overflow-y:auto) ve panel-tasma.js'in
   senkron taşma ölçümü görsel yüklenmeden önce çalışır — bilinçli kabul edilen
   açık, bu turun kapsamı dışında. .mi-detay__gorsel--portre (ekip fotoğrafı)
   kasıtlı kare+cover kalır, bu kuraldan hariç. */
/* SONRAKİ tur (sahibi kararı, öncekini tersine çevirir): genişlik artık
   %100 DEĞİL — sahibi geri bildirimi "fotoğraflar şuanda gereksiz büyümüş
   yatayda, fotoları küçült" (bu ekip fotoğrafları için DEĞİL, Hizmetler/
   Projeler'in bu görseli içindi — ekip fotoğrafı `--portre` olduğundan zaten
   bu kuraldan hariç). max-width + margin-inline:auto ile görsel artık
   panelin tam genişliğini kaplamıyor, ortalanmış ve daha ölçülü bir boyutta. */
.mi-detay__gorsel:has(img):not(.mi-detay__gorsel--portre) {
  aspect-ratio: auto; height: auto; max-height: none; width: auto;
  max-width: min(100%, 420px); margin-inline: auto;
}
.mi-detay__gorsel:has(img):not(.mi-detay__gorsel--portre) img {
  height: auto; object-fit: contain;
}
/* .mi-ekip__detay içinde (kişi kartı inline genişlemesi) yeniden kullanılıyor
   (Hizmetler/Projeler ile AYNI sınıf, tasarım tutarlılığı) ama kişi
   fotoğrafları portre/kare oranındadır — 16:9 + cover yüzü keserdi (kalite
   kapısı 1. tur bulgusu). Kare oran + dar genişlik, .mi-ekip__f'nin
   ızgaradaki oranıyla tutarlı. */
/* Kare (border-radius:0) — sahibi kararı: yuvarlak avatar iptal edildi,
   ekip fotoğrafları artık kapalı ızgarada (.mi-ekip__f) ve detayda AYNI kare
   biçimde. overflow:hidden ŞART: img'in kendi border-radius'u yok (üst kural
   width/height:100%), kırpma konteynerden geliyor. */
.mi-detay__gorsel--portre { aspect-ratio: 1; max-width: 200px; max-height: none; margin-inline: auto; border-radius: 0; overflow: hidden; }
/* max-width 56ch → 68ch → 78ch (sahibi geri bildirimi, iki turda: kenar
   boşlukları fazlaydı) — .mi-detay__in'in genişletilmiş max-width'iyle
   (yukarıda) birlikte metin artık panelin gerçek kenarlarına daha yakın
   oturur. */
.mi-detay__metin { color: var(--mi-ink-soft); font-weight: 300; font-size: clamp(0.92rem, 1.05vh + 0.2vw, 1.04rem); line-height: 1.7; max-width: 78ch; margin-inline: auto; }
.mi-detay__metin p + p { margin-top: 10px; }
/* max-width:none + margin-inline:auto — sahibi geri bildirimi "yazılar orta
   hizadan kaymış": .mi-detay__metin'in KENDİSİ bir <div> (bu resetten muaf)
   ama İÇİNDEKİ paragraflar `{{ kart.detay|linebreaks }}` ile üretilen GERÇEK
   <p> etiketleri — base.css'in genel `p { max-width: 68ch; }` resetinden
   BUNLAR etkileniyor. .mi-detay__metin 56ch/68ch iken ikisi eşit olduğundan
   fark görünmüyordu; 68ch → 78ch genişletmesiyle (yukarıdaki yorum) iç
   paragraflar artık DAHA DAR 68ch'e sıkışıp margin-inline:auto OLMADAN sola
   yaslı kaldı — 78ch'lik .mi-detay__metin kutusunun içinde metin görsel
   olarak SOLA kaymış göründü (asıl şikayet buydu). .mi-detay__kick'teki
   AYNI kalıp: max-width:none ile kırpma iptal edilir, margin-inline:auto
   ile paragraf kendi (artık sınırsız → içeriğin doğal genişliğine göre
   shrink-to-fit olan) kutusu .mi-detay__metin içinde yeniden ortalanır. */
.mi-detay__metin p { max-width: none; margin-inline: auto; }
/* Hakkımızda ekip detayı — sosyal medya ikon-linkleri (LinkedIn/Instagram/
   Twitter/X/Facebook, hangileri doluysa): açıklamanın (.mi-detay__metin)
   ALTINDA, isim artık link OLMADIĞINDAN (sahibi geri bildirimi — bkz.
   anasayfa.html yorumu) profillere giden TEK yol burası. <div> — <p> DEĞİL:
   base.css'in `p { max-width: 68ch; }` resetinden .mi-detay__kick/
   .mi-detay__metin gibi etkilenmesin diye (margin-inline:auto/max-width:none
   ekstra kuralına gerek yok). Açıklama boşsa bile render edilir (kalite
   kapısı bulgusu: sosyal alan(lar) dolu ama detay boş kartlarda profile
   gitmenin TEK yolu buydu — sessizce kaybolmasın). Kutular çerçevesiz,
   yalnız hover'da vurgu rengine geçer — .mi-alan__kapat/.mi-hero__cue'daki
   AYNI minimal ikon-buton deseni; `gap` birden fazla ikon yan yana geldiğinde
   birbirine yapışmasın diye (tek ikonda no-op). */
.mi-detay__sosyal { margin-top: clamp(10px, 1.6vh, 18px); display: flex; justify-content: center; gap: 4px; }
.mi-detay__sosyal-b {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--mi-ink-soft); transition: color var(--mi-dur) var(--mi-ease);
}
.mi-detay__sosyal-b:hover, .mi-detay__sosyal-b:focus-visible { color: var(--mi-accent); }
.mi-detay__sosyal-b svg { width: 19px; height: 19px; }

/* Hakkımızda — ekip kartları (master-detail: bkz. .mi-liste-kutu/.mi-detay
   yorumları, AYNI .mi-alan__ic grid mekaniğini paylaşır — bir kişi seçilince
   `.mi-alan.secili` .mi-alan__yuz/alanlar.js'in Hizmetler/Projeler'de
   yaptığının aynısını yapar: 1fr/0fr'den 1fr/2fr'ye geçer.) */
/* justify-content: safe center — .mi-liste-kutu'daki aynı gerekçe: çok
   kart olduğunda ilk sıradakiler scroll'dan erişilemez kalırdı. */
.mi-ekip-kutu { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; padding: clamp(14px, 2.4vh, 30px) clamp(20px, 2.4vw, 40px); overflow-y: auto; }
/* Kutular arası GERÇEK boşluk, seçili olsun olmasın (sahibi geri bildirimi:
 * "kutular birbirine bitişik, ayrılsınlar") — grid'in paylaşılan üst/sol
 * çizgisi yerine her kutu kendi TAM sınırını taşır (aşağıda .mi-ekip__k),
 * aralarına `gap` girer; bitişik bir tablo değil, her zaman ayrık kutular. */
/* Dikey ölçüler 6 kişilik (3 satır) ızgaraya göre budandı: panel yüksekliği
   `clamp(540px, 80vh, 860px)` ile SINIRLI, ama kart içi vh terimleri panelden
   daha hızlı büyüyordu — 6 kartta içerik panele sığmıyor, panel-tasma.js
   `is-tasma`ya düşüp dikey ortalamayı bırakıyordu (sahibi geri bildirimi:
   "kartlar taşıyor/kayıyor"). clamp'lerin YALNIZ üst sınırını düşürmek
   yetmedi: 1440x900'de değerler zaten orta (vh) terimdeydi, üst sınıra
   dayanmıyordu — bu yüzden vh katsayıları da küçültüldü. */
.mi-ekip { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(6px, 1.4vh, 14px); }
/* `is-tasma` — panel-tasma.js'in JS-güdümlü ikinci garanti katmanı:
   `safe center` zaten taşmada flex-start'a düşer, ama panel her açıldığında/
   öğe her seçildiğinde ESKİ scroll konumu kalıyordu (kullanıcı listeyi/
   açıklamayı 1. öğeden değil ortadan görüyordu — "kayma" şikayeti). Bu sınıf
   scrollTop'u sıfırlayan JS'le birlikte çalışır; .mi-detay için genelde no-op
   (bkz. panel-tasma.js yorumu — .mi-detay__in flex-shrink ile zaten kendi
   kendine sığıyor), diğer ikisi için CSS'in `safe` düşüşünü pekiştirir. */
.mi-liste-kutu.is-tasma, .mi-ekip-kutu.is-tasma, .mi-detay.is-tasma { justify-content: flex-start; }
/* sahibi bulgusu: "kutuların içindekiler dikeyde ortalı değil gibi" —
 * .mi-ekip grid'i varsayılan align-items:stretch ile aynı SATIRDAKİ tüm
 * kartları o satırın en uzun kartına (ör. 2 satırlık unvanlı komşu) eşitliyor,
 * ama kısa içerikli kart flex-start (varsayılan) olduğundan içerik(foto/isim/
 * unvan) üstte kalıp fazladan boşluk ALTTA birikiyordu. justify-content:
 * center bu boşluğu içeriğin ÜSTÜNE/ALTINA eşit dağıtır. */
.mi-ekip__k {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: clamp(5px, 0.9vh, 12px); padding: clamp(11px, 1.9vh, 25px) 16px;
  border: 1px solid var(--mi-line); transition: background-color var(--mi-dur) var(--mi-ease);
}
/* padding-block clamp(8px,1.6vh,22px) → clamp(11px,1.9vh,25px) — sahibi
   kararı: unvanı iki satıra kıran kişiler (ör. "Şehir Plancısı - Kentsel
   Dönüşüm Uzmanı") için kırılmayı ÖNLEMEK değil (kabul edildi, "yapacak
   bir şey yok"), kartın taban (tek satırlık unvanlı kişilerle PAYLAŞILAN)
   dikey boşluğunu hafifçe artırıp iki satırlık unvanın kartı sıkışık
   göstermesini azaltmak. Tüm kartlar (tek/iki satır fark etmeksizin) AYNI
   padding'i paylaştığından tek satırlık unvanlı kartlar da çok az
   büyüyor — bu, ızgaradaki tüm kartların aynı yükseklikte kalması için
   kasıtlı (tek bir kartı özel büyütmek satırdaki diğerleriyle hizasını
   bozardı). */
/* Fotoğraf kartı SEÇER (ekip-detay.js, master-detail) — isim AYRICA
 * linkedin_url doluysa oraya gider (iki ayrı tıklama hedefi kalır). */
.mi-ekip__ac {
  display: flex; flex-direction: column; align-items: center; cursor: pointer;
}
/* Vurgu tıklanabilir ÖĞEYE (.mi-ekip__ac) bağlı, .mi-ekip__k'nin TAMAMINA
 * değil — kart genişledi ama tıklanabilir alan fotoğrafta kaldığından
 * kartın boş bölgesinde hover'da yanlış "burası tıklanabilir" izlenimi
 * vermesin diye (kalite kapısı 1. tur bulgusu). */
.mi-ekip__ac:hover .mi-ekip__f, .mi-ekip__ac:focus-visible .mi-ekip__f { border-color: var(--mi-accent); }
.mi-ekip__f { width: clamp(44px, 6.4vh, 84px); aspect-ratio: 1; border-radius: 0; overflow: hidden; border: 1px solid var(--mi-line); background: var(--mi-accent-soft); position: relative; transition: border-color var(--mi-dur) var(--mi-ease), transform var(--mi-dur) var(--mi-ease); }
/* .mi-detay__gorsel:has(img) yorumundaki AYNI gerekçe (yukarıda): arka plan
   renk yalnız BOŞ yer tutucu (kişi ikonu) içindir — gerçek bir fotoğraf
   yüklenince (ekip kartı ızgarasında) kalksın. Fotoğraf img'i zaten
   position:absolute inset:0 + object-fit:cover ile kutuyu TAM kaplıyor, ama
   şeffaf (alfa kanallı) bir PNG yüklenirse şeffaf bölgelerden CSS arka planı
   sızıp fotoğrafın etrafında gri bir hale/kutu görünümü yaratıyordu (sahibi
   geri bildirimi: "eğer görsel yüklenirse ilk kutularda gözüken arka
   plandaki gri kutu kalksın"). SONRAKİ tur: arka plan kalksa da 1px'lik
   `border` hâlâ görünür bir gri çerçeve bırakıyordu (sahibi geri bildirimi:
   "kişilerin etrafındaki gri çerçeve kalksın") — o da kaldırıldı. Üstteki
   hover/focus kuralı (`border-color`) fotoğrafsız (SVG ikonlu) kartlarda hâlâ
   geçerli; fotoğraflı kartlarda border tamamen yok olduğundan görünür bir
   etkisi kalmıyor — klavye odağı için ayrı bir `outline` aşağıda ekleniyor
   (border'a bağlı olmayan bir erişilebilirlik göstergesi). */
.mi-ekip__f:has(img) { background: none; border: 0; }
.mi-ekip__ac:hover .mi-ekip__f:has(img), .mi-ekip__ac:focus-visible .mi-ekip__f:has(img) { outline: 2px solid var(--mi-accent); outline-offset: 2px; }
.mi-ekip__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mi-ekip__f svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--mi-ink-faint); opacity: 0.6; }
/* line-height gövdeden miras 1.55 idi — tek satırlık isim/unvanda bu, kart
   başına ~8px'lik salt boşluktu (3 satırda ~24px). Ölçülerin vh terimleri
   küçük ekranda clamp tabanına dayandığında sığmayı belirleyen SABİT pay
   burasıydı; 1.3 tek satırda görsel olarak fark ettirmiyor. */
.mi-ekip__a { font-size: clamp(0.96rem, 1.3vh + 0.24vw, 1.2rem); font-weight: 400; line-height: 1.3; }
/* margin-inline: negatif — 2 sütunlu ızgarada uzunca isimler (ör. "Ceyhun
   Dinçer") .mi-ekip__k'nin 16px'lik iç boşluğunda iki satıra kırılıp o
   satırdaki TÜM kartları büyütüyordu (sahibi bulgusu). İsmi kartın kendi
   iç boşluğuna doğru genişletiyor — kartın DIŞ sınırı (border) değişmez,
   yalnız metnin kırılmadan önce kullanabildiği genişlik artar. */
.mi-ekip__a { margin-inline: -10px; }
/* Alt çizgi HER ZAMAN görünür (yalnız hover'a bağlı DEĞİL) — dokunmatikte
 * hover olmadığından, LinkedIn'e gittiği fark edilebilir kalsın diye
 * (kalite kapısı 1. tur bulgusu: link/düz-metin isim renk farkı görsel
 * olarak ayırt edilemiyordu). */
a.mi-ekip__a { text-decoration: underline; text-decoration-color: var(--mi-line-strong); text-underline-offset: 3px; transition: color var(--mi-dur) var(--mi-ease), text-decoration-color var(--mi-dur) var(--mi-ease); }
a.mi-ekip__a:hover, a.mi-ekip__a:focus-visible { color: var(--mi-accent); text-decoration-color: var(--mi-accent); }
/* text-transform:uppercase + letter-spacing:var(--mi-tr-mikro) (0.2em) —
   .mi-detay__kick/.mi-ilet-satir dt gibi kısa etiketler (KİCK, "TELEFON")
   için tasarlanmış "mikro etiket" kalıbıydı; bir kişinin unvanına (ör.
   "Kurucu Ortak") uygulanınca hem tüm büyük harf garip durdu (sahibi geri
   bildirimi) HEM de o kadar geniş harf aralığı Rubik'in normal karakterini
   bozup markanın ana yazı tipi gibi hissettirmiyordu (sahibi geri bildirimi:
   "rubik değil sanki"). Düzeltme: normal harf büyüklüğü + hafif takip —
   font-size hafifçe büyütüldü (0.72rem → 0.78rem) çünkü büyük harfsiz metin
   aynı punto boyutunda gözle daha küçük okunur. */
/* min-height: 2 satır — sahibi bulgusu: aynı .mi-ekip__k, kart SEÇİLİNCE
   (.mi-alan.etkin) daha dar bir sütuna sığdığından (bkz. 'Seçim modu'
   yorumu yukarıda) unvan bazı kişilerde kapalı ızgarada TEK satıra sığarken
   seçiliyken 2 satıra kırılıyordu — içerik/padding aynı kaldığından kart
   yüksekliği iki durumda FARKLI oluyordu ("kapalı halinde de açık halinde
   de dikey yükseklik aynı olsun"). Çözüm kartın kendisinde DEĞİL, unvanda:
   2 satırlık boşluk HER ZAMAN (tek satır olsa bile) ayrılıyor, böylece kart
   yüksekliği metnin kırılıp kırılmadığından bağımsız sabit kalıyor — sahibi
   kararı gereği ("kapalı halinin dikey yüksekliği artabilir") tek satırlık
   unvanlı kartlar biraz büyüyor, 2 satırlık kartlar küçülmüyor. */
.mi-ekip__u { font-size: 0.78rem; letter-spacing: 0.01em; text-transform: none; color: var(--mi-ink-soft); font-weight: 500; line-height: 1.3; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
/* margin-inline: negatif — .mi-ekip__a'daki AYNI düzeltme (bkz. o kural).
   Unvan metni isimden daha uzun olabildiğinden (ör. "Şehir Plancısı - CBS
   Uzmanı") kartın 16px'lik iç boşluğuna ismden daha FAZLA giriyor — yine
   kartın DIŞ sınırı (border) değişmiyor, yalnız metnin kullanabildiği
   genişlik artıyor. */
.mi-ekip__u { margin-inline: -13px; }
/* margin-inline:auto — .mi-detay__kick'teki AYNI gerekçe: bu da bir <p>,
   base.css'in genel `p { max-width: 68ch; }` resetinden aynı şekilde
   sıkışıp auto kenar boşluğu olmadan sola yaslı kalıyordu. */
.mi-ekip-detay__unvan { font-size: 0.8rem; letter-spacing: 0.01em; text-transform: none; color: var(--mi-ink-soft); font-weight: 500; margin-top: -8px; margin-bottom: clamp(12px, 2vh, 22px); margin-inline: auto; }
/* Seçim modu: kart İÇERİĞİ (fotoğraf/isim/unvan) DEĞİŞMEZ — yalnız kutu
 * daha dar bir sütuna sığar (`.mi-alan__ic` grid geçişi) ve seçilen kart
 * hafifçe koyulaşır. Önceki sürümde fotoğraf küçülüp isim/unvan gizleniyordu;
 * boyut+görünürlük aynı anda değişince geçiş sert hissettiriyordu (sahibi
 * geri bildirimi: "isim ve unvan gözükmeye devam etsin, geçiş çok sert") —
 * artık TEK şey değişiyor: zemin rengi (background-color, ucuz/pürüzsüz bir
 * paint geçişi). Tekrar seçili karta tıklamak (ya da paneli kapatıp açmak)
 * eski tam-ızgara görünümüne döner (bkz. ekip-detay.js) — ayrı bir "tümünü
 * göster" kontrolüne gerek kalmadı (sahibi geri bildirimi). */
.mi-ekip__k.acik { background: var(--mi-surface-2); }

/* açık geometri: 12 birim (konum sırası korunur — yalnız genişlik/left değişir) */
.mi-alanlar.acik .mi-alan { width: 8.3333%; }
.mi-alanlar.acik .mi-alan.etkin {
  width: 83.3334%; z-index: 2;
  /* Açık panel — kapalı/hover'ın koyu laciverdinden farklı: tamamen beyaz zemin,
     bu yüzden metin de sırasıyla koyuya (kapalı zeminle simetrik --mi-accent-strong)
     dönüyor — beyaz zemin üstünde beyaz yazı okunmaz olurdu. */
  background: var(--mi-surface); color: var(--mi-accent-strong);
}
.mi-alanlar.acik .mi-alan.etkin::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--mi-accent); z-index: 8;
}
.mi-alanlar.acik .mi-alan.etkin:not([data-s="2"])::after { box-shadow: inset -1px 0 0 var(--mi-line); }
.mi-alanlar.acik.etkin-0 .mi-alan[data-s="0"] { left: 0; }
.mi-alanlar.acik.etkin-0 .mi-alan[data-s="1"] { left: 83.3334%; }
.mi-alanlar.acik.etkin-0 .mi-alan[data-s="2"] { left: 91.6667%; }
.mi-alanlar.acik.etkin-1 .mi-alan[data-s="0"] { left: 0; }
.mi-alanlar.acik.etkin-1 .mi-alan[data-s="1"] { left: 8.3333%; }
.mi-alanlar.acik.etkin-1 .mi-alan[data-s="2"] { left: 91.6667%; }
.mi-alanlar.acik.etkin-2 .mi-alan[data-s="0"] { left: 0; }
.mi-alanlar.acik.etkin-2 .mi-alan[data-s="1"] { left: 8.3333%; }
.mi-alanlar.acik.etkin-2 .mi-alan[data-s="2"] { left: 16.6667%; }
.mi-alanlar.acik .mi-alan:not(.etkin) .mi-alan__ad {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(0.92rem, 1.3vh + 0.28vw, 1.24rem); letter-spacing: 0.02em;
}
.mi-alanlar.acik .mi-alan:not(.etkin):hover .mi-alan__ad { transform: rotate(180deg) translateY(2px); }

/* ── Bölüm başlığı ortak yardımcı + harita ────────────────────────────────── */
.mi-section__lead { color: var(--mi-ink-soft); font-weight: 300; max-width: 48ch; margin-top: 20px; }
/* isolation:isolate — .mi-harita'yı kendi yığılma (stacking) bağlamı yapar.
   Bunsuz Leaflet'in kendi kontrolleri (z-index 800-1000, bkz. leaflet.css) ve
   .mi-harita__bilgi (z-index:1000) kök bağlamda karşılaştırılıyordu; sayfa
   kaydırılınca --mi-z-nav:100 olan sabit navbar'ın ÜSTÜNE çiziliyorlardı —
   navbar'ın üzerinden harita/kontrol görünmesi ("navbar şeffaflaşıyor" diye
   bildirilen, bulunan gerçek hata) buydu. */
.mi-harita { position: relative; isolation: isolate; width: 100%; aspect-ratio: 4 / 3; border: 1px solid var(--mi-line); background: var(--mi-accent-soft); overflow: hidden; }
.mi-harita__tuval { position: absolute; inset: 0; }
/* Uydu görüntüsünün ham hali koyu/doygundu (sahibi geri bildirimi). Tonlama
   YALNIZ tile katmanına (.leaflet-tile-pane) uygulanıyor — işaret pini ayrı
   bir panede (.leaflet-marker-pane) olduğundan etkilenmez, harita.js:97'deki
   "pin belirgin kalsın" gerekçesi korunur. contrast<1 bilinçli: brightness
   ÇARPAR, bu yüzden asıl koyu bölgeyi (denizi, ~rgb(20,40,40)) neredeyse hiç
   açmıyordu; siyahları asıl kaldıran kaldıraç contrast. */
.mi-harita .leaflet-tile-pane { filter: brightness(1.1) saturate(0.85) contrast(0.9); }
/* Leaflet'in .leaflet-div-icon varsayılanı (beyaz zemin + gri çerçeve, düz
   metin divIcon'lar için düşünülmüş) özel SVG işaretimizi bir kutu içine
   hapsediyordu — nötrleniyor, yalnız inline SVG görünsün. */
.mi-harita .leaflet-div-icon.mi-harita__isaret { background: transparent; border: 0; }
/* Leaflet'in vendor CSS'i kendi font/renk varsayılanını dayatıyor (Helvetica
   Neue + parlak mavi #0078A8 link rengi) — "yazı tipi sadece Rubik" ve
   lacivert-vurgu kuralları (CLAUDE.md) haritanın kendi kontrol/atıf metnine
   de uygulanıyor, MapLibre'nin kendi kontrolleri gibi istisna değil. */
.mi-harita .leaflet-container,
.mi-harita .leaflet-control { font-family: var(--mi-font); }
.mi-harita .leaflet-container a { color: var(--mi-accent); }
/* Atıf metni artık her zaman açık durmuyor — küçük bir "i" düğmesi arkasında
   (bkz. harita.js), kaba/işgalci durmasın diye (sahibi isteği). Düğme
   --mi-* token'larıyla, keskin köşe, klavyeyle erişilebilir. */
.mi-harita__bilgi { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; align-items: center; }
.mi-harita__bilgi-dugme { width: 26px; height: 26px; border: 1px solid var(--mi-line); background: var(--mi-surface); color: var(--mi-ink-soft); font-family: var(--mi-font); font-size: 0.78rem; font-weight: 500; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mi-harita__bilgi-dugme:hover,
.mi-harita__bilgi-dugme[aria-expanded="true"] { color: var(--mi-ink); border-color: var(--mi-accent); }
.mi-harita__bilgi-metin { position: absolute; top: 0; right: 30px; max-width: 220px; padding: 6px 10px; background: var(--mi-surface); border: 1px solid var(--mi-line); font-size: 0.7rem; line-height: 1.5; color: var(--mi-ink-soft); white-space: nowrap; display: none; }
.mi-harita__bilgi-metin a { color: var(--mi-accent); }
.mi-harita__bilgi-dugme[aria-expanded="true"] + .mi-harita__bilgi-metin { display: block; }

/* ── İLETİŞİM sayfası ──────────────────────────────────────────────────── */
/* `.mi-hero`nun AYNI kalıbı: `padding-top: var(--mi-nav-h)` sabit navbar'ı
   temizlemek için EKLENİYOR, `min-height`ten DÜŞÜLMÜYOR — box-sizing:
   border-box altında ikisi birden yapılırsa (`100svh - nav-h` + o kadar
   padding) bölüm gerçek 100svh'ten navbar yüksekliği kadar KISA kalır,
   footer erken başlar (bulunan gerçek şikayet). */
.mi-ilet-hero { min-height: 100svh; display: flex; align-items: center; padding-top: var(--mi-nav-h); position: relative; overflow: hidden; background: var(--mi-surface); }
.mi-ilet-grid { display: grid; grid-template-columns: 0.9fr minmax(380px, 1.3fr); gap: clamp(30px, 4.5vw, 72px); align-items: center; width: 100%; }
.mi-ilet-baslik { font-size: var(--mi-t-h2); max-width: 16ch; }
.mi-ilet-liste { margin-top: clamp(24px, 4vh, 44px); border-top: 1px solid var(--mi-line); }
.mi-ilet-satir { display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2vw, 30px); padding-block: clamp(12px, 1.9vh, 20px); border-bottom: 1px solid var(--mi-line); align-items: baseline; }
.mi-ilet-satir:last-of-type { border-bottom: 0; }
.mi-ilet-satir dt { font-size: var(--mi-t-mikro); letter-spacing: var(--mi-tr-mikro); text-transform: uppercase; color: var(--mi-ink-soft); font-weight: 500; min-width: 88px; }
.mi-ilet-satir dd { font-size: clamp(1rem, 1.3vh + 0.3vw, 1.24rem); font-weight: 300; }
.mi-ilet-satir dd a { position: relative; }
.mi-ilet-satir dd a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--mi-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--mi-dur) var(--mi-ease);
}
.mi-ilet-satir dd a:hover::after { transform: scaleX(1); }

/* ── SSS sayfası ───────────────────────────────────────────────────────── */
.mi-sss-bas { background: var(--mi-hero-bg); padding-block: calc(var(--mi-nav-h) + clamp(40px, 7vh, 86px)) clamp(34px, 6vh, 72px); border-bottom: 1px solid var(--mi-line); }
.mi-sss-intro { max-width: 44rem; }
.mi-sss-baslik { font-size: var(--mi-t-h2); max-width: 18ch; margin-top: 16px; }
.mi-sss-govde { padding-block: clamp(20px, 4vh, 48px) clamp(56px, 9.5vh, 110px); }
.mi-sss { border-top: 1px solid var(--mi-line); }
.mi-sss__s { border-bottom: 1px solid var(--mi-line); }
.mi-sss__b { display: flex; align-items: baseline; gap: 16px; width: 100%; text-align: left; padding: clamp(16px, 2.4vh, 24px) 2px; font-size: clamp(1rem, 1.2vh + 0.3vw, 1.24rem); font-weight: 400; }
.mi-sss__b .mi-n { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--mi-accent); font-weight: 600; min-width: 26px; }
.mi-sss__b .mi-ok { margin-left: auto; color: var(--mi-accent); transition: transform var(--mi-dur) var(--mi-ease); }
.mi-sss__s.acik .mi-sss__b .mi-ok { transform: rotate(90deg); }
/* grid-template-rows 0fr/1fr: içerik uzunluğu kadar açılır (sabit max-height
 * tavanı YOK — SSS cevabı panelden ne kadar uzun girilirse girilsin
 * kırpılmaz, içerik-kaybı-güvenli). visibility: kapalıyken erişilebilirlik
 * ağacından TAMAMEN çıkar (mi-alan__ac ile aynı desen) — aria-expanded="false"
 * ile gerçek görünürlük artık tutarlı; ekran okuyucu/Ctrl+F kapalı cevabı
 * görmez. */
.mi-sss__c {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.5s var(--mi-ease), visibility 0s linear 0.5s;
}
.mi-sss__s.acik .mi-sss__c {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows 0.5s var(--mi-ease), visibility 0s linear;
}
/* Dolgu (padding) BİLEREK .mi-sss__c-in'de değil, iç .mi-sss__c-metin'de:
 * .mi-sss__c-in grid'in doğrudan öğesi ve `grid-template-rows:0fr` onu
 * gerçekten SIFIRA indirebilsin diye kendi padding'i olmamalı — border-box
 * altında bir kutu kendi padding'inin altına inemez, dolgu üstte kalsaydı
 * kapalı satırda ~24px ölü boşluk kalırdı (bir kere oldu, ölçülüp
 * yakalandı). */
.mi-sss__c-in { overflow: hidden; }
.mi-sss__c-metin { padding: 0 0 clamp(18px, 2.6vh, 26px) 42px; color: var(--mi-ink-soft); font-weight: 300; line-height: 1.75; max-width: 70ch; }
.mi-sss__c-metin p + p { margin-top: 12px; }

/* ── ALT BİLGİ — beyaz, marka (sabit sol) + başlıksız düz bağlantı sütunları ── */
/* Logo (marka) ~%17 küçüldü, bıraktığı boşluk footer'ın genel dolgusuna
   eklendi (madde 3, DEVIR-anasayfa.md) — sütunların davranışı (otomatik
   ortalanma, 5'erli auto-wrap, .mi-footer__baglantilar/__col) AYNEN kalır,
   yalnız marka boyutu ve dış dolgu (--mi-space-*) değişti.
   Üst/alt dolgu sonradan daraltıldı (sahibi geri bildirimi): üst dolgu
   logonun ÜSTÜNDEKİ boşluğu, alt dolgu ("2026 Master Planlama..." satırının
   ALTINDAKİ boşluğu belirgin fazlaydı — alt dolgu özellikle sabit
   --mi-space-8 (64px) idi, oranla en büyük/gereksiz boşluktu. */
.mi-footer { background: var(--mi-surface); border-top: 1px solid var(--mi-line); padding-block: clamp(40px, 5.5vh, 72px) var(--mi-space-5); }
/* Marka (logo) üstte, bağlantı sütunları grubu altta — İKİSİ de kabın
   yatayında tam ortalı (önceki sürümde marka sabit SOLDA, sütun grubu
   kalan genişlik içinde kendi içinde ortalıydı — "logo + sütun grubu"
   ikilisi bir BÜTÜN olarak asla ortalanmıyordu). `.mi-footer__baglantilar`'ın
   kendi `flex:1 1 0%`'i (yatay akışta kalan boşluğu doldurmak içindi)
   BİLEREK kaldırıldı: dikey akışta böyle bir "kalan genişlik" yok, kendi
   içeriğine göre daralıp (`justify-content:center` iki sütunu yan yana
   tutar) üst kabın `align-items:center`'ıyla ortalanıyor. Üstteki
   Hizmetlerimiz/Projelerimiz/Hakkımızda şeridi ve altındaki ayraç çizgisi
   (.mi-alanlar) bu değişikliğin DIŞINDA — ayrı bölüm, dokunulmadı. Bu gap
   logonun ALTINDAKİ boşluğu belirler (marka bloğu ile sütun grubu arası) —
   sonradan daraltıldı (sahibi geri bildirimi). */
.mi-footer__grid { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 40px); }
.mi-footer__brand { display: flex; flex-direction: column; align-items: center; width: fit-content; flex: 0 0 auto; }
/* aspect-ratio — .mi-mast-logo .mi-logo-mark'taki AYNI CLS gerekçesi (mobil turu). */
.mi-footer__brand .mi-logo-mark { height: clamp(70px, 8vh, 100px); aspect-ratio: 504 / 617; }
.mi-footer__brand .mi-logo-word { height: clamp(25px, 2.9vh, 33px); margin-top: var(--mi-space-3); aspect-ratio: 1280 / 159; }
.mi-footer__baglantilar {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(var(--mi-space-6), 6vw, var(--mi-space-9));
}
/* Sütun başlığı YOK — FOOTER_SUTUNLARI zaten 5'erli önceden dilinmiş
   (context_processors.py::footer_menu), sütun kaç bağlantı taşırsa taşısın
   genişliği içeriğine göre kendini ayarlar (sabit 180px kısıtı yok). */
/* text-align:center + bağlantıların `width: fit-content`'inin KALDIRILMASI
   birlikte çalışır (sahibi geri bildirimi: "sütun blok olarak ortalı ama
   içindeki satırlar hâlâ sola yaslı"): fit-content her <a>'yı kendi metnine
   kadar daraltıyordu, blok kutu sütunun soluna oturuyor ve text-align'ın
   ortalayacağı artık boşluk kalmıyordu. Tam genişlikte blok + text-align ile
   her satır kendi sütun genişliği içinde ortalanır. */
.mi-footer__col { flex: 0 0 auto; text-align: center; }
.mi-footer__col a { display: block; padding-block: var(--mi-space-1); font-size: 0.92rem; font-weight: 300; transition: color var(--mi-dur) var(--mi-ease); }
.mi-footer__col a:hover { color: var(--mi-accent); }
/* margin-top: bağlantı sütunlarının ALTINDAKİ boşluk — sonradan daraltıldı
   (sahibi geri bildirimi). */
.mi-footer__bottom { margin-top: clamp(18px, 2.5vh, 32px); padding-top: 24px; border-top: 1px solid var(--mi-line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--mi-ink-soft); font-size: 0.78rem; font-weight: 300; }
.mi-footer__bottom a { border-bottom: 1px solid transparent; transition: border-color var(--mi-dur) var(--mi-ease); }
.mi-footer__bottom a:hover { border-bottom-color: var(--mi-accent); }

/* ── Giriş animasyonu (reveal.js → .reveal-active + .is-revealed) ────────── */
.reveal-active .mi-gir {
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--mi-dur-slow) var(--mi-ease), transform var(--mi-dur-slow) var(--mi-ease);
}
.reveal-active .mi-gir.is-revealed { opacity: 1; transform: none; }
.reveal-active .mi-gir[data-g="1"] { transition-delay: 0.11s; }
.reveal-active .mi-gir[data-g="2"] { transition-delay: 0.22s; }
.reveal-active .mi-gir[data-g="3"] { transition-delay: 0.33s; }
.reveal-active .mi-gir[data-g="4"] { transition-delay: 0.44s; }

/* ── Duyarlı ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .mi-hero__in { max-width: 100%; }
  .mi-ilet-grid { grid-template-columns: 1fr; gap: 36px; }
  /* Marka bloğu kendi satırında: bu genişlikte marka + sütun grubu yan yana
     rahat sığmıyor (bulunan gerçek hata) — marka üstte, bağlantı grubu kendi
     genişliğinde ortalı altta. */
  .mi-footer__grid { flex-direction: column; align-items: center; gap: 28px; }
  .mi-footer__baglantilar { width: 100%; }
  .mi-alan.secili .mi-alan__ic { grid-template-columns: 1fr 1.35fr; }
}
@media (max-width: 860px) {
  /* Masthead — sahibi isteği: "Ana Sayfa" mobilde artık hamburger'ın ARKASINA
     gizlenmiyor, İletişim gibi HER ZAMAN görünür soldan duruyor. `.mi-mast-nav`
     bu kırılımda TEK link taşıyordu (Ana Sayfa — İletişim/Panel/Çıkış zaten
     ayrı .mi-mast-right'ta, hep görünürdü) — tek linki bir açılır menünün
     arkasına saklamanın bir gerekçesi yoktu (önceki turun bulgusu: bu yüzden
     .mi-mast-nav'ı akıştan çıkarmak logoyu da soluyordu, bkz. git geçmişi).
     Bu yüzden dar kırılımda ARTIK HİÇBİR ŞEY override edilmiyor: base kuralın
     grid şablonu (1fr auto 1fr) + `.mi-mast-nav`ın normal akıştaki hâli
     masaüstüyle AYNI — yalnız `--mi-gutter-site`/`clamp()` ölçüleri zaten
     dar ekranda kendiliğinden küçülüyor. `.mi-mast-burger` base'teki
     `display:none`de kalır (artık açılır bir menü yok, dokunulacak bir şey
     yok) — site-nav.js hâlâ dinleyici bağlıyor ama görünmez/erişilemez
     butonda no-op, zararsız. */
  .mi-mast-logo--devir { opacity: 1; transform: none; pointer-events: auto; }
  .mi-hero__mark { top: calc(34% - var(--mi-space-6)); }
  /* Hero'nun arkasında sürekli çizilen hareketli topografya konturu (canvas,
     atmos-topo.js) SADECE mobilde kaldırılıyor (sahibi isteği — masaüstünde
     dokunulmadı). display:none burada CSS tarafı; atmos-topo.js de bu
     kırılımda canvas'ı hiç boyamıyor/rAF döngüsünü hiç başlatmıyor (bkz. o
     dosyanın `dar` kontrolü) — yalnız görsel gizleme YETMEZDİ, döngü CSS'ten
     habersiz sonsuza dek pil/CPU tüketmeye devam ederdi. */
  .mi-topo-katman { display: none; }
  .mi-alanlar, .mi-alanlar.acik { height: auto; overflow: visible; }
  .mi-alan { position: relative; left: auto !important; width: 100% !important; height: auto !important; transition: background var(--mi-dur) var(--mi-ease); }
  .mi-alan::after { box-shadow: inset 0 -1px 0 var(--mi-on-dark); }
  .mi-alanlar.acik .mi-alan.etkin::after { box-shadow: inset 0 -1px 0 var(--mi-line); }
  .mi-alan__yuz { position: relative; inset: auto; min-height: 22vh; padding: 30px 18px; }
  .mi-alanlar.acik .mi-alan:not(.etkin) .mi-alan__ad { writing-mode: horizontal-tb; transform: none; }
  .mi-alanlar.acik .mi-alan.etkin .mi-alan__yuz { position: relative; opacity: 1; visibility: visible; transform: none; min-height: 0; padding: 26px 18px 4px; }
  .mi-alan__ac { position: relative; inset: auto; height: 0; overflow: hidden; opacity: 0; visibility: hidden; }
  .mi-alanlar.acik .mi-alan.etkin .mi-alan__ac { height: auto; overflow: visible; }
  .mi-alan__ic, .mi-alan.secili .mi-alan__ic { grid-template-columns: 1fr !important; }
  .mi-liste-kutu { overflow: visible; }
  .mi-detay { border-left: 0; border-top: 1px solid var(--mi-line); opacity: 1; transform: none; }
  /* GERÇEK KÖK NEDEN (sahibi geri bildirimi, ekran videosuyla doğrulandı —
   * `scrollIntoView` çift `requestAnimationFrame` düzeltmesi bunu ÇÖZMEDİ,
   * çünkü sorun zamanlama değil KALICI bir CSS durumuydu): `.mi-detay__in`
   * (ve `.mi-ekip-kutu`) masaüstünde `.mi-detay`nin SABİT yüksekliğine göre
   * kendi içinde kayan bir kutu — bunun için `overflow-y:auto` +
   * `overscroll-behavior:contain` taşıyor (kurumsal.css'in yukarısında,
   * bu media query'nin DIŞINDA — .mi-detay__in/.mi-ekip-kutu kuralları).
   * Bu dar kırılımda `.mi-alan`/`.mi-alanlar` zaten `height:auto` (yukarıda)
   * — panel artık SAYFA AKIŞINDA, kendi içinde ayrı bir kaydırma kutusuna
   * hiç gerek yok. Ama `.mi-detay__in`/`.mi-ekip-kutu` BURADA ez İLMEMİŞTİ:
   * `overflow-y:auto` üzerlerinde asılı kaldığından Android Chrome bu
   * elemanları HÂLÂ bağımsız bir dokunma-kaydırma kapsayıcısı sayıyor —
   * `overscroll-behavior:contain` da (asıl amacı: taşkın kaydırmanın SAYFAYA
   * SIÇRAMASINI önlemek) bu kapsayıcıda kaydıracak bir şey OLMASA BİLE
   * dokunma jestini kendine hapsedip sayfaya devretmiyor (tek parmak orada
   * "takılı" kalıyor — iki parmak farklı bir jest tanıyıcıdan geçtiği için
   * etkilenmiyordu, iOS/WebKit aynı sınırda daha müsamahakâr). Çözüm:
   * `.mi-liste-kutu`daki AYNI desen — bu kırılımda ikisinin de kendi
   * kaydırmasını tamamen kapatmak. */
  .mi-detay__in, .mi-ekip-kutu { overflow-y: visible; overscroll-behavior: auto; }
  .mi-alan:not(.secili) .mi-detay { display: none; }
  .mi-ekip { grid-template-columns: 1fr; }
  /* Dar genişlikte sütunlar da alt alta yığılır — başlıksız olduğu için görsel
     sonuç TEK akan liste (sütun sınırı zaten görünmüyordu). */
  .mi-footer__baglantilar { flex-direction: column; align-items: center; gap: 4px; }
  .mi-footer__col { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-active .mi-gir { opacity: 1 !important; transform: none !important; }
  .mi-hero__cue .mi-ok::after { animation: none !important; }
}

/* ── GİRİŞ sayfası — yaparsa.com kapısı ──────────────────────────────────────
   Anasayfa diliyle aynı: hero'nun açık mavi zemini + kontur katmanı, keskin
   köşe, saç teli ayraç, tek lacivert aksan. Gölge/blur ile kutulama YOK —
   form paneli yalnızca beyaz zemin + 1px sınır (.mi-harita ile aynı idiom).
   Sayfadaki tek bölüm olduğu için tam yükseklik; anasayfanın "yalnız hero
   100svh" ritmini bozmaz (o kural anasayfa içindir). */
.mi-giris {
  position: relative; overflow: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  background: var(--mi-hero-bg);
}
.mi-giris__grid {
  position: relative; z-index: 2; width: 100%;
  display: grid; grid-template-columns: 1fr minmax(310px, 0.68fr);
  gap: clamp(34px, 6vw, 96px); align-items: center;
  padding-block: clamp(40px, 7vh, 92px);
}

/* Marka sütunu */
.mi-giris__word { height: clamp(58px, 7.6vh, 88px); width: auto; display: block; }
.mi-giris__rule {
  display: block; width: clamp(36px, 5.2vh, 68px); height: 1px;
  background: var(--mi-accent); opacity: 0.5;
  margin-block: clamp(20px, 3.4vh, 34px);
}
.mi-giris h1 {
  font-size: var(--mi-t-h2); font-weight: 300;
  letter-spacing: var(--mi-track-tight); max-width: 14ch;
}
.mi-giris h1 b { font-weight: 600; color: var(--mi-accent); }
.mi-giris__lead {
  color: var(--mi-ink-soft); font-weight: 300; max-width: 46ch;
  margin-top: 18px; line-height: var(--mi-lh-relaxed);
}

/* Form paneli */
.mi-giris__panel {
  background: var(--mi-surface); border: 1px solid var(--mi-line);
  padding: clamp(26px, 3.4vw, 46px);
}
.mi-giris__panel .mi-kicker { margin-bottom: clamp(18px, 2.6vh, 26px); }
.mi-giris__panel .mi-field { margin-bottom: var(--mi-space-5); }
.mi-giris__btn { width: 100%; margin-top: var(--mi-space-2); }
.mi-giris__not {
  margin-top: clamp(18px, 2.6vh, 26px); padding-top: clamp(16px, 2.2vh, 22px);
  border-top: 1px solid var(--mi-line);
  color: var(--mi-ink-soft); font-size: 0.8rem; font-weight: 300; line-height: 1.65;
}
.mi-giris__not a { color: var(--mi-accent); border-bottom: 1px solid transparent; transition: border-color var(--mi-dur) var(--mi-ease); }
.mi-giris__not a:hover { border-bottom-color: var(--mi-accent); }
.mi-giris__link-btn { color: var(--mi-accent); border-bottom: 1px solid transparent; transition: border-color var(--mi-dur) var(--mi-ease); cursor: pointer; }
.mi-giris__link-btn:hover { border-bottom-color: var(--mi-accent); }

/* Kayıt — Tur A: OTP kod alanı (geniş harf aralığı, ortalı) + KVKK onay satırı. */
.mi-giris__kod { text-align: center; letter-spacing: 0.6em; font-size: 1.3rem; padding-left: 0.6em; }
.mi-giris__onay {
  display: flex; align-items: flex-start; gap: 10px;
  margin: var(--mi-space-2) 0 var(--mi-space-5);
  font-size: 0.8rem; font-weight: 300; color: var(--mi-ink-soft); line-height: 1.5;
}
.mi-giris__onay input { margin-top: 3px; flex-shrink: 0; accent-color: var(--mi-accent); }
.mi-giris__onay a { color: var(--mi-accent); }

@media (max-width: 1000px) {
  .mi-giris__grid { grid-template-columns: 1fr; gap: clamp(28px, 5vh, 46px); }
  .mi-giris { min-height: 0; padding-block: 0 clamp(40px, 7vh, 80px); }
}

/* Giriş sayfası — Tur 2 (sahibi kararı, 2026-08-25): iki sütunlu marka/panel
   düzeni yerine kutu sayfanın tam merkezinde; "yaparsa.com" kelime markası
   kutunun DIŞINDA, üstünde (eski "by Master Planlama" alt yazısı bu sayfada
   YOK — panel_topbar.html'deki .mi-ptopbrand ile aynı metin deseni). Yalnız
   .mi-giris--merkezi taşıyan sayfa(lar) etkilenir; diğer accounts/ ekranları
   (kayıt, şifre sıfırlama vb.) eski .mi-giris__grid iki sütunlu düzenini ve
   .mi-giris__panel'in orijinal dolgusunu korur.
   Tur 3 (sahibi kararı, 2026-08-25): masaüstünde kutu genişliği 420→630px
   (×1.5) büyütüldü; dikey yoğunluk biraz azaltıldı (panel dolgusu + alan/not
   aralıkları kısıldı) — yalnız BU sayfaya özel, .mi-giris__panel'in paylaşılan
   temel kuralı (arka plan/kenarlık) DEĞİŞMEDİ. */
.mi-giris--merkezi .mi-giris__ortala {
  position: relative; z-index: 2; width: 100%;
  display: flex; justify-content: center;
  padding-block: clamp(32px, 6vh, 76px);
}
.mi-giris--merkezi .mi-giris__ortala-icerik {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 630px;
}
.mi-giris--merkezi .mi-giris__panel {
  width: 100%;
  padding: clamp(20px, 2.6vw, 34px);
}
.mi-giris--merkezi .mi-giris__panel .mi-kicker { margin-bottom: clamp(14px, 2vh, 20px); }
.mi-giris--merkezi .mi-giris__panel .mi-field { margin-bottom: var(--mi-space-4); }
.mi-giris--merkezi .mi-giris__not {
  margin-top: clamp(14px, 2vh, 20px); padding-top: clamp(12px, 1.6vh, 16px);
}
.mi-giris__panelmarka {
  display: block; text-align: center;
  margin-bottom: clamp(22px, 3.4vh, 34px);
  font-size: var(--mi-fs-h1); font-weight: var(--mi-fw-medium);
  letter-spacing: var(--mi-track-tight); color: var(--mi-ink);
}
.mi-giris__panelmarka-dot { color: var(--mi-accent); }

/* Bağımsız giriş sayfasının kendi alt şeridi (kurumsal footer kullanılmıyor) */
.mi-giris__alt {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: clamp(20px, 3vh, 34px);
  color: var(--mi-ink); font-size: 0.78rem; font-weight: 400;
}
.mi-giris__geri { color: var(--mi-ink); display: inline-flex; align-items: center; gap: 8px; transition: color var(--mi-dur) var(--mi-ease); }
.mi-giris__geri:hover { color: var(--mi-accent); }
.mi-giris__geri span { transition: transform var(--mi-dur) var(--mi-ease); }
.mi-giris__geri:hover span { transform: translateX(-3px); }