/* KAF Social — canlı arka plan ve hareket katmanı (v3) */
html{background:#0B1118}
body.subpage,body.home-premium{background:transparent!important}
@view-transition{navigation:auto}

/* ---------- Canlı arka plan ---------- */
.fx-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#0B1118;contain:strict}
.fx-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.fx-blob.b1{width:52vmax;height:52vmax;left:-16vmax;top:-18vmax;background:radial-gradient(circle,#2B4B73 0,transparent 66%);animation:fx-d1 34s ease-in-out infinite alternate}
.fx-blob.b2{width:46vmax;height:46vmax;right:-18vmax;top:22vh;background:radial-gradient(circle,#4B3A66 0,transparent 66%);animation:fx-d2 41s ease-in-out infinite alternate}
.fx-blob.b3{width:42vmax;height:42vmax;left:18vw;bottom:-24vmax;background:radial-gradient(circle,#2F5A52 0,transparent 66%);animation:fx-d3 37s ease-in-out infinite alternate}
.fx-blob.b4{width:30vmax;height:30vmax;right:12vw;bottom:-10vmax;background:radial-gradient(circle,#6B5427 0,transparent 66%);opacity:.38;animation:fx-d1 46s ease-in-out infinite alternate-reverse}
@keyframes fx-d1{to{transform:translate3d(14vw,10vh,0) scale(1.15)}}
@keyframes fx-d2{to{transform:translate3d(-16vw,-8vh,0) scale(.9)}}
@keyframes fx-d3{to{transform:translate3d(10vw,-14vh,0) scale(1.2)}}
.fx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 50% 25%,#000,transparent 72%)}
.fx-spot{position:absolute;inset:0;background:radial-gradient(560px circle at var(--mx,62%) var(--my,22%),rgba(125,165,215,.14),transparent 62%)}
.fx-bg::after{content:"";position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Kartlarda imleci izleyen ışık ---------- */
.fx-glow{background-image:radial-gradient(360px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.11),transparent 46%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))!important;transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .45s}
.fx-glow:hover{border-color:rgba(255,255,255,.26)!important;box-shadow:0 26px 60px rgba(0,0,0,.38)}

/* ---------- Başlıklarda kelime kelime yükselme ---------- */
.fx-split .fx-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .16em;margin:-.04em -.02em -.16em}
.fx-split .fx-wi{display:inline-block;transform:translateY(112%);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0)*60ms)}
.fx-split.is-in .fx-wi{transform:none}
.page-hero .display em{font-style:normal;color:#EBC8A8}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.page-hero .display em{background:linear-gradient(100deg,#D9A184 0%,#F0D3A4 40%,#D9A184 80%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-shine 7s ease-in-out infinite}}
@keyframes fx-shine{0%,100%{background-position:0 0}50%{background-position:100% 0}}

/* ---------- Hero'da yavaş dönen renk çarkı ---------- */
.page-hero{isolation:isolate}
.fx-wheel{position:absolute;z-index:-1;right:-9vw;top:50%;width:clamp(300px,40vw,640px);aspect-ratio:1;margin-top:calc(clamp(300px,40vw,640px)/-2);border-radius:50%;pointer-events:none;opacity:.5;translate:0 var(--wy,0px)}
.fx-wheel::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.5) 0 .5deg,transparent .5deg 6deg),conic-gradient(#4fc01e,#a4d62a,#ffd21f,#ff8c1a,#ff4a1c,#e0201f,#b0176a,#6b1a9a,#2a22b8,#1e78e6,#17b09a,#4fc01e);-webkit-mask:radial-gradient(circle closest-side,transparent 0 70%,#000 71%);mask:radial-gradient(circle closest-side,transparent 0 70%,#000 71%);opacity:.55;animation:fx-spin 60s linear infinite}
.fx-wheel::after{content:"";position:absolute;inset:22%;border-radius:50%;background:conic-gradient(#FFE81A 0 120deg,#FF1F1F 120deg 240deg,#1E8CFF 240deg 360deg);opacity:.2;animation:fx-spin 40s linear infinite reverse}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* ---------- Akan kelime bandı ---------- */
.fx-marquee{overflow:hidden;border-block:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);padding:clamp(18px,3vw,34px) 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fx-marquee-track{display:flex;gap:clamp(28px,4vw,64px);width:max-content;animation:fx-marq 38s linear infinite}
.fx-marquee:hover .fx-marquee-track{animation-play-state:paused}
.fx-marquee span{display:inline-flex;align-items:center;gap:clamp(28px,4vw,64px);font:650 clamp(1.8rem,5vw,4.2rem)/1.1 var(--font,'Sora',system-ui,sans-serif);letter-spacing:-.05em;color:#EEF2F6;white-space:nowrap}
.fx-marquee span::after{content:"";width:.42em;height:.42em;border-radius:50%;flex:none;background:conic-gradient(#4fc01e,#ffd21f,#ff4a1c,#b0176a,#2a22b8,#1e78e6,#4fc01e);animation:fx-spin 8s linear infinite}
@keyframes fx-marq{to{transform:translateX(-50%)}}

/* ---------- Genel ---------- */
.k-button,.k-cta{will-change:transform}
@media (max-width:700px){.fx-blob{filter:blur(60px)}.fx-spot{display:none}.fx-wheel{opacity:.32;right:-30vw}}
@media (prefers-reduced-motion:reduce){
  .fx-blob,.fx-wheel::before,.fx-wheel::after,.fx-marquee-track,.fx-marquee span::after,.page-hero .display em{animation:none!important}
  .fx-split .fx-wi{transform:none!important;transition:none!important}
  .fx-marquee-track{width:auto;flex-wrap:wrap}
}

/* ================= v4: oturaklı üst menü (tüm sayfalar) ================= */
:root{--nh:76px}
body.home-premium #nav,body.subpage header.k-nav{position:fixed;inset:0 0 auto 0;z-index:80;display:block;width:100%;height:var(--nh);padding:0;pointer-events:auto;transform:none!important;transition:height .35s cubic-bezier(.2,.8,.2,1)}
body.home-premium #nav.is-scrolled,body.subpage header.k-nav.is-scrolled{--nh:64px}
body.home-premium #nav::before,body.subpage header.k-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,12,18,.78);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.09);transition:background .35s,box-shadow .35s}
body.home-premium #nav.is-scrolled::before,body.subpage header.k-nav.is-scrolled::before{background:rgba(8,12,18,.94);box-shadow:0 12px 40px rgba(0,0,0,.4)}
body.home-premium #nav .pill,body.subpage header.k-nav .k-pill{position:static;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);width:100%;max-width:1380px;height:100%;margin:0 auto;padding:0 clamp(18px,4vw,48px);background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:flex-start}
body.home-premium #nav .logo,body.subpage header.k-nav .k-logo{flex:none;display:flex;align-items:center;line-height:0;padding:0;margin:0}
body.home-premium #nav .brand-wordmark,body.subpage header.k-nav .k-logo-art{display:block;height:40px;width:auto;max-width:none;filter:none;transition:height .35s}
body.home-premium #nav.is-scrolled .brand-wordmark,body.subpage header.k-nav.is-scrolled .k-logo-art{height:34px}
body.home-premium #nav .links a,body.subpage header.k-nav .k-links a{position:relative;padding:10px 14px;border-radius:10px;font:600 .9rem/1 var(--text,var(--font,system-ui));letter-spacing:.005em;color:#C4CFDC;opacity:1;text-decoration:none;white-space:nowrap;transition:color .2s,background .2s}
body.home-premium #nav .links a:hover,body.subpage header.k-nav .k-links a:hover{color:#fff;background:rgba(255,255,255,.07)}
body.home-premium #nav .links a[aria-current=page],body.subpage header.k-nav .k-links a[aria-current=page]{color:#fff}
body.home-premium #nav .links a[aria-current=page]::after,body.subpage header.k-nav .k-links a[aria-current=page]::after{content:"";position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:#C9A557}
body.home-premium #nav .nav-cta,body.subpage header.k-nav .k-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;background:#F3F6FA;color:#0B1118!important;border:0;font:700 .88rem/1 var(--text,var(--font,system-ui));letter-spacing:.01em;text-decoration:none;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.4) inset;transition:transform .25s,background .25s,box-shadow .25s}
body.home-premium #nav .nav-cta:hover,body.subpage header.k-nav .k-cta:hover{background:#fff;transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
body.home-premium #nav .menu-toggle,body.subpage header.k-nav .k-menu{display:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);color:#fff;margin:0;padding:0;cursor:pointer}
body.subpage header.k-nav .k-menu svg{width:22px;height:22px;stroke:#fff}
@media(min-width:981px){
 body.home-premium #nav .links,body.subpage header.k-nav .k-links{display:flex;position:static;flex:1;justify-content:center;gap:2px;background:none;border:0;padding:0;box-shadow:none;opacity:1;visibility:visible;transform:none;flex-direction:row;max-height:none}
 body.home-premium #nav .nav-cta,body.subpage header.k-nav .k-cta{margin-left:0}
}
@media(max-width:980px){
 :root{--nh:68px}
 body.home-premium #nav .nav-cta,body.subpage header.k-nav .k-cta{margin-left:auto;height:42px;padding:0 16px;font-size:.82rem;display:inline-flex}
 body.home-premium #nav .menu-toggle,body.subpage header.k-nav .k-menu{display:inline-flex;align-items:center;justify-content:center}
 body.home-premium #nav .brand-wordmark,body.subpage header.k-nav .k-logo-art{height:34px}
 body.home-premium #nav .links,body.subpage header.k-nav .k-links{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px clamp(18px,4vw,48px) 22px;background:rgba(8,12,18,.985);border:0;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;box-shadow:0 30px 60px rgba(0,0,0,.5);max-height:calc(100dvh - var(--nh));overflow:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s,transform .35s cubic-bezier(.2,.8,.2,1),visibility 0s linear .35s}
 body.home-premium #nav .links.open,body.subpage header.k-nav .k-links.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
 body.home-premium #nav .links a,body.subpage header.k-nav .k-links a{padding:17px 4px;border-radius:0;border-bottom:1px solid rgba(255,255,255,.09);font-size:1.12rem;background:none}
 body.home-premium #nav .links a:last-child,body.subpage header.k-nav .k-links a:last-child{border-bottom:0}
 body.home-premium #nav .links a[aria-current=page]::after,body.subpage header.k-nav .k-links a[aria-current=page]::after{left:4px;right:auto;width:28px;bottom:10px}
}
@media(max-width:380px){body.home-premium #nav .nav-cta,body.subpage header.k-nav .k-cta{padding:0 12px;font-size:.78rem}}
body.subpage .page-hero{padding-top:max(150px,calc(var(--nh) + 70px))}
@media(max-width:980px){body.home-premium #nav .links,body.subpage header.k-nav .k-links{background:#0A1018}}
/* Klavye odağı: her etkileşimli öğede görünür */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #C9A557;outline-offset:3px;border-radius:8px}

/* Extra Notlar tab: avoid nav crowding at mid-size desktop widths. */
@media (min-width:981px) and (max-width:1180px){
 body.home-premium #nav .pill,body.subpage header.k-nav .k-pill{gap:8px;padding-inline:20px}
 body.home-premium #nav .links a,body.subpage header.k-nav .k-links a{padding-inline:8px;font-size:.79rem}
 body.home-premium #nav .brand-wordmark,body.subpage header.k-nav .k-logo-art{height:32px}
 body.home-premium #nav .nav-cta,body.subpage header.k-nav .k-cta{padding-inline:12px}
}