/* Orbilas — onaylı tasarımın (site/orbilas_tasarim) renk, tipografi ve yerleşim değerleri. */

:root{
  --tlo:#0b0f0e; --tekst:#e8efeb; --tresc:#b7c2bc; --drugi:#8f9c96; --trzeci:#7d8a84;
  --zar:#ff7a45; --zar-jasny:#ffa27d; --linia:rgba(232,239,235,0.10); --obrys:rgba(232,239,235,0.35);
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,monospace;
  --pasek-h:80px; --bok:48px; --szyna-w:150px; --odstep:48px; --podpis-h:40px; --ramka:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--pasek-h) + 16px);overflow-x:clip}
body{margin:0;background:var(--tlo);color:var(--tekst);font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,rgba(232,239,235,0.045) 0 1px,transparent 1px 120px),
                   repeating-linear-gradient(to bottom,rgba(232,239,235,0.045) 0 1px,transparent 1px 120px)}
img{max-width:100%;height:auto}
.nw{white-space:nowrap}
a{color:var(--zar)}
a:hover{color:var(--zar-jasny)}
:focus-visible{outline:2px solid var(--zar);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:20;background:var(--zar);color:var(--tlo);padding:12px 20px;
  border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* ---------- üst çubuk ---------- */
.pasek{position:sticky;top:0;z-index:10;height:var(--pasek-h);display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--linia);
  padding:0 max(var(--bok), calc((100% - var(--ramka)) / 2 + var(--bok)));
  background:rgba(11,15,14,0.86);backdrop-filter:blur(8px)}
.logo{display:flex;align-items:center;gap:14px;color:var(--tekst);text-decoration:none}
.logo svg{width:36px;height:36px}
.logo span{font-family:var(--mono);font-weight:500;font-size:19px;letter-spacing:0.3em}
.menu{display:flex;align-items:center;gap:32px}
.menu ul{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;font-size:14px}
.menu a{color:#c3cec8;text-decoration:none}
.menu a:hover{color:var(--tekst)}
.jezyki{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:12px;letter-spacing:0.08em}
.jezyki a{color:#c3cec8;text-decoration:none}
.jezyki [aria-current]{color:var(--tekst)}
.ukosnik{color:var(--trzeci)}
.przycisk{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
  border-radius:999px;text-decoration:none;font-size:15px}
.przycisk.obrys{border:1px solid var(--obrys);color:var(--tekst)}
.przycisk.obrys:hover{border-color:var(--tekst);color:var(--tekst)}
.przycisk.pelny{min-height:52px;padding:0 26px;background:var(--zar);color:var(--tlo);font-weight:600}
.przycisk.pelny:hover{background:var(--zar-jasny);color:var(--tlo)}

/* ---------- ilerleme çubuğu ---------- */
.szyna{position:fixed;top:50%;transform:translateY(-50%);z-index:5;width:var(--szyna-w);
  left:max(var(--bok), calc((100vw - var(--ramka)) / 2 + var(--bok)))}
.szyna ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.12em;text-transform:uppercase}
.szyna a{display:flex;align-items:center;gap:12px;color:var(--trzeci);text-decoration:none}
.szyna .kropka{width:9px;height:9px;border-radius:50%;border:1px solid currentColor;flex:none}
.szyna a:hover{color:var(--tresc)}
.szyna .odwiedzone{color:#a9b5af}
.szyna .odwiedzone .kropka{background:currentColor;border-color:currentColor}
.szyna [aria-current="step"]{color:var(--zar)}
.szyna [aria-current="step"] .kropka{background:var(--zar);border-color:var(--zar);box-shadow:0 0 0 4px rgba(255,122,69,0.18)}

/* ---------- ortak metin öğeleri ---------- */
main{position:relative;z-index:1}
.hero,.opowiesc,.dostawa,.stopka{max-width:var(--ramka);margin-inline:auto;padding-right:var(--bok);
  padding-left:calc(var(--bok) + var(--szyna-w) + var(--odstep))}
.nadtytul,.etykieta{margin:0 0 20px;font-family:var(--mono);font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--zar)}
.etykieta{font-size:11px;letter-spacing:0.14em;color:var(--trzeci)}
h1{margin:0 0 28px;font-family:var(--serif);font-weight:400;font-size:clamp(46px,6.2vw,80px);line-height:0.94;
  letter-spacing:-0.015em}
h1 em{font-style:italic}
h2{margin:0 0 24px;font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.4vw,60px);line-height:1.02;
  letter-spacing:-0.01em;text-wrap:balance}
h3{margin:0 0 12px;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15}
.wiodacy{margin:0 0 32px;color:var(--tresc);text-wrap:pretty}
.nota{margin:20px 0 0;font-size:13px;line-height:1.55;color:var(--drugi);text-wrap:pretty}
.akcje{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin:0}
.dalej{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--tekst);font-size:15px;
  text-decoration:none}
.dalej:hover{color:var(--zar-jasny)}

.liczby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0 0 32px}
.liczby > div{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.liczby dt,.karta dt{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--drugi)}
.liczby dd{margin:0;font-family:var(--serif);font-size:34px;line-height:1.05}
.karta{margin:0 0 20px;padding:20px 22px;border:1px solid rgba(232,239,235,0.14);border-radius:14px;
  background:rgba(232,239,235,0.03)}
.karta .etykieta{margin:0 0 6px}
.karta .adres{margin:0 0 16px;font-family:var(--mono);font-size:15px;letter-spacing:0.02em}
.karta dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;margin:0;font-size:13px}
.karta dl > div{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.karta dt{margin:0 0 4px;font-size:11px}
.karta dd{margin:0;color:var(--tekst)}

.legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 24px;font-size:13px;color:var(--tresc)}
.legenda li{display:flex;align-items:center;gap:8px}
.probka{flex:none}
.probka.pole{width:12px;height:12px;border-radius:2px;background:var(--kolor)}
.probka.linia{width:16px;height:0;border-top:2px solid var(--kolor)}

figcaption{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:11px;
  letter-spacing:0.08em;color:var(--trzeci)}
figcaption span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- açılış ---------- */
.hero{display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);column-gap:40px;align-items:center;
  min-height:calc(100vh - var(--pasek-h));padding-top:40px;padding-bottom:64px}
.hero-tekst{max-width:500px}
.hero .wiodacy{font-size:18px;max-width:480px;margin-bottom:40px}
.stopka-hero{margin:36px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:0.08em;color:var(--trzeci)}
.hero-mapa{margin:0;display:flex;flex-direction:column;gap:14px;justify-self:stretch;width:100%}
.hero-mapa figcaption{justify-content:flex-end}
.orbita{position:relative}
.orbita img{display:block;width:100%}
/* Yörünge harita görselinin piksel uzayında (viewBox = 1472×1120) ve tam üstünde; etiketler SVG'nin üstünde. */
.tor{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.etykiety{position:absolute;inset:0;width:100%;height:auto;display:block;pointer-events:none}
.satelita{transform:var(--tor-zapas)}
@supports (offset-path:path("M0,0")){
  .satelita{transform:none;offset-path:var(--tor-sciezka);offset-rotate:0deg;offset-distance:0%;
    animation:orbita 40s linear infinite}
}
@keyframes orbita{to{offset-distance:100%}}
.przewin{grid-column:1;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--trzeci)}

/* ---------- kaydırma anlatısı ---------- */
.opowiesc{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:var(--odstep);
  align-items:start}
.rozdzial{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:10vh 0}
.opowiesc-mapa{position:sticky;top:var(--pasek-h);height:calc(100vh - var(--pasek-h));display:flex;align-items:center}
.warstwy{position:relative;width:100%;height:min(66vh,620px)}
.warstwa{position:absolute;inset:0;margin:0;display:grid;grid-template-rows:minmax(0,1fr) var(--podpis-h);
  gap:14px;opacity:0;transition:opacity .6s ease}
.warstwa.aktywna{opacity:1}
.warstwa img{min-height:0;height:100%;width:100%;object-fit:contain}
.warstwa figcaption{align-items:flex-start}
.mapa-sekcji{margin:32px 0 0;display:flex;flex-direction:column;gap:14px}

/* ---------- haritasız şeritler: „Dlaczego” ve „Dokąd zmierzamy” ---------- */
.pasmo{max-width:var(--ramka);margin-inline:auto;padding-top:12vh;padding-bottom:12vh;
  padding-right:var(--bok);padding-left:calc(var(--bok) + var(--szyna-w) + var(--odstep))}
.pasmo h2{font-size:clamp(30px,3.4vw,48px);margin-bottom:20px}
.pasmo .wstep{max-width:62ch;margin:0 0 36px}
.pasmo .wstep p{margin:0 0 16px;color:var(--tresc);text-wrap:pretty}
.pasmo .wstep p:last-child{margin-bottom:0}
.pasmo .punkty{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:40px;font-size:15px;line-height:1.55;color:var(--tresc);text-wrap:pretty}
.pasmo .punkty b{color:var(--tekst);font-weight:600}
.pasmo .zamkniecie{margin:36px 0 0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--drugi);text-wrap:pretty}

/* ---------- teslim + pilot ---------- */
.dostawa{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);column-gap:var(--odstep);align-items:center;
  padding-top:12vh;padding-bottom:12vh}
.nabor{margin-top:28px;padding-top:28px;border-top:1px solid rgba(232,239,235,0.12)}
.nabor p{color:var(--tresc);margin:0 0 24px;text-wrap:pretty}
.obok{font-size:13px;color:var(--drugi)}
/* İzometrik katman yığını (onaylı tasarım, Pilot karesi): üç harita eğik üst üste, etiketler sağda. */
.stos{position:relative;height:640px;margin:0}
/* left/width: etiket kutuları katmanlara binmesin diye piksel denetimiyle seçildi (Görev 25.7) */
.iso{position:absolute;left:30%;width:410px;max-width:none;height:auto;display:block;opacity:.96;
  transform:translateX(-50%) rotate(-30deg) skewX(30deg) scaleY(.86)}
.i1{top:40px;z-index:3}
.i2{top:170px;z-index:2}
.i3{top:300px;z-index:1}
.iso-et{position:absolute;right:0;margin:0;display:flex;align-items:center;gap:10px;z-index:4;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tresc)}
.e1{top:150px}
.e2{top:280px}
.e3{top:410px}
.kreska{width:40px;height:0;border-top:1px solid var(--obrys);flex:none}

/* ---------- alt bilgi ---------- */
.stopka{position:relative;z-index:1;padding-top:40px;padding-bottom:40px;
  display:grid;gap:10px;font-size:13px;color:var(--trzeci)}
.stopka::before{content:"";position:absolute;left:50%;top:0;width:100vw;transform:translateX(-50%);
  border-top:1px solid var(--linia)}
.stopka p{margin:0;max-width:96ch}
.stopka .demo{color:var(--drugi)}
.stopka a{color:var(--drugi);text-decoration:underline;text-underline-offset:3px}
.stopka a:hover{color:var(--zar-jasny)}

/* ---------- bulunamayan sayfa (404) ---------- */
/* Ayrı sayfa: ilerleme çubuğu yok, bu yüzden içerik ve footer ray payı olmadan hizalanır. */
.strona-bledu .pasek{justify-content:flex-start}
.blad{max-width:var(--ramka);margin-inline:auto;padding:40px var(--bok);
  min-height:calc(100vh - var(--pasek-h));box-sizing:border-box;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.blad h1{font-size:clamp(38px,4.6vw,64px)}
.blad .wiodacy{max-width:62ch}
.strona-bledu .stopka{padding-left:var(--bok);padding-right:var(--bok)}

/* ---------- 1360 px altı: ilerleme çubuğu gizli, harita büyük kalsın ---------- */
@media (max-width:1359px){
  .szyna{display:none}
  .hero,.opowiesc,.dostawa,.stopka,.pasmo{padding-left:var(--bok)}
}

/* ---------- 1024–1279 px ---------- */
@media (min-width:1024px) and (max-width:1279px){
  :root{--bok:32px;--podpis-h:48px}
  .opowiesc,.dostawa{grid-template-columns:minmax(0,380px) minmax(0,1fr);column-gap:40px}
  .hero{grid-template-columns:minmax(0,440px) minmax(0,1fr)}
  .menu ul{gap:20px;font-size:13px}
  .menu{gap:20px}
  .stos{height:540px}
  .iso{width:400px}
  .e1{top:130px}
  .e2{top:240px}
  .e3{top:350px}
}

/* ---------- mobil ---------- */
@media (max-width:1023px){
  :root{--bok:20px}
  body{font-size:16px}
  .hero,.opowiesc,.dostawa,.stopka,.pasmo{padding-left:var(--bok);padding-right:var(--bok)}
  .pasmo{padding-top:48px;padding-bottom:48px}
  .pasmo .punkty{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero,.opowiesc,.dostawa{grid-template-columns:minmax(0,1fr)}
  .szyna{display:none}
  .menu ul{display:none}
  .menu{gap:16px}
  .hero{min-height:auto;padding-top:32px;padding-bottom:40px;row-gap:32px}
  .hero-mapa{max-width:none}
  .przewin{display:none}
  .opowiesc-mapa{display:none}
  .rozdzial{min-height:auto;padding:48px 0;border-bottom:1px solid var(--linia)}
  .rozdzial .mapa-sekcji{order:-1;margin:0 0 28px}
  .liczby{grid-template-columns:repeat(2,minmax(0,1fr))}
  .karta dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  figcaption{flex-direction:column;gap:4px}
  .logo svg{width:30px;height:30px}
  .logo span{font-size:16px}
  .stos{height:auto;padding-top:300px;margin-top:40px;display:flex;flex-direction:column;align-items:flex-start}
  .iso{left:50%;width:min(78vw,300px)}
  .i1{top:0}
  .i2{top:80px}
  .i3{top:160px}
  .iso-et{position:static;margin:10px 0 0}

  .dostawa{padding-top:48px;padding-bottom:48px}
}

/* Masaüstünde bölüm haritası görsel olarak gizli ama erişilebilir kalır:
   görünen harita sağdaki sabit yığındır (aria-hidden), alt metin ve künye buradan okunur. */
@media (min-width:1024px){
  .mapa-sekcji{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;
    transition-duration:0.001ms !important}
}

/* ---------- 404: canlı yörünge kompozisyonu (Görev 30) ---------- */
.blad{position:relative;min-height:calc(100vh - var(--pasek-h));
  display:grid;place-items:center;overflow:hidden;padding:56px var(--bok)}
.blad-orbita{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none}
.blad-orbita::before{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 46% 42% at 50% 52%, rgba(255,122,69,.16), rgba(255,122,69,.05) 45%, transparent 72%);
  filter:blur(46px)}
.tor-404{position:relative;display:block;width:min(1500px,118%);height:auto;overflow:visible}
.duch{position:absolute;z-index:1;font-family:var(--serif);font-size:min(44vw,600px);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(232,239,235,.06);pointer-events:none;user-select:none}
.blad-tekst{position:relative;z-index:2;max-width:620px;text-align:center}
.blad h1{font-size:clamp(38px,4.6vw,64px)}
.blad .wiodacy{font-size:18px;max-width:52ch;margin:0 auto 36px}

.iskra{stroke:#ff7a45;stroke-width:2.4;stroke-dasharray:70 2580;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(255,122,69,.85));animation:iskra 9s linear infinite}
@keyframes iskra{to{stroke-dashoffset:-2650}}
.ping{transform-box:fill-box;transform-origin:center;animation:ping 3.6s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(5.2);opacity:0}}
.halo{filter:blur(7px);opacity:.75}
.gwiazdy circle{opacity:.3;animation:migot 6s ease-in-out infinite}
.gwiazdy circle:nth-child(3n){animation-duration:8.5s;animation-delay:-2.4s}
.gwiazdy circle:nth-child(3n+1){animation-duration:5.2s;animation-delay:-4.1s;opacity:.22}
.gwiazdy circle:nth-child(5n){animation-duration:9.5s;animation-delay:-1.3s;opacity:.45}
@keyframes migot{0%,100%{opacity:.14}50%{opacity:.62}}
.blad-tekst>*{animation:wejscie .7s cubic-bezier(.22,.7,.3,1) both}
.blad-tekst>*:nth-child(1){animation-delay:.05s}
.blad-tekst>*:nth-child(2){animation-delay:.14s}
.blad-tekst>*:nth-child(3){animation-delay:.23s}
.blad-tekst>*:nth-child(4){animation-delay:.32s}
@keyframes wejscie{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:1023px){
  .blad{min-height:auto;padding-top:56px;padding-bottom:72px}
  .duch{font-size:64vw}
  /* Dar ekranda yörünge metnin arkasından çekilir: aşağı iner, biraz söner.
     Yoksa uydu başlığın ve bağlantının üstüne oturuyor. */
  .blad-orbita{place-items:end center;opacity:.65}
  .tor-404{width:210%;transform:translateY(6%)}
}
@media (prefers-reduced-motion:reduce){
  .blad-tekst>*,.gwiazdy circle,.iskra,.ping,.tor-404 .satelita{animation:none!important}
  .blad-tekst>*{opacity:1;transform:none}
  .gwiazdy circle{opacity:.3}
}