/* ══════════════════════════════════════════════════
   BK Klinik — Premium Animations
   ══════════════════════════════════════════════════ */

/* ─── PAGE LOADER ────────────────────────────────── */
#loader {
    position: fixed; inset: 0;
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    pointer-events: all;
}
.loader__panel {
    position: absolute; inset: 0;
    background: #1E1008;
    transform-origin: bottom;
    /* Daha yavaş bir açılış için süre uzatıldı (.65s → 1.1s) */
    animation: loaderReveal 1.1s cubic-bezier(.76,0,.24,1) 0s forwards;
}
.loader__logo {
    position: relative; z-index: 2;
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.8rem; font-weight: 600;
    color: #EAD0AE; letter-spacing: .1em;
    opacity: 0;
    /* Logo giriş/çıkış animasyonları da uzatıldı (.4s/.3s → .7s/.5s, gecikme .5s → .7s) */
    animation: loaderLogoIn .7s ease 0s forwards, loaderLogoOut .5s ease .7s forwards;
}
.loader__logo span { color: #C49A6C; }
@keyframes loaderReveal { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes loaderLogoIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes loaderLogoOut { from { opacity:1; } to { opacity:0; } }
body.loaded #loader { pointer-events: none; }

/* ─── SCROLL PROGRESS ────────────────────────────── */
#scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 2.5px; width: 0%;
    background: linear-gradient(90deg, var(--coffee-300), var(--coffee-400), var(--coffee-300));
    background-size: 200% 100%;
    z-index: 2000;
    transition: width .08s linear;
    animation: shimmerBar 2.5s linear infinite;
}
@keyframes shimmerBar { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }

/* ─── CUSTOM CURSOR ──────────────────────────────── */
@media (pointer: fine) { *, *::before, *::after { cursor: none !important; } }
#cursor-dot {
    position: fixed; width: 6px; height: 6px;
    background: var(--coffee-400); border-radius: 50%;
    pointer-events: none; z-index: 9998;
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s, background .2s;
}
#cursor-ring {
    position: fixed; width: 36px; height: 36px;
    border: 1.5px solid rgba(168,127,80,.55); border-radius: 50%;
    pointer-events: none; z-index: 9997;
    transform: translate(-50%,-50%);
    transition: width .35s cubic-bezier(.25,.46,.45,.94), height .35s cubic-bezier(.25,.46,.45,.94), border-color .3s, opacity .3s;
    will-change: transform;
}
body.cursor-hover #cursor-dot  { width:8px; height:8px; background:var(--coffee-500); }
body.cursor-hover #cursor-ring { width:52px; height:52px; border-color:rgba(168,127,80,.35); }
body.cursor-click #cursor-dot  { transform:translate(-50%,-50%) scale(.5); }
body.cursor-click #cursor-ring { width:24px; height:24px; border-color:rgba(168,127,80,.9); }
@media (pointer: coarse) { #cursor-dot, #cursor-ring { display:none; } }

/* ─── SCROLL-REVEAL ──────────────────────────────── */
[data-reveal] {
    opacity: 0;
    transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
    will-change: transform, opacity;
}
[data-reveal="up"]    { transform: translateY(50px); }
[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in-view { opacity:1; transform:none; }

/* ─── STAGGER GRID ───────────────────────────────── */
[data-stagger] > * {
    opacity: 0; transform: translateY(32px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-stagger].in-view > *:nth-child(1) { opacity:1; transform:none; transition-delay:.00s; }
[data-stagger].in-view > *:nth-child(2) { opacity:1; transform:none; transition-delay:.10s; }
[data-stagger].in-view > *:nth-child(3) { opacity:1; transform:none; transition-delay:.20s; }
[data-stagger].in-view > *:nth-child(4) { opacity:1; transform:none; transition-delay:.30s; }
[data-stagger].in-view > *:nth-child(5) { opacity:1; transform:none; transition-delay:.40s; }
[data-stagger].in-view > *:nth-child(6) { opacity:1; transform:none; transition-delay:.50s; }

/* ─── SPLIT TEXT ─────────────────────────────────── */
/* Sadece JS hazır olduğunda (js-ready class ile) gizle; aksi halde metin her zaman görünür */
/* overflow:hidden kaldırıldı ki büyük harfler ve ğ gibi aksanlı karakterler tepeden kesilmesin */
.split-word { display:inline-block; overflow:visible; vertical-align:bottom; margin-right:.18em; }
.split-word__inner {
    display:inline-block;
    transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.js-ready .split-word__inner { transform:translateY(110%); opacity:0; }
.split-word--visible .split-word__inner { transform:translateY(0) !important; opacity:1 !important; }

/* ─── HERO ANIMATIONS ────────────────────────────── */
.hero__eyebrow-line { transform-origin:left; }
.hero-loaded .hero__eyebrow-line { animation: drawLine .7s cubic-bezier(.22,1,.36,1) .1s both; }
@keyframes drawLine { from { transform:scaleX(0); opacity:0; } to { transform:scaleX(1); opacity:1; } }

/* Stats: sadece JS hazır olduğunda gizle */
.js-ready .hero__stats {
    opacity:0; transform:translateY(20px);
    transition: opacity .7s ease, transform .7s ease;
}
.hero-loaded .hero__stats { opacity:1 !important; transform:none !important; transition-delay:.25s; }

.js-ready .hero__badge--tl {
    opacity:0; transform:translateX(-24px) translateY(-8px);
    transition: opacity .6s ease, transform .6s ease;
}
.js-ready .hero__badge--br {
    opacity:0; transform:translateX(24px) translateY(8px);
    transition: opacity .6s ease, transform .6s ease;
}
.hero-loaded .hero__badge--tl { opacity:1 !important; transform:none; transition-delay:.35s; animation: badgeFloat 5s ease-in-out infinite 1.6s; }
.hero-loaded .hero__badge--br { opacity:1 !important; transform:none; transition-delay:.50s; animation: badgeFloat 5s ease-in-out infinite 4s; }

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

/* Fotoğraf: clip-path yerine hafif fade — hızlı ve güvenilir */
.js-ready .hero__image-frame {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1);
}
.hero-loaded .hero__image-frame {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: .05s;
}

.hero__scroll { animation: fadeInScroll .6s ease .8s both; }
@keyframes fadeInScroll {
    from { opacity:0; transform:translateX(-50%) translateY(12px); }
    to   { opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ─── FLOATING ORBS ──────────────────────────────── */
.hero__orb { position:absolute; border-radius:50%; pointer-events:none; will-change:transform; }
.hero__orb--1 {
    width:500px; height:500px; top:-80px; right:5%;
    background: radial-gradient(circle, rgba(196,154,108,.14) 0%, transparent 60%);
    animation: orbFloat1 12s ease-in-out infinite;
}
.hero__orb--2 {
    width:360px; height:360px; bottom:10%; left:-60px;
    background: radial-gradient(circle, rgba(168,127,80,.10) 0%, transparent 60%);
    animation: orbFloat2 16s ease-in-out infinite;
}
.hero__orb--3 {
    width:220px; height:220px; top:35%; left:30%;
    background: radial-gradient(circle, rgba(228,208,174,.12) 0%, transparent 60%);
    animation: orbFloat3 9s ease-in-out infinite;
}
@keyframes orbFloat1 {
    0%,100% { transform:translate(0,0) scale(1); }
    33%     { transform:translate(30px,-40px) scale(1.07); }
    66%     { transform:translate(-20px,20px) scale(.95); }
}
@keyframes orbFloat2 {
    0%,100% { transform:translate(0,0) scale(1); }
    40%     { transform:translate(-30px,-50px) scale(1.1); }
    75%     { transform:translate(20px,30px) scale(.93); }
}
@keyframes orbFloat3 {
    0%,100% { transform:translate(0,0); }
    50%     { transform:translate(15px,-25px); }
}

/* ─── ABOUT IMAGE REVEAL ─────────────────────────── */
.js-ready .about__img-wrap {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.about__img-wrap.clip-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Edu badges: fotoğraf göründükten sonra sırayla süzülsün */
.js-ready .about__edu-item {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.about__img-wrap.clip-visible .about__edu-item--1 { opacity:1 !important; transform:none !important; transition-delay:.35s; }
.about__img-wrap.clip-visible .about__edu-item--2 { opacity:1 !important; transform:none !important; transition-delay:.50s; }
.about__img-wrap.clip-visible .about__edu-item--3 { opacity:1 !important; transform:none !important; transition-delay:.65s; }

/* ─── CONTACT DETAILS ────────────────────────────── */
.contact__detail {
    opacity:0; transform:translateX(-24px);
    transition: opacity .65s ease, transform .65s ease;
}
.contact__detail.in-view { opacity:1; transform:none; }

/* ─── FOOTER BRAND ───────────────────────────────── */
.footer__brand {
    opacity:0; transform:translateY(20px);
    transition: opacity .8s ease, transform .8s ease;
}
.footer__brand.in-view { opacity:1; transform:none; }
.footer__socials a {
    opacity:0; transform:translateY(14px);
    transition: opacity .5s ease, transform .5s ease, background .3s, color .3s;
}
.footer__brand.in-view .footer__socials a:nth-child(1) { opacity:1; transform:none; transition-delay:.30s; }
.footer__brand.in-view .footer__socials a:nth-child(2) { opacity:1; transform:none; transition-delay:.42s; }
.footer__brand.in-view .footer__socials a:nth-child(3) { opacity:1; transform:none; transition-delay:.54s; }
.footer__brand.in-view .footer__socials a:nth-child(4) { opacity:1; transform:none; transition-delay:.66s; }

/* ─── SECTION LABEL UNDERLINE ────────────────────── */
.section__label::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:0; height:1px; background:var(--coffee-400);
    transition: width .6s cubic-bezier(.22,1,.36,1);
}
.section__label.line-in::after { width:100%; }

/* ─── QUOTE ──────────────────────────────────────── */
.quote-card__text .word {
    display:inline-block; opacity:0; transform:translateY(12px);
    transition: opacity .5s ease, transform .5s ease;
    margin-right:.28em;
}
.quote-visible .quote-card__text .word { opacity:1; transform:none; }
.quote-card::before {
    content:''; position:absolute; bottom:0; left:50%;
    transform:translateX(-50%);
    width:0; height:1px;
    background: linear-gradient(90deg, transparent, var(--coffee-300), transparent);
    transition: width 1.4s cubic-bezier(.22,1,.36,1);
}
.quote-visible .quote-card::before { width:80%; }

/* ─── BUTTON GLOW PULSE ──────────────────────────── */
.btn--primary {
    animation: btnGlowGold 3s ease-in-out infinite;
}
@keyframes btnGlowGold {
    0%,100% { box-shadow:0 4px 18px rgba(168,127,80,.30); }
    50%     { box-shadow:0 6px 30px rgba(168,127,80,.50), 0 0 0 6px rgba(168,127,80,.06); }
}
.btn--whatsapp {
    animation: btnGlowGreen 3s ease-in-out infinite;
}
@keyframes btnGlowGreen {
    0%,100% { box-shadow:0 4px 18px rgba(37,211,102,.22); }
    50%     { box-shadow:0 6px 30px rgba(37,211,102,.38), 0 0 0 6px rgba(37,211,102,.06); }
}

/* ─── SECTION SWEEP LINE ─────────────────────────── */
.about::after, .services::after {
    content:''; position:absolute; top:0; left:-100%;
    width:60%; height:1px;
    background: linear-gradient(90deg, transparent, var(--coffee-300), transparent);
    animation: lineSweep 4s ease-in-out infinite 1s;
}
@keyframes lineSweep {
    0%   { left:-60%; opacity:0; }
    20%  { opacity:1; }
    80%  { opacity:1; }
    100% { left:160%; opacity:0; }
}

/* ─── HERO TITLE EM SHIMMER ──────────────────────── */
.hero__title em {
    background: linear-gradient(90deg,
        var(--coffee-400) 0%,
        var(--coffee-200) 28%,
        var(--coffee-300) 50%,
        var(--coffee-200) 72%,
        var(--coffee-400) 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 5.5s linear infinite 2.2s;
}
@keyframes textShimmer {
    0%   { background-position: 220% center; }
    100% { background-position: -220% center; }
}

/* ─── SECTION TITLE HOVER GLOW ───────────────────── */
.section__title {
    position: relative;
}
.section__title::after {
    content: '';
    position: absolute;
    inset: -8px -20px;
    background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(196,154,108,.0) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity .5s ease;
    z-index: -1;
}

/* ─── QUOTE CARD AMBIENT GLOW ────────────────────── */
.quote-card__icon {
    animation: iconPulse 3.5s ease-in-out infinite;
}
@keyframes iconPulse {
    0%,100% { transform: scale(1);    opacity: .70; }
    50%     { transform: scale(1.15); opacity: 1; }
}

/* ─── WHY-CARD ENTRANCE ──────────────────────────── */
.why-card {
    position: relative;
    overflow: hidden;
}
.why-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(196,154,108,.06) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
    z-index: 0;
}
.why-card:hover::before { opacity: 1; }

/* ─── SERVICE CARD BORDER SHIMMER ────────────────── */
.service-card {
    position: relative;
}
.service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 30%, rgba(196,154,108,.14) 50%, transparent 70%);
    background-size: 250% 100%;
    background-position: -100% 0;
    pointer-events: none;
    z-index: 2;
    transition: background-position .65s ease;
}
.service-card:hover::before { background-position: 150% 0; }

/* ─── ABOUT SECTION SHIMMER LINE ─────────────────── */
.about__img-shimmer {
    animation: imgShimmerPulse 5s ease-in-out infinite;
}
@keyframes imgShimmerPulse {
    0%,100% { opacity: 1; }
    50%     { opacity: .75; }
}

/* ─── SCROLL INDICATOR PREMIUM ───────────────────── */
.hero__scroll span {
    animation: scrollLabelFade 2s ease-in-out infinite;
}
@keyframes scrollLabelFade {
    0%,100% { opacity: .55; }
    50%     { opacity: 1; }
}

/* ─── FOOTER SEPARATOR GLOW ──────────────────────── */
.footer__main {
    position: relative;
}
.footer__main::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 40%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(196,154,108,.35), transparent);
    animation: footerLineGlow 4s ease-in-out infinite;
}
@keyframes footerLineGlow {
    0%,100% { width: 40%; opacity: .7; }
    50%     { width: 60%; opacity: 1; }
}

/* ─── PARTICLES ──────────────────────────────────── */
@keyframes particleRise {
    0%   { transform: translateY(0) translateX(0) scale(1);    opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: .65; }
    100% { transform: translateY(-200px) translateX(18px) scale(.7); opacity: 0; }
}
@keyframes particleDrift {
    0%,100% { transform: translate(0, 0);         opacity: .45; }
    30%     { transform: translate(18px, -28px);   opacity: .85; }
    65%     { transform: translate(-12px, -45px);  opacity: .6; }
}