/* ============================================================ */
/* Tasarım token'ları (New folder projesinden uyarlandı)          */
/* ============================================================ */
:root {
  --bg: #0a0c11;
  --glass-bg: rgba(6, 7, 10, 0.72);
  --glass-bg-strong: rgba(6, 7, 10, 0.88);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-blur: 22px;

  --hairline: rgba(255, 255, 255, 0.09);
  --wash: rgba(255, 255, 255, 0.06);
  --wash-strong: rgba(255, 255, 255, 0.14);

  --text: #f4f5f7;
  --text-dim: #b7bcc6;
  --text-faint: #7d8290;

  --accent: #e0221c;
  --accent-tint: rgba(224, 34, 28, 0.16);
  --accent-glow: rgba(224, 34, 28, 0.45);

  --fakulte: #f5a623;
  --merkez: #4e8cff;
  --enstitu: #22c55e;
  --spor: #ef4444;
  --hizmet: #2dd4d4;
  --idari: #fb7185;
  --sosyal: #a78bfa;
  --otopark: #7d8590;
  --diger: #8b93a3;

  --font-brand: "Poppins", "Inter", sans-serif;
  --font-hud: "Roboto Condensed", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .38);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, .55);
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* Sağ üstte yüzen 2D/3D + Uydu/Harita kapsüllerinin kapladığı yaklaşık yükseklik - sağ
     bilgi panelinin bunların altından başlaması için ayrılan boşluk (eskiden tam genişlikte
     bir üst çubuk vardı, artık yok - ama isim/mantık aynı kaldı). */
  --controls-clearance: 60px;
}

* { box-sizing: border-box; }

/* Kampüs verisi (data/campus.json) yüklenemediğinde gösterilen tam ekran hata kartı. */
#load-error-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

#load-error-overlay .load-error-card {
  max-width: 420px;
  margin: 20px;
  padding: 32px 28px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-family: var(--font-body);
}

#load-error-overlay .load-error-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}

#load-error-overlay h2 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text);
}

#load-error-overlay p {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}

#load-error-overlay button {
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s var(--ease);
}

#load-error-overlay button:hover { filter: brightness(1.1); }

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; }
button:focus-visible, input:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ============================================================ */
/* Görünüm katmanları (3D sahne / 2D uydu haritası)                */
/* ============================================================ */
#canvas-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
}

#map2d {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #e9eaec;
  display: none;
}

body.view-2d #canvas-container { display: none; }
body.view-2d #map2d { display: block; }
body.view-3d #map2d { display: none; }

.leaflet-container {
  background: #e9eaec;
  font-family: var(--font-body);
}
.leaflet-control-zoom {
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  box-shadow: var(--shadow-md) !important;
}
.leaflet-control-zoom a {
  background: rgba(15, 17, 22, .7) !important;
  backdrop-filter: blur(10px);
  color: var(--text) !important;
  border-color: var(--hairline) !important;
}
.leaflet-control-zoom a:hover { background: rgba(30, 33, 40, .85) !important; }
.leaflet-control-attribution {
  background: rgba(10, 12, 17, .6) !important;
  backdrop-filter: blur(6px);
  color: var(--text-faint) !important;
  font-size: 10.5px !important;
  font-family: var(--font-hud);
}
.leaflet-control-attribution a { color: var(--text-dim) !important; }

/* "Ben buradayım" (GPS konumu) düğmesi - zoom kontrolüyle aynı leaflet-bar stilinde,
   sadece 2D moddayken (Leaflet kontrolü olduğundan zaten sadece 2D'de var oluyor). */
.map2d-locate-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 17, 22, .7) !important;
  backdrop-filter: blur(10px);
  color: var(--text) !important;
  border: 1px solid var(--hairline) !important;
  cursor: pointer;
  padding: 0;
}
.map2d-locate-btn:hover { background: rgba(30, 33, 40, .85) !important; }
.map2d-locate-btn svg { width: 17px; height: 17px; }
.map2d-locate-btn.locating svg { animation: locate-spin 1s linear infinite; }
@keyframes locate-spin { to { transform: rotate(360deg); } }

/* Haritadaki kullanıcı konumu - mavi nabız atan nokta (standart "buradasınız" işareti). */
.user-location-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #4285f4;
  border: 2px solid #fff;
  box-shadow: 0 0 0 rgba(66, 133, 244, .5);
  animation: user-location-pulse 2s infinite;
}
@keyframes user-location-pulse {
  0% { box-shadow: 0 0 0 0 rgba(66, 133, 244, .5); }
  70% { box-shadow: 0 0 0 14px rgba(66, 133, 244, 0); }
  100% { box-shadow: 0 0 0 0 rgba(66, 133, 244, 0); }
}

/* Kısa ömürlü bilgi/hata mesajı (ör. konum izni reddedildi). */
#toast {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%) translateY(10px);
  z-index: 2000;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font-body);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* İlk ziyarette gösterilen kısa tanıtım (onboarding) kartı - localStorage'a bir kez
   kaydedilip bir daha gösterilmiyor (bkz. js/onboarding.js). */
#onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 7, 10, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
#onboarding-overlay.show { display: flex; opacity: 1; }

.onboarding-card {
  max-width: 380px;
  margin: 20px;
  padding: 30px 26px 24px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-family: var(--font-body);
  transform: translateY(8px);
  opacity: 0;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
#onboarding-overlay.show .onboarding-card { transform: translateY(0); opacity: 1; }

/* Kartın en üstünde, adımlar arasında sabit kalan üniversite kimliği (logo + isim) -
   adım ikonu/başlığı altında, o adıma özel içerikten ayrışsın diye ince bir çizgiyle bölünüyor. */
.onboarding-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.onboarding-logo {
  width: 28px; height: 28px; border-radius: 50%; object-fit: contain;
  background: #fff; padding: 2px; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.onboarding-brand-text {
  font-family: var(--font-brand);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: .01em;
}

.onboarding-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onboarding-icon svg { width: 26px; height: 26px; }

.onboarding-card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-family: var(--font-brand);
  color: var(--text);
}
.onboarding-card p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-dim);
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}
.onboarding-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wash-strong);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.onboarding-dots span.active { background: var(--accent); transform: scale(1.3); }

.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.onboarding-actions button {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter .15s var(--ease);
}
#onboarding-skip {
  background: transparent;
  color: var(--text-faint);
  padding: 10px 8px;
}
#onboarding-skip:hover { color: var(--text-dim); }
#onboarding-next {
  background: var(--accent);
  color: #fff;
  padding: 10px 24px;
  flex: 1;
}
#onboarding-next:hover { filter: brightness(1.1); }

/* Harita üzerindeki bina iğneleri - klasik "damla" (teardrop) pin şekli: düz bir
   nokta yerine, sivri ucuyla tam konumu gösteren ve hem uydu hem harita katmanında
   kolayca fark edilen, evrensel olarak tanınan bir biçim. */
.pin-wrap { position: relative; width: 30px; height: 38px; cursor: pointer; }
.pin-glow {
  position: absolute; left: 50%; top: 22px; width: 20px; height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: .45; pointer-events: none;
  transition: transform .18s var(--ease), opacity .18s var(--ease), filter .18s var(--ease);
}
/* NOT: eskiden her pin'de (2D haritada onlarca/yüzlerce tane) sürekli çalışan bir "nefes
   alma" animasyonu (pin-breathe, sonsuz döngü) VE her zaman açık bir filter:blur() vardı.
   filter, tarayıcıya o elemanı ayrı bir GPU katmanına ("layer promotion") almasını
   zorluyor - yüzlerce pin'in HER BİRİ kendi bulanık katmanına sahip olunca, Leaflet
   yakınlaştırma sırasında haritayı yeniden konumlandırırken bu katmanların hepsinin
   yeniden birleştirilmesi (compositing) gerekiyordu, bu da donmalara yol açıyordu.
   Artık blur SADECE hover/dokunuşta (tek bir pin, ucuz) devreye giriyor - boştaki pin'ler
   düz/keskin bir daire, hiçbir GPU katmanı gerektirmiyor. */
.pin-wrap:hover .pin-glow { opacity: 1; filter: blur(10px); transform: translate(-50%, -50%) scale(1.7); }
.pin-glow.fakulte { background: var(--fakulte); }
.pin-glow.merkez { background: var(--merkez); }
.pin-glow.enstitu { background: var(--enstitu); }
.pin-glow.spor { background: var(--spor); }
.pin-glow.hizmet { background: var(--hizmet); }
.pin-glow.idari { background: var(--idari); }
.pin-glow.sosyal { background: var(--sosyal); }
.pin-glow.otopark { background: var(--otopark); }
.pin-glow.diger { background: var(--diger); }

.pin {
  position: absolute; left: 50%; top: 2px; z-index: 2; width: 24px; height: 24px;
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 50% 50% 50% 0;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .55);
  transition: transform .18s var(--ease);
}
/* Pin -45° döndürülmüş olduğundan, içindeki kategori ikonu dik dursun diye +45°
   ile telafi ediliyor. */
.pin-icon {
  position: absolute; top: 50%; left: 50%; width: 13px; height: 13px;
  transform: translate(-50%, -50%) rotate(45deg);
  display: flex; align-items: center; justify-content: center;
  color: #fff; pointer-events: none;
}
.pin-icon svg { width: 100%; height: 100%; fill: #fff; display: block; }
.pin-icon-text {
  font-family: var(--font-hud, sans-serif); font-weight: 800; font-size: 13px;
  line-height: 1; color: #fff;
}
.pin-wrap:hover .pin { transform: translateX(-50%) rotate(-45deg) scale(1.15); }
.pin.fakulte { background: var(--fakulte); }
.pin.merkez { background: var(--merkez); }
.pin.enstitu { background: var(--enstitu); }
.pin.spor { background: var(--spor); }
.pin.hizmet { background: var(--hizmet); }
.pin.idari { background: var(--idari); }
.pin.sosyal { background: var(--sosyal); }
.pin.otopark { background: var(--otopark); }
.pin.diger { background: var(--diger); }

.pin-highlight { animation: pin-pulse 1.4s ease-out infinite; }
@keyframes pin-pulse {
  0% { box-shadow: 0 3px 7px rgba(0, 0, 0, .55), 0 0 0 0 rgba(255, 255, 255, .5); }
  70% { box-shadow: 0 3px 7px rgba(0, 0, 0, .55), 0 0 0 12px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 3px 7px rgba(0, 0, 0, .55), 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Pin üstüne gelince görünen küçük önizleme kartı */
.leaflet-tooltip.pin-tooltip-rich {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.leaflet-tooltip.pin-tooltip-rich::before { display: none !important; }
.pin-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pin-card-body { padding: 8px 12px; }
.pin-card-cat {
  display: inline-block;
  font-family: var(--font-hud);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  margin-bottom: 5px;
  color: #0a0c11;
  background: var(--diger);
}
.pin-card-cat.cat-fakulte { background: var(--fakulte); }
.pin-card-cat.cat-merkez { background: var(--merkez); }
.pin-card-cat.cat-enstitu { background: var(--enstitu); }
.pin-card-cat.cat-spor { background: var(--spor); }
.pin-card-cat.cat-hizmet { background: var(--hizmet); }
.pin-card-cat.cat-idari { background: var(--idari); }
.pin-card-cat.cat-sosyal { background: var(--sosyal); }
.pin-card-cat.cat-otopark { background: var(--otopark); }
.pin-card-name { display: block; font-family: var(--font-brand); font-size: 13px; font-weight: 600; color: #fff; }

/* ============================================================ */
/* Logo + başlık, artık sol paneli tek bir "dynamic island" olarak */
/* tamamlayan üst bölüm (ayrı bir çubuk değil, panelin İÇİNDE)     */
/* ============================================================ */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.brand-mark {
  width: 34px; height: 34px; border-radius: 50%; object-fit: contain;
  background: #fff; padding: 2px; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.sidebar-brand h1 {
  font-family: var(--font-brand);
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
  background: linear-gradient(90deg, #fff 40%, #c8cbd3 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.sidebar-brand h1 .brand-subtitle {
  display: block;
  font-family: var(--font-hud);
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: .03em;
  margin-top: 2px;
}
#building-sidebar.closed .sidebar-brand { display: none; }

/* ============================================================ */
/* Sağ üstte yüzen 2D/3D + Uydu/Harita seçicileri - her biri kendi */
/* "dynamic island" kapsülü (sol paneldeki/sağdaki panellerle aynı */
/* cam/blur dilinde, ama ayrı/bağımsız yüzen bir öğe)              */
/* ============================================================ */
.floating-controls {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}

#layerSwitch { display: none; }
body.view-2d #layerSwitch { display: flex; }

.view-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  flex-shrink: 0;
}
.view-switch button {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-hud);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.view-switch button:hover { color: var(--text); }
.view-switch button.active { background: var(--accent); color: #fff; }

/* ============================================================ */
/* Sol bina listesi paneli (New folder görünümü, sol tarafta)     */
/* ============================================================ */
#building-sidebar {
  position: fixed;
  top: 14px;
  left: 14px;
  bottom: 14px;
  width: 240px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width .3s var(--ease), transform .3s var(--ease);
  z-index: 700;
}

#building-sidebar.closed { width: 56px; }
#building-sidebar.closed #sidebar-search,
#building-sidebar.closed #building-list { display: none; }
#building-sidebar.closed #sidebar-footer { display: none; }

#sidebar-footer {
  flex-shrink: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-hud);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--text-faint);
  text-align: center;
}

#sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  flex-shrink: 0;
}
#sidebar-header span {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .15s ease;
}
#building-sidebar.closed #sidebar-header span { display: none; }
#sidebar-count {
  font-family: var(--font-hud);
  font-size: 12.5px;
  color: var(--text-faint);
}
#building-sidebar.closed #sidebar-count { display: none; }

#sidebar-toggle {
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--wash);
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  flex-shrink: 0;
  transition: transform .3s var(--ease), background .15s var(--ease);
}
#sidebar-toggle:hover { background: var(--wash-strong); }
#building-sidebar.closed #sidebar-toggle { transform: scaleX(-1); }

#sidebar-search {
  position: relative;
  padding: 0 16px 12px;
}
#sidebar-search svg {
  position: absolute;
  left: 28px;
  /* Üst kapsayıcının alt boşluğu (padding-bottom) yüzünden top:50% ikonu
     input kutusunun altına doğru kaydırıyordu - input'un kendi yüksekliğine
     göre sabit bir üstten mesafe kullanıyoruz. */
  top: 10px;
  color: var(--text-faint);
  pointer-events: none;
}
#sidebar-search-input {
  width: 100%;
  padding: 9px 12px 9px 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-size: 13.5px;
  font-family: var(--font-hud);
}
#sidebar-search-input::placeholder { color: var(--text-faint); }
#sidebar-search-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, .07);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* Kategori akordeon başlıkları - tıklanınca o kategorinin bina listesi açılır/kapanır. */
.cat-header {
  font-weight: 600;
  color: var(--text);
  user-select: none;
}
.cat-header .dot { box-shadow: 0 0 8px 0 currentColor; }
.cat-header-label { flex: 1; }
.cat-header-count {
  font-family: var(--font-hud);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  flex-shrink: 0;
}
.cat-chevron {
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform .2s var(--ease);
}
.cat-header.open .cat-chevron { transform: rotate(180deg); color: var(--text-dim); }
.cat-header.open { background: var(--wash); }

/* Kategori altındaki binalar - alt hiyerarşiyi göstermek için hafif girintili ve biraz
   daha küçük punto, kategori başlığından ayırt edilsin diye. */
#building-list li.building-row { padding-left: 22px; font-size: 13.3px; }
#building-list li.building-row:hover { padding-left: 24px; }

#building-list {
  list-style: none;
  margin: 0;
  padding: 4px 10px 16px;
  overflow-y: auto;
  flex: 1;
}
#building-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-hud);
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-dim);
  border-bottom: 1px solid var(--hairline);
  transition: background .13s var(--ease), color .13s var(--ease), padding-left .13s var(--ease);
  white-space: normal;
  word-break: break-word;
}
#building-list li:last-child { border-bottom: none; }
#building-list li:hover { background: var(--wash); color: var(--text); padding-left: 11px; }
#building-list li.active { background: var(--wash-strong); color: var(--text); font-weight: 600; }
#building-list .dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px 0 currentColor; }
#building-list .dot.fakulte { background: var(--fakulte); color: var(--fakulte); }
#building-list .dot.merkez { background: var(--merkez); color: var(--merkez); }
#building-list .dot.enstitu { background: var(--enstitu); color: var(--enstitu); }
#building-list .dot.spor { background: var(--spor); color: var(--spor); }
#building-list .dot.hizmet { background: var(--hizmet); color: var(--hizmet); }
#building-list .dot.idari { background: var(--idari); color: var(--idari); }
#building-list .dot.sosyal { background: var(--sosyal); color: var(--sosyal); }
#building-list .dot.otopark { background: var(--otopark); color: var(--otopark); }
#building-list .dot.diger { background: var(--diger); color: var(--diger); }

/* ============================================================ */
/* Sağ tarafta açılan bina bilgi paneli ("dynamic island" stili)  */
/* ============================================================ */
#info-panel {
  position: fixed;
  top: calc(var(--controls-clearance) + 14px);
  right: 14px;
  bottom: 14px;
  width: 560px;
  max-width: calc(100vw - 28px);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 800;
  transform: translateX(calc(100% + 28px));
  opacity: 0;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
#info-panel.open { transform: translateX(0); opacity: 1; }
/* 3D modda sağ altta yön tuşları da var - panel açıkken bilerek onların
   üzerine gelir (z-index daha yüksek), kullanıcı isteğiyle. */
#info-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  background-size: 200% 100%;
  animation: shimmer-slide 7s linear infinite;
  z-index: 2;
  opacity: .8;
}

#info-panel-close {
  position: absolute;
  top: 10px; right: 10px; z-index: 5;
  background: rgba(10, 12, 17, .5);
  border: 1px solid var(--glass-border);
  color: #fff;
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .15s var(--ease);
}
#info-panel-close:hover { background: rgba(20, 23, 31, .8); }

.gallery {
  position: relative;
  background: rgba(0, 0, 0, .55);
  height: 260px;
  flex-shrink: 0;
}
.gallery-viewport { height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-viewport img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.gallery-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-faint); font-family: var(--font-hud); font-size: 13px;
}
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(10, 12, 17, .45); border: 1px solid var(--glass-border); color: #fff;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: background .15s var(--ease);
  z-index: 4;
}
.gallery-nav:hover { background: rgba(20, 23, 31, .8); }
.gallery-nav.prev { left: 10px; }
.gallery-nav.next { right: 10px; }
.gallery-counter {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 12, 17, .5); backdrop-filter: blur(6px); color: #fff;
  font-family: var(--font-hud); font-size: 12px; padding: 3px 10px;
  border-radius: var(--radius-sm); border: 1px solid var(--glass-border);
}

.info-card { padding: 16px 18px 20px; overflow-y: auto; flex: 1; }
.info-category {
  position: relative; display: block;
  font-family: var(--font-hud); font-size: 11.5px; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint);
  margin-bottom: 8px; padding-left: 14px;
}
.info-category::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 6px 0 currentColor;
  background: var(--diger); color: var(--diger);
}
.info-category[data-cat="fakulte"]::before { background: var(--fakulte); color: var(--fakulte); }
.info-category[data-cat="merkez"]::before { background: var(--merkez); color: var(--merkez); }
.info-category[data-cat="enstitu"]::before { background: var(--enstitu); color: var(--enstitu); }
.info-category[data-cat="spor"]::before { background: var(--spor); color: var(--spor); }
.info-category[data-cat="hizmet"]::before { background: var(--hizmet); color: var(--hizmet); }
.info-category[data-cat="idari"]::before { background: var(--idari); color: var(--idari); }
.info-category[data-cat="sosyal"]::before { background: var(--sosyal); color: var(--sosyal); }
.info-category[data-cat="otopark"]::before { background: var(--otopark); color: var(--otopark); }

#info-name { margin: 0 0 8px; font-family: var(--font-brand); font-size: 20px; font-weight: 600; color: var(--text); }
#info-desc { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }

.info-website {
  display: none; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 14px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
  background: var(--wash);
  font-family: var(--font-hud); font-size: 12.5px; font-weight: 500;
  color: #fff; text-decoration: none; letter-spacing: .01em;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.info-website:hover { background: var(--accent-tint); border-color: var(--accent); }

/* ============================================================ */
/* İpucu ve yön tuşları                                           */
/* ============================================================ */
#hint {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.75);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12px;
  pointer-events: none;
  white-space: nowrap;
  z-index: 600;
}

#dpad {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 130px;
  height: 130px;
  display: grid;
  grid-template-columns: 40px 40px 40px;
  grid-template-rows: 40px 40px 40px;
  gap: 4px;
  z-index: 600;
}
body.view-2d #dpad { display: none; }
body.view-2d #hint { display: none; }

.dp-btn {
  background: rgba(20, 20, 20, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}
.dp-btn:active { background: rgba(20, 20, 20, 0.85); }
.dp-up { grid-column: 2; grid-row: 1; }
.dp-left { grid-column: 1; grid-row: 2; }
.dp-right { grid-column: 3; grid-row: 2; }
.dp-down { grid-column: 2; grid-row: 3; }

/* Duyarlı düzen */
@media (max-width: 860px) {
  .sidebar-brand h1 .brand-subtitle { display: none; }
  #building-sidebar { width: 86vw; max-width: 340px; }
  #info-panel { width: 92vw; }
  /* Uydu/Harita + 3D/2D + TR/EN gruplarının tek sıradaki toplam genişliği (~360px) dar
     telefon ekranlarında sol üstteki menü aç/kapa düğmesiyle çakışıyordu - yan yana değil
     alt alta (tek grup genişliğinde) dizilerek sağ kenara yaslanıyor, çakışma ortadan kalkıyor. */
  .floating-controls { flex-direction: column; align-items: flex-end; }
  /* Kontroller yan yana değil alt alta dizilince (yukarıdaki kural) toplam yüksekliği
     tek satırlık masaüstü değerinden (--controls-clearance: 60px) çok daha fazla oluyor -
     2D modda (Uydu/Harita + 3D/2D + TR/EN, 3 satır) ölçülen yükseklik ~145px. Bilgi paneli
     (ve üzerindeki kapatma çarpısı) bu değere göre konumlandığından, eski 60px'te panel
     kontrollerin ÜSTÜNE biniyordu - kapatma çarpısı 3D/2D-TR/EN yazılarının üzerinde kalıyordu. */
  :root { --controls-clearance: 150px; }
  /* Alttaki ipucu çubuğu (Sürükle/Tekerlek/Ok tuşları/Tıkla) tek satırda (nowrap) dar
     ekranlarda ekran genişliğini aşıp devasa/kırpık görünüyordu - artık sarmalanabiliyor
     ve genişliği ekranla sınırlı, küçük punto ile ortalanmış kalıyor. */
  #hint {
    font-size: 10.5px;
    white-space: normal;
    text-align: center;
    /* dpad sağ altta ~150px (130px + 20px boşluk), kapalı bina listesi sekmesi solda 56px
       genişlik kaplıyor - ipucu çubuğu tam genişlikte ortalanınca ikisinin de üstüne
       biniyordu. left/right ile aradaki boşluğa tam oturacak şekilde sabitliyoruz. */
    left: 82px;
    right: 158px;
    width: auto;
    max-width: none;
    transform: none;
    padding: 7px 14px;
  }
}