/* First-visit card in the city (C · Ö3). Glass like the other city panels; above the dock on phones. */
.first-steps{position:fixed;z-index:20;left:20px;top:132px;width:min(340px,calc(100vw - 32px));padding:20px 22px 18px;border:1px solid var(--ui-line,#ffffff55);border-radius:14px;background:rgba(10,21,30,.78);color:var(--ui-text,#f5f7fa);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 40px rgba(5,12,20,.35)}
.first-steps .eyebrow{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--ui-accent,#f2cd92);padding-right:36px}
.first-steps h2{font:600 23px/1.2 Georgia,serif;margin:8px 0 10px}
.first-steps ol{margin:0 0 14px;padding-left:20px;font-size:13px;line-height:1.55}.first-steps li{margin:4px 0}
.first-steps .actions{display:flex;gap:8px;flex-wrap:wrap}
.first-steps .start{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 16px;border-radius:99px;background:rgba(242,205,146,.93);color:#1b2531;font-weight:700;font-size:14px;text-decoration:none}
.first-steps .start:hover{background:#f7dcae}
.first-steps .later{min-height:46px;padding:10px 14px;border-radius:99px;border:1px solid var(--ui-line,#ffffff55);background:transparent;color:var(--ui-text,#f5f7fa);font-size:13px;cursor:pointer}
.first-steps .later:hover{background:var(--ui-hover,#ffffff1f)}
.first-steps .close{position:absolute;right:6px;top:4px;width:44px;height:44px;border:0;background:transparent;color:var(--ui-text,#f5f7fa);font-size:24px;cursor:pointer}
.first-steps :focus-visible{outline:3px solid #ffda88;outline-offset:2px}
body:has(dialog[open]) .first-steps{visibility:hidden}
@media(max-width:650px){.first-steps{left:12px;right:72px;width:auto;top:auto;bottom:calc(140px + env(safe-area-inset-bottom));padding:16px 18px 14px}.first-steps h2{font-size:20px}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.first-steps{background:#101e2b;-webkit-backdrop-filter:none;backdrop-filter:none}}
/* 24 Eylül (İ1): sitenin ne için olduğu ve hikâyenin girişi. */
.first-steps .story{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--ui-text,#f5f7fa)}
.first-steps .facts{margin:0 0 14px;font-size:12px;color:var(--ui-accent,#f2cd92);font-weight:600}
@media(max-width:650px){.first-steps .story{font-size:12px;line-height:1.5}}