:root {
  color: #112746;
  background: white;
  font: 16px/1.55 "DM Sans", system-ui, sans-serif;
  --ink: #112746;
  --muted: #50647b;
  --line: #dfe9f1;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; }
:focus-visible { outline: 2px solid #17668c; outline-offset: 5px; }
.skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 4; padding: .7rem; background: white; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
.masthead, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}
.masthead { min-height: 76px; border-bottom: 1px solid var(--line); }
.brand { white-space: nowrap; font-weight: 750; letter-spacing: .16em; text-decoration: none; }
.brand span { font-weight: 450; }
nav { display: flex; flex-wrap: wrap; gap: .2rem clamp(.8rem, 2vw, 2rem); }
nav a, footer {
  font-size: .69rem;
  font-weight: 720;
  letter-spacing: .105em;
}
nav a { display: inline-block; padding-block: .65rem; text-decoration: none; color: var(--muted); }
nav a:hover, nav a[aria-current] { color: var(--ink); text-decoration: underline; text-underline-offset: .5em; }
main { flex: 1; display: grid; }
footer { border-top: 1px solid var(--line); min-height: 61px; color: var(--muted); }
footer a { padding-block: .7rem; text-underline-offset: .25em; }
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vh, 4rem) 1.25rem;
  text-align: center;
}
.logo-panel { width: min(100%, 43rem, 76vh); margin-bottom: clamp(1rem, 3vh, 2rem); }
.logo-button {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: .5rem;
  cursor: pointer;
}
.logo-button:disabled { cursor: default; }
.logo-art { position: relative; display: block; isolation: isolate; }
.logo-art img { position: relative; display: block; width: 100%; height: auto; }
.moon-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  filter: brightness(1.28) drop-shadow(0 0 8px #e0faff) drop-shadow(0 0 25px #59bfff);
  opacity: 0;
}
.moon-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("Logo_Aurora_vs1.png") center / contain no-repeat;
  clip-path: polygon(0 0, 40% 0, 34% 21%, 24% 44%, 23% 57%, 27% 68%, 77% 68%, 84% 62%, 100% 62%, 100% 100%, 0 100%);

}
.spark {
  position: absolute;
  z-index: 2;
  width: 11%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fffdf4 5%, #ffe49b 22%, #ffb74450 48%, transparent);
  opacity: 0;
}
.spark::after {
  content: "";
  position: absolute;
  inset: 15%;
  background: #fff6ca;
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
}
.spark-left { left: 39.65%; top: 19.53%; --delay: 1.35s; }
.spark-top { left: 50.65%; top: 13.09%; --delay: 1.85s; }
.spark-right { left: 62.1%; top: 19.53%; --delay: 2.35s; }
.play-label, .replay-intro { border: 0; padding: .55rem; background: transparent; cursor: pointer; color: var(--muted); font-size: .66rem; font-weight: 750; letter-spacing: .15em; }
.replay-intro { display: block; margin-inline: auto; text-decoration: underline; letter-spacing: .05em; }
.logo-panel:has(button:hover) .play-label, .logo-panel:focus-within .play-label { color: #17668c; }
h1, h2, p { margin-top: 0; }
h1 { font-weight: 720; font-size: clamp(2rem, 6.5vw, 4.9rem); letter-spacing: -.065em; line-height: 1; margin-bottom: 1rem; overflow-wrap: anywhere; }
.tagline { font-weight: 650; font-size: clamp(.69rem, 1.5vw, .9rem); letter-spacing: .13em; color: var(--muted); margin-bottom: 1.35rem; }
.status { display: inline-flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .67rem; font-weight: 750; letter-spacing: .145em; margin: 0; }
.status::before { content: ""; width: .43rem; height: .43rem; border-radius: 50%; background: #c18b1c; }
.dawn { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 75%, #637789, #171e28 80%); opacity: 0; }
.home { position: relative; isolation: isolate; }
.home.intro-playing .hero-copy, .home.intro-playing .masthead, .home.intro-playing footer, .home.intro-playing .play-controls { animation: reveal 1.1s 3.3s both; }
.home.intro-playing .dawn { animation: dawn 4.4s ease-in-out both; }
.home.intro-playing .logo-art { animation: logo-entry 3.25s cubic-bezier(.18,.7,.25,1) both; }
.home.intro-playing .moon-light { animation: moon 3.45s .42s ease-out both; }
.home.intro-playing .spark { animation: sparkle 1.65s var(--delay) ease-out both; }
#aurora.moving { animation: reveal .45s; }
#aurora.moving.ending:not(.opening) { opacity: 0; transition: opacity .8s ease; }
#aurora.opening { background: radial-gradient(ellipse at 50% 75%, #637789, #171e28 80%); }
#aurora.opening.ending canvas, #aurora.opening.ending .show-controls, #aurora.opening.ending .aurora-welcome { opacity: 0; transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) {
  .home.intro-playing .dawn { animation: dawn 3.1s ease-in-out both; }
  .home.intro-playing .logo-art { animation: reveal 1.8s .3s both; }
  .home.intro-playing .hero-copy, .home.intro-playing .masthead, .home.intro-playing footer, .home.intro-playing .play-controls { animation: reveal .8s 2.25s both; }
  .home.intro-playing .moon-light { animation: moon 2s .8s ease-out both; }
  .home.intro-playing .spark { animation: moon 1.1s var(--delay) ease-out both; }
}
@keyframes logo-entry {
  0% { opacity: 0; scale: .64; }
  62% { opacity: 1; scale: 1.035; }
  100% { opacity: 1; scale: 1; }
}
@keyframes dawn { 0%, 14% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes moon { 0%, 100% { opacity: 0; } 28%, 63% { opacity: 1; } }
@keyframes sparkle { 0%, 100% { opacity: 0; scale: .45; } 35% { opacity: 1; scale: 1.5; } 65% { opacity: .7; scale: 1.08; } }
.interior { width: min(100%, 72rem); margin-inline: auto; padding: clamp(3rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem); }
.placeholder { align-self: center; text-align: center; }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 5vw, 4.5rem); margin-top: 2.5rem; }
.details { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.details h2 { font-size: 1.1rem; margin-bottom: 1.5rem; }
.details address { font-style: normal; margin-bottom: 1rem; }
.details a { overflow-wrap: anywhere; text-underline-offset: .25em; }
dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .55rem 1rem; }
dt { color: var(--muted); }
dd { margin: 0; font-variant-numeric: tabular-nums; }
#aurora {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #050818;
  color: white;
}
#aurora::backdrop { background: transparent; }
body:has(#aurora[open]) { overflow: hidden; }
#aurora canvas { display: block; width: 100%; height: 100%; }
.aurora-welcome {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 2.75rem 1rem max(1.65rem, env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #050818e6);
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.aurora-welcome p { margin: 0; }
#aurora-welcome { font-size: clamp(1.35rem, 4vw, 2.35rem); font-weight: 700; line-height: 1.2; }
.aurora-welcome p[lang="tr"] { margin-top: .3rem; color: #dae6f1; }
@media (prefers-reduced-motion: no-preference) {
  #aurora[open] .aurora-welcome { animation: reveal .65s .15s backwards; }
}
.show-controls {
  position: absolute;
  top: max(1.1rem, env(safe-area-inset-top));
  right: max(1.1rem, env(safe-area-inset-right));
  display: flex;
  gap: .5rem;
}
.show-controls button {
  padding: .65rem 1rem;
  border: 1px solid #b2ccdc;
  border-radius: 2rem;
  background: #071020e8;
  color: white;
  font: inherit;
  cursor: pointer;
}
.skip span { padding-left: .4em; }
.skip:focus-visible { outline-color: white; }
@media (max-width: 800px) {
  .masthead { align-items: flex-start; flex-direction: column; gap: .25rem; padding-block: .85rem .5rem; }
}
@media (max-width: 650px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  dl { grid-template-columns: 1fr; gap: .15rem; }
  dd { margin-bottom: .4rem; }
}

/* v8: sequential five-language welcome */
#aurora .aurora-welcome p { transition: opacity .32s ease; opacity:0; }
#aurora .aurora-welcome p.greeting-visible { opacity:1; }
#aurora .aurora-welcome { width:min(90vw,1100px); text-align:center; }
#aurora .aurora-welcome p[dir="rtl"] { direction:rtl; unicode-bidi:isolate; font-family:Tahoma,Arial,sans-serif; font-size:clamp(1.4rem,4vw,2.7rem); }

/* v10: centered, softly crossfading multilingual welcome */
#aurora .aurora-welcome { position:absolute; inset:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:clamp(24px,6vw,90px); background:none; transform:none; }
#aurora .aurora-welcome p { width:100%; max-width:1100px; margin:0 auto; text-align:center; line-height:1.45; opacity:0; transform:translateY(14px) scale(.985); filter:blur(5px); transition:opacity 1s ease,transform 1.1s ease,filter 1.1s ease; text-wrap:balance; }
#aurora .aurora-welcome p.greeting-visible { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
#aurora .aurora-welcome p[dir="rtl"] { text-align:center; }
.language-picker { margin-left:auto; display:flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700; color:var(--muted); }
.language-picker select { border:1px solid #cbd5e1; background:white; border-radius:7px; color:#102e60; padding:8px 9px; font:inherit; cursor:pointer; }
@media(max-width:900px){ .language-picker { margin-inline:auto; } }
@media(prefers-reduced-motion:reduce){ #aurora .aurora-welcome p { transition:none; transform:none; filter:none; } }

/* V12: subtle, completely monochrome, low-contrast embossed watermark.
   Keep the aurora as the visual focus; the logo should be discovered, not dominate. */
#aurora .aurora-relief {
  position:absolute; z-index:1; left:50%; top:41%;
  transform:translate(-50%,-50%);
  width:min(43vw,460px); pointer-events:none;
  opacity:.16; animation:none;
  mix-blend-mode:luminosity;
}
#aurora .aurora-relief img {
  display:block; width:100%; height:auto;
  filter:grayscale(1) saturate(0) brightness(.9) contrast(.65)
    drop-shadow(-1px -1px 1px rgba(235,240,245,.22))
    drop-shadow(2px 2px 2px rgba(0,0,0,.45));
}
#aurora .aurora-welcome {
  z-index:2; inset:auto 0 max(8vh,65px); height:auto; width:100%;
  display:flex; align-items:center; justify-content:center;
  padding:0 20px; transform:none; background:none;
}
#aurora .aurora-welcome p {
  width:100%; max-width:1100px; margin:0; text-align:center;
  font-size:clamp(1.4rem,3.6vw,2.8rem);
  text-shadow:0 2px 14px rgba(0,0,0,.8),0 0 22px rgba(112,230,220,.35);
}
#aurora .aurora-welcome p[dir="rtl"] {text-align:center;}
@media(max-width:650px){#aurora .aurora-relief{width:60vw;top:39%}#aurora .aurora-welcome{bottom:max(12vh,72px)}}
@media(prefers-reduced-motion:reduce){#aurora .aurora-relief{animation:none}}

/* V13 — Aurora-embedded emboss: barely visible, light-catching relief. */
#aurora .aurora-relief {
  width:min(38vw,400px); top:40%; opacity:1;
  mix-blend-mode:soft-light;
  transform:translate(-50%,-50%) translate3d(var(--aurora-drift-x,0px),var(--aurora-drift-y,0px),0)
    rotate(var(--aurora-tilt,0deg)) skewX(var(--aurora-skew,0deg)) scale(var(--aurora-breathe,1));
  will-change:transform,filter;
  filter:brightness(var(--aurora-glint,1));
}
#aurora .aurora-relief img {
  opacity:.12;
  filter:grayscale(1) saturate(0) brightness(1.35) contrast(.75)
    drop-shadow(-1px -1px .8px rgba(255,255,255,.55))
    drop-shadow(1.5px 2px 1.2px rgba(0,0,0,.7));
  -webkit-mask-image:linear-gradient(105deg,transparent 0%,#000 28%,#000 73%,transparent 100%);
  mask-image:linear-gradient(105deg,transparent 0%,#000 28%,#000 73%,transparent 100%);
}
@media(max-width:650px){#aurora .aurora-relief{width:min(62vw,340px);top:39%}}
@media(prefers-reduced-motion:reduce){#aurora .aurora-relief{transform:translate(-50%,-50%);filter:none}}