/* Giriş ekranı: sol "sahne" (marka degradesi, sonar halkaları, çağrı merkezi çizimleri + otomatik dönen slaytlar) ve sağda giriş kartı.
   Sahne her iki temada da aynı marka zeminini kullanır (--lg-* belirteçleri yalnız burada); form tarafı tokens.css temasını izler.
   Hareket prefers-reduced-motion'da kapanır; sahne görünmezken ya da sekme arka plandayken durur (.durdu). */

:root {
  --lg-gec: cubic-bezier(0.16, 1, 0.3, 1);
  --lg-mint: #5be3b5;     /* bağlı / hazır / giden */
  --lg-amber: #ffc66b;    /* çalıyor / bekleyen */
  --lg-yazi: rgba(255, 255, 255, 0.92);
  --lg-soluk: rgba(255, 255, 255, 0.66);
}

.lg-kok { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); background: var(--surface); }

/* ───── sahne ───── */
.lg-sahne { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 30px 40px 32px;
  background: radial-gradient(900px 560px at 85% 8%, rgba(139, 124, 246, 0.55), transparent 62%), radial-gradient(700px 520px at 0% 100%, rgba(63, 200, 160, 0.22), transparent 60%),
    linear-gradient(155deg, #111545 0%, #2a31b8 48%, #5b49e3 100%); }
.lg-sonar { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.lg-sonar i { position: absolute; left: 0; top: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); transform: translate(-50%, -50%); }
.lg-sonar i:nth-child(1) { width: 300px; height: 300px; border-color: rgba(255, 255, 255, 0.22); }
.lg-sonar i:nth-child(2) { width: 460px; height: 460px; }
.lg-sonar i:nth-child(3) { width: 640px; height: 640px; border-color: rgba(255, 255, 255, 0.11); }
.lg-sonar i:nth-child(4) { width: 860px; height: 860px; border-color: rgba(255, 255, 255, 0.07); }
.lg-sonar i:nth-child(5) { width: 1120px; height: 1120px; border-color: rgba(255, 255, 255, 0.045); }
.lg-sonar::before { content: ""; position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); animation: lg-sonar 5.2s ease-out infinite; }
.lg-sonar::after { content: ""; position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35); animation: lg-sonar 5.2s ease-out 2.6s infinite; }
@keyframes lg-sonar { 0% { transform: scale(0.8); opacity: 0.6; } 100% { transform: scale(3.6); opacity: 0; } }

.lg-marka { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.lg-marka small { display: block; color: var(--lg-soluk); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 5px; }

.lg-orta { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.lg-ogeler { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; animation: lg-giris 0.75s var(--lg-gec) both; transition: opacity 0.42s var(--lg-gec), transform 0.42s var(--lg-gec); }
.lg-ogeler.gizli { opacity: 0; transform: translateY(10px) scale(0.985); }
@keyframes lg-giris { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.lg-gorsel { position: relative; width: min(540px, 48vw, 58vh); aspect-ratio: 1; flex: none; }
.lg-isik { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 233, 214, 0.55) 0%, rgba(255, 233, 214, 0.18) 45%, rgba(255, 233, 214, 0) 70%); animation: lg-nabiz 3.8s ease-in-out infinite; }
.lg-yorunge { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(255, 255, 255, 0.3); animation: lg-don 40s linear infinite; pointer-events: none; }
.lg-yorunge::before, .lg-yorunge::after { content: ""; position: absolute; border-radius: 50%; }
.lg-yorunge::before { top: -6px; left: 50%; width: 11px; height: 11px; background: var(--lg-amber); box-shadow: 0 0 14px 2px rgba(255, 198, 107, 0.8); }
.lg-yorunge::after { bottom: 12%; right: -5px; width: 8px; height: 8px; background: #fff; box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.7); }
@keyframes lg-don { to { transform: rotate(360deg); } }
@keyframes lg-nabiz { 0%, 100% { transform: scale(0.9); opacity: 0.65; } 50% { transform: scale(1.08); opacity: 1; } }
.lg-svg { position: relative; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 16px 24px rgba(10, 12, 50, 0.35)); }
.lg-metin { max-width: 470px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lg-ikon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; background: rgba(255, 255, 255, 0.14); color: var(--lg-mint); backdrop-filter: blur(4px); }
.lg-baslik { margin: 0; font-size: 27px; font-weight: 800; letter-spacing: -0.025em; line-height: 1.18; }
.lg-alt { margin: 0; color: rgba(255, 255, 255, 0.84); font-weight: 600; font-size: 14.5px; line-height: 1.55; }

.lg-noktalar { position: relative; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.lg-noktalar button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.35); cursor: pointer; transition: width 0.45s var(--lg-gec), background 0.3s, transform 0.12s; }
.lg-noktalar button:hover { background: rgba(255, 255, 255, 0.62); }
.lg-noktalar button:active { transform: scale(0.9); }
.lg-noktalar button[aria-selected="true"] { width: 30px; background: var(--lg-mint); }
.lg-noktalar button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ───── illüstrasyonlar (js/views/illustrasyon.js) ───── */
.lg-svg.il { filter: drop-shadow(0 14px 22px rgba(10, 12, 50, 0.3)); }
.lg-svg.il .il-yazi { font-family: var(--ff); font-weight: 700; font-size: 10px; fill: #7b8794; }
.lg-svg.il .il-kucuk { font-size: 7.8px; }
.lg-svg.il .il-orta-yazi { font-size: 9px; fill: #4d5b69; }
.lg-svg.il .il-bar { font-size: 13px; font-weight: 800; }
.lg-svg.il .il-buyuk { font-size: 16px; font-weight: 800; }
.lg-svg.il .il-beyaz-yazi { fill: #fff; }
.lg-svg.il .il-koyu-yazi { fill: #1c2e35; }
.lg-svg.il .il-kirmizi-yazi { fill: #ea4a56; }
.lg-svg.il .il-cip-yazi { font-size: 11.5px; font-weight: 800; }
.il-golge { filter: drop-shadow(0 6px 10px rgba(12, 16, 70, 0.22)); }

/* karakter kolları: dönme merkezi omuz (satır içi transform-origin, mutlak koordinat) */
.il-kol { transform-box: view-box; }
.il-sallan { animation: il-sallan 3.2s ease-in-out infinite; }
.il-selam { animation: il-selam 1.5s ease-in-out infinite; }
.il-isaret { animation: il-isaret 2.6s ease-in-out infinite; }
.il-isaret.il-ters { animation-direction: reverse; }
@keyframes il-sallan { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes il-selam { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(6deg); } }
@keyframes il-isaret { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3.5deg); } }

/* bitki yaprakları ve süzülen parçalar */
.il-yaprak { transform-box: view-box; animation: il-yaprak 4.2s ease-in-out infinite alternate; }
@keyframes il-yaprak { from { transform: rotate(calc(var(--r) * -1)); } to { transform: rotate(var(--r)); } }
.il-suz { animation: il-suz 3.8s ease-in-out infinite; }
@keyframes il-suz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.il-cik { opacity: 0; animation: il-cik 6.6s ease-in-out infinite; }
@keyframes il-cik { 0% { opacity: 0; transform: translateY(18px); } 12% { opacity: 1; transform: translateY(0); } 70% { opacity: 1; } 85% { opacity: 1; transform: translateY(-12px); } 100% { opacity: 0; transform: translateY(-20px); } }
.il-nabiz { transform-box: fill-box; transform-origin: center; animation: il-nabiz 1.4s ease-in-out infinite; }
@keyframes il-nabiz { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.55); opacity: 0.55; } }
.il-halka { transform-box: fill-box; transform-origin: center; opacity: 0; animation: lg-yayil 2.4s ease-out infinite; }
.il-halka-2 { animation-delay: 1.2s; }
.il-nokta { transform-box: fill-box; transform-origin: center; animation: il-nokta 5s ease-in-out infinite alternate; }
.il-n2 { animation-delay: 1.2s; } .il-n3 { animation-delay: 2.2s; }
@keyframes il-nokta { from { transform: translate(0, 0) scale(1); } to { transform: translate(8px, -14px) scale(1.4); } }
@keyframes lg-yayil { 0% { transform: scale(0.8); opacity: 0.75; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes lg-doluluk { 0% { stroke-dashoffset: var(--tam); } 34%, 90% { stroke-dashoffset: var(--hedef); } 100% { stroke-dashoffset: var(--tam); } }

/* 1 · canlı izleme */
.il-ibre { animation: lg-doluluk 6.4s var(--lg-gec) infinite both; }
.il-ibre-yavas { animation-delay: 0.6s; }
.il-cizgi-ciz { stroke-dasharray: 520; stroke-dashoffset: 520; animation: il-ciz 6.4s ease-in-out infinite; }
@keyframes il-ciz { 0% { stroke-dashoffset: 520; } 38%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0.2; } }
.il-alan { opacity: 0; animation: il-alan 6.4s ease-in-out infinite; }
@keyframes il-alan { 0%, 30% { opacity: 0; } 46%, 90% { opacity: 1; } 100% { opacity: 0; } }
.il-doldur { transform-box: fill-box; transform-origin: left center; animation: il-doldur 6.4s var(--lg-gec) infinite both; }
@keyframes il-doldur { 0% { transform: scaleX(0); } 36%, 100% { transform: scaleX(1); } }

/* 2 · ekip */
.il-parilti { transform-box: view-box; opacity: 0; animation: il-parilti 2.6s ease-out infinite; }
.il-p2 { animation-delay: 0.7s; } .il-p3 { animation-delay: 1.3s; }
@keyframes il-parilti { 0%, 20% { opacity: 0; transform: scale(0.4); } 38% { opacity: 1; transform: scale(1.1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }

/* 3 · kalite */
.il-ses { transform-box: fill-box; transform-origin: center; animation: il-ses 1.5s ease-in-out infinite; }
@keyframes il-ses { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }
.il-oynat { animation: il-oynat 6.6s linear infinite; }
@keyframes il-oynat { from { transform: translateX(0); } to { transform: translateX(262px); } }
.il-tik-daire { transform-box: fill-box; transform-origin: center; animation: il-pop 0.5s var(--lg-gec) both; }
@keyframes il-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.il-tik { stroke-dasharray: 12; stroke-dashoffset: 12; animation: il-tikciz 0.4s ease-out 0.15s both; }
@keyframes il-tikciz { from { stroke-dashoffset: 12; } to { stroke-dashoffset: 0; } }

/* 4 · raporlar */
.il-cubuk { transform-box: fill-box; transform-origin: center bottom; animation: il-cubuk 3.6s ease-in-out infinite alternate; }
@keyframes il-cubuk { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }
.il-yayil-halka { transform-box: fill-box; transform-origin: center; animation: il-halka 3.2s ease-in-out infinite; }
.il-h2 { animation-delay: 0.9s; }
@keyframes il-halka { 0%, 100% { transform: scale(0.94); opacity: 0.45; } 50% { transform: scale(1.06); opacity: 1; } }

/* 5 · hedefler */
.il-basamak { transform-box: view-box; animation: il-basamak 0.9s var(--lg-gec) both; }
@keyframes il-basamak { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.il-belir { opacity: 0; animation: il-belir 1s ease-out 1.5s both; }
@keyframes il-belir { to { opacity: 0.8; } }
.il-bayrak { animation: il-bayrak 1.1s ease-in-out infinite alternate; }
@keyframes il-bayrak { from { transform: scaleX(1) skewY(0); } to { transform: scaleX(0.86) skewY(5deg); } }
.il-konfeti { animation: il-konfeti 3.2s ease-out 2.2s infinite; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes il-konfeti { 0% { opacity: 0; transform: translateY(10px) scale(0.5); } 20% { opacity: 1; transform: translateY(-4px) scale(1.1); } 100% { opacity: 0; transform: translateY(-26px) scale(1); } }

/* ───── form tarafı ───── */
.lg-form-kap { position: relative; display: grid; place-items: center; padding: 32px 22px; background: var(--surface); }
.lg-tema { position: absolute; top: 18px; right: 18px; }
.lg-kart { width: min(404px, 100%); display: flex; flex-direction: column; gap: 20px; }
.lg-kart-marka { display: flex; align-items: center; gap: 11px; }
.lg-kart-marka small { display: block; color: var(--wm-alt); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 5px; }
.lg-kart h1 { font-size: 30px; letter-spacing: -0.03em; font-weight: 800; line-height: 1.1; }
.lg-kart .lead { color: var(--ink-500); margin-top: 6px; font-weight: 500; }
.lg-sekme { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--surface-3); }
.lg-sekme button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--ink-500);
  font-weight: 800; font-size: 13px; transition: background 0.25s var(--lg-gec), color 0.25s var(--lg-gec), box-shadow 0.25s var(--lg-gec), transform 0.12s; }
.lg-sekme button:hover { color: var(--ink-900); }
.lg-sekme button:active { transform: scale(0.98); }
.lg-sekme button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--sh-md); }
.lg-sekme button:focus-visible { outline: none; box-shadow: var(--focus); }
.lg-kart .btn-giris { margin-top: 4px; }
.lg-alt-not { text-align: center; color: var(--ink-500); font-size: 12px; font-weight: 600; }

/* ───── duyarlı ───── */
@media (max-width: 960px) {
  .lg-kok { grid-template-columns: 1fr; }
  .lg-sahne { padding: 18px 18px 16px; gap: 6px; }
  .lg-orta { padding: 4px 0; }
  .lg-gorsel { width: min(230px, 56vw); }
  .lg-baslik { font-size: 20px; }
  .lg-alt, .lg-ikon { display: none; }
  .lg-sonar { top: 50%; }
  .lg-sonar i:nth-child(n + 4) { display: none; }
  .lg-form-kap { padding: 24px 16px 36px; align-items: start; }
  .lg-tema { top: 10px; right: 12px; z-index: 5; }
}
@media (max-height: 660px) and (min-width: 961px) { .lg-gorsel { width: min(300px, 34vw); } .lg-baslik { font-size: 22px; } }

/* sahne ekranda değilken ya da sekme arka plandayken bütün hareket durur */
.lg-sahne.durdu *, .lg-sahne.durdu *::before, .lg-sahne.durdu *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .lg-sahne *, .lg-sahne *::before, .lg-sahne *::after { animation: none !important; }
  .lg-ogeler, .lg-ogeler.gizli { transition: none; transform: none; }
  .il-cik, .il-parilti, .il-halka, .il-konfeti { opacity: 0 !important; }
  .il-belir, .il-alan, .il-yayil-halka { opacity: 1 !important; }
  .il-ibre { stroke-dashoffset: var(--hedef) !important; }
  .il-cizgi-ciz, .il-tik { stroke-dashoffset: 0 !important; }
  .il-doldur, .il-basamak { transform: none !important; }
  .lg-sekme button, .lg-noktalar button { transition: none; }
}