/* KodNav — hareket ve derinlik: grafik animasyonları, kart derinliği, buton geri bildirimi, giriş sayfası gökyüzü.
   Her şey "Hareketi azalt" ayarında kapanır (en altta). Başlangıç durumları sadece motion.js eklediği sınıflarla uygulanır;
   JS çalışmazsa içerik olduğu gibi görünür. */

:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --lift: 0 12px 28px rgba(1, 4, 9, .45), 0 2px 6px rgba(1, 4, 9, .3);
  --lift-sm: 0 4px 12px rgba(1, 4, 9, .35);
}
:root[data-theme="light"] {
  --lift: 0 12px 28px rgba(31, 35, 40, .12), 0 2px 6px rgba(31, 35, 40, .08);
  --lift-sm: 0 4px 12px rgba(31, 35, 40, .1);
}
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] { --lift: 0 12px 28px rgba(31, 35, 40, .12), 0 2px 6px rgba(31, 35, 40, .08); --lift-sm: 0 4px 12px rgba(31, 35, 40, .1); }
}

/* ===================== Sütun grafiği ===================== */
.chart-grid { stroke: var(--bg-3); }
.chart-bar {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .75s var(--ease-out) calc(var(--i, 0) * 28ms), opacity .15s ease, filter .15s ease;
}
.will-animate:not(.in-view) .chart-bar { transform: scaleY(0); }
.chart-value { transition: opacity .4s ease .55s; }
.will-animate:not(.in-view) .chart-value { opacity: 0; }
/* Üzerine gelinen sütun öne çıkar, diğerleri soluklaşır */
.chart.has-hover .chart-bar { opacity: .38; }
.chart .chart-col.is-hover .chart-bar { opacity: 1; filter: brightness(1.12); }
.chart-col:hover .chart-hit { fill: color-mix(in srgb, var(--muted) 10%, transparent); }
.chart-delta { margin-left: 8px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chart-delta .muted { font-weight: 400; }
.chart-delta.is-good { color: var(--green-text); }
.chart-delta.is-bad { color: var(--red-text); }

/* ===================== Eğilim çizgisi (istatistik kutuları) ===================== */
.sparkline { display: block; width: 100%; height: auto; max-height: 40px; margin-top: 8px; overflow: visible; }
.spark-area { fill: var(--spark); opacity: .1; transition: opacity .6s ease .5s; }
.spark-line { fill: none; stroke: var(--spark); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease-out); }
.spark-dot { fill: var(--spark); stroke: var(--bg-2); stroke-width: 2; transition: opacity .3s ease 1s, transform .3s var(--ease-out) 1s; transform-box: fill-box; transform-origin: center; }
.sparkline.will-animate:not(.in-view) .spark-line { stroke-dashoffset: 1; }
.sparkline.will-animate:not(.in-view) .spark-area { opacity: 0; }
.sparkline.will-animate:not(.in-view) .spark-dot { opacity: 0; transform: scale(0); }

/* ===================== Dil çubukları ===================== */
.lang-bar { transition: clip-path 1s var(--ease-out); clip-path: inset(0 0 0 0 round 4px); }
.lang-bar.will-animate:not(.in-view) { clip-path: inset(0 100% 0 0 round 4px); }
.lang-bar span { transition: filter .15s; }
.lang-bar span:hover { filter: brightness(1.2); }
.pct-bar span { transform-origin: left center; transition: transform 1s var(--ease-out); }
.pct-bar.will-animate:not(.in-view) span { transform: scaleX(0); }

/* ===================== Katkı takvimi ===================== */
.cal-cell { transform-box: fill-box; transform-origin: center; transition: opacity .35s ease calc(var(--w, 0) * 11ms), transform .45s var(--ease-out) calc(var(--w, 0) * 11ms); }
.cal-anim.will-animate:not(.in-view) .cal-cell { opacity: 0; transform: scale(.3); }
.cal-cell.is-hover { stroke: var(--text); stroke-width: 1.5; }

/* ===================== İpucu kutusu ===================== */
.chart-tooltip { opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease; box-shadow: var(--lift-sm); }
.chart-tooltip.show { opacity: 1; transform: none; }

/* ===================== Kart derinliği ===================== */
.repo-card, .topic-card, .feature, a.stat-window, .showcase-box, .board-card, .search-result {
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .2s ease;
}
.repo-card:hover, .topic-card:hover, .feature:hover, a.stat-window:hover {
  transform: translateY(-3px); box-shadow: var(--lift); border-color: color-mix(in srgb, var(--link) 45%, var(--border));
}
.board-card.movable:hover { box-shadow: var(--lift-sm); transform: translateY(-1px); }
.board-card.dragging { transform: rotate(1.5deg) scale(1.02); box-shadow: var(--lift); }
.window { box-shadow: var(--lift-sm); }

/* Kaydırınca beliren kartlar */
.reveal:not(.in-view) { opacity: 0; }
.reveal.in-view { animation: rise .6s var(--ease-out) var(--d, 0ms) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

/* ===================== Butonlar ===================== */
.btn, .chip, .reaction, .theme-switch button { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease, box-shadow .15s ease; }
.btn:active, .chip:active { transform: translateY(1px) scale(.98); }
.btn-primary:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 25%, transparent); }
:is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.reaction:active { transform: scale(.88); }
.reaction.mine { animation: pop .3s var(--ease-out); }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.reaction-picker[open] .reaction-menu { animation: menu-in .16s var(--ease-out); transform-origin: bottom left; }
@keyframes menu-in { from { opacity: 0; transform: translateY(4px) scale(.96); } }

/* Gönderilen formun butonu: dönen gösterge */
button.is-loading { position: relative; color: transparent !important; pointer-events: none; }
button.is-loading > * { visibility: hidden; }
button.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 30%, transparent); border-top-color: var(--text); animation: spin .7s linear infinite;
}
.btn-primary.is-loading::after, .btn-danger.btn-solid-danger.is-loading::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Bildirim mesajı ve zil ===================== */
.flash-top { position: relative; padding-right: 44px; animation: flash-in .4s var(--ease-out); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-10px); } }
.flash-out { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
.flash-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: var(--radius); cursor: pointer; }
.flash-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.bell.has-unread { animation: bell-ring 1.1s ease .8s 1; transform-origin: 50% 15%; }
.bell-count { animation: pop .45s var(--ease-out) .5s backwards; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }

/* Üst çubuk: kaydırınca hafif gölge */
.topbar { transition: box-shadow .2s ease; }
.is-scrolled .topbar { box-shadow: 0 6px 20px rgba(1, 4, 9, .25); }

/* ===================== Giriş sayfası gökyüzü ===================== */
.hero {
  isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(31, 111, 235, .28), transparent 60%),
    linear-gradient(180deg, #0a1428 0%, var(--bg) 78%);
}
.hero > :not(.hero-sky):not(.hero-range):not(.hero-glow) { position: relative; z-index: 2; }
.hero-sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.stars {
  position: absolute; inset: -30px;
  background-image:
    radial-gradient(1.2px 1.2px at 23px 31px, #fff, transparent),
    radial-gradient(1px 1px at 97px 82px, rgba(255, 255, 255, .85), transparent),
    radial-gradient(1.4px 1.4px at 158px 22px, #fff, transparent),
    radial-gradient(1px 1px at 201px 121px, rgba(255, 255, 255, .7), transparent),
    radial-gradient(1px 1px at 61px 140px, rgba(255, 255, 255, .8), transparent),
    radial-gradient(1.2px 1.2px at 132px 151px, rgba(200, 220, 255, .9), transparent);
  background-size: 230px 170px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 80%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 80%);
  transform: translate(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px));
  transition: transform .6s var(--ease-out);
  animation: twinkle 5s ease-in-out infinite alternate;
}
.stars-2 { background-size: 350px 260px; background-position: 120px 60px; opacity: .35; animation-duration: 8s; animation-delay: -2s; transform: translate(calc(var(--mx, 0) * -16px), calc(var(--my, 0) * -9px)); }
@keyframes twinkle { 0% { opacity: .25; } 50% { opacity: .6; } 100% { opacity: .4; } }
.aurora {
  position: absolute; left: -15%; right: -15%; top: -35%; height: 75%;
  background: radial-gradient(40% 55% at 30% 60%, rgba(46, 160, 67, .35), transparent 70%),
              radial-gradient(45% 60% at 65% 45%, rgba(56, 139, 253, .32), transparent 70%),
              radial-gradient(35% 50% at 85% 65%, rgba(163, 113, 247, .3), transparent 70%);
  filter: blur(28px); opacity: .55; mix-blend-mode: screen;
  animation: aurora 16s ease-in-out infinite alternate;
}
.aurora-2 { animation-duration: 23s; animation-direction: alternate-reverse; opacity: .35; top: -25%; }
@keyframes aurora { 0% { transform: translateX(-4%) skewX(-6deg) scaleY(1); } 50% { transform: translateX(3%) skewX(4deg) scaleY(1.12); } 100% { transform: translateX(6%) skewX(-2deg) scaleY(.95); } }
/* Ara sıra kayan yıldız */
.hero-sky::after {
  content: ''; position: absolute; top: 12%; left: 70%; width: 110px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .9), transparent);
  transform: rotate(-22deg) translateX(0); opacity: 0;
  animation: shooting 11s ease-in 4s infinite;
}
@keyframes shooting { 0%, 92% { opacity: 0; transform: rotate(-22deg) translateX(0); } 93% { opacity: 1; } 100% { opacity: 0; transform: rotate(-22deg) translateX(-360px); } }
.hero-range {
  position: absolute; left: -3%; right: -3%; bottom: -1px; height: 200px; z-index: 1; pointer-events: none;
  background: var(--mountains) bottom / 100% 100% no-repeat;
  transform: translateX(calc(var(--mx, 0) * -14px));
  transition: transform .6s var(--ease-out);
}
.hero-glow { z-index: 1; animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .7; transform: translateX(-50%) scale(.95); } to { opacity: 1; transform: translateX(-50%) scale(1.08); } }

/* Açık tema: yıldız yok; gün doğumu tonları */
:root[data-theme="light"] .hero { background: radial-gradient(120% 70% at 50% -10%, rgba(9, 105, 218, .14), transparent 60%), linear-gradient(180deg, #eef5ff 0%, var(--bg) 78%); }
:root[data-theme="light"] .stars, :root[data-theme="light"] .hero-sky::after { display: none; }
:root[data-theme="light"] .aurora { mix-blend-mode: multiply; opacity: .25; }
@media (prefers-color-scheme: light) {
  :root[data-theme="auto"] .hero { background: radial-gradient(120% 70% at 50% -10%, rgba(9, 105, 218, .14), transparent 60%), linear-gradient(180deg, #eef5ff 0%, var(--bg) 78%); }
  :root[data-theme="auto"] .stars, :root[data-theme="auto"] .hero-sky::after { display: none; }
  :root[data-theme="auto"] .aurora { mix-blend-mode: multiply; opacity: .25; }
}

/* ===================== Hareketi azalt ===================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .stars, .aurora, .hero-sky::after { animation: none !important; }
}