@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/radio/assets/fonts/fredoka-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: 'Fredoka'; font-weight: 300 700; font-display: swap; src: url(/radio/assets/fonts/fredoka-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
:root {
  --night: #14112f; --deep: #0c0a20; --dusk: #2b2366; --cream: #fff3dd; --bmo: #74e0c0; --gum: #ff7ab6; --sun: #ffd54a; --lav: #b8a6ff;
  --soft: rgba(255, 243, 221, .74); --muted: rgba(255, 243, 221, .5); --faint: rgba(255, 243, 221, .32); --line: rgba(255, 243, 221, .1); --line2: rgba(255, 243, 221, .18);
  --card: rgba(36, 30, 86, .5); --field: rgba(12, 10, 32, .6);
  --font: 'Fredoka', ui-rounded, 'Nunito', system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body { font-family: var(--font); color: var(--cream); line-height: 1.45; background: var(--night); -webkit-font-smoothing: antialiased; min-height: 100vh; }
body:not(.is-auth) { background-image: radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,243,221,.8) 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, rgba(255,243,221,.6) 50%, transparent 51%), radial-gradient(1px 1px at 88% 58%, rgba(255,243,221,.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 26% 72%, rgba(255,243,221,.45) 50%, transparent 51%); background-size: 520px 520px; background-attachment: fixed; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; border-radius: 10px; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Üst çubuk ─── */
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 12px clamp(16px, 4vw, 40px); padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(20, 17, 47, .82); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
body.is-auth .nav { display: none; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--sun); color: var(--night); font-weight: 700; box-shadow: 0 4px 0 var(--dusk); flex: none; }
.nav-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--bmo); padding: 6px 12px; border-radius: 999px; background: rgba(116,224,192,.1); }
.dot, .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bmo); box-shadow: 0 0 10px var(--bmo); animation: pulse 2.4s infinite; flex: none; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.who { color: var(--soft); font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--soft); transition: color .15s, border-color .15s; }
.icon-btn:hover { color: var(--cream); border-color: var(--line2); }
.icon-btn svg { width: 19px; height: 19px; }
@media (max-width: 600px) { .brand-name, .who { display: none; } }

/* ═══════════ GİRİŞ ═══════════ */
.ax { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(420px, 1fr); min-height: 100vh; min-height: 100svh; background: var(--deep); }
.ax-visual { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 56px);
  background: radial-gradient(70% 55% at 50% 42%, rgba(116,224,192,.14), transparent 70%), radial-gradient(60% 50% at 85% 0%, rgba(255,122,182,.12), transparent 70%), radial-gradient(60% 60% at 0% 100%, rgba(184,166,255,.12), transparent 70%), linear-gradient(180deg, #120f2e, #0a081c); }
.ax-visual::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: linear-gradient(rgba(255,243,221,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,243,221,.035) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(70% 60% at 50% 42%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 42%, #000, transparent); }
.ax-visual .char-host { position: absolute; left: 0; right: 0; top: 4%; height: 60%; width: 100%; z-index: -1; }
.ax-visual::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(10,8,28,.92) 86%); }
.ax-brand { position: absolute; top: clamp(20px, 3vw, 32px); left: clamp(28px, 4vw, 56px); display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; }
.ax-copy { position: relative; max-width: 560px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; font-size: .84rem; font-weight: 500; color: var(--soft); background: rgba(255,243,221,.06); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ax-title { font-size: clamp(2.2rem, 3.6vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; font-weight: 700; margin: 16px 0 22px; }
.grad { background: linear-gradient(90deg, var(--bmo) 0%, #c8f7ea 50%, var(--sun) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ax-tick { padding: 18px 20px; border-radius: 22px; background: rgba(255,243,221,.05); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); max-width: 480px; }
.ax-tick-h { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: .9rem; }
.ax-tick-h b { color: var(--sun); font-size: 1.35rem; font-weight: 700; }
.ax-tick p { margin: 4px 0 14px; font-size: 1.05rem; min-height: 2.6em; transition: opacity .3s, transform .3s; }
.ax-tick p.out { opacity: 0; transform: translateY(6px); }
.ax-meter { height: 6px; border-radius: 6px; background: rgba(255,243,221,.1); overflow: hidden; }
.ax-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bmo), var(--sun)); transition: width 1.2s var(--ease); }
.ax-meter-l { display: flex; justify-content: space-between; margin-top: 8px; font-size: .82rem; color: var(--muted); } .ax-meter-l b { color: var(--bmo); }
.ax-src { position: relative; margin-top: 18px; font-size: .76rem; color: var(--faint); letter-spacing: .05em; }

.ax-form { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 4vw, 48px); background: var(--night); border-left: 1px solid var(--line); }
.ax-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: .92rem; padding: 6px 10px 6px 4px; border-radius: 10px; transition: color .15s; }
.ax-back:hover { color: var(--cream); } .ax-back svg { width: 18px; height: 18px; }
.ax-box { width: 100%; max-width: 400px; margin: auto; padding: 28px 0; animation: rise-in .6s var(--ease) both; }
.ax-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: var(--night); background: linear-gradient(135deg, var(--bmo), #b9f3e2); box-shadow: 0 10px 30px rgba(116,224,192,.3); margin-bottom: 22px; }
.ax-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }
.ax-h { font-size: clamp(1.9rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -.015em; }
.ax-sub { color: var(--muted); margin: 6px 0 24px; }
.ax-foot { text-align: center; color: var(--faint); font-size: .84rem; }

.tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); margin-bottom: 20px; }
.tabs button { position: relative; z-index: 1; min-height: 42px; border-radius: 12px; font-weight: 600; color: var(--muted); transition: color .25s; }
.tabs button.on { color: var(--night); }
.tab-ind { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 12px; background: var(--cream); box-shadow: 0 6px 18px rgba(0,0,0,.3); transition: transform .35s var(--ease); }
.tabs[data-on="register"] .tab-ind { transform: translateX(100%); }

form { display: flex; flex-direction: column; gap: 14px; }
.fl { position: relative; display: block; }
.fl input { width: 100%; height: 58px; padding: 22px 46px 6px 48px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--field); outline: none; font-size: 1rem; transition: border-color .2s, background .2s, box-shadow .2s; }
.fl span { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; transition: all .2s var(--ease); }
.fl input:focus + span, .fl input:not(:placeholder-shown) + span { top: 17px; font-size: .74rem; color: var(--soft); }
.fl > svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--faint); pointer-events: none; transition: color .2s; }
.fl input:hover { border-color: rgba(255,243,221,.28); }
.fl input:focus { border-color: var(--bmo); background: rgba(12,10,32,.85); box-shadow: 0 0 0 4px rgba(116,224,192,.14); }
.fl:focus-within > svg { color: var(--bmo); }
.fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #17133a inset; -webkit-text-fill-color: var(--cream); caret-color: var(--cream); }
.fl .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--faint); transition: color .15s, background .15s; }
.fl .eye:hover { color: var(--cream); background: rgba(255,243,221,.06); } .fl .eye.on { color: var(--bmo); } .fl .eye svg { width: 20px; height: 20px; }
.fl .state { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: .78rem; color: var(--muted); }
.fl .state.good { color: var(--bmo); } .fl .state.bad { color: var(--gum); }
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: -4px; }
.strength i { height: 4px; border-radius: 4px; background: rgba(255,243,221,.1); transition: background .25s; }
.row-between { display: flex; justify-content: space-between; align-items: center; margin-top: -4px; }
.link { color: var(--soft); font-size: .9rem; padding: 4px 2px; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.link:hover { color: var(--cream); text-decoration-color: var(--cream); }
.link.center { align-self: center; } .link.sm { font-size: .84rem; }
.err { color: var(--gum); font-size: .9rem; min-height: 1.25em; margin: -2px 0; }
.err.ok { color: var(--bmo); }
.btn-main { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; border-radius: 16px; font-weight: 600; font-size: 1.05rem; color: var(--night);
  background: linear-gradient(135deg, var(--bmo), #a6efd9); box-shadow: 0 10px 30px rgba(116,224,192,.25), inset 0 1px 0 rgba(255,255,255,.5); overflow: hidden; transition: transform .15s, box-shadow .2s, filter .2s; }
.btn-main svg { width: 20px; height: 20px; transition: transform .2s; }
.btn-main:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(116,224,192,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-main:hover svg { transform: translateX(3px); }
.btn-main:active { transform: translateY(1px); }
.btn-main::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s; }
.btn-main:hover::after { transform: translateX(120%); }
.btn-main:disabled { filter: grayscale(.4) brightness(.85); pointer-events: none; }
.btn-main.busy span::after { content: ''; display: inline-block; width: 14px; height: 14px; margin-left: 10px; vertical-align: -2px; border-radius: 50%; border: 2px solid rgba(20,17,47,.3); border-top-color: var(--night); animation: spin .8s linear infinite; }
.trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.trust li { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .84rem; }
.trust svg { width: 16px; height: 16px; color: var(--bmo); }
@media (max-width: 980px) {
  .ax { grid-template-columns: 1fr; }
  .ax-visual { justify-content: flex-start; padding-top: 76px; }
  .ax-visual .char-host { position: relative; top: auto; height: 380px; width: calc(100% + 2 * clamp(28px, 4vw, 56px)); margin: 0 calc(-1 * clamp(28px, 4vw, 56px)) 8px; z-index: 0; }
  .ax-visual::after { display: none; }
  .ax-form { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 520px) { .ax-visual .char-host { height: 320px; } .ax-tick p { min-height: 0; } .ax-title { font-size: 2rem; } }

/* ═══════════ GENEL ═══════════ */
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 40px) 90px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; padding: clamp(18px, 2.6vw, 26px); }
h2 { font-weight: 700; font-size: 1.5rem; margin-bottom: 14px; }
h2 small { font-size: .9rem; font-weight: 500; color: var(--muted); margin-left: 6px; }
h3 { font-weight: 600; font-size: 1.08rem; }
.eyebrow { color: var(--bmo); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; }
.muted { color: var(--muted); font-size: .88rem; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  color: var(--night); background: var(--sun); box-shadow: 0 5px 0 rgba(0,0,0,.28); transition: transform .15s, box-shadow .15s; text-decoration: none; white-space: nowrap; }
.pill:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,.28); }
.pill:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.28); }
.pill:disabled { opacity: .6; pointer-events: none; }
.pill svg { width: 19px; height: 19px; }
.pill-sm { min-height: 44px; padding: 0 18px; font-size: .95rem; }
.pill-ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line2); }
.pill-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,243,221,.35); }
.pill-gum { background: var(--gum); } .pill-bmo { background: var(--bmo); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.actions.center { justify-content: center; margin-top: 34px; }
.fld { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.fld > span { font-size: .9rem; color: var(--soft); font-weight: 500; } .fld > span small { color: var(--muted); }
input.plain { min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--line2); background: var(--field); outline: none; width: 100%; transition: border-color .15s, box-shadow .15s; }
input.plain:focus { border-color: var(--bmo); box-shadow: 0 0 0 4px rgba(116,224,192,.14); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row .fld { min-width: 140px; }
.setup { max-width: 680px; margin: 5vh auto 0; }
.setup h2 { font-size: 2rem; margin: 6px 0 18px; }
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px; }
.quick button { padding: 7px 14px; border-radius: 999px; background: var(--field); border: 1px solid var(--line2); color: var(--soft); font-size: .88rem; transition: border-color .15s, color .15s; }
.quick button:hover { border-color: var(--bmo); color: var(--cream); }
.loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); margin-top: 24vh; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--bmo); animation: spin 1s linear infinite; }

/* ═══════════ PANO ═══════════ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(12px, 3vw, 36px); align-items: center; overflow: hidden; position: relative;
  background: radial-gradient(60% 80% at 25% 50%, rgba(116,224,192,.13), transparent 70%), linear-gradient(150deg, rgba(43,35,102,.75), rgba(20,17,47,.8)); }
.hero-viz { position: relative; aspect-ratio: 1 / .92; min-height: 260px; }
.char-host canvas { display: block; width: 100%; height: 100%; }
.char-host::after { content: ''; position: absolute; left: 50%; bottom: 2%; width: 46%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.45), transparent); z-index: -1; opacity: 0; transition: opacity .8s; }
.char-host.ready::after { opacity: 1; }
.char-host.float::after { bottom: -1%; width: 34%; opacity: .5; }
.hero-viz .char-host { position: absolute; inset: 0; width: 100%; height: 100%; }
.viz-tag { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); display: flex; align-items: baseline; gap: 6px; padding: 7px 16px; border-radius: 999px; background: rgba(12,10,32,.7); border: 1px solid var(--line2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); white-space: nowrap; }
.viz-tag b { color: var(--bmo); font-size: 1.15rem; } .viz-tag span { color: var(--muted); font-size: .85rem; }
.days { display: flex; align-items: baseline; gap: 12px; margin-top: 2px; }
.days b { font-size: clamp(4rem, 9vw, 6.6rem); font-weight: 700; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-shadow: 0 .05em 0 var(--dusk); }
.days span { font-size: 1.4rem; color: var(--soft); font-weight: 500; }
.clock { display: flex; align-items: baseline; gap: 2px; margin: 6px 0 18px; font-variant-numeric: tabular-nums; }
.clock b { font-size: 1.6rem; font-weight: 600; min-width: 1.4em; } .clock i { font-style: normal; color: var(--faint); font-size: 1.4rem; padding: 0 2px; }
.next-card { padding: 14px 16px; border-radius: 18px; background: rgba(12,10,32,.45); border: 1px solid var(--line); max-width: 460px; }
.next-h { display: flex; justify-content: space-between; gap: 10px; font-size: .82rem; color: var(--muted); } .next-h b { color: var(--sun); font-weight: 600; }
.next-card p { font-weight: 500; margin: 4px 0 10px; }
.nbar { height: 6px; border-radius: 6px; background: rgba(255,243,221,.1); overflow: hidden; }
.nbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bmo), var(--sun)); transition: width 1s var(--ease); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero-viz { max-width: 380px; width: 100%; margin: 0 auto; } }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; transition: border-color .2s, transform .2s; }
.stat:hover { border-color: var(--line2); transform: translateY(-2px); }
.stat span { color: var(--soft); font-size: .86rem; }
.stat b { font-size: clamp(1.35rem, 3.2vw, 1.8rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat small { color: var(--muted); font-size: .76rem; }
.stat.money { background: linear-gradient(150deg, rgba(255,213,74,.2), rgba(43,35,102,.5)); border-color: rgba(255,213,74,.28); }
.stat.money b { color: var(--sun); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; } }

.grid3 { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 980px) { .grid3 { grid-template-columns: 1fr 1fr; } .organs { grid-column: 1 / -1; } }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr; } }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.org { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 4px 12px; padding: 8px 6px; border-radius: 12px; width: 100%; text-align: left; transition: background .15s; }
.org:hover, .org.on { background: rgba(255,243,221,.05); }
.org .oi { grid-row: span 2; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; }
.org .on2 { font-size: .9rem; color: var(--soft); } .org b { font-size: .9rem; font-variant-numeric: tabular-nums; }
.org .ob { grid-column: 2 / 4; height: 6px; border-radius: 6px; background: rgba(255,243,221,.08); overflow: hidden; }
.org .ob i { display: block; height: 100%; width: 0; border-radius: inherit; transition: width 1s var(--ease); }
.goal-name { font-size: 1.3rem; font-weight: 600; }
.goal-sub { color: var(--soft); font-size: .9rem; margin-top: 4px; }
.gbar { height: 12px; border-radius: 99px; background: rgba(255,243,221,.1); overflow: hidden; margin-top: 12px; }
.gbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--sun), var(--gum)); transition: width .8s var(--ease); }
.goal-f { margin-top: 12px; gap: 10px; }
.proj h3 { margin-bottom: 12px; }
.proj-g { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.proj-g div { display: flex; flex-direction: column; } .proj-g span { color: var(--muted); font-size: .84rem; } .proj-g b { font-weight: 700; color: var(--sun); font-size: 1.2rem; }
.past { color: var(--muted); font-size: .84rem; margin-top: 14px; } .past b { color: var(--gum); }

/* Zaman çizelgesi */
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 44px 0 18px; }
h2.sec { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 44px 0 16px; }
.sec-h h2.sec { margin: 0; }
.sec-sub { color: var(--muted); margin-top: 2px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { padding: 7px 13px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--soft); font-weight: 500; font-size: .86rem; display: inline-flex; align-items: center; gap: 6px; transition: all .15s; }
.filters button i { width: 8px; height: 8px; border-radius: 50%; }
.filters button:hover { border-color: var(--line2); color: var(--cream); }
.filters button.on { background: var(--cream); color: var(--night); border-color: var(--cream); }
.filters button em { font-style: normal; font-size: .76rem; opacity: .65; }
.timeline { display: flex; flex-direction: column; gap: 34px; }
.phase { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; }
.ph-h { position: sticky; top: 84px; align-self: start; }
.ph-h .ph-k { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ph-h h3 { font-size: 1.4rem; margin: 2px 0; }
.ph-h p { color: var(--muted); font-size: .9rem; }
.ph-h .ph-p { margin-top: 12px; height: 6px; border-radius: 6px; background: rgba(255,243,221,.08); overflow: hidden; }
.ph-h .ph-p i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bmo), var(--sun)); transition: width 1s var(--ease); }
.ph-h .ph-n { font-size: .8rem; color: var(--soft); margin-top: 6px; }
.phase.cur .ph-h h3 { color: var(--sun); }
.phase.cur .ph-h .ph-k::after { content: ' · şu an buradasın'; color: var(--sun); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 820px) { .phase { grid-template-columns: 1fr; gap: 12px; } .ph-h { position: static; } }

.hc { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: border-color .2s; }
.hc:hover { border-color: var(--line2); }
.hc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 46px 1fr; gap: 4px 12px; padding: 16px 16px 14px; }
.hc summary::-webkit-details-marker { display: none; }
.hc .ic { grid-row: span 5; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.35rem; background: rgba(255,243,221,.06); box-shadow: inset 0 0 0 1.5px var(--cc, transparent); }
.hc .organ { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.hc .organ em { font-style: normal; color: var(--soft); text-transform: none; letter-spacing: 0; font-weight: 600; white-space: nowrap; }
.hc h4 { font-weight: 600; font-size: 1rem; line-height: 1.28; }
.hc p { color: var(--soft); font-size: .88rem; line-height: 1.4; }
.hc .bar { height: 5px; border-radius: 5px; background: rgba(255,243,221,.09); overflow: hidden; margin-top: 8px; }
.hc .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--bmo), var(--sun)); transition: width .8s var(--ease); }
.hc .left { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--muted); margin-top: 4px; }
.hc .why-t { color: var(--faint); font-size: .76rem; display: inline-flex; align-items: center; gap: 4px; }
.hc .why-t::after { content: '›'; transition: transform .2s; display: inline-block; font-size: 1rem; }
.hc[open] .why-t::after { transform: rotate(90deg); }
.hc .why { padding: 0 16px 16px 74px; color: var(--soft); font-size: .88rem; line-height: 1.5; animation: fade .3s; }
.hc .why::before { content: 'Neden?'; display: block; color: var(--bmo); font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.hc.done { border-color: rgba(116,224,192,.32); background: linear-gradient(155deg, rgba(116,224,192,.11), rgba(36,30,86,.5) 60%); }
.hc.done .left > span:first-child { color: var(--bmo); font-weight: 600; }
.hc.now { border-color: rgba(255,213,74,.55); box-shadow: 0 0 0 3px rgba(255,213,74,.1), 0 16px 40px rgba(0,0,0,.25); }
.hc.now::before { content: 'Şu an'; position: absolute; top: 12px; right: 12px; font-size: .68rem; font-weight: 700; color: var(--night); background: var(--sun); padding: 2px 8px; border-radius: 99px; z-index: 1; }
.hc.now .organ em { visibility: hidden; }
.hc .flag { justify-self: start; font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--gum); background: rgba(255,122,182,.12); padding: 2px 8px; border-radius: 99px; }
.src { color: var(--faint); font-size: .76rem; margin-top: 22px; text-align: center; max-width: 780px; margin-inline: auto; }

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.badge { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.badge .em { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 1.6rem; background: rgba(255,243,221,.05); filter: grayscale(1); opacity: .4; }
.badge b { font-size: .88rem; } .badge small { color: var(--muted); font-size: .72rem; line-height: 1.2; }
.badge.on { border-color: rgba(255,213,74,.35); background: linear-gradient(160deg, rgba(255,213,74,.14), rgba(36,30,86,.5)); }
.badge.on .em { filter: none; opacity: 1; background: radial-gradient(circle, rgba(255,213,74,.32), rgba(255,213,74,.06)); box-shadow: 0 0 0 3px rgba(255,213,74,.22); }
.badge.new { animation: pop .7s ease; }

/* Nefes egzersizi */
.sos { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(8, 6, 22, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fade .3s; }
.sos-in { max-width: 520px; width: 100%; text-align: center; }
.breath { width: 220px; height: 220px; margin: 26px auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; font-weight: 600;
  background: radial-gradient(circle, rgba(116,224,192,.55), rgba(116,224,192,.1) 70%); box-shadow: 0 0 80px rgba(116,224,192,.35); transform: scale(.6); transition: transform 4s ease-in-out; }
.breath.in, .breath.hold { transform: scale(1); } .breath.out { transform: scale(.6); transition-duration: 6s; }
.sos-time { font-size: 2.6rem; font-variant-numeric: tabular-nums; display: block; }
.tips { list-style: none; display: grid; gap: 8px; margin: 18px 0 6px; text-align: left; }
.tips li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; font-size: .92rem; }
.sos-help { color: var(--muted); font-size: .85rem; margin-top: 18px; } .sos-help a { color: var(--bmo); font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 220%); visibility: hidden; z-index: 60; background: var(--cream); color: var(--night); font-weight: 600; padding: 12px 20px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .35s var(--ease); max-width: 90vw; text-align: center; }
.toast.on { transform: translate(-50%, 0); visibility: visible; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.3); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }