/* Yükleniyor göstergeleri: açılış ekranı (.boot) ve bölüm içi (.ld). Metin yerine tek tip, hafif animasyonlu gösterge. */
.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(60vmax 40vmax at 50% 38%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%), var(--bg); color: var(--text); text-align: center; }
.boot-mark { position: relative; width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: 0 14px 40px color-mix(in srgb, var(--accent) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); animation: boot-pop 1.6s ease-in-out infinite; }
.boot-mark::before { content: ''; position: absolute; inset: -9px; border-radius: 28px; border: 2px solid transparent; border-top-color: var(--accent); border-right-color: color-mix(in srgb, var(--accent) 35%, transparent); animation: ld-spin 1.1s linear infinite; }
.boot-mark span { font-size: 2rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.boot b { font-size: 1.15rem; letter-spacing: .32em; font-weight: 900; padding-left: .32em; }
.boot-bar { width: 148px; height: 4px; border-radius: 99px; background: var(--line-strong); overflow: hidden; }
.boot-bar i { display: block; width: 45%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: boot-slide 1.2s ease-in-out infinite; }
.boot small { color: var(--dim); font-weight: 700; font-size: .78rem; letter-spacing: .06em; }
@keyframes boot-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes boot-slide { from { transform: translateX(-120%); } to { transform: translateX(320%); } }

/* Bölüm içi gösterge */
.ld { display: grid; justify-items: center; align-content: center; gap: 12px; min-height: 120px; padding: 24px 16px; color: var(--dim); font-weight: 700; font-size: .86rem; text-align: center; }
.ld-ring { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 25%, var(--accent)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: ld-spin .85s linear infinite; }
.ld-txt { display: inline-flex; align-items: baseline; gap: 1px; }
.ld-txt i { font-style: normal; display: inline-block; animation: ld-dot 1.2s ease-in-out infinite; } .ld-txt i:nth-child(2) { animation-delay: .15s; } .ld-txt i:nth-child(3) { animation-delay: .3s; } .ld-txt i:nth-child(4) { animation-delay: .45s; }
.ld.sm { grid-auto-flow: column; justify-content: center; min-height: 0; padding: 12px; gap: 10px; } .ld.sm .ld-ring { width: 20px; height: 20px; }
.ld.fill { min-height: 60vh; }
@keyframes ld-spin { to { transform: rotate(360deg); } }
@keyframes ld-dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .boot-mark, .boot-mark::before, .boot-bar i, .ld-ring, .ld-txt i { animation-duration: 3s; } }