/* HeightScore — eğlenceli ana sayfa teması (admin paneli style.css kullanır) */

:root {
  color-scheme: dark;
  --bg: #0b1026;
  --bg-2: #161c45;
  --card: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-hover: rgba(255, 255, 255, 0.09);
  --text: #f5f6ff;
  --muted: #aab0d6;
  --amber: #ffb347;
  --coral: #ff6b6b;
  --pink: #ff4f9a;
  --violet: #7c5cff;
  --teal: #2dd4bf;
  --grad: linear-gradient(135deg, #ffb347 0%, #ff6b6b 55%, #ff4f9a 100%);
  --grad-cool: linear-gradient(135deg, #2dd4bf, #7c5cff);
  --glow: 0 14px 40px -12px rgba(255, 150, 90, 0.6);
  --curve-line: #b5a4ff;
  --marker: #ffb347;
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  overflow-x: hidden;
}

/* --- Gökyüzü: yıldızlar + yüzen renk lekeleri --- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% -20%, var(--bg-2) 0%, var(--bg) 60%);
}

.blob {
  position: absolute;
  width: 55vmax;
  height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.45;
  mix-blend-mode: screen;
  animation: drift 22s ease-in-out infinite alternate;
}

.blob-1 { background: var(--violet); top: -20vmax; left: -15vmax; }
.blob-2 { background: var(--coral); bottom: -25vmax; right: -20vmax; animation-duration: 27s; animation-delay: -8s; }
.blob-3 { background: var(--teal); top: 40%; left: 55%; width: 35vmax; height: 35vmax; opacity: 0.3; animation-duration: 19s; animation-delay: -14s; }

@keyframes drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6vmax, -4vmax) scale(1.12); }
  100% { transform: translate(-5vmax, 5vmax) scale(0.95); }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.6;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8); }
  50% { opacity: 0.9; transform: scale(1.3); }
}

/* --- Dil değiştirici --- */
.lang {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(11, 16, 38, 0.6);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.lang a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s, transform 0.3s var(--spring);
}

.lang a:hover { color: var(--text); transform: translateY(-1px); }
.lang a.active { background: var(--grad); color: #1a1030; }

/* Mobilde dil secici tek bir "TR ▾" hapina kucülür ve sayfayla kayar (icerigin onunde kalmaz).
   Dokununca nav odak alir (tabindex), diger diller acilir; disari dokununca kapanir. */
@media (max-width: 640px) {
  .lang { position: absolute; top: 10px; right: 10px; flex-direction: column; gap: 2px; cursor: pointer; }
  .lang a { padding: 5px 10px; font-size: 0.75rem; text-align: center; }
  .lang:not(:focus-within) a:not(.active) { display: none; }
  .lang:not(:focus-within) a.active { pointer-events: none; }
  .lang:not(:focus-within) a.active::after { content: " ▾"; }
  .lang:focus-within { background: rgba(11, 16, 38, 0.92); }
  .lang:focus-within a.active { order: -1; }
  .lang:focus { outline: none; }
}

/* --- Sayfa düzeni --- */
.page {
  max-width: 540px;
  margin: 0 auto;
  padding: 36px 16px 48px;
}

.hero {
  text-align: center;
  margin-bottom: 22px;
  animation: rise 0.7s var(--spring) both;
}

/* Dünya + yörüngeler */
.globe-wrap {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 96px;
  margin-bottom: 4px;
}

.globe {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 60px;
  line-height: 1;
  filter: drop-shadow(0 12px 28px rgba(45, 212, 191, 0.45));
  animation: bob 4s ease-in-out infinite;
}

/* Logo gorseli (eskiden emoji): ayni bob animasyonu, gorselin kendi boyutu */
img.globe { width: 64px; height: 64px; margin: auto; filter: drop-shadow(0 12px 24px rgba(255, 107, 107, 0.35)); }
img.links-globe { display: block; width: 72px; height: 72px; margin: 0 auto; filter: drop-shadow(0 12px 24px rgba(255, 107, 107, 0.35)); }
img.globe-404 { display: block; margin: 0 auto 8px; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
}

.orbit {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  animation: spin 11s linear infinite;
}

.orbit-2 {
  inset: -18px;
  border-color: rgba(255, 255, 255, 0.1);
  animation-duration: 19s;
  animation-direction: reverse;
}

.orbit i {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
}

.orbit-2 i { background: var(--amber); box-shadow: 0 0 12px var(--amber); }

@keyframes spin { to { transform: rotate(360deg); } }

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 3.4rem);
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 12s linear infinite;
}

@keyframes hue {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(-25deg); }
}

.subtitle {
  font-family: var(--font-display);
  color: var(--text);
  margin: 0 0 12px;
  font-size: 1.2rem;
  font-weight: 500;
}

.ticker {
  color: var(--muted);
  margin: 0 auto 6px;
  font-size: 0.95rem;
  max-width: 440px;
}

.ticker b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Sayi kendi satirinda ve sabit genislikli rakamlarla: her saniye artsa da metin kaymaz */
.ticker .ticker-line { display: block; }

#pop-ticker {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 6vw, 2rem);
  line-height: 1.2;
  margin: 2px 0;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* Kalabalık motion grafiği */
.crowd {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 96px;
  margin: 6px auto 0;
  overflow: visible;
  cursor: pointer;
  touch-action: pan-y;
}

/* "Sen" figuru bir kisinin yerine gecince o kisi soner; etiket fareyi engellemez */
.crowd .slot .person { transition: opacity 0.25s ease; }
.crowd .slot.taken .person { opacity: 0; }
.crowd .you-label, .crowd .you-slot { pointer-events: none; }
.crowd .you-label { transition: font-size 0.2s ease; }

.crowd .person {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: wave 2.6s ease-in-out infinite;
}

@keyframes wave {
  0%, 100% { transform: scaleY(0.94) translateY(0); }
  50% { transform: scaleY(1.06) translateY(-2px); }
}

.crowd .person.you {
  animation: youPulse 2.2s ease-in-out infinite;
}

@keyframes youPulse {
  0%, 100% { transform: scale(1) translateY(0); filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.6)); }
  50% { transform: scale(1.1) translateY(-4px); filter: drop-shadow(0 0 14px rgba(255, 179, 71, 1)); }
}

.crowd .you-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  fill: var(--amber);
  animation: labelBob 2.2s ease-in-out infinite;
}

@keyframes labelBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.crowd .ground {
  stroke: rgba(255, 255, 255, 0.15);
  stroke-dasharray: 4 6;
  animation: groundSlide 1.2s linear infinite;
}

@keyframes groundSlide { to { stroke-dashoffset: -10; } }

/* --- Kartlar --- */
.card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 28px;
  padding: 22px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  margin-bottom: 20px;
  animation: rise 0.7s var(--spring) both;
  animation-delay: 0.1s;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Kategori çipleri --- */
/* 9 kategori: yatay kaydirma yerine satirlara sarilir, boylece hepsi gorunur */
.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 2px 6px;
  margin: -4px -4px 12px;
}

.cat {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.92rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.35s var(--spring), background 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation: rise 0.5s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 50ms + 0.2s);
}

.cat:hover { background: var(--card-hover); transform: translateY(-2px); }

.cat.active {
  background: var(--grad);
  color: #1a1030;
  border-color: transparent;
  box-shadow: var(--glow);
  transform: scale(1.05);
}

.cat.soon { opacity: 0.6; }

.cat.soon:hover { transform: translateY(-1px) rotate(-2deg); }

.cat .soon-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
  padding: 2px 6px;
  border-radius: 999px;
}

/* --- Form --- */
.field {
  display: block;
  margin-bottom: 18px;
}

.field > label,
.field-head label,
fieldset.field legend {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  padding: 0;
}

.field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 10px;
}
/* Gelir: aylik/yillik anahtari para birimi seciminin yaninda */
.field-head .period-toggle { margin-left: auto; }
.field-head .period-toggle[hidden] { display: none; }

.field-head label { margin-bottom: 8px; }

.unit-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
}

.unit-toggle button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.unit-toggle button.active { background: var(--amber); color: #1a1030; }
/* display kurallari hidden ozniteligini ezer; birimsiz kategorilerde (gelir, yas, VKI) anahtar,
   cinsiyetsiz kategorilerde cinsiyet alani, metrik/ft-in gorunumunde diger girdi gizli */
.unit-toggle[hidden], .field[hidden], .height-input[hidden] { display: none; }

/* VKI hesaplama yardimcisi (yalnizca VKI kategorisinde) */
.bmi-calc { margin-top: 12px; }
.bmi-calc[hidden] { display: none; }
.bmi-calc summary { cursor: pointer; color: var(--amber); font-weight: 700; font-size: 0.9rem; }
.bmi-calc-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.bmi-calc-row label { flex: 1 1 120px; display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.bmi-calc-input { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.04); }
.bmi-calc-input:focus-within { border-color: var(--amber); }
.bmi-calc-input input { width: 100%; min-width: 0; border: none; background: transparent; color: var(--text); font: 700 1.1rem var(--font-display); outline: none; }

/* IQ unluleri: "olculmus" / "bildirilen" etiketi */
.fun-tag { font-style: normal; font-size: 0.7rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.fun-tag-tested { background: rgba(45, 212, 191, 0.18); color: var(--teal); }
.fun-tag-reported { background: rgba(170, 176, 214, 0.15); color: var(--muted); }

.height-input.ftin input[type="number"] { width: 3.2ch; }
.height-input.ftin .unit { margin-right: 10px; }
.height-input input[type="number"], .height-input input[type="text"] { min-width: 5.2ch; max-width: 100%; }
/* Para girdisi metin kutusudur; genel .field metin kutusu stilini (cerceve, %100 genislik) almasin */
.field .height-input input[type="text"] { width: 5.2ch; padding: 0; border: none; border-radius: 0; background: transparent; box-shadow: none; font-size: 2.6rem; font-family: var(--font-display); }
.field .height-input input[type="text"]:focus { box-shadow: none; }

.currency-select {
  width: auto;
  padding: 6px 30px 6px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  background-position: right 10px center;
}

.currency-select[hidden] { display: none; }

/* Karsilastirma sayfasi */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.compare-col { text-align: center; padding: 20px 16px; margin: 0; }
.compare-label { margin: 0 0 6px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; }
.compare-value { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin: 0; color: var(--amber); line-height: 1.1; }
.compare-where { margin: 4px 0 10px; font-weight: 800; }
.compare-col p { margin: 6px 0; font-size: 0.95rem; }
.compare-empty { opacity: 0.75; border-style: dashed; }
.compare-between h2, .compare-invite h2 { margin-top: 0; }
.compare-back { text-align: center; margin: 8px 0 20px; }
@media (max-width: 520px) { .compare-grid { grid-template-columns: 1fr; } .compare-value { font-size: 2rem; } }

/* Gelir ayrintilari */
.facts {
  margin-top: 16px;
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
}

.facts[hidden] { display: none; }
.facts h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 8px; color: var(--amber); }
.facts dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin: 0; font-size: 0.9rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.facts dd small { font-weight: 600; color: var(--muted); }
@media (max-width: 480px) {
  .facts dl { grid-template-columns: 1fr; gap: 0; }
  .facts dt { margin-top: 8px; font-size: 0.82rem; }
  .facts dd { text-align: left; }
}

fieldset.field {
  border: none;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}

.pills {
  display: flex;
  gap: 10px;
}

.pills label {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  font-weight: 800;
  font-size: 1.05rem;
  transition: transform 0.35s var(--spring), background 0.2s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}

.pills label:hover { background: var(--card-hover); transform: translateY(-2px); }

.pills input { position: absolute; opacity: 0; pointer-events: none; }

.pills label:has(input:checked) {
  background: var(--grad);
  border-color: transparent;
  color: #1a1030;
  transform: scale(1.04);
  box-shadow: var(--glow);
}

.pills .emoji { font-size: 1.3rem; transition: transform 0.4s var(--spring); }
.pills label:has(input:checked) .emoji { transform: scale(1.25) rotate(-8deg); }

.height-input {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px 4px;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.height-input:focus-within {
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.18);
}

.height-input input[type="number"], .height-input input[type="text"] {
  width: 5.2ch;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  text-align: center;
  padding: 0;
  outline: none;
  -moz-appearance: textfield;
  transition: transform 0.2s var(--spring);
}

.height-input input.bump { transform: scale(1.08); }

.height-input input::-webkit-outer-spin-button,
.height-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.height-input .unit {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--muted);
  font-weight: 600;
}

input[type="range"] {
  width: 100%;
  margin: 12px 0 4px;
  accent-color: var(--amber);
  cursor: pointer;
}

/* Metin alanlari (sehir aramasi) select ile ayni gorunum */
.field input[type="text"] {
  width: 100%;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input[type="text"]:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.18); }
.result-city { color: var(--text); font-weight: 700; }

select {
  width: 100%;
  padding: 13px 44px 13px 14px;
  border-radius: 18px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23aab0d6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 16px center;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

select:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.18);
}

select option { background: #161c45; color: var(--text); }

.btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 18px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.35s var(--spring), box-shadow 0.2s, filter 0.2s;
}

.btn-primary {
  margin-top: 6px;
  background: var(--grad);
  color: #1a1030;
  box-shadow: var(--glow);
}

/* Parıltı süpürmesi */
.btn-primary::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  animation: shimmer 3.2s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}

.btn-primary:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.05); }
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { cursor: progress; filter: saturate(0.7); transform: none; }

.btn-secondary {
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
}

.result-note {
  margin: 16px 0 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.35);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.5;
}

.result-note[hidden] { display: none; }

.share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.share-row .btn { margin-top: 18px; font-size: 1.05rem; padding: 14px 10px; }
/* Ucuncu dugme tek basina yarim genislikte kalmasin */
.share-row #compare-btn, .share-row #compare-link { grid-column: 1 / -1; }

@media (max-width: 400px) {
  .share-row { grid-template-columns: 1fr; }
  .share-row .btn + .btn { margin-top: 0; }
}

.btn-secondary:hover { background: var(--card-hover); transform: translateY(-2px); }
.btn-secondary:active { transform: scale(0.97); }

.dots span {
  display: inline-block;
  animation: bounce 0.9s ease-in-out infinite;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.error {
  color: var(--coral);
  font-weight: 700;
  text-align: center;
  margin: 14px 0 0;
  animation: shake 0.4s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* --- Sonuç --- */
.result-card {
  text-align: center;
  animation: pop 0.7s var(--spring) both;
}

@keyframes pop {
  from { opacity: 0; transform: translateY(30px) scale(0.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Kart içindeki bloklar kademeli girer (--i sırası) */
.result-card.show > * {
  animation: rise 0.6s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 90ms + 0.15s);
}

.reaction-emoji {
  display: inline-block;
  font-size: 3.4rem;
  line-height: 1;
  animation: emojiPop 0.8s var(--spring) both;
  animation-delay: 0.25s;
}

@keyframes emojiPop {
  from { transform: scale(0) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.reaction-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 6px 0 14px;
}

.lead {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 600;
}

.rank-big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 4.2rem);
  line-height: 1.05;
  margin: 4px 0;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.rank-big .hash { opacity: 0.7; font-size: 0.6em; vertical-align: 0.25em; }

.chip {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 179, 71, 0.6);
  background: rgba(255, 179, 71, 0.12);
  color: var(--amber);
  font-weight: 800;
  font-size: 0.92rem;
  vertical-align: middle;
}

/* Yüzde halkası + 100 kişilik oda */
.ring-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
  margin: 18px 0 6px;
  text-align: left;
}

.ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.ring svg { width: 100%; height: 100%; display: block; }

.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 10; }

.ring-fg {
  fill: none;
  stroke: url(#ringGrad);
  stroke-width: 10;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s;
}

.ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.ring-text b {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.ring-text small { font-size: 0.64rem; color: var(--muted); font-weight: 800; max-width: 82px; text-align: center; line-height: 1.15; }

.people-wrap { min-width: 0; }

.people-caption {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0 0 8px;
}

.people-caption b { color: var(--text); }

.people {
  display: grid;
  grid-template-columns: repeat(20, 1fr);
  gap: 3px;
}

.dot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transform: scale(0.6);
  transition: background 0.4s, transform 0.5s var(--spring), box-shadow 0.4s;
}

.dot.on {
  background: var(--amber);
  transform: scale(1);
  box-shadow: 0 0 8px rgba(255, 179, 71, 0.6);
}

.dot.you {
  background: #fff;
  transform: scale(1.4);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.9);
}

.people-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 8px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.people-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

@media (max-width: 400px) {
  .ring-row { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .people-legend { justify-content: center; }
}

/* Çan eğrisi */
.bell-curve-wrap { margin: 16px 0 6px; }

#bell-curve {
  width: 100%;
  height: 136px;
  display: block;
  overflow: visible;
}

#bell-curve .curve-fill { opacity: 0; transition: opacity 1s ease 0.6s; }
#bell-curve.drawn .curve-fill { opacity: 1; }
#bell-curve .curve-line { transition: stroke-dashoffset 1.3s ease-out; }
#bell-curve .marker { opacity: 0; }
#bell-curve.drawn .marker { animation: dropIn 0.7s var(--spring) 1s both; }
#bell-curve.drawn .you-pill { animation: labelBob 2.2s ease-in-out 1.7s infinite; }
#bell-curve.static .curve-fill, #bell-curve.static .marker { transition: none; animation: none; opacity: 1; }
#bell-curve .axis { font-family: var(--font-body); }

.curve-caption b { color: var(--text); font-weight: 800; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-40px); }
  to { opacity: 1; transform: translateY(0); }
}

.curve-caption b { white-space: nowrap; }
.curve-caption {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 4px 0 0;
}

/* "Bunlari biliyor muydun?" */
.fun {
  position: relative;
  margin-top: 16px;
  text-align: left;
  border-radius: 22px;
  padding: 18px 18px 16px;
  /* Gradyan kenar: ic zemin + dis gradyan (iki katmanli arka plan) */
  border: 1px solid transparent;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255, 179, 71, 0.10), transparent 55%) padding-box,
    radial-gradient(120% 90% at 100% 100%, rgba(124, 92, 255, 0.12), transparent 60%) padding-box,
    linear-gradient(rgba(16, 21, 52, 0.92), rgba(16, 21, 52, 0.92)) padding-box,
    linear-gradient(135deg, rgba(255, 179, 71, 0.55), rgba(255, 79, 154, 0.25) 45%, rgba(124, 92, 255, 0.5)) border-box;
  box-shadow: 0 18px 40px -24px rgba(124, 92, 255, 0.55);
  overflow: hidden;
}
.fun[hidden], .fun-line[hidden], .fun-block[hidden] { display: none; }
.fun h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.18rem;
  margin: 0 0 14px;
  color: var(--text);
}
.fun-title-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.fun-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  font-size: 1.15rem;
  background: var(--grad);
  box-shadow: 0 6px 16px -6px rgba(255, 107, 107, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.fun h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* En yuksek / en dusuk ulkeler: iki mini kart */
.fun-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.fun-lists:empty { display: none; }
.fun-list {
  --accent: var(--teal);
  min-width: 0;
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--accent);
}
.fun-list-bottom { --accent: var(--coral); }
.fun-arrow { color: var(--accent); font-size: 0.7rem; }
.fun-lists ol { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
.fun-lists li { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.fun-rank {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.07);
  font-variant-numeric: tabular-nums;
}
.fun-medal-1, .fun-medal-2, .fun-medal-3 { color: #1b1530; }
.fun-medal-1 { background: linear-gradient(135deg, #ffe08a, #ffb347); box-shadow: 0 0 12px -2px rgba(255, 196, 90, 0.8); }
.fun-medal-2 { background: linear-gradient(135deg, #f1f3ff, #b9bfdc); }
.fun-medal-3 { background: linear-gradient(135deg, #ffc9a0, #d98a52); }
.fun-row { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fun-row-bottom { display: flex; align-items: center; gap: 8px; }
.fun-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fun-flag { margin-right: 5px; }
.fun-lists li b { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 0.82rem; }
.fun-bar { flex: 1; min-width: 30px; display: block; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.fun-bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), var(--accent));
  transform-origin: left;
}

/* Ulkenin sirasi ve ikiz ulke: ikonlu bilgi kartlari */
.fun-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  font-size: 0.9rem;
}
.fun-line b { color: var(--amber); }
.fun-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.05rem;
  background: rgba(255, 179, 71, 0.13);
  border: 1px solid rgba(255, 179, 71, 0.3);
}
#fun-twin .fun-icon { background: rgba(45, 212, 191, 0.12); border-color: rgba(45, 212, 191, 0.32); }
.fun-line-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.fun-track { position: relative; display: block; height: 6px; margin: 6px 4px 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.fun-track-fill { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--grad-cool); transform-origin: left; }
.fun-track-dot {
  position: absolute;
  top: 50%;
  left: var(--p);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 0.8rem;
  background: var(--bg-2);
  border: 2px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.15);
}
.fun-track-ends { display: flex; justify-content: space-between; font-size: 0.68rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Unluler: avatarli kartlar */
.fun-block { margin-top: 16px; }
.fun-chips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.fun-chips li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.86rem;
  transition: transform 0.25s var(--spring), border-color 0.2s;
}
.fun-chips li:hover { transform: translateY(-2px); border-color: rgba(255, 179, 71, 0.45); }
.fun-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 80% 62%), hsl(calc(var(--h) + 45) 75% 48%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.fun-celeb-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fun-celeb-name { display: flex; align-items: center; gap: 5px; min-width: 0; }
.fun-celeb-name b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fun-celeb-name .fun-tag { flex: none; margin-left: 0; }
.fun-celeb-meta { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.fun-diff {
  display: inline-block;
  margin-left: 4px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--amber);
  background: rgba(255, 179, 71, 0.13);
}
.fun-diff-up { color: var(--teal); background: rgba(45, 212, 191, 0.14); }
.fun-diff-down { color: var(--coral); background: rgba(255, 107, 107, 0.14); }
.fun-note { margin: 8px 0 0; font-size: 0.72rem; color: var(--muted); }

/* Rekorlar */
.fun-records { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; display: flex; flex-direction: column; gap: 6px; }
.fun-records li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
}
.fun-rec-icon { flex: none; width: 20px; text-align: center; font-size: 1rem; }
.fun-rec-label { flex: 1; min-width: 0; }
.fun-rec-val { flex: none; text-align: right; white-space: nowrap; }
.fun-rec-val b { font-variant-numeric: tabular-nums; }
.fun-rec-note { align-items: flex-start; color: var(--muted); }
.fun-rec-note .fun-rec-label { color: var(--text); opacity: 0.88; }
@media (max-width: 420px) {
  .fun { padding: 16px 14px 14px; }
  .fun-lists { grid-template-columns: minmax(0, 1fr); }
  .fun-records li:not(.fun-rec-note) { flex-wrap: wrap; row-gap: 4px; }
  .fun-records li:not(.fun-rec-note) .fun-rec-label { flex: 1 1 calc(100% - 31px); }
  .fun-records li:not(.fun-rec-note) .fun-rec-val { margin-left: 30px; text-align: left; }
}

/* Dünya kutuları */
.world-tiles {
  display: grid;
  /* auto-fit: tek kutu kaldiginda (gelir, yas) tam genislige yayilir */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 20px 0 0;
}

.tile {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 16px 10px;
  transition: transform 0.35s var(--spring), background 0.2s;
}

.tile:hover { transform: translateY(-4px); background: var(--card-hover); }
.tile[hidden] { display: none; }

.tile-emoji { font-size: 1.8rem; display: block; line-height: 1; margin-bottom: 6px; animation: bob 5s ease-in-out infinite; }
.tile:nth-child(2) .tile-emoji { animation-delay: -2.5s; }

.tile-label {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0 0 4px;
  font-weight: 700;
}

.tile-num {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 5vw, 1.5rem);
  font-weight: 700;
  margin: 0;
  font-variant-numeric: tabular-nums;
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tile-sub { font-size: 0.8rem; color: var(--amber); font-weight: 800; margin: 2px 0 0; }

/* Detaylar */
details.numbers {
  margin-top: 18px;
  text-align: left;
  border-top: 1px dashed var(--card-border);
  padding-top: 12px;
}

details.numbers summary {
  cursor: pointer;
  color: var(--muted);
  font-weight: 800;
  font-size: 0.9rem;
  list-style: none;
  text-align: center;
}

details.numbers summary::-webkit-details-marker { display: none; }
details.numbers summary::after { content: " ▾"; }
details.numbers[open] summary::after { content: " ▴"; }

.result-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
  padding: 0;
  text-align: center;
}

.result-details div[hidden] { display: none; }
.result-details > div { min-width: 0; }
.result-details dt, .result-details dd { overflow-wrap: anywhere; }
input[type="range"][hidden] { display: none; }

.result-details div {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 10px 6px;
}

.result-details dt {
  font-size: 0.68rem;
  color: var(--muted);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
}

.result-details dd { margin: 0; font-weight: 800; font-size: 0.92rem; }

.disclaimer,
.sources {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 8px 0 0;
}

.sources a { color: var(--teal); }

footer {
  text-align: center;
  margin-top: 8px;
}

footer .disclaimer { margin-bottom: 10px; }

.footer-links {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
}

.footer-links a,
.admin-link {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed var(--card-border);
  transition: color 0.2s;
}

.footer-links a:hover,
.admin-link:hover { color: var(--amber); }

/* --- Yöntem sayfası --- */
.page-wide { max-width: 760px; }

/* /links sayfasi */
.links-hero { margin-top: 12px; }
.links-globe { font-size: 64px; line-height: 1; filter: drop-shadow(0 12px 28px rgba(45, 212, 191, 0.45)); animation: bob 4s ease-in-out infinite; }
.links-list { max-width: 460px; margin: 0 auto; display: grid; gap: 12px; }
.links-list .btn { display: block; margin: 0; text-align: center; text-decoration: none; padding: 16px 14px; font-size: 1.05rem; }
.links-social { max-width: 460px; margin: 28px auto 0; text-align: center; }
.links-social h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 12px; color: var(--muted); }
.links-social p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.links-social a {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}
.links-social a:hover { background: var(--card-hover); }
.links-contact { text-align: center; margin-top: 20px; color: var(--muted); }
.links-contact a { color: var(--teal); }

.hero-small { text-align: left; }
.hero-small h1 { font-size: clamp(2rem, 7vw, 2.8rem); animation: none; }
.hero-small .subtitle { font-family: var(--font-body); font-size: 1.05rem; color: var(--muted); font-weight: 600; }

.back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 10px;
  transition: color 0.2s, transform 0.3s var(--spring);
}

.back:hover { color: var(--amber); transform: translateX(-3px); }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  text-align: center;
}

.kpi-row .tile { animation: rise 0.6s var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms + 0.1s); }

@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr; }
}

.toc { padding: 16px 22px; }
.toc strong { display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px; }
.toc li { margin: 4px 0; break-inside: avoid; }
.toc a { color: var(--text); text-decoration: none; font-weight: 700; }
.toc a:hover { color: var(--amber); }

@media (max-width: 480px) { .toc ol { columns: 1; } }

.prose { animation-delay: calc(var(--i, 0) * 80ms + 0.15s); }
.prose h2 { font-family: var(--font-display); font-size: 1.5rem; margin: 0 0 12px; }
.prose h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 18px 0 8px; color: var(--amber); }
.prose p { margin: 0 0 12px; line-height: 1.65; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 22px; line-height: 1.65; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--teal); }
/* Metin icindeki buton-linkler (donusturucu, "uzun mu?" CTA) link rengini almaz */
.prose a.btn { display: inline-block; color: #1a1030; text-align: center; text-decoration: none; }
.prose code { background: rgba(255, 255, 255, 0.08); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }
.prose .formula {
  font-family: "Fredoka", monospace;
  background: rgba(124, 92, 255, 0.15);
  border: 1px solid rgba(124, 92, 255, 0.35);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 10px 0 14px;
  text-align: center;
  font-size: 1.05rem;
}

.table-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 10px;
}

.table-tools select {
  width: auto;
  flex: 0 0 auto;
  padding: 10px 40px 10px 14px;
  border-radius: 14px;
}

.table-tools select[hidden] { display: none; }

.table-tools input[type="search"] {
  flex: 1;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}

.table-tools input:focus { outline: none; border-color: var(--amber); }

.table-wrap {
  overflow: auto;
  max-height: 520px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
}

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { padding: 8px 10px; border-bottom: 1px solid var(--card-border); text-align: left; white-space: nowrap; }
.data-table td.num, .data-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.data-table thead th { position: sticky; top: 0; background: #161c45; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; z-index: 1; }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover, .data-table th.sorted { color: var(--amber); }
.data-table tbody tr:hover { background: rgba(255, 255, 255, 0.04); }

.muted-small { font-size: 0.78rem; color: var(--muted); }

/* SEO sayfalari */
.crumbs { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.seo-page .hero-small .subtitle { font-weight: 500; }
.seo-page .hero-small .subtitle b { color: var(--amber); font-weight: 800; }
.seo-page .kpi-row .tile-num { font-size: clamp(1rem, 4.5vw, 1.3rem); }
.table-tall { max-height: 70vh; }
.similar { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.similar li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--card-border); border-radius: 14px; background: rgba(255, 255, 255, 0.04); }
.similar a { color: var(--text); font-weight: 800; text-decoration: none; }
.similar a:hover { color: var(--amber); }
.converter { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.converter .field { margin-bottom: 0; }
.converter .height-input input[type="number"] { width: 5.5ch; font-size: 2rem; }
.converter .height-input.ftin input[type="number"] { width: 3.6ch; }
.conv-eq { font-family: var(--font-display); font-size: 2rem; color: var(--muted); padding-bottom: 10px; text-align: center; }
.seo-page .btn-primary { display: block; text-decoration: none; margin-top: 16px; }
.pct-form .height-input input[type="number"] { width: 5.5ch; font-size: 2rem; }
.pct-form .height-input.ftin input[type="number"] { width: 3.6ch; }
.pct-radios { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pct-radios label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.pct-form .height-input input[type="text"] { width: 9ch; font-size: 2rem; }
.calc-result { border-color: var(--amber); }
@media (max-width: 520px) {
  .converter { grid-template-columns: 1fr; }
  .conv-eq { padding: 0; }
}

/* Konfeti ve bildirim */
#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: var(--text);
  color: #1a1030;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.25s, transform 0.35s var(--spring);
  z-index: 60;
  pointer-events: none;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Blog */
.blog-item h2 { margin-bottom: 4px; }
.blog-item h2 a { color: inherit; text-decoration: none; }
.blog-item h2 a:hover { color: var(--teal); }
.blog-post h2 { margin-top: 26px; }
.blog-post h2:first-child { margin-top: 0; }
.blog-post blockquote { margin: 16px 0; padding: 10px 16px; border-left: 4px solid var(--amber); border-radius: 0 12px 12px 0; background: rgba(255, 255, 255, 0.05); }
.blog-post blockquote p { margin: 0; }
.blog-post hr { border: 0; border-top: 1px solid var(--card-border); margin: 22px 0; }
.blog-post .table-wrap { margin: 0 0 14px; }
.blog-cta { margin-top: 22px; }
.draft-banner { margin: 12px 0 0; padding: 8px 14px; border-radius: 12px; background: rgba(255, 196, 0, 0.16); border: 1px solid rgba(255, 196, 0, 0.5); font-weight: 700; text-align: center; }
.draft-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 196, 0, 0.2); font-size: 0.7rem; font-weight: 800; vertical-align: middle; }
mark.verify { background: rgba(255, 196, 0, 0.28); color: inherit; padding: 0 3px; border-radius: 4px; font-size: 0.88em; }

/* "uzun mu?" sayfalari */
.tall-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.tall-cta .btn { flex: 1 1 220px; width: auto; margin: 0; font-size: 1.05rem; padding: 14px 12px; }
.tall-nearby { display: flex; flex-wrap: wrap; gap: 6px 12px; }

/* Meraklisina rakamlar: ayrintili istatistik bloklari */
.more { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 4px 0 12px; }
.more:empty { display: none; }
.more-block { border: 1px solid var(--card-border); border-radius: 14px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); min-width: 0; }
.more-block h4 { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; color: var(--amber); text-transform: uppercase; letter-spacing: 0.04em; }
.more-block dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin: 0; font-size: 0.85rem; }
.more-block dt { color: var(--muted); min-width: 0; }
.more-block dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.more-note { grid-column: 1 / -1; margin: 0; font-size: 0.75rem; color: var(--muted); text-align: center; }

/* ===== Ek animasyonlar ===== */

/* Kaydirinca belirme: sonuc kartinin alt bloklari ekrana girince gelir */
.result-card.show > .reveal { animation: none; }
.reveal { opacity: 0; transform: translateY(22px) scale(0.98); transition: opacity 0.6s ease, transform 0.7s var(--spring); }
.reveal.in { opacity: 1; transform: none; }
.world-tiles.reveal .tile { transition: transform 0.7s var(--spring), opacity 0.6s ease, background 0.2s; }
.world-tiles.reveal:not(.in) .tile { opacity: 0; transform: translateY(16px); }
.world-tiles.reveal.in .tile:nth-child(2) { transition-delay: 0.12s; }
.share-row.reveal.in .btn:nth-child(2) { animation: rise 0.5s var(--spring) 0.08s both; }
.share-row.reveal.in .btn:nth-child(3), .share-row.reveal.in .btn:nth-child(4) { animation: rise 0.5s var(--spring) 0.16s both; }

/* "Bunlari biliyor muydun?": satirlar kademeli kayar, unlu cipleri patlar */
.fun.reveal:not(.in) li, .fun.reveal:not(.in) .fun-line { opacity: 0; }
.fun.in .fun-lists li, .fun.in .fun-records li, .fun.in .fun-line {
  animation: slideIn 0.5s var(--spring) both;
  animation-delay: calc(var(--k, 0) * 55ms + 0.15s);
}
.fun.in .fun-chips li { animation: chipPop 0.55s var(--spring) both; animation-delay: calc(var(--k, 0) * 55ms + 0.15s); }
.fun.in h3 .fun-title-text { animation: diceRoll 0.8s var(--spring) both; }
.fun.in .fun-badge { animation: diceSpin 0.9s var(--spring) both; }
.fun.in .fun-bar i { animation: barGrow 0.9s var(--spring) both; animation-delay: calc(var(--k, 0) * 55ms + 0.3s); }
.fun.in .fun-track-fill { animation: barGrow 1.1s var(--spring) 0.35s both; }
.fun.in .fun-track-dot { animation: dotSlide 1.1s var(--spring) 0.35s both; }
@keyframes diceSpin { from { opacity: 0; transform: rotate(-200deg) scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes barGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dotSlide { from { left: 0; opacity: 0; } to { left: var(--p); opacity: 1; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes chipPop { from { opacity: 0; transform: scale(0.6); } 70% { transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes diceRoll { from { opacity: 0; transform: rotate(-8deg) translateY(6px); } to { opacity: 1; transform: none; } }

/* Kategori degisince form alanlari yeniden girer; secilen kategorinin emojisi ziplar */
#calc-form.swap > .field:not([hidden]), #calc-form.swap > fieldset:not([hidden]) { animation: fieldIn 0.45s var(--spring) both; }
#calc-form.swap > :nth-child(2) { animation-delay: 0.05s; }
#calc-form.swap > :nth-child(3) { animation-delay: 0.1s; }
#calc-form.swap > :nth-child(4) { animation-delay: 0.15s; }
@keyframes fieldIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cat.active > span:first-child { display: inline-block; animation: catHop 0.55s var(--spring); }
@keyframes catHop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1) rotate(0); } }

/* Nufus sayaci: degisen rakamlar yukaridan kayar */
#pop-ticker .roll { display: inline-block; animation: roll 0.35s var(--spring); }
@keyframes roll { from { opacity: 0; transform: translateY(-45%); } to { opacity: 1; transform: none; } }

/* Halka dolunca bir kez parlar */
.ring.done svg { animation: ringGlow 1.2s ease-out; }
@keyframes ringGlow {
  0% { filter: drop-shadow(0 0 0 rgba(255, 79, 154, 0)); }
  35% { filter: drop-shadow(0 0 16px rgba(255, 79, 154, 0.85)); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 79, 154, 0)); }
}

/* Dugmelerde dokunma dalgasi */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* Mobil dil menusu: diller sirayla acilir */
@media (max-width: 640px) {
  .lang:focus-within a:not(.active) { animation: langIn 0.3s var(--spring) both; }
  .lang:focus-within a:nth-child(2) { animation-delay: 0.03s; }
  .lang:focus-within a:nth-child(3) { animation-delay: 0.06s; }
  .lang:focus-within a:nth-child(4) { animation-delay: 0.09s; }
  .lang:focus-within a:nth-child(5) { animation-delay: 0.12s; }
  .lang:focus-within a:nth-child(6) { animation-delay: 0.15s; }
}
@keyframes langIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* /links: dugmeler ve sosyal cipler sirayla */
.links-list .btn { animation: rise 0.55s var(--spring) both; animation-delay: calc(var(--i, 0) * 80ms + 0.25s); }
.links-social a { animation: chipPop 0.5s var(--spring) both; animation-delay: calc(var(--i, 0) * 50ms + 0.7s); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .blob, .star, .globe, .orbit, .hero h1, .crowd *, .btn-primary::after, .tile-emoji { animation: none !important; }
  .reveal, .world-tiles.reveal .tile, .fun.reveal li, .fun.reveal .fun-line { opacity: 1 !important; transform: none !important; }
}