:root{
  /* Mavi is the light-mode default; matrix is the dark-mode default (see index.html head script) */
  --bg:#08121b; --panel:#0e1d2b; --panel2:#132839; --text:#e6f1f7; --muted:#8fa7b8;
  --cyan:#5fe3ff; --amber:#f0b341; --line:rgba(95,227,255,.35); --danger:#ff6b5a;
  --accent-rgb:95,227,255; --bg-rgb:8,18,27; --tag-hover-rgb:8,40,56;
  --on-accent:#062230; --panel-hi:#0f3a52; --panel-hi2:#0e2a3d; --glow:#0f2a3d; --world-bg:#0a3566;
  --font-h:'Chakra Petch',system-ui,sans-serif; --font-b:Inter,system-ui,sans-serif;
}
html[data-theme="mavi"]{
  --bg:#08121b; --panel:#0e1d2b; --panel2:#132839; --cyan:#5fe3ff; --line:rgba(95,227,255,.35);
  --accent-rgb:95,227,255; --bg-rgb:8,18,27; --tag-hover-rgb:8,40,56;
  --on-accent:#062230; --panel-hi:#0f3a52; --panel-hi2:#0e2a3d; --glow:#0f2a3d; --world-bg:#0a3566;
}
html[data-theme="matrix"]{
  --bg:#040b08; --panel:#0a1711; --panel2:#0f2018; --text:#e4f4ea; --muted:#8fb09c;
  --cyan:#3df08f; --line:rgba(61,240,143,.35);
  --accent-rgb:61,240,143; --bg-rgb:4,11,8; --tag-hover-rgb:6,40,24;
  --on-accent:#03170c; --panel-hi:#0c3a22; --panel-hi2:#0a2517; --glow:#0b2a1b; --world-bg:#031610;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme]){
    --bg:#040b08; --panel:#0a1711; --panel2:#0f2018; --text:#e4f4ea; --muted:#8fb09c;
    --cyan:#3df08f; --line:rgba(61,240,143,.35);
    --accent-rgb:61,240,143; --bg-rgb:4,11,8; --tag-hover-rgb:6,40,24;
    --on-accent:#03170c; --panel-hi:#0c3a22; --panel-hi2:#0a2517; --glow:#0b2a1b; --world-bg:#031610;
  }
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:radial-gradient(1200px 500px at 50% -10%,var(--glow) 0,var(--bg) 70%) no-repeat,var(--bg);color:var(--text);font:400 16px/1.55 var(--font-b);min-height:100dvh;display:flex;flex-direction:column}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

.top{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,3vw,40px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo__mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--cyan);border-radius:8px;font:700 14px var(--font-h);color:var(--cyan)}
.logo__text{font:700 20px var(--font-h);letter-spacing:.04em}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;padding:6px 14px;font:600 13px var(--font-h);color:var(--muted)}
.lang button[aria-pressed=true]{background:var(--cyan);color:var(--on-accent)}

main{flex:1}

/* ---------- Gemi sahnesi ---------- */
.hero{max-width:1760px;margin:0 auto;padding:6px clamp(16px,3vw,40px) 18px;text-align:center}
.hero h1{font:600 clamp(15px,1.7vw,22px)/1.3 var(--font-h);letter-spacing:.01em;margin:0}

/* Desktop: the surface picture covers the first screen; below it the camera dives through the surface (fx.css) into
   the underwater picture, shown edge to edge, then the hints and the footer. Both pictures are 2000x1126 (16:9);
   hotspots are percent of their stage, so they scale with it. */
.stage-wrap{display:none}
.world{position:relative;overflow:hidden;background:var(--world-bg)}
.stage{position:relative;width:100%;aspect-ratio:2000/1126;container-type:inline-size}
.stage__img{position:absolute;inset:0;width:100%;height:100%;display:block;background-size:100% 100%;background-repeat:no-repeat}
/* First screen: the stage is the smallest 16:9 box covering it, anchored a little below centre (more sky than sea is
   cut on very wide screens). fx.js moves it down a little as the page scrolls (--par), so the ship lags behind. */
.first{position:relative;height:100svh;min-height:540px;overflow:hidden;container-type:size}
.first .stage{position:absolute;left:50%;width:max(100cqw,177.62cqh);top:calc((100cqh - max(56.3cqw,100cqh))*.55);transform:translate3d(-50%,0,0);will-change:transform}
.first__line{margin:0;text-align:center;color:var(--text);font:500 clamp(15px,1.5vw,22px)/1.3 var(--font-h);letter-spacing:.01em}
/* Under the meniscus: a few tens of px of open water (--band), then the underwater picture, which starts right under
   it: its hull strip comes up through the crossing layer (fx.css .surf, which lies over it and dissolves into it)
   and its sea floor dissolves into the page colour, so the dive is one continuous move */
.deep{position:relative;display:flex;flex-direction:column;--band:clamp(22px,3.5vh,42px);padding-top:var(--band);
  background:linear-gradient(180deg,rgb(var(--uw-3)) 0,rgb(var(--uw-3)) calc(var(--band) + 20vw),var(--bg) calc(var(--band) + 52vw))}
.deep .stage{flex:none}
.stage--sea{z-index:1}
.stage--sea .stage__img{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6) 0,#000 4%,#000 90%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.6) 0,#000 4%,#000 90%,transparent 100%)}
.first{--air-bg:url(v5/surface-mavi.webp)}
.deep{--sea-bg:url(v5/under-mavi.webp)}
html[data-theme="matrix"] .first{--air-bg:url(v5/surface-matrix.webp)}
html[data-theme="matrix"] .deep{--sea-bg:url(v5/under-matrix.webp)}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .first{--air-bg:url(v5/surface-matrix.webp)}
  html:not([data-theme]) .deep{--sea-bg:url(v5/under-matrix.webp)}
}
/* The head script sets html[data-scene] (1x or 2x) once, so the surface picture is chosen before the first fetch.
   With scripts on, the sea waits on its placeholder until ship.js sets it after the page has loaded; ship.js also puts
   the 1x surface back inline if the 2x file is missing. */
html[data-scene="2x"] .first{--air-bg:url(v5/surface-mavi@2x.webp)}
html[data-scene="2x"][data-theme="matrix"] .first{--air-bg:url(v5/surface-matrix@2x.webp)}
html[data-scene] .deep{--sea-bg:none}
/* Placeholders under the pictures: 32x18 px blurs (about 200 bytes each), so the first paint is never an empty box */
:root,html[data-theme="mavi"]{--air-ph:url(data:image/webp;base64,UklGRugAAABXRUJQVlA4INwAAADwBQCdASogABIAPu1sqk8ppiOiMBgIATAdiWIAnTNV5cgMPgmkRTaaR8u/5eThTxf2K6arjS9JAADeQQT+HwhKtBAOu/woyT53FnWYNNF4i7CPdZGdg1W42+jRjCzfmWtEEZ0T7fZHM2hVo+VNs6rqankUImsuumB6MMKK8ok+B5m1e2L0oxlEUKPEDQD4lnE0HFA9m8yeLyE/B2dklXk6xCPskBsnXGBHi2sMR8wd2bb7XFeQ7ZTkfRAL7aAVC7P0RxTh82ITJZjyeYjiNTuDKfEVK5SwcTakfAAA);--sea-ph:url(data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAAAwBQCdASogABIAPu1iqE2ppaOiMAgBMB2JZgCsMzRCmCnD8HA+G7VpsegXkzxmllQELAD+5SWTa3o6gm6PM6jX2UoEMr2H9jAu0MSl8AJpqADJ8fIHnQ3jyznMc+KJ+ISKJ+IQNtp/j7eQE9zH7uG0oswek2oxYRqTtxyMGHETNb66eKUKPHEg1fBptj512w1uB5i/nTW8qyPm5KKaMhAEHrQygAAA)}
html[data-theme="matrix"]{--air-ph:url(data:image/webp;base64,UklGRt4AAABXRUJQVlA4INIAAACQBQCdASogABIAPu1kqU2ppaOiMAgBMB2JZACdEf/gPh9dlTb30qvz/WPIVq3M9Hkm2RfWAAD+5SZqzT3W2Ek+TrapCXNmN99Z8ErrKHEX3G28epZXrJsH/epv4iZCExKrg2Sx1lblyZUGnd9yiHoq6mtudeusHVxdyfBLL0HBfLR+Ua/8u8L3Zp+MWPQQQBQCMa20qxDrqh8mZw8dFhPBf1u8GFuqBjzJpiWpKsJyUobT5pglR2i+A+48d4MYMhJkBB916cwtZ5ickynvTCMgAAA=);--sea-ph:url(data:image/webp;base64,UklGRrgAAABXRUJQVlA4IKwAAADwBACdASogABIAPu1kqk2ppaQiMAgBMB2JYgB3AART8Icdvr0eQS3DzmGn2mb9oUgA/ulS0zy7qqBgA6pWKm/xXL52ayAcnPO2Rq8vpjCFOjV/2nFAhBE2291QPhf/1v4hQuMawrZvG0lmHZTaJoT4NV8TzO9+4WcOTptZ+PO/sD5pTToFI1YkVARDSuA/AD+7uLZvaAazueX6CxmgNwORm0ItiNCck6pLwAAA)}
.stage--air .stage__img{background-image:var(--air-bg),var(--air-ph)}
.stage--sea .stage__img{background-image:var(--sea-bg),var(--sea-ph)}
.stage--sea:focus{outline:none}
.sea__pan{position:absolute;inset:0;transform-origin:50% 0}
/* Under the picture: the page colour; hints and footer sit on it */
.floor{position:relative;flex:1 0 auto;min-height:clamp(120px,14svh,220px);margin-top:-3px;padding:clamp(9px,1vw,21px) 16px 130px}
.floor>*{position:relative;z-index:1}
/* Hatch names: SVG text in the plane of each hatch (marksSvg in ship.js), crisp at any scale */
.stage__marks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hmark{font:700 25px var(--font-h);letter-spacing:.05em;text-anchor:middle;fill:var(--hatch-ink);
  paint-order:stroke fill;stroke:rgba(2,10,18,.6);stroke-width:1.6px;stroke-linejoin:round}
.hmark--sm{font-size:10.6px;font-weight:700;letter-spacing:.03em;stroke-width:1.2px}
.hmark--long{font-size:9.4px;letter-spacing:.01em}
/* a translucent plate behind the name, so it reads on the bright and the dark hatch faces alike */
.hmark__plate{fill:rgba(2,10,18,.4);stroke:rgba(var(--accent-rgb),.4);stroke-width:.8px}
:root,html[data-theme="mavi"]{--hatch-ink:#eaf4fb}
html[data-theme="matrix"]{--hatch-ink:#d6f6e4}
@media (prefers-color-scheme:dark){html:not([data-theme]){--hatch-ink:#d6f6e4}}
/* The island hangar (MarOps): its roll-up door is a copy of the picture cut to the door panel (hangarHtml in ship.js);
   on hover or focus it rolls up over a lit interior */
.hangar{position:absolute;overflow:hidden;pointer-events:none}
.hangar__in,.hangar__door{position:absolute;inset:0}
.hangar__in{opacity:0;transition:opacity .2s linear .12s;
  background:radial-gradient(70% 80% at 50% 105%,rgba(var(--accent-rgb),.75),transparent 72%),repeating-linear-gradient(90deg,transparent 0 18%,rgba(var(--accent-rgb),.16) 18% 20%),linear-gradient(180deg,#01060a,#0a2533)}
.hangar__door{background:var(--air-bg) var(--bp)/var(--bs) no-repeat;transition:transform .55s cubic-bezier(.5,0,.3,1);will-change:transform}
.hangar__door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(var(--accent-rgb),.9);box-shadow:0 0 6px rgba(var(--accent-rgb),.9);opacity:0;transition:opacity .2s}
.hs--hangar:hover .hangar__door,.hs--hangar:focus-visible .hangar__door,.hs--hangar.is-armed .hangar__door{transform:translate3d(0,-94%,0);transition-duration:.7s}
.hs--hangar:hover .hangar__door::after,.hs--hangar:focus-visible .hangar__door::after{opacity:1}
.hs--hangar:hover .hangar__in,.hs--hangar:focus-visible .hangar__in,.hs--hangar.is-armed .hangar__in{opacity:1;transition-delay:0s}
.hs--hangar .hs__box{border-radius:4px}
.hint{max-width:1760px;margin:0 auto;text-align:center;color:var(--muted);font:500 14px var(--font-h);letter-spacing:.14em;text-transform:uppercase}

.hs{position:absolute;display:block;background:none;border:0;padding:0;text-decoration:none;color:inherit}
.hs__box{position:absolute;inset:0;border-radius:6px;transition:.25s}
.hs__box::before,.hs__box::after{content:"";position:absolute;width:14%;min-width:10px;aspect-ratio:1;border:2px solid var(--cyan);opacity:0;transition:.25s}
.hs__box::before{left:-3px;top:-3px;border-right:0;border-bottom:0}
.hs__box::after{right:-3px;bottom:-3px;border-left:0;border-top:0}
.hs:hover .hs__box,.hs:focus-visible .hs__box{background:rgba(var(--accent-rgb),.14);box-shadow:0 0 0 1px var(--cyan),0 0 22px rgba(var(--accent-rgb),.55)}
.hs:hover .hs__box::before,.hs:hover .hs__box::after,.hs:focus-visible .hs__box::before,.hs:focus-visible .hs__box::after{opacity:1}
.hs--live .hs__box{animation:pulse 2.4s ease-in-out infinite}
.hs--soon .hs__box{background:repeating-linear-gradient(135deg,rgba(0,0,0,.0) 0 8px,rgba(240,179,65,.10) 8px 16px)}
.hs--soon:hover .hs__box{box-shadow:0 0 0 1px var(--amber),0 0 18px rgba(240,179,65,.45);background:rgba(240,179,65,.12)}
.hs--soon .hs__box::before,.hs--soon .hs__box::after{border-color:var(--amber)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 10px rgba(var(--accent-rgb),.2)}50%{box-shadow:0 0 0 1px var(--cyan),0 0 26px rgba(var(--accent-rgb),.7)}}

.hs--spot .hs__box{border-radius:50%;animation:pulse 2.4s ease-in-out infinite}

.tag{position:absolute;left:50%;transform:translateX(calc(-50% + var(--dx,0cqw)));white-space:nowrap;font:600 clamp(8px,.95cqw,15px)/1 var(--font-h);letter-spacing:.06em;text-transform:uppercase;padding:.55em .9em;border:1px solid var(--line);background:rgba(var(--bg-rgb),.82);backdrop-filter:blur(4px);border-radius:4px;color:var(--text);pointer-events:none;transition:.25s}
.tag::before{content:"";position:absolute;left:calc(50% - var(--dx,0cqw));width:1px;height:var(--lead,10px);background:var(--line)}
.tag--below{top:calc(100% + var(--gap,10px))}
.tag--below::before{bottom:100%}
.tag--above{bottom:calc(100% + var(--gap,10px))}
.tag--above::before{top:100%}
.tag em{font-style:normal;margin-left:.6em;padding:.2em .5em;border-radius:3px;font-size:.85em}
.tag .live{background:var(--cyan);color:var(--on-accent)}
.tag .soon{background:var(--amber);color:#2a1c00}
.hs:hover .tag,.hs:focus-visible .tag{border-color:var(--cyan);background:rgba(var(--tag-hover-rgb),.95)}

/* ---------- Mobil liste ---------- */
.list{display:block;padding:0 16px 24px;max-width:640px;margin:0 auto;width:100%}
.list__banner{margin:0 -16px 18px;height:190px;overflow:hidden;position:relative}
.list__banner{background:url(v5/surface-mavi-m.webp) 30% 48%/cover no-repeat}
html[data-theme="matrix"] .list__banner{background-image:url(v5/surface-matrix-m.webp);background-position:30% 55%}
@media (prefers-color-scheme:dark){html:not([data-theme]) .list__banner{background-image:url(v5/surface-matrix-m.webp);background-position:30% 55%}}
.list__banner--sea{margin:26px -16px 0;height:150px;background:url(v5/under-mavi-m.webp) 60% 45%/cover no-repeat}
html[data-theme="matrix"] .list__banner--sea{background-image:url(v5/under-matrix-m.webp)}
@media (prefers-color-scheme:dark){html:not([data-theme]) .list__banner--sea{background-image:url(v5/under-matrix-m.webp)}}
.list__banner--sea::after{background:linear-gradient(180deg,var(--bg),transparent 30%,transparent 55%,var(--bg))}
.list__banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--bg))}
.list h1{font:700 26px/1.15 var(--font-h);margin:0 0 4px}
.list .sub{color:var(--muted);margin:0 0 18px}
.list h3{font:600 12px var(--font-h);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px}
.card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;text-decoration:none;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
.card--primary{background:linear-gradient(135deg,var(--panel-hi),var(--panel-hi2));border-color:var(--cyan)}
.card__ico{flex:0 0 auto;width:54px;height:40px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card__ico img{max-width:100%;max-height:40px;width:auto;height:auto}
.card__ico--fish{width:58px;height:44px;border-radius:10px;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.04) 75%,transparent)}
.card__ico--fish img{max-height:38px;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.35))}
.card__ico--fish img.is-flip{transform:scaleX(-1)}
.card__ico--fish svg{width:44px;height:26px;fill:none;stroke:var(--cyan);stroke-width:1.8;stroke-linejoin:round}
.card__ico--fish svg circle{fill:var(--cyan);stroke:none}
.card__ico b{font:700 13px var(--font-h);color:var(--cyan);border:1.5px solid var(--cyan);border-radius:8px;padding:5px 7px}
.card__t{flex:1;min-width:0}
.card__t strong{display:block;font:600 16px/1.3 var(--font-h)}
.card__t span{color:var(--muted);font-size:13.5px}
.chip{font:600 11px/1.4 var(--font-h);padding:.3em .7em;border-radius:4px;letter-spacing:.06em;text-transform:uppercase}
.chip--live{background:var(--cyan);color:var(--on-accent)}
.chip--soon{background:var(--amber);color:#2a1c00}
.card--soon{opacity:.85}

@media (min-width:860px){
  .hero{display:none}
  .stage-wrap{display:block}
  .list{display:none}
  /* Home: the header floats over the sky, the footer over the sea floor */
  .home .top{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(180deg,rgba(var(--bg-rgb),.62),rgba(var(--bg-rgb),0))}
  .home .top .theme,.home .top .lang{background:rgba(var(--bg-rgb),.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .home .foot{position:relative;z-index:2;margin-top:-130px;min-height:130px;background:none}
}

/* ---------- Modal + ambar kapağı ---------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px}
.modal__backdrop{position:absolute;inset:0;background:rgba(var(--bg-rgb),.78);backdrop-filter:blur(3px);animation:fade .25s both}
.modal__card{position:relative;width:min(640px,100%);max-height:min(86dvh,760px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--cyan);border-radius:14px;box-shadow:0 0 0 1px #000,0 0 60px rgba(var(--accent-rgb),.25);overflow:hidden;animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.hud-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:linear-gradient(90deg,var(--panel-hi),var(--panel-hi2));border-bottom:1px solid var(--line)}
.hud-code{font:600 12px var(--font-h);letter-spacing:.2em;color:var(--cyan)}
.x{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);padding:0 6px}
.x:hover{color:var(--text)}
.modal__inner{padding:20px 22px 24px;overflow:auto}
.modal__inner h2{font:700 26px/1.15 var(--font-h);margin:0 0 6px}
.modal__inner .lead{color:var(--muted);margin:0 0 16px}
.modal__inner h4{font:600 13px var(--font-h);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan);margin:20px 0 6px}
.modal__inner p{margin:0 0 12px}
.modal__inner ul{margin:0 0 14px;padding-left:20px}
.modal__inner li{margin:4px 0}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;border:0;font:700 15px var(--font-h);letter-spacing:.05em;text-decoration:none;background:var(--cyan);color:var(--on-accent)}
.btn:hover{filter:brightness(1.1)}
.btn--ghost{background:none;border:1px solid var(--amber);color:var(--amber);cursor:default}
details{border:1px solid var(--line);border-radius:8px;margin-bottom:8px;background:var(--panel2)}
summary{cursor:pointer;padding:12px 14px;font:600 15px var(--font-h)}
details p{padding:0 14px;margin:0 0 12px;color:#c7d9e4}
.ph{background:rgba(240,179,65,.18);border-radius:3px;padding:0 4px}

.doors{position:absolute;inset:0;top:41px;display:flex;pointer-events:none}
.doors i{flex:1;background:
  repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,0,0,.35) 46px 48px),
  linear-gradient(180deg,#5b6b78,#34424d);
  box-shadow:inset 0 0 0 2px #1b252e;position:relative;transition:transform .8s cubic-bezier(.65,0,.25,1) .18s}
.doors i::after{content:"";position:absolute;top:0;bottom:0;width:16px;background:repeating-linear-gradient(135deg,var(--amber) 0 10px,#1b252e 10px 20px)}
.doors i:first-child::after{right:0}
.doors i:last-child::after{left:0}
.modal.open .doors i:first-child{transform:translateX(-101%)}
.modal.open .doors i:last-child{transform:translateX(101%)}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.97)}}

.foot{padding:26px 16px 32px;text-align:center;color:var(--muted);font-size:13.5px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin-bottom:10px}
.foot nav a{color:var(--muted)}
.foot nav a:hover{color:var(--cyan)}
.foot p{margin:0}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
  .doors i{transition-duration:.01s!important;transition-delay:0s!important}
}

/* ---------- Güverte ambar kapakları ---------- */
.hs-wrap{display:contents}
.hs--hatch{filter:none}
.hs--hatch .hs__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hs--hatch polygon{fill:rgba(var(--accent-rgb),.0);stroke:var(--cyan);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:10 7;opacity:.0;transition:.25s;vector-effect:non-scaling-stroke}
.hs--hatch polygon{filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.9))}
.hs--live polygon{opacity:.9;animation:march 1.4s linear infinite}
.hs--soon polygon{stroke:var(--amber)}
.hs--hatch:hover polygon,.hs--hatch:focus-visible polygon{opacity:1;fill:rgba(var(--accent-rgb),.22)}
.hs--soon:hover polygon,.hs--soon:focus-visible polygon{fill:rgba(240,179,65,.2)}
@keyframes march{to{stroke-dashoffset:-34}}
.hs--hatch.hs--live .hs__box,.hs--hatch .hs__box{display:none}
.hs__beam{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,rgba(var(--accent-rgb),.85),rgba(var(--accent-rgb),0));opacity:0;pointer-events:none}
.hs__ready{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 clamp(7px,.85cqw,13px)/1 var(--font-h);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 8px #000;white-space:nowrap;opacity:0;transition:.25s;pointer-events:none}
.hs--soon .hs__ready{color:var(--amber)}
.hs--hatch:hover .hs__ready,.hs--hatch:focus-visible .hs__ready{opacity:1}
.hs--hatch.go .hs__beam{animation:beam .75s ease-in forwards}
.hs--hatch.go polygon{fill:rgba(var(--accent-rgb),.5);opacity:1}
@keyframes beam{0%{height:0;opacity:.2}60%{height:100%;opacity:1}100%{height:100%;opacity:0}}
.hs-wrap .tag{z-index:3}
.hs-wrap .tag{transform:translate(calc(-50% + var(--dx,0cqw)),calc(-100% - var(--gap,10px)))}
.hs-wrap .tag::before{top:100%;bottom:auto}

/* kapalı/açık ambar katmanı */
.hs-wrap .tag--below{transform:translate(calc(-50% + var(--dx,0cqw)),var(--gap,10px))}
.hs-wrap .tag--below::before{top:auto;bottom:100%}

/* underwater scene: the big creatures of the picture are the free-tool links (lifeHtml in ship.js). The box is the
   creature plus a margin; the link inside is clipped to the silhouette, the glow is an SVG path of the same outline. */
.life-group{display:contents}
.life{position:absolute;display:block;pointer-events:none;z-index:2;
  transform:translate3d(0,calc((1 - var(--dive,1))*var(--z,1)*-1.2cqw),0);will-change:transform}
.life:hover,.life:focus-within,.life.is-armed{z-index:5}
.life__sway{position:absolute;inset:0;display:block;will-change:transform;animation:life-sway var(--sd,10s) ease-in-out var(--sl,0s) infinite paused}
.stage--sea.is-live .life__sway{animation-play-state:running}
.life:hover .life__sway,.life:focus-within .life__sway{animation-play-state:paused}
@keyframes life-sway{0%,100%{transform:translate3d(0,0,0) rotate(0)}30%{transform:translate3d(calc(var(--amp,2%)*.5),calc(var(--amp,2%)*-1),0) rotate(-.5deg)}65%{transform:translate3d(calc(var(--amp,2%)*-.4),calc(var(--amp,2%)*.9),0) rotate(.45deg)}}
.life__glow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:.22;transition:opacity .3s}
.life__glow path{fill:none;stroke-linejoin:round}
.life__halo{stroke:rgba(var(--accent-rgb),.9);stroke-width:14;filter:blur(7px)}
.life__edge{stroke:var(--cyan);stroke-width:2.2;stroke-dasharray:14 9}
.life:hover .life__glow,.life:focus-within .life__glow,.life.is-armed .life__glow{opacity:1}
.life__hit{position:absolute;inset:0;display:block;pointer-events:auto;cursor:pointer;outline:none;-webkit-tap-highlight-color:transparent}
.life .tag{opacity:0;--gap:4px}
.life:hover .tag,.life:focus-within .tag,.life.is-armed .tag{opacity:1;border-color:var(--cyan);background:rgba(var(--tag-hover-rgb),.95)}
.hs--cage{border-radius:10px}
.hit{position:absolute;display:block;background:none;border:0;padding:0;cursor:default;outline:none;-webkit-tap-highlight-color:transparent;z-index:7}
.hs--decor{pointer-events:none}
.scene-note{max-width:1760px;margin:12px auto 0;text-align:center;color:var(--muted);font:500 14px var(--font-h);letter-spacing:.14em;text-transform:uppercase}

/* top bar: theme and language switches */
.top__end{display:flex;align-items:center;gap:10px}
.theme{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.theme button{background:none;border:0;padding:6px 12px;font:600 13px var(--font-h);color:var(--muted)}
.theme button[aria-pressed=true]{background:var(--cyan);color:var(--on-accent)}
/* the switch pills clip their overflow, so the focus ring is drawn inside the button */
.theme button:focus-visible,.lang button:focus-visible{outline-offset:-3px;outline-color:var(--text)}

/* legal draft pages */
.legal{max-width:760px;margin:0 auto;padding:12px 20px 40px;width:100%}
.legal h1{font:700 32px/1.15 var(--font-h);margin:14px 0 14px}
.legal p{margin:0 0 14px;color:#c7d9e4}
.legal strong{color:var(--text)}
.legal__draft{border:1px solid var(--amber);background:rgba(240,179,65,.12);color:var(--amber);border-radius:8px;padding:10px 14px;font:600 14px var(--font-h);letter-spacing:.04em;margin:0 0 18px}
.legal__back{color:var(--muted);text-decoration:none;font-size:14px}

/* araç sayfaları */
.altlang{color:var(--muted);text-decoration:none;font:600 13px var(--font-h)}
.toolpage{max-width:680px;margin:0 auto;padding:12px 20px 40px;width:100%}
.toolpage__back{color:var(--muted);text-decoration:none;font-size:14px;display:inline-block;margin-bottom:22px}
.toolpage h1{font:700 34px/1.12 var(--font-h);margin:12px 0 8px}
.toolpage .lead{color:#c7d9e4;font-size:18px;margin:0 0 22px}
.cta{margin-top:36px;padding:20px 22px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(135deg,var(--panel-hi),var(--panel-hi2))}
.cta__k{font:600 12px var(--font-h);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.cta strong{display:block;font:700 20px var(--font-h);margin:4px 0}
.cta p{margin:0 0 14px;color:#c7d9e4}
.btn--line{background:none;border:1.5px solid var(--cyan);color:var(--cyan)}

/* davetle kullanilan uygulama */
.tag .invite{background:transparent;color:var(--cyan);border:1px solid var(--cyan)}
.chip--invite{background:transparent;color:var(--cyan);border:1px solid var(--cyan)}
.muted-note{color:var(--muted);font-size:14px;margin-top:14px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.btn--ghost-cyan{background:none;border:1px solid var(--cyan);color:var(--cyan)}

.tag--quiet{opacity:0}
.hs:hover .tag--quiet,.hs:focus-visible .tag--quiet,.hs:hover+.tag--quiet,.hs:focus-visible+.tag--quiet{opacity:1}
@media (hover:none){.tag--quiet{opacity:0}}