/*
 * 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). Tek koyu blok: sayaç bandı. 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; }
.mi-mast-logo .mi-logo-mark { height: 34px; width: auto; }
.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); }
.mi-hero__mark {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.8vh, 32px);
  pointer-events: none; will-change: opacity, transform;
}
.mi-hero__mark .mi-logo-mark { height: clamp(96px, 16vh, 190px); }
.mi-hero__mark .mi-logo-word { height: clamp(24px, 3.8vh, 46px); }
.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-block: clamp(30px, 7vh, 84px); }
.mi-hero__in { max-width: min(46rem, 62vw); }
.mi-hero h1 {
  font-weight: 300; font-size: var(--mi-t-hero); line-height: 1.05; max-width: 22ch;
  margin: clamp(14px, 2.2vh, 24px) 0 clamp(14px, 2.2vh, 22px);
}
.mi-hero h1 b { font-weight: 600; color: var(--mi-accent); }
.mi-hero__lead {
  font-weight: 300; color: var(--mi-ink-soft); max-width: 48ch;
  font-size: clamp(1rem, 1.4vh + 0.36vw, 1.22rem);
}
.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;
  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 — daraltılmış band, 12 birim ══════════════════════════ */
.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: clamp(330px, 50vh, 540px); transition: height 0.68s var(--mi-ease-panel);
}
.mi-alanlar.acik { height: clamp(540px, 80vh, 860px); }
.mi-alan {
  position: absolute; top: 0; height: 100%; overflow: hidden; background: var(--mi-surface);
  transition: left 0.68s var(--mi-ease-panel), width 0.68s var(--mi-ease-panel), background 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-line);
}
.mi-alan[data-s="2"]::after { box-shadow: none; }
.mi-alan:hover { background: var(--mi-tint); }

.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); color: var(--mi-accent); }

.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; }

.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-width: 0; display: flex; flex-direction: column; justify-content: 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); }
.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), opacity var(--mi-dur) var(--mi-ease),
              font-size var(--mi-dur) var(--mi-ease), padding-left 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 { padding-left: 8px; }
.mi-oge:hover .mi-oge__ok { opacity: 0.65; transform: none; }
.mi-liste.secim-var .mi-oge { opacity: 0.4; font-size: clamp(0.86rem, 0.95vh + 0.24vw, 1.06rem); }
.mi-liste.secim-var .mi-oge:hover { opacity: 0.72; }
.mi-liste.secim-var .mi-oge.acik { opacity: 1; font-weight: 500; padding-left: 12px; font-size: clamp(0.98rem, 1.2vh + 0.32vw, 1.32rem); }
.mi-oge.acik { border-bottom-color: var(--mi-accent); }
.mi-oge.acik .mi-oge__ok { opacity: 1; transform: none; }

.mi-detay {
  min-width: 0; position: relative; overflow: hidden; border-left: 1px solid var(--mi-line);
  display: flex; flex-direction: column; justify-content: 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; }
.mi-detay__in {
  padding: clamp(16px, 2.8vh, 38px) clamp(20px, 2.6vw, 48px); max-width: 44rem;
  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 {
  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;
}
.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;
}
.mi-detay__gorsel svg { width: 32px; height: 32px; opacity: 0.5; }
.mi-detay__gorsel img { width: 100%; height: 100%; object-fit: cover; }
.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: 56ch; margin-inline: auto; }
.mi-detay__metin p + p { margin-top: 10px; }
.mi-detay__not { margin-top: clamp(12px, 2vh, 22px); padding-top: 12px; border-top: 1px solid var(--mi-line); color: var(--mi-ink-soft); font-size: 0.72rem; line-height: 1.55; }

/* Hakkımızda — ekip kartları */
.mi-ekip-kutu { grid-column: 1 / -1; display: flex; flex-direction: column; justify-content: center; padding: clamp(14px, 2.4vh, 30px) clamp(20px, 2.4vw, 40px); overflow-y: auto; }
.mi-ekip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--mi-line); border-left: 1px solid var(--mi-line); }
.mi-ekip__k {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: clamp(8px, 1.4vh, 16px); padding: clamp(16px, 3vh, 38px) 16px;
  border-right: 1px solid var(--mi-line); border-bottom: 1px solid var(--mi-line);
  transition: background var(--mi-dur) var(--mi-ease);
}
.mi-ekip__k:not(.mi-ekip__k--pasif):hover { background: var(--mi-tint); }
.mi-ekip__k--pasif { cursor: default; }
/* tiklama_davranisi="aciklama": <details>/<summary> — yerel disclosure,
 * .mi-ekip__k'nin kendisi flex-column kalır (summary + p dikey istifler).
 * align-self:stretch ŞART: yoksa summary içeriğine göre büzülür (tıklanabilir/
 * hover alanı kartın tamamı yerine iç şeride iner — ölçülüp yakalandı).
 * Dolgu (padding) BİLEREK details.mi-ekip__k'de değil, summary'de: summary
 * .mi-ekip__k'nin İÇİNDE bir alt-öğe olduğu için dış kutunun padding'i
 * summary'nin tıklanabilir/hover alanına dahil OLMAZ. Padding summary'ye
 * taşınınca summary'nin KENDİ border-box'ı GENİŞLİKTE kartın tamamını kaplar
 * (ölçülüp doğrulandı: 371px summary ~= 372px details).
 * gap:0 + margin-top ŞART (YÜKSEKLİK için, ayrı bir hata): kapalıyken bile
 * tarayıcının dahili `::details-content` sarmalayıcısı flex ÖĞESİ olarak
 * sayılıyor — kendi içeriği 0'a çökse de üst kutunun flex `gap`i onunla
 * summary arasına YİNE DE boşluk ekliyor (ölçülüp yakalandı: 26px ölü şerit,
 * clamp(8px,1.4vh,16px) gap değerine denk). `margin-top` bunun tersine .mi-
 * ekip__aciklama'nın KENDİ kutusunun parçası olduğu için details kapanınca
 * o da 0'a çöküyor (doğrulandı: gap:0 + margin-top sonrası details/summary
 * yükseklik farkı yalnız 1px kenarlık). */
details.mi-ekip__k { padding: 0; gap: 0; }
details.mi-ekip__k summary {
  /* gap DEĞERİ doğrudan yazılıyor, `inherit` DEĞİL: üst .mi-ekip__k'nin
   * hesaplanmış gap'i (yukarıda) bilerek 0 — inherit onu miras alıp icon/
   * ad/unvan arasını da 0'a düşürürdü (ölçülüp yakalandı: <a>/<div>
   * varyantlarında 12.6px, details'te 0px). */
  display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 16px);
  align-self: stretch; padding: clamp(16px, 3vh, 38px) 16px; cursor: pointer; list-style: none;
}
details.mi-ekip__k summary::-webkit-details-marker { display: none; }
/* Yerel disclosure ok/üçgen işareti list-style:none ile bastırıldığı için
 * görsel bir affordans kalmıyordu (yalnız cursor:pointer — .mi-sss__b .mi-ok
 * ile aynı dil: kapalı → sağa, açık → aşağı döner) — üç kart türünü (bağlantı/
 * açıklama/pasif) birbirinden bakışla ayırt edilebilir kılar. */
details.mi-ekip__k summary .mi-ok { color: var(--mi-accent); transition: transform var(--mi-dur) var(--mi-ease); }
details.mi-ekip__k[open] summary .mi-ok { transform: rotate(90deg); }
.mi-ekip__aciklama {
  margin-top: clamp(8px, 1.4vh, 16px); padding: 0 16px clamp(16px, 3vh, 38px);
  color: var(--mi-ink-soft); font-weight: 300; font-size: 0.85rem; line-height: 1.6;
}
.mi-ekip__aciklama p + p { margin-top: 10px; }
.mi-ekip__f { width: clamp(56px, 8vh, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid var(--mi-line); background: var(--mi-accent-soft); position: relative; }
.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; }
.mi-ekip__a { font-size: clamp(0.96rem, 1.3vh + 0.24vw, 1.2rem); font-weight: 400; }
.mi-ekip__u { font-size: var(--mi-t-mikro); letter-spacing: var(--mi-tr-mikro); text-transform: uppercase; color: var(--mi-ink-soft); font-weight: 500; }
.mi-ekip__not { margin-top: clamp(12px, 2vh, 22px); color: var(--mi-ink-soft); font-size: 0.76rem; font-weight: 300; line-height: 1.6; max-width: 60ch; }

/* 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; background: var(--mi-tint); }
.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.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); }

/* ── SAYAÇ BANDI — lacivert, sayfanın tek koyu bloğu ─────────────────────── */
.mi-statband { position: relative; background: var(--mi-accent-strong); color: var(--mi-on-dark); overflow: hidden; padding-block: clamp(46px, 8vh, 92px); }
.mi-statband__in { position: relative; z-index: 2; }
.mi-statband h2 { font-size: var(--mi-t-h2); color: var(--mi-on-dark); max-width: 20ch; margin-top: 16px; }
.mi-statband__lead { color: var(--mi-on-dark-soft); font-weight: 300; max-width: 52ch; margin-top: 16px; font-size: 0.98rem; }
.mi-statband__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(24px, 4vw, 52px); margin-top: clamp(28px, 5vh, 60px); }
.mi-stat__num { font-size: var(--mi-t-sayi); font-weight: 300; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.mi-stat__rule { width: 34px; height: 1px; background: rgba(230, 233, 240, 0.4); margin-top: 22px; }
.mi-stat__label { margin-top: 16px; font-size: var(--mi-t-mikro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mi-on-dark-soft); font-weight: 500; }
.mi-statband__not { margin-top: clamp(22px, 3.4vh, 42px); color: var(--mi-on-dark-soft); font-size: 0.78rem; font-weight: 300; max-width: 58rem; line-height: 1.6; }

/* ── 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; }
.mi-harita { position: relative; 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; }
.mi-harita__yer { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px; color: var(--mi-ink-soft); font-size: 0.76rem; line-height: 1.6; }
.mi-harita__yer svg { width: 44px; height: 44px; color: var(--mi-ink-faint); opacity: 0.6; }
.mi-harita.yuklendi .mi-harita__yer { display: none; }
.mi-harita__adres { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px clamp(14px, 1.6vw, 20px); background: var(--mi-surface); border-top: 1px solid var(--mi-line); font-size: 0.78rem; color: var(--mi-ink-soft); }
.mi-harita__adres b { font-weight: 500; color: var(--mi-ink); }

/* ── İLETİŞİM sayfası ──────────────────────────────────────────────────── */
.mi-ilet-hero { min-height: calc(100svh - var(--mi-nav-h)); 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: 1fr minmax(300px, 0.85fr); gap: clamp(30px, 4.5vw, 72px); align-items: center; width: 100%; }
.mi-ilet-baslik { font-size: var(--mi-t-h2); max-width: 16ch; margin-top: 16px; }
.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 + 3 kolon ───────────────────────────────────── */
.mi-footer { background: var(--mi-surface); border-top: 1px solid var(--mi-line); padding-block: clamp(40px, 6vh, 78px) 30px; }
.mi-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: clamp(28px, 3.6vw, 44px); }
.mi-footer__brand { display: flex; flex-direction: column; align-items: center; width: fit-content; }
.mi-footer__brand .mi-logo-mark { height: clamp(72px, 8.4vh, 104px); }
.mi-footer__brand .mi-logo-word { height: clamp(26px, 3vh, 34px); margin-top: 16px; }
.mi-footer__col h3 { font-size: var(--mi-t-mikro); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mi-ink-soft); margin-bottom: clamp(12px, 1.8vh, 18px); font-weight: 500; }
.mi-footer__col a { display: block; padding-block: 7px; font-size: 0.92rem; font-weight: 300; width: fit-content; transition: color var(--mi-dur) var(--mi-ease), transform var(--mi-dur) var(--mi-ease); }
.mi-footer__col a:hover { color: var(--mi-accent); transform: translateX(4px); }
.mi-footer__bottom { margin-top: clamp(26px, 4vh, 56px); 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; }
  .mi-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .mi-alan.secili .mi-alan__ic { grid-template-columns: 1fr 1.35fr; }
}
@media (max-width: 860px) {
  .mi-masthead { display: flex; justify-content: space-between; }
  .mi-mast-logo--devir { opacity: 1; transform: none; pointer-events: auto; }
  .mi-mast-burger { display: flex; }
  .mi-mast-nav {
    display: none; position: fixed; left: 0; right: 0; top: var(--mi-nav-h); flex-direction: column;
    align-items: stretch; gap: 0; padding: 0 var(--mi-gutter-site); background: var(--mi-surface);
    border-bottom: 1px solid var(--mi-line);
  }
  .mi-mast-nav.acik { display: flex; }
  /* Yalnız .mi-mast-nav içindeki linkler dikey listeye döner — .mi-mast-right
   * içindeki Panel/Çıkış/Giriş Yap linki bu kurala GİRMEZ (kendi yatay flex
   * satırında kalır, burger'in yanında). Kapsamsız `.mi-navlink` seçici bu
   * ayrımı yapmıyordu: Çıkış formu eklendiğince (Tur A) `.mi-navlink:last-child`
   * artık Çıkış <button>'ını değil onu saran <form>'u görüyordu, sıfırlama
   * hiç tetiklenmedi ve alt kenarlık dar kırılımda sızdı (bulunan gerçek hata). */
  .mi-mast-nav .mi-navlink { padding: 16px 0; border-bottom: 1px solid var(--mi-line); }
  .mi-mast-nav .mi-navlink:last-child { border-bottom: 0; }
  .mi-navlink::after { display: none; }
  .mi-navlink.is-current { color: var(--mi-accent); }
  .mi-hero__mark { top: 34%; }
  .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-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; }
  .mi-alan:not(.secili) .mi-detay { display: none; }
  .mi-ekip { grid-template-columns: 1fr; }
  .mi-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mi-statband__grid { grid-template-columns: 1fr; gap: 38px; }
  .mi-harita { aspect-ratio: 1 / 1; }
}
@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); }
}

/* 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-soft); font-size: 0.78rem; font-weight: 300;
}
.mi-giris__geri { color: var(--mi-ink-soft); 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); }