/* Sohto Haritalar — ortak görünüm.
   Haritanın şekliyle ilgili her şey bu dosyada; site temasından bağımsız. */

:root {
  --amber: #e5a93c;
  --vurgu-rgb: 229, 169, 60;   /* --amber'in rgb'si; alfalı tonlar bunu kullanır */
  --turkuaz: #00f5d4;
  --cam: rgba(13, 19, 14, .86);
  --kenar: rgba(var(--vurgu-rgb), .22);
  --metin: #f2ede2;
  --sonuk: #9a9584;
  --zemin: #050805;
  --baslik-font: inherit;
}

/* --- alan temaları -----------------------------------------------------
   Üç alan üç ayrı disiplin: genetik, hukuk, arşiv. Görsel dil küreyle
   sınırlı değil — panel camı, kenar rengi, vurgu ve başlık yazı tipi de
   alanla birlikte değişir. Sınıfı kabuk.js .harita-alani üstüne yazar;
   küre sahnesi kure.js'te AYNI ADLA eşleşir (tohum / hukuk / tarih).
   İkisi ayrı dosyada ama tek isim uzayını paylaşıyor: biri değişirse
   öteki de değişmeli. */

/* Genetik: sıcak amber, gövdeyle aynı yazı tipi. Veriyi monospace
   taşıyor (aksesyon, koordinat), başlığın süse ihtiyacı yok. */
.harita-alani.tema-tohum {
  --amber: #e5a93c;
  --vurgu-rgb: 229, 169, 60;
  --cam: rgba(13, 19, 14, .86);
  --zemin: #050805;
  --baslik-font: inherit;
}

/* Hukuk: çelik. Vurgu sıcak olmamalı, panel daha opak, başlıklar serif —
   mevzuat metni gibi okunsun. */
.harita-alani.tema-hukuk {
  --amber: #9db8d4;
  --vurgu-rgb: 157, 184, 212;
  --cam: rgba(11, 15, 21, .90);
  --zemin: #080b0f;
  --baslik-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Arşiv: sepya mürekkep, parşömen camı, serif. */
.harita-alani.tema-tarih {
  --amber: #d9a441;
  --vurgu-rgb: 217, 164, 65;
  --cam: rgba(26, 19, 11, .88);
  --zemin: #14100b;
  --baslik-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Harita kendi kapsayıcısında yaşar, body'ye dokunmaz. Böylece hem tek
   başına açılan sayfada hem de site kabuğunun içinde çalışır; sitenin
   kendi body kurallarıyla çakışmaz. */
.harita-alani {
  position: relative; overflow: hidden;
  background: var(--zemin); color: var(--metin);
  transition: background-color .45s ease;
  font: 14px/1.55 -apple-system, system-ui, "Segoe UI", sans-serif;
}
.harita-alani * { box-sizing: border-box; }

/* Tek başına açıldığında ekranı kaplar. */
.harita-alani.tam-ekran { position: fixed; inset: 0; }

/* Site içindeyken üst menünün altında sabit yükseklikte durur. */
.harita-alani.gomulu { height: calc(100vh - 68px); min-height: 560px; }

/* --- ortak kutu --- */
.kutu {
  position: absolute; z-index: 9;
  background: var(--cam); border: 1px solid var(--kenar);
  border-radius: 14px; padding: 15px 17px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
}
.baslik {
  margin: 0; font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--amber);
  font-family: var(--baslik-font);
}
.alt {
  margin: 5px 0 0; font-size: 16px; font-weight: 600; color: #fff;
  font-family: var(--baslik-font);
}
.aciklama { margin: 3px 0 12px; font-size: 11.5px; color: var(--sonuk); }
.dipnot {
  margin: 12px 0 0; padding-top: 10px; font-size: 11px; color: var(--sonuk);
  border-top: 1px solid rgba(var(--vurgu-rgb), .14);
}

#sol { top: 18px; left: 18px; width: 258px; }

/* --- gösterge --- */
.satir {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; padding: 3px 0; color: #d8d3c6;
}
.satir i { width: 15px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.satir b {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-weight: 600; color: #fff;
}

/* --- menü --- */
.menu {
  position: absolute; top: 18px; right: 18px; z-index: 20;
  transition: right .18s ease;
}

/* Kart da sağ üstte açılıyor ve menü onun başlığının üstüne biniyordu.
   Kart açıkken menü kartın soluna kayar. Dar ekranda kart alta indiği
   için (aşağıdaki 900px kuralı) kayma geri alınır. */
.harita-alani.kart-acik .menu { right: 350px; }
.menu-dugme {
  display: flex; align-items: center; gap: 9px;
  background: var(--cam); color: var(--metin);
  border: 1px solid var(--kenar); border-radius: 22px;
  padding: 9px 16px; cursor: pointer; font: inherit; font-size: 12.5px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.menu-dugme:hover { border-color: rgba(var(--vurgu-rgb), .45); }
.menu-ozet { color: var(--amber); font-weight: 600; }
.ok { color: var(--sonuk); font-size: 10px; }

.menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 320px;
  background: var(--cam); border: 1px solid var(--kenar);
  border-radius: 14px; padding: 10px 8px 8px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
  max-height: 78vh; overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-grup {
  margin: 8px 0 5px; padding: 0 9px;
  font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--sonuk);
}
.menu-grup em {
  display: block; text-transform: none; letter-spacing: 0;
  font-style: normal; font-size: 10.5px; opacity: .75; margin-top: 2px;
}

.secenek {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--sonuk); font: inherit; font-size: 12.5px;
  padding: 7px 9px; border-radius: 8px; text-align: left;
}
.secenek:hover { background: rgba(255, 255, 255, .055); color: #fff; }
.secenek.acik { color: #fff; }
.secenek em {
  display: block; font-style: normal; font-size: 10.5px;
  color: var(--sonuk); margin-top: 1px;
}
.secenek b {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--sonuk); font-variant-numeric: tabular-nums;
}
.secenek.acik b { color: var(--amber); }

/* Kutucuk ve yuvarlak işaret */
.isaret {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 1.5px solid rgba(var(--vurgu-rgb), .45); border-radius: 4px;
  position: relative; margin-top: 1px;
}
.isaret.yuvarlak { border-radius: 50%; }
.secenek.acik .isaret { background: var(--amber); border-color: var(--amber); }
.secenek.acik .isaret::after {
  content: ''; position: absolute; inset: 0;
  background: #100c05;
  clip-path: polygon(14% 47%, 38% 71%, 86% 22%, 93% 30%, 38% 85%, 7% 54%);
}
.secenek.acik .isaret.yuvarlak::after {
  clip-path: none; border-radius: 50%; inset: 3.5px;
}

.menu-sifirla {
  width: calc(100% - 18px); margin: 8px 9px 2px;
  background: transparent; border: 1px solid var(--kenar);
  border-radius: 8px; color: var(--sonuk);
  padding: 7px; cursor: pointer; font: inherit; font-size: 11.5px;
}
.menu-sifirla:hover { color: #fff; border-color: rgba(var(--vurgu-rgb), .45); }

/* --- ülke kartı --- */
.kart {
  top: 18px; right: 18px; width: 320px;
  max-height: calc(100% - 36px); overflow-y: auto; z-index: 12;
  padding: 0;
}
.kart[hidden] { display: none; }
.kart-bas {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 15px 17px 12px; position: sticky; top: 0;
  background: var(--cam); z-index: 2;
  border-bottom: 1px solid rgba(var(--vurgu-rgb), .16);
}
.kart h2 { margin: 5px 0 0; font-size: 19px; color: #fff; line-height: 1.15; }
.kart-kapat {
  background: none; border: 0; color: var(--sonuk);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.kart-kapat:hover { color: #fff; }
.kart-govde { padding: 4px 17px 16px; }

.bolum {
  margin: 15px 0 7px; font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber);
}
.rejim {
  display: grid; grid-template-columns: 15px 1fr auto; gap: 4px 9px;
  align-items: center; padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.rejim i { width: 13px; height: 13px; border-radius: 3px; }
.rejim-ad { font-size: 12.5px; color: #d8d3c6; }
.rejim-deger { font-size: 11.5px; color: #fff; font-weight: 600; text-align: right; }
.rejim-not {
  grid-column: 2 / -1; font-size: 11px; color: var(--sonuk); line-height: 1.45;
}
.rejim.etkin { background: rgba(var(--vurgu-rgb), .07); border-radius: 7px;
               padding: 7px 8px; margin: 0 -8px; }

.etiketler { display: flex; flex-wrap: wrap; gap: 5px; }
.etiket {
  font-size: 11px; padding: 3px 9px; border-radius: 20px;
  background: rgba(90, 196, 124, .14); color: #8fd9ab;
  border: 1px solid rgba(90, 196, 124, .3);
}
.liste { margin: 0; padding-left: 17px; font-size: 12px; color: #d8d3c6; }
.liste li { margin: 2px 0; }
.metin { font-size: 12px; color: #c8c3b4; line-height: 1.6; }
.metin strong { color: #fff; }
.bos { font-size: 12px; color: var(--sonuk); margin: 10px 0; }

.kaynak {
  position: absolute; left: 18px; bottom: 12px; z-index: 8;
  margin: 0; font-size: 10px; color: rgba(207, 202, 187, .42);
}

@media (max-width: 900px) {
  #sol { display: none; }
  .kart { left: 12px; right: 12px; width: auto; top: auto; bottom: 12px;
          max-height: 55vh; }
  .harita-alani.kart-acik .menu { right: 12px; }
}

/* --- görünüm anahtarı --- */
.yuzey { position: absolute; inset: 0 0 var(--dock-bosluk, 0px) 0; }
.yuzey[hidden] { display: none; }

.anahtar {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; gap: 3px; padding: 3px;
  background: var(--cam); border: 1px solid var(--kenar);
  border-radius: 22px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.anahtar button {
  border: 0; background: transparent; color: var(--sonuk);
  padding: 7px 17px; border-radius: 18px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600;
}
.anahtar button:hover:not(:disabled) { color: #fff; }
.anahtar button.acik {
  background: var(--amber); color: #100c05;
  font-family: var(--baslik-font);
}
.anahtar button { transition: background-color .3s ease, color .3s ease; }
.anahtar button:disabled { opacity: .38; cursor: default; }

/* --- küre pinleri --- */
.kure-pin__ic {
  position: relative; cursor: pointer;
  transform: translate(-50%, -50%); pointer-events: auto;
}
.kure-pin__nokta {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff;
}
.kure-pin__etiket {
  position: absolute; left: 18px; top: -6px;
  background: rgba(11, 16, 12, .92); border: 1px solid transparent;
  border-radius: 6px; padding: 3px 8px; white-space: nowrap;
  font-size: 11px; color: #f2ede2; pointer-events: none;
}
.kure-pin.etiketsiz .kure-pin__etiket { display: none; }
.kure-pin.arkada { opacity: 0; pointer-events: none; }
.kure-pin.arkada .kure-pin__etiket { display: none; }

/* --- dizilim kaydı (NCBI bağlantısı) ---
   Hat kartının altında, hattın arşivde dizilenmiş örneği var mı onu
   gösterir. Bağın gücü renkle ayrılır; "bölgesel" ile "adıyla kayıtlı"
   aynı şey değildir ve kart bunu gizlememelidir. */
.dizilim {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
}
.dizilim i {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.dizilim-ad { font-size: 12.5px; color: #fff; font-weight: 600; }
.dizilim-sayi { margin-left: auto; font-size: 11.5px; color: var(--sonuk); }
.dizilim-not {
  margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--sonuk);
}
.dizilim-not b { color: #d8d3c6; font-weight: 600; }

/* Erişim numaraları NCBI'ya açılır; arşiv kaydı tıklanabilir olmalı. */
.aksesyon {
  display: inline-block; margin: 5px 5px 0 0; padding: 2px 7px;
  border-radius: 5px; font: 11px/1.5 ui-monospace, SFMono-Regular, monospace;
  color: var(--turkuaz); text-decoration: none;
  background: rgba(0, 245, 212, .07);
  border: 1px solid rgba(0, 245, 212, .18);
}
.aksesyon:hover { background: rgba(0, 245, 212, .14); color: #fff; }

/* Aday kartında "bilinmeyenler": var olan etiketin sönük hali. Boş bırakmak
   yerine adını yazmak, neyin eksik olduğunu bilgiye çeviriyor. */
.etiket.bos-etiket {
  color: #6f6a5e; border-style: dashed;
  border-color: rgba(255,255,255,.14); background: transparent;
}

/* Anahtardaki ayrı ürüne geçiş. Görünüm düğmeleriyle aynı ölçüde durur ama
   dolgusu yok: aynı haritanın bir görünümü değil, başka bir harita olduğu
   biçimden anlaşılsın. */
.anahtar-baglanti {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 18px;
  font-size: 12.5px; font-weight: 600; text-decoration: none;
  color: var(--sonuk); border: 1px dashed rgba(var(--vurgu-rgb), .3);
  margin-left: 3px;
}
.anahtar-baglanti:hover { color: #fff; border-color: rgba(var(--vurgu-rgb), .6); }
.anahtar-baglanti .ok-dis { font-size: 11px; opacity: .7; }

/* Vitrin kartinin ic ogeleri. Bu uc sinifi kabuk.js uretiyor, dolayisiyla
   stilleri de harita katmaniyla birlikte durmali: sayfa kabuguna yazilinca
   kabuk yeniden yazildiginda sessizce dusuyor ve kartlar duz metne donuyor.
   Bir kez oldu (21 Eylul 2026), bir daha olmasin diye buraya alindi. */
.hdk-ad {
  font-size: 12px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.hdk-alt {
  font-size: 10px; color: var(--sonuk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.hdk-etiket {
  display: inline-block; align-self: flex-start;
  font-size: 9px; font-family: monospace;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(var(--vurgu-rgb), 0.18);
  color: var(--amber);
  border: 1px solid rgba(var(--vurgu-rgb), 0.3);
}