/**
 * KurumsalScript - Animasyon Sistemi
 * GSAP benzeri CSS animasyonları
 */

/* ---- Temel Reveal ---- */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.gorünür {
    opacity: 1;
    transform: none;
}

.reveal-sol  { transform: translateX(-50px); }
.reveal-sag  { transform: translateX(50px); }
.reveal-zoom { transform: scale(0.9); }
.reveal-sol.gorünür, .reveal-sag.gorünür { transform: none; }
.reveal-zoom.gorünür { transform: scale(1); }

/* Gecikme sistemi */
.gecikme-1  { transition-delay: 0.05s; }
.gecikme-2  { transition-delay: 0.10s; }
.gecikme-3  { transition-delay: 0.15s; }
.gecikme-4  { transition-delay: 0.20s; }
.gecikme-5  { transition-delay: 0.25s; }
.gecikme-6  { transition-delay: 0.30s; }
.gecikme-7  { transition-delay: 0.35s; }
.gecikme-8  { transition-delay: 0.40s; }

/* ---- Keyframes ---- */
@keyframes belir {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes asagaKay {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: none; }
}

@keyframes yukariKay {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

@keyframes solKay {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: none; }
}

@keyframes sagKay {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}

@keyframes buyuGel {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes kucul {
    from { transform: scale(1.05); }
    to   { transform: scale(1); }
}

@keyframes dön {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

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

@keyframes yalpala {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

@keyframes parla {
    0%   { box-shadow: 0 0 0 0 rgba(var(--renk-birincil-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--renk-birincil-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--renk-birincil-rgb), 0); }
}

@keyframes gradyanKay {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes yuzKay {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

@keyframes toastGir {
    from { opacity: 0; transform: translateX(110%); }
    to   { opacity: 1; transform: none; }
}

@keyframes toastCik {
    from { opacity: 1; transform: none; }
    to   { opacity: 0; transform: translateX(110%); }
}

/* ---- Spin (yükleme) ---- */
.ks-spin { animation: dön 0.8s linear infinite; display: inline-block; }

/* ---- Animasyon sınıfları ---- */
.anim-belir       { animation: belir       0.4s ease both; }
.anim-asagi-kay   { animation: asagaKay    0.5s ease both; }
.anim-yukari-kay  { animation: yukariKay   0.5s ease both; }
.anim-sol-kay     { animation: solKay      0.5s ease both; }
.anim-sag-kay     { animation: sagKay      0.5s ease both; }
.anim-buyugel     { animation: buyuGel     0.4s ease both; }
.anim-parla       { animation: parla       2s infinite; }
.anim-yuz-kay     { animation: yuzKay      4s ease-in-out infinite; }
.anim-nabiz       { animation: nabiz       2s ease-in-out infinite; }
.anim-gradyan     {
    background-size: 200% 200%;
    animation: gradyanKay 4s ease infinite;
}

/* ---- Loading Ekranı ---- */
.ks-yuklenme-ekrani {
    position: fixed;
    inset: 0;
    background: var(--arkaplan-birincil);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.ks-yuklenme-ekrani.gizle {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ks-yuklenme-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.ks-yuklenme-bar {
    width: 200px;
    height: 3px;
    background: var(--kenar-rengi);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.ks-yuklenme-bar::after {
    content: '';
    position: absolute;
    left: -50%;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, var(--renk-birincil), var(--renk-aksent));
    border-radius: inherit;
    animation: yuklenmeKay 1.2s ease-in-out infinite;
}

@keyframes yuklenmeKay {
    0%   { left: -50%; }
    100% { left: 150%; }
}

/* ---- Cursor Efekti ---- */
.ks-cursor {
    position: fixed;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--renk-birincil);
    pointer-events: none;
    z-index: 9998;
    transition: transform 0.15s ease;
    mix-blend-mode: difference;
}

.ks-cursor-halka {
    position: fixed;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid var(--renk-birincil);
    pointer-events: none;
    z-index: 9997;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.2s ease, height 0.2s ease;
    mix-blend-mode: difference;
}

.ks-cursor-buyuk .ks-cursor-halka {
    width: 64px;
    height: 64px;
    opacity: 0.6;
}

/* ---- Scroll İlerleme ---- */
.ks-scroll-ilerleme {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--renk-birincil), var(--renk-aksent));
    z-index: 9999;
    transition: width 0.1s linear;
}

/* ---- Hover: Kart yukarı ---- */
.hover-yukari {
    transition: transform var(--gecis-normal), box-shadow var(--gecis-normal);
}

.hover-yukari:hover {
    transform: translateY(-6px);
    box-shadow: var(--golge-lg);
}

/* ---- Hover: Parlama çerçeve ---- */
.hover-parlama {
    position: relative;
    overflow: hidden;
}

.hover-parlama::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.hover-parlama:hover::before {
    left: 100%;
}