/* İnat açılış ve bekleme animasyonu katmanları — betik: /js/inat-intro.js */

/* ------------------------------------------------------------ açılış */
.ii-splash-layer { display: none; }
html.ii-splash .ii-splash-layer {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: #dc483e;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  cursor: pointer;
  transition: opacity .4s ease, visibility 0s linear .4s;
  /* Betik hiç yüklenmezse katman kendiliğinden kalkar */
  animation: ii-auto-hide .4s ease 7s forwards;
}
html.ii-splash { background: #dc483e; }
.ii-splash-stage { width: min(360px, 62vw, 52vh); aspect-ratio: 1; }
.ii-splash-layer.ii-out { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes ii-auto-hide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ------------------------------------------------------------ bekleme */
[data-inat-loader] {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; color: var(--text-light, #8D99AE);
  font: 500 .9rem/1.3 var(--font-sans, sans-serif);
}
[data-inat-loader] .ii-mark,
.ii-wait-mark { width: 84px; height: 84px; }
/* Betik çalışmadan önce de boş kalmasın: kırmızı rozet */
[data-inat-loader]:not([data-ii-on]) .ii-mark { border-radius: 50%; background: #dc483e; }

.ii-wait {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--text-main, #2B2D42);
  font: 600 .85rem/1 var(--font-sans, sans-serif); letter-spacing: .04em;
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.ii-wait::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-color, #FAFAFA); opacity: .72;
}
.ii-wait.ii-in { opacity: 1; }
.ii-wait-mark { filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .18)); }
[data-theme="dark"] .ii-wait-mark { filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }

@media (max-width: 768px) {
  [data-inat-loader] .ii-mark, .ii-wait-mark { width: 72px; height: 72px; }
}