/* intro aktifken sayfa içeriğini gizle */
body.intro-active > *:not(#introWrap) {
    visibility: hidden;
}

#introWrap {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    cursor: pointer;
    background: #F5EDE3; /* bg img yüklenmeden önce boş kalmasın */
}

.intro-bg { position: absolute; inset: 0; z-index: 0; }
.intro-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }

.intro-logo {
    position: absolute;
    top: clamp(20px, 3.5vw, 40px);
    left: clamp(20px, 4vw, 48px);
    z-index: 10;
    animation: introFadeDown 0.8s ease 0.3s both;
}
.intro-logo img { height: clamp(50px, 6vw, 76px); width: auto; display: block; }

.intro-hint {
    position: absolute;
    top: clamp(20px, 3.5vw, 40px);
    right: clamp(20px, 4vw, 48px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    animation: introFadeDown 0.8s ease 1s both;
    user-select: none;
    pointer-events: none;
}
.intro-hint-mouse {
    width: 26px; height: 42px;
    border: 2px solid #BE601B;
    border-radius: 13px;
    display: flex; justify-content: center;
}
.intro-hint-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #BE601B;
    margin-top: 7px;
    animation: mouseScroll 1.6s ease-in-out infinite;
}
@keyframes mouseScroll {
    0%, 100% { transform: translateY(0); opacity: 1; }
    60%       { transform: translateY(13px); opacity: 0.2; }
}
.intro-hint-label {
    font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.12em; color: #BE601B;
    white-space: nowrap;
}

.intro-stage {
    position: absolute;
    inset: 0;
    bottom: 10%;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
}
.intro-stage.active { opacity: 1; }

.intro-stage.enter-scale       { animation: enterScale      0.55s cubic-bezier(0.34,1.56,0.64,1) forwards; }
.intro-stage.enter-slide-up    { animation: enterSlideUp    0.50s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.intro-stage.enter-flip        { animation: enterFlip       0.60s cubic-bezier(0.34,1.30,0.64,1) forwards; }
.intro-stage.enter-slide-right { animation: enterSlideRight 0.50s cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.intro-stage.leaving           { animation: stageOut        0.38s ease forwards; }

@keyframes enterScale      { from{opacity:0;transform:scale(0.82) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes enterSlideUp    { from{opacity:0;transform:translateY(55px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes enterFlip       { from{opacity:0;transform:perspective(600px) rotateY(-18deg) scale(0.9)} to{opacity:1;transform:perspective(600px) rotateY(0) scale(1)} }
@keyframes enterSlideRight { from{opacity:0;transform:translateX(-50px) scale(0.96)} to{opacity:1;transform:translateX(0) scale(1)} }
@keyframes stageOut        { from{opacity:1;transform:scale(1) translateY(0)} to{opacity:0;transform:scale(1.08) translateY(-12px)} }

.intro-stage-img {
    width: clamp(280px, 46vw, 620px);
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 28px 56px rgba(116,89,68,0.25));
}

.intro-text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 6;
    padding: 0 20px clamp(24px, 4vh, 48px);
    pointer-events: none;
    animation: introFadeUp 0.9s ease 0.6s both;
}
.intro-title-sub {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 1.8vw, 22px);
    font-weight: 300;
    letter-spacing: 0.35em;
    color: #745944;
    margin-bottom: 12px;
}
.intro-desc {
    font-size: clamp(11px, 1.1vw, 14px);
    line-height: 1.8;
    color: #745944;
    opacity: 0.60;
    max-width: 560px;
    margin: 0 auto;
}

.intro-dots {
    position: absolute;
    top: 50%; right: clamp(14px,2vw,28px);
    transform: translateY(-50%);
    z-index: 10;
    display: flex; flex-direction: column; gap: 10px;
    animation: introFadeIn 0.8s ease 1.2s both;
}
.intro-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(190,96,27,0.22);
    transition: background 0.3s, transform 0.3s;
}
.intro-dot.active { background: #BE601B; transform: scale(1.5); }

.intro-ripple {
    position: absolute; border-radius: 50%;
    background: rgba(190,96,27,0.16);
    transform: scale(0);
    animation: ripple 0.6s ease-out forwards;
    pointer-events: none; z-index: 20;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

#introWrap.exiting { animation: introExit 0.65s cubic-bezier(0.4,0,1,1) forwards; }
@keyframes introExit { 0%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.05)} }

@keyframes introFadeDown { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }
@keyframes introFadeUp   { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes introFadeIn   { from{opacity:0} to{opacity:1} }

@media (max-width: 768px) { .intro-stage-img { width: clamp(240px,78vw,460px); } }
@media (max-width: 480px) { .intro-stage-img { width: 80vw; } .intro-hint-label { font-size: 8.5px; } .intro-desc { font-size: 11px; } }