/* İSG Takip — 3D işçi görseli hareketli logo */
.isg-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.isg-logo--hero {
    width: 260px;
    height: 260px;
    margin: 0 auto 20px;
    animation: logoHeroEnter 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.isg-logo--sidebar {
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 4px 14px rgba(220, 38, 38, 0.18));
}

.logo-scene {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    overflow: visible;
}

.logo-scene-inner {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(220, 38, 38, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.85);
    animation: logoSceneFloat 4s ease-in-out infinite;
}

.isg-logo--hero .logo-scene-inner {
    box-shadow: 0 16px 48px rgba(220, 38, 38, 0.25), 0 0 0 4px rgba(255, 255, 255, 0.9);
}

.logo-photo-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
}

.logo-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    transform-origin: center 30%;
    animation: logoPhotoBreathe 5s ease-in-out infinite, logoPhotoKenBurns 12s ease-in-out infinite;
}

.logo-photo-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
    animation: logoShimmer 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

.logo-ring-glow {
    position: absolute;
    inset: -6%;
    border-radius: 50%;
    border: 2px solid rgba(34, 197, 94, 0.35);
    animation: logoRingPulse 3s ease-in-out infinite, logoRingSpin 20s linear infinite;
    pointer-events: none;
}

/* Yeşil tikler */
.logo-fx-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.logo-gcheck {
    position: absolute;
    color: #22c55e;
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.85)) drop-shadow(0 0 12px rgba(34, 197, 94, 0.45));
    opacity: 0;
    animation: logoGcheckIn 0.5s ease forwards, logoGcheckFloat 3s ease-in-out infinite;
}

.logo-gcheck svg { width: 100%; height: 100%; display: block; }

.logo-gcheck-1 { top: 6%;  left: 14%; width: 18%; animation-delay: 1.4s, 1.4s; }
.logo-gcheck-2 { top: 4%;  right: 12%; width: 16%; animation-delay: 1.6s, 1.6s; }
.logo-gcheck-3 { top: 22%; left: 2%;  width: 14%; animation-delay: 1.8s, 1.8s; }
.logo-gcheck-4 { top: 20%; right: 2%; width: 15%; animation-delay: 2s, 2s; }
.logo-gcheck-5 { bottom: 28%; left: 6%;  width: 13%; animation-delay: 2.2s, 2.2s; }
.logo-gcheck-6 { bottom: 26%; right: 6%; width: 14%; animation-delay: 2.4s, 2.4s; }

/* Parıltılar */
.logo-sparkle {
    position: absolute;
    color: #fff;
    font-size: 10px;
    text-shadow: 0 0 8px rgba(255,255,255,0.9);
    opacity: 0;
    animation: logoSparkle 2.2s ease-in-out infinite;
}

.isg-logo--hero .logo-sparkle { font-size: 14px; }
.logo-sparkle-1 { top: 12%; left: 28%; animation-delay: 0.2s; }
.logo-sparkle-2 { top: 8%;  right: 28%; animation-delay: 0.7s; }
.logo-sparkle-3 { top: 30%; left: 18%; animation-delay: 1.1s; }
.logo-sparkle-4 { top: 28%; right: 18%; animation-delay: 1.5s; }
.logo-sparkle-5 { bottom: 35%; left: 22%; animation-delay: 0.5s; }
.logo-sparkle-6 { bottom: 32%; right: 22%; animation-delay: 1.9s; }

/* Uçan evraklar */
.logo-paper {
    position: absolute;
    opacity: 0;
    z-index: 4;
    animation: logoPaperIn 0.6s ease forwards, logoPaperFloat 3.5s ease-in-out infinite;
}

.logo-paper-clip {
    width: 8px;
    height: 4px;
    background: #B39F97;
    border-radius: 1px;
    margin: 0 auto 1px;
}

.logo-paper-body {
    width: 22px;
    background: #fff;
    border: 1px solid #D0C4B6;
    border-radius: 2px;
    padding: 3px 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.isg-logo--hero .logo-paper-body { width: 28px; padding: 4px 5px; }

.logo-paper-body span {
    display: block;
    height: 2px;
    background: #D0C4B6;
    margin-bottom: 2px;
    border-radius: 1px;
}
.logo-paper-body span:last-child { width: 70%; margin-bottom: 0; }

.logo-paper-1 { top: 18%; left: 8%;  animation-delay: 1.5s, 1.5s; }
.logo-paper-2 { top: 14%; right: 6%; animation-delay: 1.85s, 1.85s; }
.logo-paper-3 { bottom: 22%; left: 10%; animation-delay: 2.15s, 2.15s; }

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-logo-text {
    min-width: 0;
    flex: 1;
}

.login-branding .isg-logo--hero {
    margin-bottom: 18px;
}

@keyframes logoHeroEnter {
    from { opacity: 0; transform: scale(0.65) translateY(14px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes logoSceneFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes logoPhotoBreathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes logoPhotoKenBurns {
    0%, 100% { object-position: center 18%; }
    50% { object-position: center 22%; }
}

@keyframes logoShimmer {
    0%, 100% { transform: translateX(-100%); opacity: 0; }
    45% { opacity: 1; }
    55% { transform: translateX(100%); opacity: 0; }
}

@keyframes logoRingPulse {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.65; transform: scale(1.03); }
}

@keyframes logoRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes logoGcheckIn {
    from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes logoGcheckFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.85; }
    50% { transform: translateY(-5px) scale(1.08); opacity: 1; }
}

@keyframes logoSparkle {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

@keyframes logoPaperIn {
    from { opacity: 0; transform: translateY(12px) rotate(-8deg) scale(0.85); }
    to { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}

@keyframes logoPaperFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    33% { transform: translateY(-6px) rotate(2deg); }
    66% { transform: translateY(-3px) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
    .isg-logo--hero,
    .logo-scene-inner,
    .logo-photo,
    .logo-gcheck,
    .logo-sparkle,
    .logo-paper,
    .logo-ring-glow,
    .logo-photo-shimmer {
        animation: none !important;
    }
    .isg-logo--hero { opacity: 1 !important; transform: none !important; }
    .logo-gcheck, .logo-paper { opacity: 0.9 !important; }
}

@media (max-width: 480px) {
    .isg-logo--hero {
        width: 220px;
        height: 220px;
    }
}