/* ============================
   HULTEM LOGO SPINNER LOADER
   ============================ */

.hultem-loader {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dönen dış disk halkası */
.hultem-spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 5px solid transparent;
    border-top-color: #2d3184;
    border-right-color: #2d3184;
    border-bottom-color: rgba(45, 49, 132, 0.2);
    border-left-color: rgba(45, 49, 132, 0.2);
    animation: hultem-spin 1.0s cubic-bezier(0.6, 0.2, 0.4, 0.8) infinite;
    box-shadow: 0 0 18px rgba(45, 49, 132, 0.4);
}

/* İç ters dönen halka */
.hultem-spinner-ring::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: rgba(90, 95, 180, 0.6);
    border-left-color: rgba(90, 95, 180, 0.6);
    animation: hultem-spin-reverse 1.6s linear infinite;
}

/* Merkezdeki logo */
.hultem-loader-logo {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 4px;
    box-shadow: 0 2px 16px rgba(45, 49, 132, 0.2);
    animation: hultem-pulse 2s ease-in-out infinite;
}

/* ============================
   DÜŞEN DAMLALAR
   ============================ */

.hultem-drops {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10001;
    overflow: hidden;
}

/* Gerçek su damlası 💧: üst yuvarlak, alt sivri */
.hultem-drop {
    position: absolute;
    top: -40px;
    width: 10px;
    height: 22px;
    /* üst köşeler çok (yuvarlak), alt köşeler az (sivri) */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: linear-gradient(
        135deg,
        rgba(190, 195, 245, 0.95) 0%,
        rgba(45, 49, 132, 0.88) 55%,
        rgba(25, 29, 100, 0.95) 100%
    );
    box-shadow:
        inset -2px -3px 4px rgba(255,255,255,0.5),
        inset  1px  1px 2px rgba(255,255,255,0.7);
    will-change: transform, opacity;
    animation: hultem-fall linear infinite;
}

/* Her damlaya farklı konum, boyut, gecikme, hız */
.hultem-drop:nth-child(1)  { left:  3%;  width:  9px; height: 20px; animation-duration: 2.1s; animation-delay: 0.0s; opacity: 0.85; }
.hultem-drop:nth-child(2)  { left:  9%;  width:  7px; height: 15px; animation-duration: 2.7s; animation-delay: 0.5s; opacity: 0.65; }
.hultem-drop:nth-child(3)  { left: 16%;  width: 11px; height: 24px; animation-duration: 1.9s; animation-delay: 0.9s; opacity: 0.90; }
.hultem-drop:nth-child(4)  { left: 23%;  width:  7px; height: 16px; animation-duration: 3.0s; animation-delay: 0.3s; opacity: 0.70; }
.hultem-drop:nth-child(5)  { left: 30%;  width:  9px; height: 21px; animation-duration: 2.4s; animation-delay: 1.2s; opacity: 0.80; }
.hultem-drop:nth-child(6)  { left: 38%;  width:  6px; height: 14px; animation-duration: 2.8s; animation-delay: 0.7s; opacity: 0.60; }
.hultem-drop:nth-child(7)  { left: 45%;  width: 12px; height: 26px; animation-duration: 1.8s; animation-delay: 0.2s; opacity: 0.95; }
.hultem-drop:nth-child(8)  { left: 52%;  width:  8px; height: 17px; animation-duration: 2.5s; animation-delay: 1.0s; opacity: 0.75; }
.hultem-drop:nth-child(9)  { left: 59%;  width: 10px; height: 22px; animation-duration: 2.2s; animation-delay: 0.6s; opacity: 0.80; }
.hultem-drop:nth-child(10) { left: 66%;  width:  6px; height: 13px; animation-duration: 3.1s; animation-delay: 1.4s; opacity: 0.60; }
.hultem-drop:nth-child(11) { left: 73%;  width: 10px; height: 23px; animation-duration: 2.0s; animation-delay: 0.8s; opacity: 0.85; }
.hultem-drop:nth-child(12) { left: 80%;  width:  7px; height: 16px; animation-duration: 2.6s; animation-delay: 0.1s; opacity: 0.65; }
.hultem-drop:nth-child(13) { left: 86%;  width:  9px; height: 19px; animation-duration: 2.3s; animation-delay: 1.1s; opacity: 0.75; }
.hultem-drop:nth-child(14) { left: 92%;  width:  6px; height: 14px; animation-duration: 3.2s; animation-delay: 0.4s; opacity: 0.55; }
.hultem-drop:nth-child(15) { left: 97%;  width:  9px; height: 20px; animation-duration: 1.9s; animation-delay: 1.6s; opacity: 0.80; }

@keyframes hultem-fall {
    0% {
        transform: translate3d(0, -40px, 0) scaleY(1);
        opacity: 0;
    }
    8% {
        opacity: 1;
    }
    90% {
        opacity: 0.9;
        transform: translate3d(0, 100vh, 0) scaleY(1);
    }
    100% {
        transform: translate3d(0, 110vh, 0) scaleY(0.6);
        opacity: 0;
    }
}

/* ============================
   ANİMASYON KEYFRAME'LER
   ============================ */

@keyframes hultem-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes hultem-spin-reverse {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

@keyframes hultem-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.06); }
}

/* Ortalama */
.loading-pic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 9999;
}