/* ═══════════════════════════════════════════════════════════
   Herta Group — birim anahtarı + açılış kapısı
   assets/css/unit.css

   İKİ PARÇA
   1) Birim anahtarı: logonun sağında duran "Mimarlık ⌄". Üstüne
      gelince üç birim açılır; başka birime tıklanınca o birimin
      sitesine geçilir. Başlıkta ve dock'ta aynı bileşen.
   2) Açılış kapısı: preloader'daki HERTA GROUP animasyonu bittiğinde
      perde kalkmak yerine üç kart kurulur. Seçilen birimin sayfası açılır.

   Kurulum: assets/js/unit.js

   SINIF ADI NEDEN ".ubar"?
   Bileşen önce ".unit" adıyla yazılmıştı. Ama hakkinda.html'in kendi
   <style> bloğunda zaten bir ".unit" var (sayfadaki üç birim satırı:
   border-top + 26-46px dolgu). Sayfa içi stil, bağlı dosyadan sonra
   geldiği için kazanıyor ve başlıktaki anahtar birdenbire 254×113'lük,
   üstünde saç teli çizgi olan bir kutuya dönüşüyordu — kullanıcının
   "hakkımızda'da üstte çizgi çıkıyor" dediği hata tam olarak buydu.
   Ortak bir ada güvenilmez: bu bileşenin bütün sınıfları "ubar" ön
   ekiyle yaşar. HTML'deki ".unit" sayfa içeriğinin, ".ubar" anahtarın.
   ═══════════════════════════════════════════════════════════ */

/* ══════════ 1 · BİRİM ANAHTARI ══════════ */

.ubar {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
}
/* markadan ince bir çizgiyle ayrılır: aynı ailede ama ayrı bir şey */
.ubar::before {
  content: "";
  width: 1px;
  height: 13px;
  margin: 0 clamp(9px, 0.8vw, 13px) 0 clamp(8px, 0.7vw, 12px);
  background: currentColor;
  opacity: 0.22;
}

/* ── Kollar yan yana ──────────────────────────────────────────
   AÇILAN PANEL YOK. Üç kol tek satırda durur; yalnız bulunulan kol
   görünür, diğer ikisi max-width:0 ile sıfır genişlikte bekler.
   Fare ya da odak gelince yandan açılırlar — dil seçicinin
   (.chip--lang / .lang__btn, bkz. i18n.css) birebir aynı mekaniği,
   aynı süreler ve aynı kademe gecikmeleriyle.

   Neden böyle: aşağı düşen koyu panel başlığın sessiz diliyle
   çelişiyordu; üstelik yanında duran dil seçici zaten yana açılan
   bir bileşen. İkisi artık aynı şeyi aynı biçimde söylüyor. */
.ubar__list {
  display: flex;
  align-items: baseline;
  overflow: hidden;
  /* Dikey nefes: metin 13px yüksek, çıplak bırakılırsa fareyle
     yakalanması zor bir şerit oluyordu. Görünüm değişmiyor,
     yalnız üstüne gelinebilir alan brand satırı kadar oluyor. */
  padding-block: 6px;
}

.ubar__item {
  font-family: var(--font-body);
  font-size: clamp(12px, 0.95vw, 14.5px);
  line-height: 1;
  letter-spacing: 0.01em;
  color: currentColor;        /* açık başlıkta da koyu dock'ta da doğru */
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  max-width: 0;
  margin-left: 0;
  transition:
    opacity 0.4s var(--ease-out),
    max-width 0.55s var(--ease-out),
    margin-left 0.55s var(--ease-out);
}
/* 12em: en uzun ad "Gayrimenkul" rahat sığsın */
.ubar__item.is-current { opacity: 1; max-width: 12em; }

.ubar:hover .ubar__item,
.ubar:focus-within .ubar__item {
  opacity: 0.35;
  max-width: 12em;
  margin-left: clamp(10px, 0.9vw, 15px);
}
.ubar:hover .ubar__item:first-child,
.ubar:focus-within .ubar__item:first-child { margin-left: 0; }
.ubar:hover .ubar__item.is-current,
.ubar:focus-within .ubar__item.is-current { opacity: 1; }
.ubar:hover .ubar__item:hover { opacity: 0.75; }
.ubar__item:nth-child(2) { transition-delay: 0.03s; }
.ubar__item:nth-child(3) { transition-delay: 0.06s; }
.ubar__item:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; opacity: 1; }

/* Bulunulan kol bir bağlantı değil, bir konum bildirimi. */
.ubar__item.is-current { cursor: default; }

/* ── "Devamı var" işareti ─────────────────────────────────────
   Kapalıyken ortada tek bir ad duruyor ve üstüne gelinebileceği
   hiç belli olmuyordu. Aşağı bakan bir ok yanlış söylerdi — bu
   bileşen YANA açılıyor. O yüzden adın ardında sağı gösteren saç
   inceliğinde bir chevron var; menü açılırken kendisi çekilip
   yerini adlara bırakıyor. Ek bir kutu, zemin ya da ikon yok. */
.ubar::after {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  margin-left: clamp(7px, 0.6vw, 10px);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.32;
  transition:
    opacity 0.35s var(--ease-out),
    transform 0.5s var(--ease-out);
}
.ubar:hover::after,
.ubar:focus-within::after {
  opacity: 0;
  transform: rotate(-45deg) translate(3px, 3px);
}

/* Dokunmatikte hover yok: üçü de sürekli açık durur, yoksa
   diğer kollara hiç ulaşılamaz (dil seçicinin aynısı).
   AMA YALNIZ YER VARSA: 860px altında üç ad yan yana başlığa
   sığmıyor, açılınca hamburger ekranın dışına düşüyordu. Orada
   anahtar tamamen gizlenir; kol değiştirme mobil menüye taşındı. */
@media (hover: none) and (min-width: 861px) {
  /* üçü zaten açık: "devamı var" demenin anlamı kalmıyor */
  .ubar::after { display: none; }
  .ubar__item {
    opacity: 0.35;
    max-width: 12em;
    margin-left: clamp(10px, 0.9vw, 15px);
    transition: opacity 0.3s ease;
  }
  .ubar__item:first-child { margin-left: 0; }
  .ubar__item.is-current { opacity: 1; }
}

/* dock içinde: zemin zaten koyu, ölçüler biraz daha sıkı */
.dock .ubar__item { font-size: 12.5px; }

@media (max-width: 860px) {
  .ubar { display: none; }
}

/* ── Mobil menüdeki kol satırı ────────────────────────────────
   Başlıktaki anahtar dar ekranda gizlendiği için kollar buraya
   geliyor. Menünün büyük tipografisiyle yarışmasın diye küçük ve
   sessiz: menü listesinin altında tek bir satır. */
/* ══════════════════════════════════════════════════════════════════════
   MENÜDEKİ KOL SATIRI — dar ekranda kol değiştirmenin tek yolu

   HATA VE SEBEBİ (ölçüldü 13.09.2026): ekranda tek başına "Mimarlık"
   görünüyordu, öbür iki kol yoktu. unit.js üçünü de ekliyor — sorun
   işaretlemede değil sınıfta: maddeler() üç kolu da `.ubar__item` olarak
   üretiyor ve o sınıf BAŞLIKTAKİ daralan mekaniğin parçası ("yalnız
   bulunulan kol görünür, ötekiler max-width:0, fare gelince açılır").
   Açılması `.ubar:hover`a bağlı; menüde `.ubar` sarmalayıcısı olmadığı için
   iki kol sonsuza kadar sıfır genişlikte kalıyordu.
   Menüde daralma YOKTUR: üçü de tam boyuyla durur ve tıklanabilir.

   AÇILIŞA DAHİL: satır menü açılırken hazır durmuyordu, birden beliriyordu.
   Artık `.menu__nav a` ile aynı dili konuşuyor — 18px aşağıdan yükselir ve
   kademenin SON adımıdır (dört menü maddesi 0.18→0.39, bu 0.46).

   BULUNULAN KOL: rengi beyaz AMA anlamı renkte değil — yanında bir nokta
   işareti durur (renk tek başına anlam taşımaz).
   ══════════════════════════════════════════════════════════════════════ */
.menu__units {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: clamp(18px, 5.5vw, 30px);
  margin-top: clamp(22px, 5.5vw, 32px);
  padding-top: clamp(15px, 3.8vw, 21px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}
.menu.is-open .menu__units {
  opacity: 1;
  transform: none;
  transition-delay: 0.46s;
}

/* Başlıktan gelen daralma burada geçersiz. */
.menu__units .ubar__item,
.menu__units a {
  opacity: 1;
  max-width: none;
  margin-left: 0;
  font-family: var(--font-display);
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.35s var(--ease-out);
}
.menu__units .ubar__item:nth-child(2),
.menu__units .ubar__item:nth-child(3) { transition-delay: 0s; }

.menu__units a:hover { color: var(--white); }
.menu__units a.is-current { color: var(--white); cursor: default; }
.menu__units a.is-current::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 9px;
  vertical-align: middle;
  border-radius: 50%;
  background: currentColor;
}
.menu__units a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .ubar__item { transition: none; transition-delay: 0s; }
  .menu__units { transition: none; transition-delay: 0s; opacity: 1; transform: none; }
  .ubar::after { transition: none; }
}

@media print { .ubar { display: none !important; } }

/* Kapı (açılış sayfası) stilleri index.html içinde durur:
   yalnız orada kullanılıyor, ortak dosyada yer kaplamasın. */

/* ══════════ GRUP MARKASI ══════════
   .logo-mark genişlikten ölçülüyor ve kare H için konmuş bir
   aspect-ratio: 27/24 taşıyor (style.css). Grup markası dikey bir
   form (552×767); o oranla ölçülürse devleşir. Bu yüzden yükseklikten
   ölçülüyor — kapı aynı düzeltmeyi kendi içinde .gg__hmark ile yapıyor,
   burada kalıcı kabuk için yapılıyor.
   YÜKSEKLİK --mark-h-grup'tan (style.css): kol işaretiyle GÖVDELERİ
   aynı boyda olacak biçimde ölçülmüş. Buraya kendi
   clamp'i yazılmıştı ve kol işaretinden 1px yukarıdaydı: başlıkta
   Group'tan bir kola geçince logo gözle görülür biçimde küçülüyordu.
   Sınıfı unit.js'teki isaretle() yazıp siliyor. */
.logo-mark--group { height: var(--mark-h-grup); width: auto; aspect-ratio: auto; }

/* Grup işaretinin tek vurgu rengi. Kol işaretleri kendi siyah rengini
   korur; ortak sayfalarda unit.js yalnız grup işaretine bu sınıfı verir. */
:root[data-unit="group"] .logo-mark,
.logo-mark--group,
html.is-menu .logo-mark--group,
:root[data-unit="group"].is-menu .logo-mark { fill: #62192D; }

/* Sözcüğün ikinci parçası: "Herta Group"ta Group soluk kalır —
   kapıdaki .gg__wm-g ile aynı hiyerarşi. */
.brand__g { font-style: normal; opacity: 0.5; margin-left: 0.26em; }

/* ── YAKINDA: sayfası olmayan liste maddesi ────────────────
   Gayrimenkul'ün "İlanlar"ı menüde yerini alıyor ama sayfası henüz
   yok. Maddeyi gizlemek menüyü eksik gösterirdi; bağlantı yapmak da
   boş bir sayfaya götürürdü. unit.js href'i SİLİYOR — href'siz bir
   <a> ne tıklanır ne odaklanır; buradaki iş yalnız bunu göstermek.
   Altını çizen ::after da susuyor: hareket bir vaat, burada vaat yok. */
.nav-link.is-yakinda {
  opacity: 0.38;
  cursor: default;
}
.nav-link.is-yakinda::after { display: none; }

/* [hidden] TEK BAŞINA YETMİYOR. Tarayıcının kendi [hidden]{display:none}
   kuralı tip seçicisi ağırlığında; .ubar ve .nav-link gibi SINIF
   seçicileriyle konmuş bir display onu eziyor ve gizlenmiş sayılan
   öğe ekranda kalıyor. Bu yüzden sınıfla birlikte yazılıyor.
   unit.js koklendir() bağlam group iken anahtarı, proje listesi
   olmayan bağlamlarda da Projeler/Arşiv maddelerini gizliyor. */
.ubar[hidden],
.nav-link[hidden],
.link-line[hidden],
.menu__nav a[hidden],
.footer__nav a[hidden] { display: none !important; }