/* ==========================================================================
   HC MARIN WORKS — tekne sistem haritası (ana sayfa + hizmetler) · harita.css
   v4.css'ten sonra yüklenir; yalnızca .hm bloğunu biçimler. Parçalar araclar/harita_uret.py ile üretilir.
   Ana sayfa : .hero-visual > .hm[data-hm="panel"] > .hm-boat (çizim + noktalar) + .hm-ui (panel · liste · bilmiyorum)
   Hizmetler : .page-hero-visual > .hm.hm-links[data-hm="links"] > .hm-boat + .yacht-caption
   Temalar   : lacivert html[data-theme="navy"] · siyah (data-theme yok) · beyaz html[data-theme="beyaz"]
   Çizim sınıfları (.yacht-wrap, .sys, .s-flow, .s-part, .hotspot…) style.css / v2.css'teki kuralları kullanır.
   ========================================================================== */

/* ---------------------------------------------------------------- renkler (taban = siyah tema) */
.hm {
  --hm-fg: #fff;
  --hm-fg-2: var(--steel-200);
  --hm-num: var(--accent);
  --hm-ico: var(--steel-100);
  --hm-card: rgba(255, 255, 255, .035);
  --hm-card-hover: rgba(255, 255, 255, .07);
  --hm-bd: rgba(255, 255, 255, .13);
  --hm-bd-hover: rgba(255, 255, 255, .34);
  --hm-sel: rgba(63, 184, 201, .13);
  --hm-sel-bd: var(--accent);
  --hm-sel-ico: var(--accent);
  --hm-focus: var(--accent);
  --hm-on: var(--accent);
  --hm-on-fg: var(--ink-900);
  --hm-dot: rgba(7, 9, 11, .9);
  --hm-dot-bd: rgba(63, 184, 201, .72);
  --hm-dot-fg: #eaf7f9;
  --hm-glow: rgba(63, 184, 201, .13);
  --hm-shadow: rgba(0, 0, 0, .55);
  --hm-badge: var(--ink-900);
  --hm-badge-fg: var(--accent);
  --hm-big: rgba(63, 184, 201, .07);
  --hm-big-fg: var(--accent);
  --hm-q: var(--accent);
  --hm-q-fg: var(--ink-900);
  --hm-more-bg: transparent;
  --hm-more-fg: #fff;
  --hm-more-bd: rgba(255, 255, 255, .3);
  --hm-tip: #fff;
  --hm-tip-fg: var(--ink-900);
  --hm-tip-num: var(--accent-ink);
  --hm-hs: 40px; /* nokta çapı */
  position: relative;
}
html[data-theme="navy"] .hm {
  --hm-card: rgba(125, 181, 214, .05);
  --hm-card-hover: rgba(125, 181, 214, .1);
  --hm-bd: rgba(125, 181, 214, .24);
  --hm-bd-hover: rgba(125, 181, 214, .55);
  --hm-sel: rgba(125, 181, 214, .17);
  --hm-dot: rgba(11, 31, 51, .92);
  --hm-dot-bd: rgba(125, 181, 214, .75);
  --hm-dot-fg: #eef6fb;
  --hm-glow: rgba(125, 181, 214, .14);
  --hm-shadow: rgba(3, 12, 22, .6);
  --hm-big: rgba(125, 181, 214, .08);
  --hm-more-bd: rgba(188, 203, 214, .36);
}
html[data-theme="beyaz"] .hm {
  --hm-fg: #0b1f33;
  --hm-fg-2: #3a5369;
  --hm-num: #1d6699;
  --hm-ico: #0f2a45;
  --hm-card: #fff;
  --hm-card-hover: #f2f8fd;
  --hm-bd: #cfe2ef;
  --hm-bd-hover: #8ec1e2;
  --hm-sel: #e3f1fb;
  --hm-sel-bd: #4a9fd5;
  --hm-sel-ico: #145b8c;
  --hm-focus: #1d6fa8;
  --hm-on: #4a9fd5;
  --hm-on-fg: #fff;
  --hm-dot: #0f2a45;
  --hm-dot-bd: #6fb3de;
  --hm-dot-fg: #fff;
  --hm-glow: rgba(74, 159, 213, .2);
  --hm-shadow: rgba(15, 42, 69, .35);
  --hm-badge: #fff;
  --hm-badge-fg: #145b8c;
  --hm-big: #eef7fd;
  --hm-big-fg: #1d6699;
  --hm-q: #cfe8f8;
  --hm-q-fg: #0b1f33;
  --hm-more-bg: #f3f8fc;
  --hm-more-fg: #0b1f33;
  --hm-more-bd: #bcd6e8;
  --hm-tip: #0f2a45;
  --hm-tip-fg: #fff;
  --hm-tip-num: #8cc6ec;
}

/* ---------------------------------------------------------------- simgeler (tek çizgi dili) */
.hm-ico { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------------------------------------------------------------- çizim + noktalar */
.hm-boat { position: relative; }
.hm .hotspot { display: grid; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.hm .hotspot::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* biraz daha geniş dokunma alanı */
.hm .hotspot .hotspot-dot {
  width: var(--hm-hs);
  height: var(--hm-hs);
  background: var(--hm-dot);
  border: 1.5px solid var(--hm-dot-bd);
  color: var(--hm-dot-fg);
  box-shadow: 0 0 0 4px var(--hm-glow), 0 4px 14px -4px var(--hm-shadow);
  transition: transform .3s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .3s;
}
.hm .hotspot .hm-ico { width: calc(var(--hm-hs) * .56); height: calc(var(--hm-hs) * .56); }
.hm .hm-badge {
  position: absolute;
  top: -7px;
  right: -9px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid var(--hm-dot-bd);
  border-radius: 9px;
  background: var(--hm-badge);
  color: var(--hm-badge-fg);
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: .02em;
  pointer-events: none;
}
/* sakin bekleme nabzı: noktalar sırayla, tek tek (01 → 12) */
.hm .hotspot .hotspot-dot::after { inset: -1.5px; border: 1.5px solid var(--hm-on); animation: hm-ring 7.2s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .6s); }
@keyframes hm-ring { 0% { transform: scale(1); opacity: .75; } 24%, 100% { transform: scale(1.9); opacity: 0; } }
.hm.has-sel .hotspot .hotspot-dot::after { animation: none; opacity: 0; }
.hm.has-sel .hotspot.is-active .hotspot-dot::after { animation: hm-ring-on 2.8s var(--ease) infinite; }
@keyframes hm-ring-on { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.75); opacity: 0; } }

/* üzerine gelme / klavye odağı / listeden önizleme: hafif vurgu (seçimden ayrı) */
.hm .hotspot:hover .hotspot-dot,
.hm .hotspot:focus-visible .hotspot-dot,
.hm .hotspot.is-preview .hotspot-dot {
  background: var(--hm-dot);
  color: var(--hm-dot-fg);
  border-color: var(--hm-on);
  transform: scale(1.1);
  box-shadow: 0 0 0 5px var(--hm-glow), 0 0 18px -2px var(--hm-on);
}
/* seçili nokta */
.hm .hotspot.is-active .hotspot-dot,
.hm .hotspot.is-active:hover .hotspot-dot,
.hm .hotspot.is-active:focus-visible .hotspot-dot {
  background: var(--hm-on);
  border-color: var(--hm-on);
  color: var(--hm-on-fg);
  transform: scale(1.16);
  box-shadow: 0 0 0 6px var(--hm-glow), 0 0 26px 0 var(--hm-on);
}
.hm .hotspot.is-preview { z-index: 3; }
.hm .hotspot:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 6px; border-radius: 50%; }
/* beyaz temada noktalar koyu gövde üstünde de durur: beyaz + mavi çift halka her zeminde görünür */
html[data-theme="beyaz"] .hm .hotspot:focus-visible { outline-color: #2b8ad0; }
html[data-theme="beyaz"] .hm .hotspot:focus-visible::before { box-shadow: 0 0 0 2px #fff; }

/* ipucu: yalnızca fareyle üzerine gelince / klavye odağında (seçim zaten panelde yazıyor) */
.hm .hotspot-tip { gap: 7px; padding: 8px 12px; background: var(--hm-tip); color: var(--hm-tip-fg); font-size: 12.5px; }
.hm .hotspot-tip .mono { font-size: 10.5px; letter-spacing: .04em; color: var(--hm-tip-num); }
.hm .hotspot-tip .ico { color: var(--hm-tip-num); }
.hm .hotspot.is-active:not(:hover):not(:focus-visible) .hotspot-tip { opacity: 0; }
@media (hover: none) { .hm .hotspot-tip { display: none; } }

/* ---------------------------------------------------------------- panel · liste · bilmiyorum */
.hm-ui { position: relative; display: grid; gap: 10px; margin-top: clamp(16px, 2.4vw, 28px); }

.hm-panel {
  container-type: inline-size;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "big title" "big text" "act act";
  align-items: start;
  gap: 0 18px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid var(--hm-bd);
  border-radius: 14px;
  background: var(--hm-card);
  color: var(--hm-fg);
}
.hm-big {
  grid-area: big;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border: 2px solid var(--hm-on);
  border-radius: 50%;
  background: var(--hm-big);
  color: var(--hm-big-fg);
  box-shadow: 0 0 0 5px var(--hm-glow);
}
.hm-big .hm-ico { width: 36px; height: 36px; stroke-width: 1.5; }
.hm .hm-title { grid-area: title; min-width: 0; margin: 0 0 6px; padding-top: 4px; font-size: clamp(1.08rem, .95rem + .45vw, 1.32rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--hm-fg); }
.hm-title-n { font-size: .8em; letter-spacing: .04em; color: var(--hm-num); }
.hm-title-n::after { content: "·"; margin: 0 .38em 0 .42em; color: var(--hm-fg-2); }
.hm .hm-text { grid-area: text; min-width: 0; font-size: 15px; line-height: 1.55; color: var(--hm-fg-2); }
.hm-actions { grid-area: act; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hm-actions .btn { flex: 1 1 auto; white-space: nowrap; }
.hm .hm-more { --bg: var(--hm-more-bg); --fg: var(--hm-more-fg); --bd: var(--hm-more-bd); }
.hm .hm-more:hover { --bg: var(--hm-card-hover); --bd: var(--hm-on); }
/* boş durum: panel yüksekliği en uzun cümleye göre sabit; boşluk başlığın üstüne ve altına eşit dağılır, düğmeler altta */
.hm-panel.is-idle { grid-template-rows: 1fr auto auto 1fr auto; grid-template-areas: ". ." "big title" "big text" ". ." "act act"; }
@container (min-width: 600px) {
  .hm-actions { grid-column: 2; }
  .hm-actions .btn { flex: 0 0 auto; }
}
.hm-panel.is-swap :is(.hm-title, .hm-text), .hm-panel.is-swap .hm-big .hm-ico { animation: hm-in .4s var(--ease); }
@keyframes hm-in { from { opacity: .2; transform: translateY(3px); } }

.hm-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hm-list > li { display: grid; }
.hm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid var(--hm-bd);
  border-radius: 10px;
  background: var(--hm-card);
  color: var(--hm-fg);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.hm-item .hm-ico { color: var(--hm-ico); transition: color .2s; }
.hm-item .hm-n { flex: none; font-size: 11px; letter-spacing: .04em; color: var(--hm-num); }
.hm-item .hm-name { min-width: 0; }
.hm-item.is-preview { border-color: var(--hm-bd-hover); }
.hm-item[aria-pressed="true"] { background: var(--hm-sel); border-color: var(--hm-sel-bd); box-shadow: inset 0 0 0 1px var(--hm-sel-bd), 0 0 22px -8px var(--hm-sel-bd); }
.hm-item[aria-pressed="true"] .hm-ico { color: var(--hm-sel-ico); }

.hm-unsure {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid var(--hm-bd);
  border-radius: 14px;
  background: var(--hm-card);
  color: var(--hm-fg);
  transition: background-color .2s, border-color .2s;
}
.hm-q { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--hm-q); color: var(--hm-q-fg); font-size: 22px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 5px var(--hm-glow); }
.hm-unsure-txt { flex: 1; min-width: 0; }
.hm-unsure-txt b { display: block; font-size: 15px; font-weight: 700; line-height: 1.3; }
.hm-unsure-txt span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--hm-fg-2); }
.hm-unsure > .ico { width: 20px; height: 20px; color: var(--hm-fg-2); transition: transform .25s var(--ease), color .2s; }

@media (hover: hover) {
  .hm-item:hover, .hm-unsure:hover { background: var(--hm-card-hover); border-color: var(--hm-bd-hover); }
  .hm-item[aria-pressed="true"]:hover { background: var(--hm-sel); border-color: var(--hm-sel-bd); }
  .hm-unsure:hover > .ico { transform: translateX(3px); color: var(--hm-on); }
}
.hm-item:focus-visible, .hm-unsure:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 2px; }
.hm-actions .btn:focus-visible { outline: 2px solid var(--hm-focus); outline-offset: 3px; }

/* ---------------------------------------------------------------- beyaz tema: çizim açık zeminde okunsun (gövde koyu lacivert) */
html[data-theme="beyaz"] .hm #y-body stop:first-child { stop-color: #29496a; }
html[data-theme="beyaz"] .hm #y-body stop:last-child { stop-color: #13304c; }
html[data-theme="beyaz"] .hm #y-glass stop:nth-child(1) { stop-color: #dcedf9; stop-opacity: .85; }
html[data-theme="beyaz"] .hm #y-glass stop:nth-child(2) { stop-color: #1c4569; }
html[data-theme="beyaz"] .hm #y-glass stop:nth-child(3) { stop-color: #5a84a8; }
html[data-theme="beyaz"] .hm #y-water stop { stop-color: #4a9fd5; }
html[data-theme="beyaz"] .hm #y-water stop:first-child { stop-opacity: .18; }
html[data-theme="beyaz"] .hm .y-hull, html[data-theme="beyaz"] .hm .y-sup path { stroke: #1f4467; }
html[data-theme="beyaz"] .hm .y-waves path { stroke: #4a9fd5; stroke-opacity: .7; }
html[data-theme="beyaz"] .hm .y-frame path { stroke: #5f7f9b; stroke-opacity: .5; }
html[data-theme="beyaz"] .hm .y-titleblock rect, html[data-theme="beyaz"] .hm .y-titleblock path { stroke: #5f7f9b; stroke-opacity: .45; }
html[data-theme="beyaz"] .hm .y-titleblock text { fill: #2b4a66; fill-opacity: .85; }
html[data-theme="beyaz"] .hm .y-line.y-out circle, html[data-theme="beyaz"] .hm .y-line.y-out ellipse { stroke: #4d7394; stroke-opacity: .9; }
html[data-theme="beyaz"] .hm .sys .s-part.y-out { stroke: #4d7394; stroke-opacity: 1; fill: rgba(20, 48, 75, .06); }
html[data-theme="beyaz"] .hm .sys.is-active .s-part.y-out { stroke: #1f7fc0; fill: rgba(31, 127, 192, .14); }
html[data-theme="beyaz"] .hm .sys.is-active .s-flow { filter: drop-shadow(0 0 2px rgba(74, 159, 213, .9)); }
html[data-theme="beyaz"] .hm .hm-title { color: var(--hm-fg); }
html[data-theme="beyaz"] .hm .hotspot-tip { box-shadow: 0 12px 28px -10px rgba(11, 31, 51, .5); }
html[data-theme="beyaz"] .hm .yacht-caption { color: var(--hm-fg-2); }
html[data-theme="beyaz"] .hm .yacht-caption .mono { color: var(--hm-num); }

/* ---------------------------------------------------------------- ekran genişlikleri */
@media (min-width: 768px) {
  .hm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hm-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .hm-ui { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto; grid-template-areas: "panel list" "unsure list"; gap: 12px 16px; }
  .hm-panel { grid-area: panel; }
  .hm-list { grid-area: list; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-unsure { grid-area: unsure; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hm { --hm-hs: 34px; }
  .hm .hm-badge { top: -6px; right: -8px; min-width: 17px; height: 16px; font-size: 9px; }
}
/* telefon: çizim kenardan kenara (biraz yakın), liste ana kontrol */
@media (max-width: 639px) {
  .hm { --hm-hs: 26px; }
  .hm-boat { margin-inline: calc(var(--gutter) * -1); overflow: hidden; }
  .hm-boat .yacht-wrap { width: calc(100% * 1200 / 1096); margin: calc(100% * -80 / 1096) 0 calc(100% * -44 / 1096) calc(100% * -13 / 1096); }
  .hm .y-frame, .hm .hm-badge { display: none; }
  .hm .hotspot .hotspot-dot { border-width: 1.2px; box-shadow: 0 0 0 3px var(--hm-glow), 0 3px 10px -3px var(--hm-shadow); }
  .hm .hotspot .hm-ico { width: calc(var(--hm-hs) * .62); height: calc(var(--hm-hs) * .62); stroke-width: 1.9; }
  .hm .hotspot.is-active .hotspot-dot { transform: scale(1.2); box-shadow: 0 0 0 4px var(--hm-glow), 0 0 16px 0 var(--hm-on); }
  .hm-ui { gap: 8px; }
  .hm-panel { grid-template-areas: "big title" "text text" "act act"; gap: 0 14px; padding: 16px; border-radius: 12px; }
  .hm-panel.is-idle { grid-template-areas: ". ." "big title" "text text" ". ." "act act"; }
  .hm-big { align-self: center; width: 54px; height: 54px; box-shadow: 0 0 0 4px var(--hm-glow); }
  .hm-big .hm-ico { width: 29px; height: 29px; }
  .hm .hm-title { align-self: center; margin: 0; padding: 0; font-size: 1.05rem; }
  .hm .hm-text { margin-top: 12px; font-size: 14.5px; }
  .hm-actions { margin-top: 16px; }
  .hm-actions .btn { min-height: 48px; padding: 11px 16px; font-size: 14px; }
  .hm-list { gap: 7px; }
  .hm-item { gap: 8px; min-height: 56px; padding: 8px 10px; font-size: 13px; line-height: 1.22; }
  .hm-item .hm-ico { width: 20px; height: 20px; }
  .hm-item .hm-n { font-size: 10.5px; }
  .hm-unsure { gap: 12px; padding: 12px 14px; border-radius: 12px; }
  .hm-q { width: 40px; height: 40px; font-size: 20px; }
  .hm-unsure-txt b { font-size: 14.5px; }
  .hm-unsure-txt span { font-size: 13px; }
}
@media (max-width: 379px) {
  .hm-item { gap: 7px; padding: 8px 9px; font-size: 12.5px; }
  .hm-item .hm-ico { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .hm .hotspot .hotspot-dot::after { animation: none !important; opacity: 0; }
  .hm-panel.is-swap :is(.hm-title, .hm-text), .hm-panel.is-swap .hm-big .hm-ico { animation: none; }
}
@media print {
  .hm .hotspots, .hm-actions { display: none; }
}