/* ============================================================
   UTS 3B LOGO YÜKLEME SİSTEMİ  —  uts-loader.css
   ------------------------------------------------------------
   Bekleme gerektiren her yerde (sayfa geçişi, form gönderimi,
   AJAX isteği, buton işlemi, tablo yüklemesi) 3 boyutlu logo
   animasyonunu gösterir.

   Kullanılan görseller:
     assets/img/uts-loader-3d.png        (30 kare · 184x230)  360° dönüş
     assets/img/uts-loader-3d-mini.png   (30 kare · 58x73)    360° dönüş
     assets/img/uts-logo-3d.png          (tek kare, statik)
   ============================================================ */

:root {
    --uts3d-blue: #3fa3d8;
    --uts3d-blue-dp: #1f6f9e;
    --uts3d-gold: #e3bd6d;
    --uts3d-ink: #0b1624;
    --uts3d-ink-2: #122238;
    --uts3d-txt: #eaf2fb;
    --uts3d-txt-dim: #93a9c2;
    --uts3d-frames: 30;
}

/* ── 1. TEMEL: dönen 3B logo ──────────────────────────────── */
@keyframes uts3dFrames {
    from { background-position-x: 0%; }
    to   { background-position-x: 100%; }
}
@keyframes uts3dFloat {
    0%, 100% { transform: translateY(-3px); }
    50%      { transform: translateY(3px); }
}

.uts3d {
    display: inline-block;
    width: 92px;
    height: 115px;
    background-image: url("../img/uts-loader-3d.png");
    background-repeat: no-repeat;
    background-size: 3000% 100%;      /* 30 kare yan yana */
    background-position: 0% 0;
    /* KENDİ EKSENİNDE TAM TUR (360°) — ileri geri sallanma yok */
    animation: uts3dFrames 1.5s steps(30, jump-none) infinite;
    will-change: background-position;
    backface-visibility: hidden;
}
.uts3d--mini { background-image: url("../img/uts-loader-3d-mini.png"); }
.uts3d--sm   { width: 46px;  height: 58px; }
.uts3d--md   { width: 74px;  height: 93px; }
.uts3d--lg   { width: 104px; height: 130px; }
.uts3d--xl   { width: 140px; height: 175px; }

/* Hareketi kapatan kullanıcılar için (erişilebilirlik) */
@media (prefers-reduced-motion: reduce) {
    .uts3d { animation-duration: 3.6s; }
    .uts-ovl__glow, .uts-ovl__stage { animation: none !important; }
}

/* ── 2. MEVCUT SPINNER'LARIN DEVRALINMASI ─────────────────── */
/* Yazılımdaki <i class="fa-solid fa-spinner fa-spin"> ikonları 3B logoya
   dönüşür. DEVRALMA KARARINI JS VERİR: yalnızca yeterince büyük ve arka
   planı uyumlu (nötr) olan ikonlara .uts3d-on sınıfı eklenir. Renkli/
   degradeli zeminlerde ve çok küçük ikonlarda özgün ikon korunur —
   böylece hiçbir yerde arka planla uyumsuz görüntü oluşmaz.
   JS çalışmazsa sistem sessizce eski hâline döner (güvenli varsayılan). */
.uts3d-on {
    display: inline-block;
    width: 1.18em;
    height: 1.48em;
    vertical-align: -0.36em;
    background-image: url("../img/uts-loader-3d-mini.png");
    background-repeat: no-repeat;
    background-size: 3000% 100%;
    background-position: 0% 0;
    animation: uts3dFrames 1.5s steps(30, jump-none) infinite !important;
    color: transparent !important;
    text-indent: -9999px;
    overflow: hidden;
    filter: drop-shadow(0 1px 2px rgba(12,32,52,.18));
}
.uts3d-on::before { content: "" !important; display: none !important; }

/* JS tarafından eklenir: büyük (>=24px) spinner'lar yüksek çözünürlüklü sayfayı kullanır */
.uts3d-hi { background-image: url("../img/uts-loader-3d.png") !important; }
/* JS tarafından eklenir: display:block olan spinner'lar ortalanır */
.uts3d-block { margin-left: auto !important; margin-right: auto !important; }

/* ── 3. TAM EKRAN İŞLEM KATMANI ───────────────────────────── */
@keyframes utsOvlIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes utsCardIn { from { opacity: 0; transform: translateY(14px) scale(.96); }
                       to   { opacity: 1; transform: none; } }
@keyframes utsGlow   { 0%,100% { opacity: .45; transform: scale(.92); }
                       50%     { opacity: .85; transform: scale(1.06); } }
@keyframes utsShadow { 0%,100% { opacity: .30; transform: scaleX(.80); }
                       50%     { opacity: .55; transform: scaleX(1); } }
@keyframes utsBar    { 0%   { transform: translateX(-100%); }
                       100% { transform: translateX(320%); } }
@keyframes utsDots   { 0% { content: ""; } 25% { content: "."; }
                       50% { content: ".."; } 75%,100% { content: "..."; } }

.uts-ovl {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: radial-gradient(120% 90% at 50% 35%, rgba(18,34,56,.82) 0%, rgba(7,12,20,.90) 70%);
    -webkit-backdrop-filter: blur(7px) saturate(120%);
    backdrop-filter: blur(7px) saturate(120%);
    animation: utsOvlIn .22s ease both;
    font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.uts-ovl[hidden] { display: none !important; }

.uts-ovl__card {
    position: relative;
    min-width: 268px;
    max-width: min(420px, 92vw);
    padding: 30px 34px 26px;
    text-align: center;
    border-radius: 22px;
    background: linear-gradient(165deg, rgba(23,42,66,.96) 0%, rgba(11,22,36,.97) 100%);
    border: 1px solid rgba(120,180,225,.16);
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.75),
                0 0 0 1px rgba(255,255,255,.03) inset,
                0 1px 0 rgba(255,255,255,.07) inset;
    animation: utsCardIn .3s cubic-bezier(.2,.8,.3,1) both;
}
/* üstte ince marka şeridi */
.uts-ovl__card::before {
    content: "";
    position: absolute; left: 22px; right: 22px; top: 0; height: 2px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, var(--uts3d-blue), var(--uts3d-gold), transparent);
    opacity: .75;
}

.uts-ovl__stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 148px;
    margin-bottom: 6px;
}
.uts-ovl__glow {
    position: absolute;
    left: 50%; top: 46%;
    width: 190px; height: 190px;
    margin: -95px 0 0 -95px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63,163,216,.30) 0%, rgba(227,189,109,.12) 45%, transparent 68%);
    animation: utsGlow 2.6s ease-in-out infinite;
    pointer-events: none;
}
.uts-ovl__logo {
    position: relative;
    z-index: 2;
}
.uts-ovl__shadow {
    position: absolute;
    left: 50%; bottom: 2px;
    width: 108px; height: 14px;
    margin-left: -54px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,0,0,.6) 0%, transparent 70%);
    animation: utsShadow 2.3s ease-in-out infinite;
}

.uts-ovl__title {
    margin: 4px 0 0;
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: .2px;
    color: var(--uts3d-txt);
}
.uts-ovl__title::after {
    content: "...";
    display: inline-block;
    width: 1em; text-align: left;
    animation: utsDots 1.4s steps(1,end) infinite;
}
.uts-ovl__title.is-plain::after { content: ""; animation: none; }
.uts-ovl__sub {
    margin-top: 6px;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--uts3d-txt-dim);
}

.uts-ovl__bar {
    position: relative;
    height: 4px;
    margin: 18px auto 0;
    width: 82%;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255,255,255,.09);
}
.uts-ovl__bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    width: 34%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--uts3d-blue-dp), var(--uts3d-blue) 45%, var(--uts3d-gold));
    box-shadow: 0 0 12px rgba(63,163,216,.55);
    animation: utsBar 1.35s cubic-bezier(.65,.05,.36,1) infinite;
}
/* yüzdeli (belirli) mod */
.uts-ovl__bar.is-determinate > i {
    width: 0%;
    animation: none;
    transition: width .35s ease;
}
.uts-ovl__pct {
    margin-top: 8px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .4px;
    color: var(--uts3d-blue);
}
.uts-ovl__hint {
    margin-top: 12px;
    font-size: .70rem;
    color: #6f88a4;
    opacity: 0;
    transition: opacity .4s ease;
}
.uts-ovl__hint.is-on { opacity: 1; }

/* ── 4. ÜST İNCE İLERLEME ÇUBUĞU (AJAX) ───────────────────── */
.uts-top {
    position: fixed;
    top: 0; left: 0;
    z-index: 2147483001;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--uts3d-blue-dp), var(--uts3d-blue) 60%, var(--uts3d-gold));
    box-shadow: 0 0 10px rgba(63,163,216,.75), 0 0 4px rgba(63,163,216,.9);
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
    pointer-events: none;
    border-radius: 0 3px 3px 0;
}
.uts-top.is-on { opacity: 1; }
.uts-top::after {                 /* ucunda küçük dönen logo */
    content: "";
    position: absolute;
    right: -13px; top: -12px;
    width: 22px; height: 28px;
    background-image: url("../img/uts-loader-3d-mini.png");
    background-repeat: no-repeat;
    background-size: 3000% 100%;
    animation: uts3dFrames 1.4s steps(30, jump-none) infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* ── 5. BUTON İŞLEM DURUMU ────────────────────────────────── */
button.uts-busy, .btn.uts-busy, a.uts-busy, input.uts-busy {
    position: relative;
    pointer-events: none;
    opacity: .92;
}
button.uts-busy > .uts-busy__in,
.btn.uts-busy > .uts-busy__in,
a.uts-busy > .uts-busy__in {
    display: inline-flex;
    align-items: center;
    gap: .5em;
}
.uts-busy__in i {
    display: inline-block;
    width: 1.2em; height: 1.5em;
    background-image: url("../img/uts-loader-3d-mini.png");
    background-repeat: no-repeat;
    background-size: 3000% 100%;
    animation: uts3dFrames 1.5s steps(30, jump-none) infinite;
}

/* ── 6. SATIR İÇİ / KUTU İÇİ YÜKLEME BLOĞU ────────────────── */
.uts-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 16px;
    text-align: center;
    color: #64748b;
    font-size: .82rem;
}
.uts-inline .uts3d { filter: drop-shadow(0 8px 14px rgba(15,42,66,.25)); }
.uts-inline__txt { font-weight: 500; letter-spacing: .2px; }
.uts-inline__txt::after {
    content: "..."; display: inline-block; width: 1em; text-align: left;
    animation: utsDots 1.4s steps(1,end) infinite;
}
/* koyu zeminli kutular için */
.uts-inline--dark { color: #a9c1d8; }

/* Tablo hücresi içi yükleme satırı */
td > .uts-inline, th > .uts-inline { padding: 22px 10px; }

/* ── 7. İSKELET (SKELETON) PARILTISI ──────────────────────── */
@keyframes utsShimmer { 100% { transform: translateX(100%); } }
.uts-skel {
    position: relative;
    overflow: hidden;
    background: #eef2f7;
    border-radius: 6px;
    min-height: 12px;
}
.uts-skel::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(63,163,216,.18), transparent);
    animation: utsShimmer 1.4s infinite;
}
.uts-skel + .uts-skel { margin-top: 8px; }
.uts-skel--sm { height: 10px; }
.uts-skel--line { height: 14px; }
.uts-skel--w60 { width: 60%; }
.uts-skel--w40 { width: 40%; }

/* ── 8. KART / BÖLÜM ÜZERİ YEREL ÖRTÜ ─────────────────────── */
.uts-hold { position: relative; }
.uts-hold__ovl {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: inherit;
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    color: #33526f;
    font-size: .78rem;
    font-weight: 500;
    animation: utsOvlIn .2s ease both;
}
.uts-hold__ovl--dark {
    background: rgba(9,17,29,.72);
    color: #b9cfe4;
}

/* ── 9. MOBİL UYUM ────────────────────────────────────────── */
@media (max-width: 480px) {
    .uts-ovl__card { padding: 24px 22px 22px; min-width: 0; width: 100%; }
    .uts-ovl__stage { height: 122px; }
    .uts-ovl__logo.uts3d--lg { width: 86px; height: 108px; }
    .uts-ovl__title { font-size: .94rem; }
}