/* =====================================================================
   NINO — Niner'ın maskotu. Pozlar /site/nino/nino-<poz>.webp
   Hareket istemeyen tarayıcıda (prefers-reduced-motion) sabit durur.
   ===================================================================== */
.nino { position: relative; margin: 0; width: 180px; flex: none; }
.nino-resim { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(27, 60, 160, .16)); transform-origin: 50% 90%; }
.nino-golge { position: absolute; left: 24%; right: 24%; bottom: 3%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 20, 55, .2), transparent); }
.nino-balon { position: absolute; z-index: 2; left: 78%; top: 6%; width: max-content; max-width: 250px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: var(--golge); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink-2); animation: ninoBalon .45s cubic-bezier(.2, .9, .3, 1.3) .25s both; }
.nino-balon b { color: var(--blue); }
.nino-k { width: 112px; }

.nino-suzul .nino-resim { animation: ninoSuzul 4.2s ease-in-out infinite; }
.nino-suzul .nino-golge { animation: ninoGolge 4.2s ease-in-out infinite; }
.nino-sallan .nino-resim { animation: ninoSallan 2.6s ease-in-out infinite; }
.nino-zipla .nino-resim { animation: ninoGir .6s cubic-bezier(.2, .9, .3, 1.4) both, ninoSuzul 3.6s ease-in-out .6s infinite; }
.nino-zipla .nino-golge { animation: ninoGolge 3.6s ease-in-out .6s infinite; }
.nino-uc .nino-resim { animation: ninoUc 6s ease-in-out infinite; }
.nino-uc .nino-golge { animation: ninoGolge 6s ease-in-out infinite; }

@keyframes ninoSuzul { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ninoGolge { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.78); opacity: .55; } }
@keyframes ninoSallan { 0%, 100% { transform: rotate(0) translateY(0); } 20% { transform: rotate(-4deg) translateY(-4px); } 40% { transform: rotate(3deg) translateY(-7px); } 60% { transform: rotate(-2deg) translateY(-3px); } }
@keyframes ninoGir { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes ninoUc { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 25% { transform: translate(6px, -14px) rotate(2deg); } 50% { transform: translate(0, -20px) rotate(-1deg); } 75% { transform: translate(-6px, -8px) rotate(3deg); } }
@keyframes ninoBalon { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }

/* Ana sayfa: Nino'lu sihirbaz bandı */
.nino-band { position: relative; margin-bottom: 44px; display: flex; align-items: center; gap: 28px; padding: 28px 36px; border-radius: var(--r-b); background: var(--grad-soft); overflow: hidden; }
.nino-band::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(47, 211, 224, .35), transparent); animation: ninoNabiz 5s ease-in-out infinite; }
.nino-band .nino { width: 150px; margin: -10px 0 -24px; }
.nino-band > div { position: relative; z-index: 1; flex: 1; }
.nino-band h2 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
.nino-band p { margin-top: 6px; color: var(--ink-2); }
.nino-band .dugmeler { position: relative; z-index: 1; margin: 0; flex: none; }
@keyframes ninoNabiz { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.25); opacity: 1; } }
@media (max-width: 860px) {
  .nino-band { flex-direction: column; text-align: center; padding: 24px 20px 28px; gap: 12px; }
  .nino-band .nino { width: 120px; margin: 0; }
  .nino-band .dugmeler { justify-content: center; }
}

/* Ana sayfa üst görseli: hub'ın köşesinde uçan Nino */
.merkez-nino { position: absolute; z-index: 4; left: -4%; bottom: 0; width: 140px; pointer-events: none; }
@media (max-width: 1080px) { .merkez-nino { width: 120px; left: 0; } }
@media (max-width: 560px) { .merkez-nino { width: 88px; left: 0; bottom: -6%; } }

/* Sayfa başlıklarının yanında (5651, demo, paketler) */
.nino-kose { position: absolute; right: max(16px, calc(50% - 600px)); bottom: -28px; width: 150px; }
.sayfa-bas { position: relative; }
@media (max-width: 1180px) { .nino-kose { width: 120px; } }
@media (max-width: 960px) { .nino-kose { display: none; } }

/* Başvuru alındı */
.basari .nino { width: 150px; margin: -10px auto 4px; }

@media (prefers-reduced-motion: reduce) {
  .nino-resim, .nino-golge, .nino-balon, .nino-band::after { animation: none !important; }
}
@media print { .nino { display: none; } }