/* Animasyon ve görsel efekt katmanı */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s ease both}
::view-transition-new(root){animation:vt-in .5s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* ── Açılış ekranı ── */
.splash{position:fixed;inset:0;z-index:300;display:grid;place-items:center;overflow:hidden;isolation:isolate;cursor:pointer;background:radial-gradient(circle at 50% 44%,#204c3e 0,#0e3027 34%,#071a15 78%);transition:opacity .85s ease,transform .85s cubic-bezier(.7,0,.2,1),filter .85s ease}
.splash.out{opacity:0;transform:scale(1.07);filter:blur(8px);pointer-events:none}
.splash::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 79px,#e7c6a806 80px),repeating-linear-gradient(0deg,transparent 0 79px,#e7c6a806 80px);mask-image:radial-gradient(circle at center,#000,transparent 72%);-webkit-mask-image:radial-gradient(circle at center,#000,transparent 72%)}
.splash::after{content:"";position:absolute;z-index:-1;left:50%;top:48%;width:min(92vw,520px);aspect-ratio:1;border:1px solid #e7c6a825;border-radius:50%;transform:translate(-50%,-50%) scale(.8);opacity:0;box-shadow:0 0 0 35px #e7c6a808,0 0 0 85px #e7c6a804;animation:splash-halo calc(2.4s * var(--splash-speed)) calc(.25s * var(--splash-speed)) ease-out forwards}
.splash-stage{position:relative;display:grid;justify-items:center;gap:0;text-align:center;transform:translateY(-7px)}
.splash-glow{position:absolute;z-index:-1;top:15%;width:min(80vw,390px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#d8b99f26 0,#d8b99f0b 37%,transparent 70%);opacity:0;transform:scale(.7);animation:splash-glow calc(3s * var(--splash-speed)) calc(1.6s * var(--splash-speed)) ease-in-out forwards}
.splash-eyebrow{margin-bottom:20px;color:var(--gold);font-size:10px;font-weight:600;letter-spacing:.37em;opacity:0;animation:rise calc(.8s * var(--splash-speed)) calc(.3s * var(--splash-speed)) ease forwards}
.splash-ring{position:relative;width:min(70vw,300px);aspect-ratio:1;display:grid;place-items:center}
.splash-ring::before{content:"";position:absolute;inset:5px;border:1px solid #d8b99f50;border-radius:50%;opacity:0;animation:splash-string calc(1.6s * var(--splash-speed)) calc(.45s * var(--splash-speed)) ease forwards}
.splash-ring::after{content:"";position:absolute;left:50%;bottom:-15px;width:1px;height:26px;background:linear-gradient(var(--gold),transparent);opacity:0;animation:rise calc(.65s * var(--splash-speed)) calc(3.05s * var(--splash-speed)) ease forwards}
.splash-ring .dot{position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffe0bd,var(--gold-deep) 58%,#6c3827 100%);box-shadow:inset -2px -2px 3px #351e1a77,0 1px 5px #0008;opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(.15);animation:splash-bead calc(.55s * var(--splash-speed)) cubic-bezier(.2,.8,.2,1.2) forwards;animation-delay:calc((var(--i) * 70ms + 480ms) * var(--splash-speed))}
.splash-ring .dot.big{width:15px;height:15px;margin:-7.5px;background:radial-gradient(circle at 30% 25%,#fff2d8,#e0a572 57%,#734b35 100%)}
.splash-monogram{position:relative;color:var(--ivory);font-family:var(--serif);font-size:clamp(65px,16vw,105px);font-weight:500;line-height:1;letter-spacing:-.1em;padding-right:.1em;text-shadow:0 8px 28px #0008;opacity:0;transform:scale(.88);animation:splash-reveal calc(1.2s * var(--splash-speed)) calc(2.55s * var(--splash-speed)) cubic-bezier(.16,1,.3,1) forwards}
.splash-monogram::after{content:"";position:absolute;left:50%;bottom:-18px;width:48px;height:1px;background:var(--gold);transform:translateX(-50%)}
.splash-name{margin-top:20px;font-family:var(--serif);font-size:clamp(22px,5vw,33px);letter-spacing:.25em;padding-inline-start:.25em;line-height:1.15;opacity:0;animation:rise calc(.85s * var(--splash-speed)) calc(3.45s * var(--splash-speed)) ease forwards}
.splash-tag{margin-top:10px;font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);opacity:0;animation:rise calc(.85s * var(--splash-speed)) calc(3.85s * var(--splash-speed)) ease forwards}
.splash-skip{position:absolute;inset-block-end:31px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--mist) 70%,transparent)}
.splash-progress{position:absolute;inset-inline-start:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transform-origin:left;animation:splash-progress calc(5.5s * var(--splash-speed)) linear forwards}
.splash-video{background:#07110f}
.splash-video::before,.splash-video::after{display:none}
.splash-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.splash-video .splash-skip{z-index:1;text-shadow:0 2px 10px #000;pointer-events:none}
[dir=rtl] .splash-progress{transform-origin:right}
@keyframes splash-halo{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes splash-glow{35%{opacity:.9;transform:scale(1)}100%{opacity:.5;transform:scale(1.12)}}
@keyframes splash-progress{to{transform:scaleX(1)}}
@keyframes splash-string{to{opacity:1}}
@keyframes splash-bead{to{opacity:1;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1)}}
@keyframes splash-reveal{to{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes orbit{0%,100%{opacity:.45;scale:.96}50%{opacity:1;scale:1.03}}
@keyframes float{0%,100%{transform:translateY(0) scale(.985)}50%{transform:translateY(-8px) scale(1.02)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ── İlerleme çizgisi ve küçülen üst menü ── */
.progress{position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--emerald-soft),var(--gold),var(--gold-deep));transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.9}
[dir=rtl] .progress{transform-origin:100% 50%}
.site-header{transition:background .3s,box-shadow .3s}
.site-header.scrolled{background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:0 10px 30px #0008}
.bar{transition:height .3s}
.site-header.scrolled .bar{height:58px}

/* ── Kahraman alanı ── */
.hero-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.orb{position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);pointer-events:none;animation:drift 16s ease-in-out infinite alternate}
.orb.a{width:380px;height:380px;background:#2f8a6855;inset-inline-start:-90px;top:-70px}
.orb.b{width:300px;height:300px;background:color-mix(in srgb,var(--gold-deep) 13%,transparent);inset-inline-end:8%;bottom:-100px;animation-delay:-6s}
@keyframes drift{to{transform:translate(50px,36px) scale(1.15)}}
.hero-photo{perspective:1000px}
.hero-photo .tilt{position:relative;transform-style:preserve-3d;transition:transform .25s ease-out;will-change:transform}
.hero-photo .tilt img{animation:floaty 7s ease-in-out infinite}
.hero-photo::before{animation:frame-in 1.2s .6s ease both}
.hero-ring{position:absolute;inset:-34px;border:1px dashed color-mix(in srgb,var(--gold) 27%,transparent);border-radius:50%;pointer-events:none;animation:spin 60s linear infinite;z-index:-1}
.hero-photo .sheen{position:absolute;inset:0;border-radius:6px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,#ffffff22 50%,transparent 65%);background-size:250% 100%;animation:sheen 6s 2s ease-in-out infinite}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes frame-in{from{opacity:0;transform:translate(-18px,-18px)}to{opacity:1;transform:none}}
@keyframes sheen{0%,60%{background-position:150% 0}100%{background-position:-50% 0}}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.5em);filter:blur(8px);animation:word .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i) * 90ms)}
.hero h1 em .w{background:linear-gradient(100deg,var(--gold-soft),var(--gold-deep) 40%,var(--gold-soft) 60%,var(--gold-deep));background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:word .9s cubic-bezier(.2,.7,.2,1) forwards,shine 5s 1.5s linear infinite;animation-delay:calc(var(--i) * 90ms),0s}
@keyframes word{to{opacity:1;transform:none;filter:none}}
@keyframes shine{to{background-position:-220% 0}}
.hero .fade{opacity:0;animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d,0) * 1ms)}
body:not(.ready) .hero h1 .w,body:not(.ready) .hero .fade,body:not(.ready) .hero-photo::before{animation-play-state:paused}
.scroll-cue{position:absolute;inset-block-end:22px;inset-inline-start:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--mist);text-decoration:none;opacity:.8}
.scroll-cue i{display:block;width:1px;height:38px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:899px){.scroll-cue{display:none}.hero{min-height:0}.hero-ring{display:none}}

/* ── Kayan malzeme bandı ── */
.marquee{overflow:hidden;border-block:1px solid var(--line-gold);background:linear-gradient(90deg,var(--bg-2),var(--panel),var(--bg-2));padding:18px 0}
.marquee-track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{display:flex;align-items:center;gap:28px;padding-inline-end:28px;font-family:var(--serif);font-size:clamp(20px,3vw,28px);font-style:italic;color:var(--gold-soft);white-space:nowrap}
.marquee span::after{content:"";width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--gold-soft),var(--gold-deep));box-shadow:0 0 12px color-mix(in srgb,var(--gold-deep) 67%,transparent)}
@keyframes marquee{to{transform:translateX(-50%)}}
[dir=rtl] .marquee-track{animation-name:marquee-rtl}
@keyframes marquee-rtl{to{transform:translateX(50%)}}

/* ── Sayılar ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:clamp(40px,6vw,64px);padding-bottom:clamp(30px,5vw,48px);border-bottom:1px solid var(--line)}
.stat{text-align:center}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,8vw,4.6rem);font-weight:500;line-height:1;background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}

/* ── Kaydırınca beliren öğeler ── */
.js-reveal .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 1ms)}
.js-reveal .reveal.from-left{transform:translateX(-40px)}
.js-reveal .reveal.from-right{transform:translateX(40px)}
.js-reveal .reveal.zoom{transform:scale(.94)}
.js-reveal .reveal.in{opacity:1;transform:none}
.divider{display:flex;align-items:center;gap:16px;color:var(--gold)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-gold))}
.divider::after{background:linear-gradient(270deg,transparent,var(--line-gold))}
.divider svg{width:22px;height:22px}

/* ── Işıldayan kartlar ── */
.work,.pillar,.reason{position:relative}
.work::after,.pillar::after,.reason::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--gold) 15%,transparent),transparent 70%)}
.work:hover::after,.pillar:hover::after,.reason:hover::after{opacity:1}
.pillar{transition:transform .3s,border-color .3s;overflow:hidden}
.pillar:hover{transform:translateY(-4px);border-color:var(--line-gold)}
.pillar .no{display:block;font-family:var(--serif);font-size:44px;line-height:1;margin-bottom:14px;color:color-mix(in srgb,var(--gold) 25%,transparent);transition:color .3s}
.pillar:hover .no{color:var(--gold)}

/* ── Sertifika kartı (ön / arka yüz) ── */
.cert-scene{perspective:1400px;container-type:inline-size;width:100%;max-width:560px;margin-inline:auto}
.cert-card{position:relative;aspect-ratio:900/567;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.7,.2,1);cursor:pointer;border-radius:3.4cqw;outline-offset:6px}
.cert-card.flipped{transform:rotateY(180deg)}
.cert-card.tilting{transition:transform .15s ease-out}
.cert-face{position:absolute;inset:0;border-radius:3.4cqw;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 60px #000a,0 0 0 1px color-mix(in srgb,var(--gold) 19%,transparent)}
.cert-face img{width:100%;height:100%}
.cert-back{transform:rotateY(180deg)}
.cert-face::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#ffffff1c 48%,transparent 66%);background-size:260% 100%;background-position:160% 0;animation:sheen 5s 1s ease-in-out infinite}
.cert-text{position:absolute;color:#f1e9df;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cert-name{inset-inline-start:7.6%;top:52.6%;width:56%;font-family:Georgia,serif;font-size:4.6cqw}
.cert-no{inset-inline-start:9.3%;top:78.2%;width:26%;font-size:2.2cqw;letter-spacing:.14em;font-weight:700}
.cert-code{inset-inline-start:40%;top:78.2%;width:20%;font-size:2.2cqw;letter-spacing:.14em;font-weight:700}
.cert-hint{margin-top:18px;text-align:center;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.cert-teaser{display:grid;gap:44px;align-items:center}
.cert-teaser .section-head{margin-bottom:26px}
@media(min-width:900px){.cert-teaser{grid-template-columns:1fr 1.05fr;gap:80px}}

/* ── Kayarken sayan tesbih ── */
.beads{opacity:.85;position:fixed;inset-inline-end:18px;bottom:18px;z-index:40;display:none;flex-direction:column;align-items:flex-end;gap:2px;pointer-events:none;transition:opacity .4s}
body.lock .beads{opacity:0}
.beads-svg{width:120px;height:120px;overflow:visible}
.beads-svg circle{fill:color-mix(in srgb,var(--gold) 15%,transparent);transition:fill .35s,r .35s,filter .35s}
.beads-svg circle.on{fill:var(--gold-soft);filter:drop-shadow(0 0 5px color-mix(in srgb,var(--gold-soft) 67%,transparent))}
.beads-svg circle.cur{fill:#fff4e6;r:6.5}
.beads-label{text-align:end;line-height:1.2}
.beads-label small{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.beads-label b{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--ivory)}
.beads-label b i{font-size:15px;color:var(--mist);font-style:normal}
@media(min-width:1000px){.beads{display:flex}}

.result{animation:rise .8s ease both}

@media(prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none}
  .splash{display:none}
  .hero h1 .w,.hero .fade{opacity:1;transform:none;filter:none;animation:none}
  .hero h1 em .w{animation:none;color:var(--gold-soft);-webkit-text-fill-color:currentColor}
  .marquee-track,.orb,.hero-ring,.hero-photo .tilt img,.scroll-cue i,.cert-face::after{animation:none}
}

.work.pop{animation:rise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0) * 1ms)}
.query-card-col{display:grid;gap:4px;align-content:start}
.query-card-col .cert-hint{margin:6px 0 18px}

/* ── Yüzen düğmeler: WhatsApp ve arka plan müziği (panelden açılır/kapanır) ── */
.wa-float{position:fixed;inset-inline-end:18px;bottom:18px;z-index:45;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;box-shadow:0 10px 26px #0007,0 0 0 1px #ffffff26 inset;transition:transform .25s,box-shadow .25s}
.wa-float:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 34px #0009}
@media(min-width:1000px){.wa-float{bottom:196px}}
body.lock .wa-float,body.lock .music-btn{opacity:0;pointer-events:none}
.music-btn{position:fixed;inset-inline-start:18px;bottom:18px;z-index:45;display:grid;place-items:center;width:46px;height:46px;padding:0;border:1px solid var(--line-gold);border-radius:50%;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--gold-soft);cursor:pointer;box-shadow:0 8px 22px #0006;transition:transform .25s,border-color .25s}
.music-btn:hover{transform:translateY(-2px);border-color:var(--gold)}
.music-bars{display:flex;align-items:flex-end;gap:3px;height:16px}
.music-bars i{display:block;width:3px;height:30%;border-radius:2px;background:currentColor;transition:height .3s}
.music-btn.playing .music-bars i{animation:eq 1s ease-in-out infinite}
.music-btn.playing .music-bars i:nth-child(2){animation-delay:.2s}
.music-btn.playing .music-bars i:nth-child(3){animation-delay:.45s}
.music-btn.playing .music-bars i:nth-child(4){animation-delay:.1s}
.music-btn:not(.playing)::after{content:"";position:absolute;width:26px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-40deg);opacity:.85}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
@media(prefers-reduced-motion:reduce){.music-btn.playing .music-bars i{animation:none;height:70%}}