/* harita.css — Elifbâ Takımadaları (harita.js çizer)
   Portolan üslubu: parşömen kara, lacivert/mavi deniz, ince kıyı çizgileri,
   rüzgâr çizgileri. Kara ve kartuşlar iki temada da parşömen kalır (yazı hep
   koyu mürekkep, okunaklı); deniz temayla değişir. Ağır filtre yok; hareketler
   yalnız transform/opacity/dashoffset (ucuz) ve "hareketi kapat"la durur. */

:root{
  --ha-deniz:#CFE2F3; --ha-sig:#E2EEF8; --ha-dalga:rgba(4,44,83,.20); --ha-ruzgar:rgba(4,44,83,.10);
  --ha-cerceve:#8A6A36; --ha-kara:#F4E7C6; --ha-kara-tamam:#EED9A2; --ha-kara-kilit:#E6DDC8;
  --ha-kiyi:#7A5A2B; --ha-yesil:#5F7F4E; --ha-yazi:#2A2116; --ha-yazi-2:#6B5631;
  --ha-sis:#F4F7FA; --ha-rota:#7A3E22; --ha-altin:#C79A2E; --ha-bayrak:#185FA5; --ha-muhur:#B23A2C;
  --ha-balina:#5B86B0; --ha-gemi:#8A5A2B; --ha-yelken:#FBF4E2;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ha-deniz:#0A3A69; --ha-sig:#134A80; --ha-dalga:rgba(207,225,245,.20); --ha-ruzgar:rgba(207,225,245,.10);
    --ha-cerceve:#D9B76A; --ha-kara:#E6D3A6; --ha-kara-tamam:#E2C780; --ha-kara-kilit:#9FA9B4;
    --ha-sis:#7890AC; --ha-rota:#F2C14E; --ha-altin:#F2C14E; --ha-bayrak:#2F78C4; --ha-muhur:#C2412F; --ha-balina:#7FA9D4;
  }
}
:root[data-theme="dark"]{
  --ha-deniz:#0A3A69; --ha-sig:#134A80; --ha-dalga:rgba(207,225,245,.20); --ha-ruzgar:rgba(207,225,245,.10);
  --ha-cerceve:#D9B76A; --ha-kara:#E6D3A6; --ha-kara-tamam:#E2C780; --ha-kara-kilit:#9FA9B4;
  --ha-sis:#7890AC; --ha-rota:#F2C14E; --ha-altin:#F2C14E; --ha-bayrak:#2F78C4; --ha-muhur:#C2412F; --ha-balina:#7FA9D4;
}

.ha{margin:.8rem 0 .4rem}
.ha-kap{border-radius:14px;overflow:hidden;border:1px solid var(--cizgi-koyu);background:var(--ha-deniz);line-height:0}
/* Hakem 2 (09.10.2026): telefonda dikey harita artık ayrı kaydırma kutusu değil (iç içe
   kaydırma kalktı). Kısa kipte (.kisa) harita.js viewBox'ı Hâme'nin adası çevresine kırpar:
   390×844'te harita ≈300 px, "Devam et" ilk ekranda. "Haritanın tamamı" açınca bütün rota
   sayfanın içinde uzar, yalnız sayfa kayar. Masaüstünde yükseklik pencereye göre sınırlı. */
.ha-kap.dikey{overflow:hidden}
/* Hocanın kararı (09.10.2026, gece): "haritanın tamamı görünmeyince anlamı kalmıyor". Telefonda
   kısa pencere kalktı; bütün rota aşağı doğru bir yol olarak açık. "Devam" ilk ekranda kalsın
   diye düğme satırı ekranın altına yapışır; Hâme ekranın dışındaysa sayfa ona kayar (harita.js). */
@media (max-width:600px){
  .ha .ha-alt{position:sticky;bottom:0;z-index:6;background:var(--kagit);margin:0;padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom));box-shadow:0 0 0 1rem var(--kagit),0 -10px 14px -6px rgba(0,0,0,.18);clip-path:inset(-30px -1rem 0 -1rem)}
}
.ha-kap.yatay .ha-svg{max-height:max(340px,calc(100vh - 250px))}
.ha-tum{margin-top:.5rem;min-height:44px}
.ha-tum[hidden]{display:none}
.ha-not:empty{min-height:0;margin:0}
.ha-svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.ha-not{min-height:1.4em;margin:.35rem 0 .2rem;font-size:.9rem;color:var(--murekkep-2);opacity:0;transition:opacity .25s}
.ha-not.gorunur{opacity:1}
.ha-alt{display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center}
.ha-alt .yol-noktalar{margin:0}

/* deniz, çerçeve, rüzgâr çizgileri */
.ha-deniz{fill:var(--ha-deniz)}
.ha-dalga{fill:none;stroke:var(--ha-dalga);stroke-width:1.6;stroke-linecap:round}
.ha-ruzgar path{stroke:var(--ha-ruzgar);stroke-width:1.2}
.ha-cerceve{fill:none;stroke:var(--ha-cerceve);stroke-width:3}
.ha-cerceve.ince{stroke-width:1.2;opacity:.7}

/* rota: geçilen bölüm koyu kesik çizgi, kalan soluk noktalı */
.ha-rota{fill:none;stroke:var(--ha-rota);stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 11;opacity:.55}
.ha-rota.gecildi{stroke-dasharray:9 9;opacity:.9}
.ha-svg.dikey .ha-rota{stroke-width:2.4;stroke-dasharray:.1 9}
.ha-svg.dikey .ha-rota.gecildi{stroke-dasharray:7 7}

/* adalar */
.ha-ada{cursor:pointer;outline:none}
.ha-ada.kilitli{cursor:default}
.ha-sig{fill:var(--ha-sig);stroke:var(--ha-kiyi);stroke-width:1;stroke-dasharray:2 5;opacity:.75}
.ha-kara{fill:var(--ha-kara);stroke:var(--ha-kiyi);stroke-width:2.2;stroke-linejoin:round;transition:fill .2s}
.ha-ada.tamam .ha-kara{fill:var(--ha-kara-tamam)}
.ha-ada.kilitli .ha-kara{fill:var(--ha-kara-kilit)}
.ha-kiyi-ic{fill:none;stroke:var(--ha-kiyi);stroke-width:.9;opacity:.45}
.ha-harf{font-family:var(--osm);fill:var(--ha-kiyi);opacity:.2;text-anchor:middle}
.ha-selvi{fill:var(--ha-yesil);stroke:#3F5A33;stroke-width:.8}
.ha-tepe,.ha-iskele{fill:none;stroke:var(--ha-kiyi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ha-fener path,.ha-fener rect{fill:#FBF4E2;stroke:var(--ha-kiyi);stroke-width:1.4}
.ha-fener .ha-fener-isik{fill:var(--ha-altin);stroke:none;opacity:.55}
.ha-ada.kilitli .ha-selvi,.ha-ada.kilitli .ha-tepe,.ha-ada.kilitli .ha-harf{opacity:.12}
.ha-sis ellipse{fill:var(--ha-sis);opacity:.72}
.ha-sis{animation:haSis 9s ease-in-out infinite alternate}
@keyframes haSis{from{transform:translateX(-6px)}to{transform:translateX(6px)}}
.ha-odak{fill:none;stroke:var(--vurgu);stroke-width:4;opacity:0}
.ha-ada:focus-visible .ha-odak,.ha-ada:hover .ha-odak{opacity:.9}
.ha-ada.kilitli:hover .ha-odak{opacity:.35}
.ha-halka{fill:none;stroke:var(--ha-altin);stroke-width:3;stroke-dasharray:14 9;animation:haHalka 14s linear infinite}
@keyframes haHalka{to{stroke-dashoffset:-460}}
.ha-ada.simdi .ha-kara{stroke-width:3}

/* bayrak: tamam = mavi flama; mühür = kırmızı bayrak, ortasında mühür */
.ha-direk-ince{stroke:var(--ha-kiyi);stroke-width:2.2;stroke-linecap:round}
.ha-direk-tepe{fill:var(--ha-altin)}
.ha-flama{fill:var(--ha-bayrak);stroke:rgba(0,0,0,.25);stroke-width:.8;transform-box:fill-box;transform-origin:0 50%;animation:haFlama 2.6s ease-in-out infinite}
.ha-bayrak.muhur .ha-flama{fill:var(--ha-muhur)}
.ha-muhur-ici{fill:none;stroke:#FFF6E6;stroke-width:1.8}
@keyframes haFlama{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.88) skewY(3deg)}}

/* adlar */
.ha-osm{font-family:var(--osm);fill:var(--ha-yazi);text-anchor:middle;paint-order:stroke;stroke:var(--ha-kara);stroke-width:5px;stroke-linejoin:round}
.ha-ada.kilitli .ha-osm{opacity:.6}
.ha-kartus rect{fill:var(--ha-kara);stroke:var(--ha-kiyi);stroke-width:1.2}
.ha-ad{font-family:var(--serif);font-style:italic;fill:var(--ha-yazi);text-anchor:middle}
.ha-birim{font-family:var(--veri);letter-spacing:.12em;fill:var(--ha-yazi-2);text-anchor:middle}
.ha-ada.kilitli .ha-kartus{opacity:.62}
.ha-ada.simdi .ha-kartus rect{stroke:var(--ha-altin);stroke-width:2.4}

/* başlık ve pusula */
.ha-baslik rect{fill:var(--ha-kara);stroke:var(--ha-cerceve);stroke-width:2}
.ha-baslik rect.ince{fill:none;stroke-width:.9}
.ha-baslik-osm{font-family:var(--osm);fill:var(--ha-yazi);text-anchor:middle}
.ha-baslik-ad{font-family:var(--serif);font-style:italic;fill:var(--ha-yazi);text-anchor:middle}
.ha-baslik-alt{font-family:var(--veri);letter-spacing:.16em;fill:var(--ha-yazi-2);text-anchor:middle}
.ha-pusula-cember{fill:none;stroke:var(--ha-cerceve);stroke-width:1.6}
.ha-pusula-cember.ince{stroke-width:.8;stroke-dasharray:2 3}
.ha-yildiz.acik{fill:var(--ha-kara)}
.ha-yildiz.koyu{fill:var(--ha-cerceve)}
.ha-yildiz{stroke:var(--ha-cerceve);stroke-width:.6;stroke-linejoin:round}
.ha-pusula-orta{fill:var(--ha-muhur)}
.ha-simal{font-family:var(--serif);font-style:italic;fill:var(--murekkep);text-anchor:middle;paint-order:stroke;stroke:var(--ha-deniz);stroke-width:4px}
.ha-simal.osm{font-family:var(--osm);font-style:normal}

/* gemiler, balina */
.ha-govde{fill:var(--ha-gemi);stroke:#4E3216;stroke-width:1.4;stroke-linejoin:round}
.ha-govde-cizgi{stroke:#E9C98A;stroke-width:1.4;opacity:.7}
.ha-direk{stroke:#4E3216;stroke-width:2.2;stroke-linecap:round}
.ha-yelken,.ha-kayik-yelken{fill:var(--ha-yelken);stroke:#8A6A36;stroke-width:1.1;stroke-linejoin:round}
.ha-gemi-flama{fill:var(--ha-muhur)}
.ha-dalga-alt{fill:none;stroke:var(--ha-dalga);stroke-width:2;stroke-linecap:round}
.ha-balina-govde{fill:var(--ha-balina);stroke:#2D4F73;stroke-width:1.5;stroke-linejoin:round}
.ha-balina-karin{fill:none;stroke:#E8F1FA;stroke-width:2;stroke-linecap:round;opacity:.7}
.ha-balina-goz{fill:#14243A}
.ha-balina-yanak{fill:#E58E6F;opacity:.5}
.ha-balina-agiz{fill:none;stroke:#14243A;stroke-width:1.8;stroke-linecap:round}
.ha-fiskiye{fill:none;stroke:#E8F1FA;stroke-width:2.2;stroke-linecap:round;opacity:.85}
.ha-salla{animation:haSalla 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.ha-salla.yavas{animation-duration:5.2s}
@keyframes haSalla{0%,100%{transform:translateY(0) rotate(-1.6deg)}50%{transform:translateY(2px) rotate(1.6deg)}}

/* sandık, şişe, tekrar kayığı: dokunulabilir */
.ha-sandik,.ha-sise,.ha-kayik{cursor:pointer;outline:none}
.ha-vurus{fill:transparent}
.ha-sandik:focus-visible .ha-vurus,.ha-sise:focus-visible .ha-vurus,.ha-kayik:focus-visible .ha-vurus,
.ha-sandik:hover .ha-vurus,.ha-sise:hover .ha-vurus,.ha-kayik:hover .ha-vurus{fill:none;stroke:var(--vurgu);stroke-width:3}
.ha-sandik-govde,.ha-sandik-kapak{fill:#9A6232;stroke:#4E3216;stroke-width:1.4;stroke-linejoin:round}
.ha-sandik-bant{stroke:var(--ha-altin);stroke-width:2.4}
.ha-sandik-kilit{fill:var(--ha-altin);stroke:#4E3216;stroke-width:.8}
.ha-sise-cam{fill:#BFE3D8;fill-opacity:.85;stroke:#2F6B5B;stroke-width:1.3}
.ha-mantar{fill:#9A6232}
.ha-sise-kagit{fill:#FBF4E2;stroke:#8A6A36;stroke-width:.7}
.ha-kayik-ad{font-family:var(--veri);fill:#FBF4E2;text-anchor:middle;letter-spacing:.08em}
.ha-rozet circle{fill:var(--ha-muhur);stroke:#FFF6E6;stroke-width:2}
.ha-rozet text{fill:#fff;font-family:var(--govde);font-weight:700;text-anchor:middle}

/* Hâme haritada: kayık yalnız denizdeyken */
.ha-hame{pointer-events:none}
.ha-hame-kayik{opacity:0}
.ha-hame.denizde .ha-hame-kayik{opacity:1}

/* hareket tercihi: Hâme'nin düğmesi ve işletim sistemi ayarı haritayı da durdurur */
:root.hm-durgun .ha *{animation:none!important;transition:none!important}
/* Etik Kurul karari: canlandirmalar varsayilan acik; Hame dugmesi (html.hm-durgun) durdurur */
html.hm-durgun .ha *{animation:none!important;transition:none!important}