:root{color-scheme:light;--cream:#f8f7f4;--ink:#1f1f1f;--gold:#d8a040;--turquoise:#18c0d8;--muted:#62615e}
*{box-sizing:border-box}
html{min-height:100%;background:var(--cream)}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
header{display:flex;justify-content:flex-end;padding:24px clamp(20px,5vw,76px)}
.star-field{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;contain:strict}
header,main,footer{position:relative;z-index:1}
.shooting-star{position:absolute;left:0;top:0;width:0;height:0;animation:star-travel var(--duration) linear var(--delay) infinite;opacity:0}
.star-trail{position:absolute;right:0;top:-1px;width:var(--length);height:1px;background:linear-gradient(90deg,transparent,var(--star-color));transform:rotate(var(--angle));transform-origin:right center}
.star-trail:after{content:"";position:absolute;right:-3px;top:-2px;width:6px;height:6px;background:var(--star-color);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
@keyframes star-travel{0%{transform:translate(var(--start-x),var(--start-y));opacity:0}12%,78%{opacity:var(--opacity)}100%{transform:translate(var(--end-x),var(--end-y));opacity:0}}
nav{display:flex;align-items:center;gap:8px;color:#a19a8d}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;min-height:44px;min-width:44px}
nav button{position:relative;font-size:14px;letter-spacing:.12em;color:var(--muted)}
nav button[aria-pressed="true"]{color:var(--ink)}
nav button[aria-pressed="true"]:after{content:"";position:absolute;bottom:4px;left:15px;right:15px;height:2px;background:var(--gold)}
button:focus-visible{outline:2px solid #087b8b;outline-offset:4px;border-radius:2px}
main{align-self:center;text-align:center;width:min(100% - 40px,640px);margin:12px auto 28px}
/* Display the original brand-board pixels through a viewport. No logo is redrawn. */
/* Kirpma her yonden 12px genisletildi (kaynak 123,33 444x379) ve kutu ayni oranda
   buyutuldu: logo ayni boyutta kalir, kenarlarda yumusatma icin temiz zemin marji acilir. */
.identity{position:relative;overflow:hidden;width:clamp(264px,40.2vw,402px);max-width:100%;aspect-ratio:444/379;margin:auto;animation:arrival 1.5s cubic-bezier(.2,.7,.2,1) both;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.identity img{position:absolute;max-width:none;width:345.9459459%;height:auto;left:-27.7027027%;top:-8.7071240%}
.gold-rule{width:42px;height:2px;background:var(--gold);margin:24px auto 29px;animation:arrival 1.7s ease both}
.message{min-height:155px}
h1{font-size:14px;font-weight:500;letter-spacing:.30em;line-height:1.7;margin:0 0 22px;padding-left:.3em}
#heading{font-size:clamp(18px,2.2vw,22px);font-weight:400;line-height:1.5;margin:0 0 12px}
#description{font-size:16px;line-height:1.75;color:var(--muted);margin:0}
.loading-line{height:2px;width:min(240px,75%);background:#dedbd4;overflow:hidden;margin:29px auto 0}
.loading-line span{display:block;width:38%;height:100%;background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 75%,var(--turquoise) 100%);animation:flow 3.2s ease-in-out infinite}
footer{text-align:center;padding:8px 20px 18px}
footer button{font-size:12px;color:var(--muted);letter-spacing:.03em}
body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important}
body.paused .message{transition:none}
@keyframes arrival{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes flow{0%{transform:translateX(-105%)}65%,100%{transform:translateX(370%)}}
@media(max-width:480px){header{padding-top:12px}main{margin-top:0}.identity{width:296px}.gold-rule{margin-top:20px}#heading{max-width:280px;margin-left:auto;margin-right:auto}.message{min-height:174px}}
@media(max-height:700px){.identity{width:243px}.gold-rule{margin:16px auto 20px}h1{margin-bottom:14px}.loading-line{margin-top:18px}header{padding-top:8px;padding-bottom:8px}}
@media(max-width:480px){.shooting-star:nth-child(n+10){display:none}}
/* Azaltilmis hareket tercihi: hareket durur ama sayfa bosalmaz.
   Yildizlar gizlenmek yerine yollarinin uzerinde sabit durur (--static-x/y app.js'te hesaplanir).
   Duraklat dugmesi gizlenir, cunku bu modda duraklatilacak bir hareket yoktur. */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.loading-line span{transform:translateX(80%)}.shooting-star{opacity:var(--opacity);transform:translate(var(--static-x),var(--static-y))}.star-trail:before{opacity:.45}#motion{display:none}}

/* A soft halo belongs to each existing star; no transition-only stars. */
.star-trail:before{content:"";position:absolute;right:-10px;top:-9px;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,var(--star-color) 0%,transparent 68%);animation:star-shimmer 2.8s ease-in-out var(--delay) infinite alternate}
.star-trail:after{filter:drop-shadow(0 0 3px var(--star-color))}
@keyframes star-shimmer{from{opacity:.25;transform:scale(.7)}to{opacity:.85;transform:scale(1.25)}}