/* ==========================================================================
   KYTHRION — KX ARCH  ·  Visual Architecture Layer v1
   Katmanlı arka planlar · HUD çerçeveler · cam yüzeyler · ışık huzmeleri
   --------------------------------------------------------------------------
   * Mevcut renk paleti KORUNUR: tüm renkler style.css'teki --violet, --cyan,
     --blue, --pink, --line değişkenlerinden türetilir (admin'in accent
     ayarı da otomatik yansır).
   * Dekoratif DOM, assets/js/kx-fx.js tarafından enjekte edilir; PHP
     şablonları ve işlevler değişmez.
   * Ilham: Aceternity (spotlight, border-beam), Magic UI (animated grid,
     shine border), shadcn (token sistemi), React Bits (aurora / reticle).
   ========================================================================== */

/* ---------- 0. Tokenlar ---------------------------------------------------- */
body.kx-on{
  --kx-main:var(--violet,#8b5cf6);
  --kx-sub:var(--cyan,#22d3ee);
  --kx-blue:var(--blue,#4f8cff);
  --kx-hot:var(--pink,#f43f9a);

  --kx-m06:color-mix(in srgb,var(--kx-main) 6%,transparent);
  --kx-m12:color-mix(in srgb,var(--kx-main) 12%,transparent);
  --kx-m20:color-mix(in srgb,var(--kx-main) 20%,transparent);
  --kx-m35:color-mix(in srgb,var(--kx-main) 35%,transparent);
  --kx-m60:color-mix(in srgb,var(--kx-main) 60%,transparent);
  --kx-c06:color-mix(in srgb,var(--kx-sub) 6%,transparent);
  --kx-c12:color-mix(in srgb,var(--kx-sub) 12%,transparent);
  --kx-c20:color-mix(in srgb,var(--kx-sub) 20%,transparent);
  --kx-c35:color-mix(in srgb,var(--kx-sub) 35%,transparent);
  --kx-c60:color-mix(in srgb,var(--kx-sub) 60%,transparent);
  --kx-b12:color-mix(in srgb,var(--kx-blue) 12%,transparent);
  --kx-b20:color-mix(in srgb,var(--kx-blue) 20%,transparent);
  --kx-h10:color-mix(in srgb,var(--kx-hot) 10%,transparent);
  --kx-h18:color-mix(in srgb,var(--kx-hot) 18%,transparent);

  --kx-ease:var(--ease,cubic-bezier(.2,.75,.25,1));
  --kx-card-r:5px 22px 5px 22px;       /* imza köşe: çapraz asimetrik */
  --kx-depth:0 1px 0 rgba(255,255,255,.07) inset,0 -1px 0 rgba(0,0,0,.35) inset,0 26px 50px -28px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.35);
}
body.kx-admin{--kx-main:var(--ad-accent,#8b5cf6)}

@property --kx-a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- 1. Sahne (sabit arka plan katmanları) -------------------------- */
.kx-stage{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict}
.kx-stage>i{position:absolute;display:block}

/* perspektif zemin ızgarası */
.kx-floor{left:-30%;right:-30%;bottom:-10vh;height:64vh;
  background:
    linear-gradient(var(--kx-m20) 1px,transparent 1px) 0 0/100% 58px,
    linear-gradient(90deg,var(--kx-m20) 1px,transparent 1px) 0 0/78px 100%;
  transform:perspective(540px) rotateX(63deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 4%,transparent 80%);mask-image:linear-gradient(0deg,#000 4%,transparent 80%);
  opacity:.5;animation:kx-breathe 8s ease-in-out infinite}

/* ışık huzmeleri */
.kx-beam{top:-34vh;width:20vw;min-width:150px;height:150vh;transform-origin:50% 0;mix-blend-mode:screen;filter:blur(22px);opacity:.55;
  transform:rotate(var(--r0,-20deg));animation:kx-sway var(--t,18s) ease-in-out infinite alternate}
.kx-beam.b1{left:6%;--r0:-24deg;--r1:-12deg;--t:17s;background:linear-gradient(180deg,var(--kx-c35),var(--kx-c06) 58%,transparent)}
.kx-beam.b2{left:48%;--r0:14deg;--r1:24deg;--t:23s;width:15vw;background:linear-gradient(180deg,var(--kx-m35),var(--kx-m06) 58%,transparent)}
.kx-beam.b3{right:4%;--r0:30deg;--r1:18deg;--t:20s;background:linear-gradient(180deg,var(--kx-h18),var(--kx-h10) 40%,transparent 70%)}

/* imleç spotu (Aceternity spotlight) */
.kx-spot{left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;border-radius:50%;
  background:radial-gradient(circle,var(--kx-m12),var(--kx-c06) 38%,transparent 66%);
  transform:translate3d(var(--kx-x,60vw),var(--kx-y,28vh),0);opacity:0;transition:opacity .8s}
body.kx-pointer .kx-spot{opacity:1}

/* titreşen ızgara hücreleri (Magic UI animated-grid) */
.kx-cell{width:64px;height:64px;left:calc(var(--c) * 64px);top:calc(var(--r) * 64px);
  background:linear-gradient(135deg,var(--kx-m20),var(--kx-c12));box-shadow:inset 0 0 0 1px var(--kx-m35);opacity:0;
  animation:kx-cell var(--d,6s) ease-in-out var(--s,0s) infinite}

/* gren + tarama çizgisi */
.kx-noise{inset:0;opacity:.07;mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.kx-vig{inset:0;background:radial-gradient(ellipse at 50% 40%,transparent 45%,rgba(2,3,8,.55) 100%)}

/* ---------- 2. Bölüm katmanları ------------------------------------------- */
.kx-sec{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;overflow:hidden}
.kx-sec--full{left:0;width:100%;transform:none}
.kx-sec--top{bottom:auto;height:min(820px,100%)}
.kx-sec>*{position:absolute;display:block}

.kx-orb{width:560px;height:560px;border-radius:50%;filter:blur(96px);opacity:.6;
  transform:translate3d(0,calc(var(--kx-p,0) * -70px),0)}
.kx-orb.m{background:var(--kx-m20)}.kx-orb.c{background:var(--kx-c12)}.kx-orb.h{background:var(--kx-h10)}.kx-orb.b{background:var(--kx-b12)}
.kx-orb.tl{left:-8%;top:-14%}.kx-orb.tr{right:-8%;top:-10%}.kx-orb.bl{left:-6%;bottom:-18%}.kx-orb.br{right:-6%;bottom:-16%}

.kx-grid{top:7%;bottom:7%;width:min(54vw,780px);
  background-image:linear-gradient(var(--kx-m12) 1px,transparent 1px),linear-gradient(90deg,var(--kx-m12) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(closest-side at var(--gx,100%) 50%,#000 10%,transparent);mask-image:radial-gradient(closest-side at var(--gx,100%) 50%,#000 10%,transparent)}
.kx-grid.r{right:0;--gx:100%}.kx-grid.l{left:0;--gx:0%}
.kx-grid.dots{background-image:radial-gradient(var(--kx-c35) 1.2px,transparent 1.6px);background-size:26px 26px}

.kx-ray{top:-24%;width:240px;height:150%;transform:rotate(var(--rot,22deg));transform-origin:50% 0;filter:blur(18px);
  background:linear-gradient(180deg,var(--kx-c20),var(--kx-c06) 55%,transparent)}
.kx-ray.m{background:linear-gradient(180deg,var(--kx-m20),var(--kx-m06) 55%,transparent)}

.kx-shape{width:min(380px,34vw);aspect-ratio:1;color:var(--kx-m35);
  transform:translate3d(0,calc(var(--kx-p,0) * 90px),0)}
.kx-shape svg{width:100%;height:100%;overflow:visible;animation:kx-spin var(--t,90s) linear infinite}
.kx-shape svg *{fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}
.kx-shape .fill{fill:currentColor;fill-opacity:.08;stroke:none}
.kx-shape.sm{width:min(190px,18vw);color:var(--kx-c35)}
.kx-shape.rev svg{animation-direction:reverse}
.kx-shape.tr{right:4%;top:10%}.kx-shape.tl{left:2%;top:14%}.kx-shape.br{right:8%;bottom:6%}.kx-shape.bl{left:5%;bottom:8%}.kx-shape.mid{right:26%;top:30%}

.kx-fade{inset:0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 150px,#000 calc(100% - 150px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 150px,#000 calc(100% - 150px),transparent 100%)}
.kx-sec--top .kx-fade{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 180px),transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 180px),transparent 100%)}
.kx-sec--footer .kx-fade{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px);mask-image:linear-gradient(180deg,transparent 0,#000 140px)}
.kx-fade>*{position:absolute;display:block}

/* üst kenar: HUD cetvel / ayırıcı */
.kx-top{top:0;left:50%;width:min(var(--max,1280px),calc(100vw - 44px));transform:translateX(-50%);height:12px;display:flex;align-items:center;gap:14px}
.kx-top i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2,rgba(160,175,255,.22)) 35%,var(--kx-m35))}
.kx-top i:last-child{background:linear-gradient(270deg,transparent,var(--line2,rgba(160,175,255,.22)) 35%,var(--kx-c35))}
.kx-top{filter:drop-shadow(0 0 6px var(--kx-c35))}
.kx-top b{width:9px;height:9px;margin:0 6px;background:var(--kx-sub);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:kx-pulse 3.2s ease-in-out infinite}
.kx-top b+i,.kx-top i:first-child{position:relative}
.kx-top:after{content:"";position:absolute;left:0;right:0;top:7px;height:5px;opacity:.5;
  background:repeating-linear-gradient(90deg,var(--kx-m20) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}

/* geçiş: köşegen bant */
.kx-slant{left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,var(--kx-m06),transparent);clip-path:polygon(0 0,100% 0,100% 18%,0 100%)}
.kx-slant.flip{clip-path:polygon(0 0,100% 0,100% 100%,0 18%);background:linear-gradient(180deg,var(--kx-c06),transparent)}

/* kayıt (+) işaretleri */
.kx-plus{width:15px;height:15px;opacity:.7}
.kx-plus:before,.kx-plus:after{content:"";position:absolute;background:var(--kx-sub);box-shadow:0 0 8px var(--kx-c60)}
.kx-plus:before{left:7px;top:0;width:1px;height:15px}.kx-plus:after{top:7px;left:0;height:1px;width:15px}
.kx-plus.a{top:3px;left:calc(50% - min(var(--max,1280px),100vw - 44px)/2 - 7px)}
.kx-plus.b{top:3px;left:calc(50% + min(var(--max,1280px),100vw - 44px)/2 - 8px)}
.kx-plus.c{bottom:30px;left:calc(50% - min(var(--max,1280px),100vw - 44px)/2 - 7px)}
.kx-plus.d{bottom:30px;left:calc(50% + min(var(--max,1280px),100vw - 44px)/2 - 8px)}
.kx-vrule{top:12%;bottom:12%;width:9px;left:max(8px,calc(50% - min(var(--max,1280px),100vw - 44px)/2 - 34px));
  background:repeating-linear-gradient(180deg,var(--kx-m35) 0 1px,transparent 1px 11px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);opacity:.8}
.kx-vrule:after{content:"";position:absolute;left:-1px;width:11px;height:2px;top:var(--kx-tp,30%);background:var(--kx-sub);box-shadow:0 0 12px var(--kx-sub)}

/* ---------- 3. Hero kompozisyonu ------------------------------------------ */
.hero{isolation:isolate}
.auth-shell.kx-host,.status-page.kx-host,.cta.kx-host,.site-footer.kx-host{isolation:isolate}
.kx-hero{position:absolute;inset:-60px 0 0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
.kx-hero>*{position:absolute;display:block}
.kx-reticle{right:max(-6vw,-90px);top:50%;width:min(780px,62vw);aspect-ratio:1;margin-top:calc(min(780px,62vw) / -2);color:var(--kx-m35)}
.kx-reticle svg{width:100%;height:100%;overflow:visible}
.kx-reticle svg *{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.kx-reticle .r1{transform-origin:50% 50%;animation:kx-spin 120s linear infinite}
.kx-reticle .r2{transform-origin:50% 50%;animation:kx-spin 70s linear infinite reverse;color:var(--kx-sub)}
.kx-reticle .r3{transform-origin:50% 50%;animation:kx-spin 40s linear infinite}
.kx-reticle .dot{fill:var(--kx-sub);stroke:none;filter:drop-shadow(0 0 6px var(--kx-sub))}
.kx-sweep{right:max(-6vw,-90px);top:50%;width:min(780px,62vw);aspect-ratio:1;margin-top:calc(min(780px,62vw) / -2);border-radius:50%;
  background:conic-gradient(from var(--kx-a),transparent 0 84%,var(--kx-c12) 96%,var(--kx-c35) 100%);
  -webkit-mask-image:radial-gradient(circle,transparent 18%,#000 19%,#000 60%,transparent 70%);mask-image:radial-gradient(circle,transparent 18%,#000 19%,#000 60%,transparent 70%);
  animation:kx-radar 9s linear infinite;opacity:.8}
.kx-slashes{left:-2vw;bottom:-30px;width:360px;height:220px;opacity:.55;
  background:repeating-linear-gradient(115deg,var(--kx-m35) 0 2px,transparent 2px 18px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent);clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.kx-hero .kx-vrule{left:calc(50% - min(var(--max,1280px),100vw - 44px)/2 - 28px);top:18%;bottom:18%}

/* iç sayfa kahramanı: hayalet başlık + HUD çerçeve */
.page-hero.kx-host{isolation:isolate}
.kx-ph{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.kx-ph>*{position:absolute;display:block}
.kx-ghost{right:-1%;top:50%;transform:translateY(-52%);font:900 clamp(110px,17vw,250px)/.85 var(--display,'Barlow Condensed',sans-serif);letter-spacing:4px;text-transform:uppercase;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--kx-sub) 14%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 78%);mask-image:linear-gradient(90deg,transparent 42%,#000 78%)}
.kx-ph .kx-stripes{right:0;top:0;bottom:0;width:46%;opacity:.5;
  background:repeating-linear-gradient(115deg,var(--kx-m12) 0 1px,transparent 1px 15px);
  -webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.kx-ph .kx-base{left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--kx-sub),var(--kx-m35) 30%,transparent 80%);opacity:.7}
.kx-ph .kx-base:after{content:"";position:absolute;left:0;top:0;width:70px;height:3px;background:var(--kx-sub);box-shadow:0 0 14px var(--kx-sub)}
.kx-ph .kx-tick{left:0;bottom:1px;width:46%;height:6px;opacity:.55;background:repeating-linear-gradient(90deg,var(--kx-m35) 0 1px,transparent 1px 12px);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent);mask-image:linear-gradient(90deg,#000,transparent)}
.kx-ph .kx-br{width:20px;height:20px;border:0 solid var(--kx-sub);opacity:.85}
.kx-ph .kx-br.tl{left:0;top:6px;border-width:2px 0 0 2px}
.kx-ph .kx-br.tr{right:0;top:6px;border-width:2px 2px 0 0}

/* ---------- 4. Kart sistemi: cam · derinlik · HUD köşeler ------------------ */
.kx-card.kx-card{border-radius:var(--kx-card-r)!important;box-shadow:var(--kx-depth);
  transition:translate .5s var(--kx-ease),box-shadow .5s var(--kx-ease),border-color .4s,background-color .4s}
.kx-card.kx-glass{-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25)}
.kx-card.kx-card:hover{translate:0 -3px;border-color:var(--kx-m35);
  box-shadow:var(--kx-depth),0 0 0 1px var(--kx-m20),0 30px 70px -26px var(--kx-m35)}
.kx-card.kx-nested.kx-nested{box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.kx-card.kx-nested:hover{translate:none}

.kx-fx{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;overflow:hidden}
.kx-fx>*{position:absolute;display:block}
/* gradient kenarlık */
.kx-fx .bd{inset:0;border-radius:inherit;padding:1px;opacity:.55;transition:opacity .45s;
  background:linear-gradient(150deg,var(--kx-m60),transparent 34%,transparent 66%,var(--kx-c60));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.kx-card:hover>.kx-fx .bd{opacity:1}
/* cam parlaması (üst-sol) */
.kx-fx .sh{inset:0;background:linear-gradient(128deg,rgba(255,255,255,.075),rgba(255,255,255,0) 32%);mix-blend-mode:screen;opacity:.9}
/* imleç spotu */
.kx-fx .sp{inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),var(--kx-m20),var(--kx-c06) 45%,transparent 70%)}
.kx-card:hover>.kx-fx .sp{opacity:1}
/* HUD köşe parantezleri */
.kx-fx .c{width:15px;height:15px;border:0 solid var(--kx-sub);opacity:.75;transition:width .45s var(--kx-ease),height .45s var(--kx-ease),opacity .3s,filter .3s}
.kx-fx .c.tl{left:9px;top:9px;border-width:2px 0 0 2px}
.kx-fx .c.br{right:9px;bottom:9px;border-width:0 2px 2px 0;border-color:var(--kx-main);filter:brightness(1.4)}
.kx-card:hover>.kx-fx .c{width:26px;height:26px;opacity:1;filter:drop-shadow(0 0 6px var(--kx-sub))}
/* sağ üst: teknik işaret çizgileri */
.kx-fx .tk{right:14px;top:11px;width:30px;height:5px;opacity:.55;
  background:linear-gradient(90deg,var(--kx-sub) 0 5px,transparent 5px 9px,var(--kx-main) 9px 14px,transparent 14px 18px,var(--kx-m60) 18px 30px);
  transition:width .45s var(--kx-ease),opacity .3s}
.kx-card:hover>.kx-fx .tk{width:46px;opacity:1}
/* üst kenarda hover tarama ışığı */
.kx-fx .ln{left:0;top:0;height:2px;width:38%;transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,var(--kx-sub),transparent);box-shadow:0 0 14px var(--kx-sub)}
.kx-card:hover>.kx-fx .ln{animation:kx-edge 1.1s var(--kx-ease)}
.kx-card.kx-nested>.kx-fx .c,.kx-card.kx-nested>.kx-fx .tk{display:none}

/* katman plakası (overflow'u görünür kartlarda 2. yüzey) */
.kx-card.kx-stack:before{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-1;border:1px solid var(--kx-m20);border-radius:var(--kx-card-r);
  background:repeating-linear-gradient(135deg,var(--kx-m06) 0 2px,transparent 2px 8px);opacity:0;transition:opacity .45s,inset .45s var(--kx-ease)}
.kx-card.kx-stack:hover:before{opacity:1;inset:10px -10px -10px 10px}

/* border-beam (Magic UI) — öne çıkan yüzeyler */
.kx-beamborder{position:absolute;inset:0;border-radius:inherit;padding:1.5px;z-index:4;pointer-events:none;
  background:conic-gradient(from var(--kx-a),transparent 0 62%,var(--kx-sub) 80%,var(--kx-main) 92%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:kx-radar 7s linear infinite;filter:drop-shadow(0 0 6px var(--kx-c35))}

/* ---------- 5. Başlıklar, etiketler, bağlantılar --------------------------- */
body.kx-on .eyebrow{padding:6px 16px 6px 12px;gap:10px;border-left:2px solid var(--kx-sub);
  background:linear-gradient(90deg,var(--kx-c12),transparent);clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%)}
body.kx-on .eyebrow:before{width:6px;height:6px;flex:none;background:var(--kx-sub);opacity:1;transform:rotate(45deg);box-shadow:0 0 10px var(--kx-sub)}
.eco-course .eyebrow,.btn .eyebrow{clip-path:none;background:none;border:0;padding:0}

body.kx-on .section-heading{position:relative;padding-bottom:26px}
body.kx-on .section-heading:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:
    linear-gradient(var(--kx-sub),var(--kx-sub)) 0 0/64px 3px no-repeat,
    linear-gradient(var(--kx-main),var(--kx-main)) 70px 0/18px 3px no-repeat,
    linear-gradient(90deg,var(--line2,rgba(160,175,255,.22)),transparent 75%) 0 1px/100% 1px no-repeat;
  filter:drop-shadow(0 0 6px var(--kx-c35))}

.link-more{position:relative;transition:letter-spacing .4s var(--kx-ease),color .3s}
.link-more:hover{letter-spacing:.6px}
.link-more i{transition:transform .35s var(--kx-ease)}
.link-more:hover i{transform:translateX(5px)}

/* ---------- 6. Butonlar ---------------------------------------------------- */
.btn.kx-btn{border-radius:5px 15px 5px 15px;overflow:hidden}
.btn.kx-btn.btn-small{border-radius:4px 11px 4px 11px}
.kx-shine{position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.34) 48%,rgba(255,255,255,.08) 52%,transparent 66%);
  transform:translateX(-130%) skewX(-12deg);transition:none}
.btn.kx-btn:hover .kx-shine{transform:translateX(130%) skewX(-12deg);transition:transform .8s var(--kx-ease)}
.btn.kx-btn:active{transform:scale(.97)}
.btn.kx-btn.btn-primary:hover{box-shadow:0 14px 44px var(--kx-m60),0 0 0 1px var(--kx-c35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn.kx-btn.btn-ghost:hover{border-color:var(--kx-sub);box-shadow:0 0 0 1px var(--kx-c20),0 10px 34px -12px var(--kx-c35)}
.btn .fa-arrow-right,.btn .fa-arrow-up-right-from-square{transition:transform .35s var(--kx-ease)}
.btn:hover .fa-arrow-right{transform:translateX(5px)}
.btn:hover .fa-arrow-up-right-from-square{transform:translate(3px,-3px)}

/* ---------- 7. Üst menü / alt bilgi / formlar / tablolar -------------------- */
.kx-hl{position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--kx-m35) 18%,var(--kx-c35) 50%,var(--kx-m35) 82%,transparent)}
.kx-hl:after{content:"";position:absolute;left:0;top:0;width:180px;height:1px;background:linear-gradient(90deg,transparent,var(--kx-sub),#fff,transparent);
  box-shadow:0 0 12px var(--kx-sub);animation:kx-run 7s linear infinite}
.site-header.scrolled .kx-hl{height:2px;box-shadow:0 6px 26px -4px var(--kx-m35)}
.main-nav>a,.nav-group-trigger{transition:color .3s,text-shadow .3s}
.main-nav>a:hover,.nav-group-trigger:hover{text-shadow:0 0 16px var(--kx-c60)}
.nav-dropdown-menu{-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border-radius:4px 16px 4px 16px!important}

.site-footer.kx-host{isolation:isolate}
.kx-sec--footer .kx-floor2{left:-20%;right:-20%;bottom:-6%;height:70%;
  background:
    linear-gradient(var(--kx-m20) 1px,transparent 1px) 0 0/100% 48px,
    linear-gradient(90deg,var(--kx-m20) 1px,transparent 1px) 0 0/64px 100%;
  transform:perspective(420px) rotateX(62deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(0deg,#000 8%,transparent 85%);mask-image:linear-gradient(0deg,#000 8%,transparent 85%);opacity:.7}
.kx-circuit{left:50%;top:0;transform:translateX(-50%);width:min(var(--max,1280px),calc(100vw - 44px));height:34px;color:var(--kx-m35);overflow:visible}
.kx-circuit *{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.kx-circuit .n{fill:var(--kx-sub);stroke:none;filter:drop-shadow(0 0 5px var(--kx-sub))}
.footer-column h2{position:relative;padding-left:16px}
.footer-column h2:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3px;border:1px solid var(--kx-sub);transform:rotate(45deg);box-shadow:0 0 8px var(--kx-c60)}
.footer-column a{transition:transform .3s var(--kx-ease),color .3s}
.footer-column a:hover{transform:translateX(6px)}
.footer-socials a{border-radius:4px 14px 4px 14px!important;transition:transform .35s var(--kx-ease),box-shadow .35s,border-color .3s}
.footer-socials a:hover{transform:translateY(-4px) rotate(-4deg);border-color:var(--kx-sub);box-shadow:0 12px 30px -8px var(--kx-c60)}
.footer-bottom{position:relative}
.footer-bottom:before{content:"";position:absolute;left:0;top:-1px;width:120px;height:2px;background:linear-gradient(90deg,var(--kx-sub),transparent);box-shadow:0 0 12px var(--kx-sub)}

body.kx-on .form-control,body.kx-on input[type=text],body.kx-on input[type=email],body.kx-on input[type=password],body.kx-on input[type=search],body.kx-on select,body.kx-on textarea{
  border-radius:4px 12px 4px 12px;transition:border-color .3s,box-shadow .4s var(--kx-ease),background-color .3s}
body.kx-on .form-control:focus,body.kx-on input:focus,body.kx-on select:focus,body.kx-on textarea:focus{outline:none;border-color:var(--kx-sub);
  box-shadow:0 0 0 1px var(--kx-c35),0 0 0 4px var(--kx-c12),0 12px 34px -14px var(--kx-c35)}

body.kx-on table{border-collapse:separate;border-spacing:0}
body.kx-on thead th{background:linear-gradient(180deg,var(--kx-m12),transparent);border-bottom:1px solid var(--kx-m35)!important}
body.kx-on tbody tr{transition:background .3s}
body.kx-on tbody tr:hover{background:linear-gradient(90deg,var(--kx-c12),transparent 70%)}
body.kx-on tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--kx-sub)}

/* ---------- 8. Özel yerleşim iyileştirmeleri ------------------------------- */
.cta.kx-host{isolation:isolate}
.cta .kx-orb{filter:blur(80px)}
.hv-card.kx-card.kx-card{box-shadow:var(--kx-depth),0 40px 90px rgba(0,0,0,.6)}
.status-page{position:relative;isolation:isolate}
.live-dot{animation:kx-live 1.6s ease-in-out infinite}
.pill{transition:box-shadow .3s,border-color .3s}
.pill:hover{box-shadow:0 0 18px -2px var(--kx-c35)}

/* ---------- 9. Yönetim paneli (daha sakin varyant) ------------------------- */
/* Sidebar yüzünden 100vw katmanlar sağa taşıyordu: admin'de katmanlar host genişliğine bağlanır */
body.kx-admin .kx-sec,body.kx-admin .kx-hero{left:0;width:100%;transform:none}
body.kx-admin .admin-main,body.kx-admin .admin-content{overflow-x:clip}
body.kx-admin .kx-top,body.kx-admin .kx-circuit{width:calc(100% - 44px)}
body.kx-admin .kx-plus.a,body.kx-admin .kx-plus.c{left:8px}
body.kx-admin .kx-plus.b,body.kx-admin .kx-plus.d{left:auto;right:8px}
body.kx-admin .kx-vrule{left:6px}
body.kx-admin .kx-beam{opacity:.3}
body.kx-admin .kx-floor{opacity:.28}
body.kx-admin .kx-cell,body.kx-admin .kx-spot{display:none}
body.kx-admin .kx-card.kx-card{--kx-card-r:4px 16px 4px 16px;border-radius:var(--kx-card-r)!important}
body.kx-admin .kx-card.kx-card:hover{translate:none}
body.kx-admin .kx-fx .c{width:12px;height:12px}
body.kx-admin .kx-card:hover>.kx-fx .c{width:18px;height:18px}
body.kx-admin .admin-sidebar:after{content:"";position:absolute;top:0;right:-1px;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--kx-m60) 20%,var(--kx-c60) 60%,transparent)}
body.kx-admin .admin-nav-link{transition:background .3s,transform .3s var(--kx-ease),box-shadow .3s}
body.kx-admin .admin-nav-link:hover{transform:translateX(3px)}
body.kx-admin .admin-nav-link.is-active{box-shadow:inset 3px 0 0 var(--kx-sub),0 0 30px -10px var(--kx-c35)}
body.kx-admin .admin-page-heading{position:relative;padding-bottom:20px}
body.kx-admin .admin-page-heading:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(var(--kx-sub),var(--kx-sub)) 0 0/56px 3px no-repeat,linear-gradient(var(--kx-main),var(--kx-main)) 62px 0/16px 3px no-repeat,linear-gradient(90deg,var(--line2,rgba(160,175,255,.22)),transparent 75%) 0 1px/100% 1px no-repeat}
body.kx-admin .admin-btn,body.kx-admin .admin-primary-button,body.kx-admin .admin-secondary-button,body.kx-admin .admin-btn-primary{border-radius:4px 11px 4px 11px}

/* ---------- 10. Animasyonlar ----------------------------------------------- */
@keyframes kx-spin{to{transform:rotate(360deg)}}
@keyframes kx-radar{to{--kx-a:360deg}}
@keyframes kx-sway{from{transform:rotate(var(--r0))}to{transform:rotate(var(--r1))}}
@keyframes kx-breathe{0%,100%{opacity:.34}50%{opacity:.58}}
@keyframes kx-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes kx-cell{0%,100%{opacity:0}45%,55%{opacity:.5}}
@keyframes kx-run{from{transform:translateX(-200px)}to{transform:translateX(100vw)}}
@keyframes kx-edge{to{transform:translateX(330%)}}
@keyframes kx-live{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live,#ff3b5c) 60%,transparent)}50%{box-shadow:0 0 0 7px transparent}}

/* ==========================================================================
   v2 · DERİNLİK KATMANI
   Hero HUD yüzeyleri · otomatik yüzeyler · ilk giriş · eğim · detay bileşenleri
   ========================================================================== */

/* ---------- 10b. Hero yüzeyleri (kx-hsl) ---------------------------------- */
.kx-hs{isolation:isolate}
.kx-hsl{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.kx-hsl>*{position:absolute;display:block}
.kx-hsl .g{inset:0;opacity:.7;
  background:linear-gradient(var(--kx-m12) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,var(--kx-m12) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 88% 30%,#000,transparent 72%);mask-image:radial-gradient(ellipse at 88% 30%,#000,transparent 72%)}
.kx-hsl .st{right:0;top:0;bottom:0;width:38%;opacity:.55;
  background:repeating-linear-gradient(115deg,var(--kx-c12) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(270deg,#000,transparent);mask-image:linear-gradient(270deg,#000,transparent)}
.kx-hsl .sc{left:0;right:0;top:0;height:84px;translate:0 -100%;
  background:linear-gradient(180deg,transparent,var(--kx-c06) 60%,var(--kx-c20));border-bottom:1px solid var(--kx-c20);
  animation:kx-scan 9s linear infinite}
.kx-hsl .hx{right:3%;top:50%;width:min(300px,32%);aspect-ratio:1;margin-top:calc(min(300px,32%) / -2);color:var(--kx-m35);opacity:.9}
.kx-hsl .hx svg{width:100%;height:100%;overflow:visible;animation:kx-spin 110s linear infinite}
.kx-hsl .hx svg *{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke}
.kx-hsl .hx .fill{fill:currentColor;fill-opacity:.07;stroke:none}
.kx-hsl .bk{width:22px;height:22px;border:0 solid var(--kx-sub);opacity:.8}
.kx-hsl .bk.a{left:12px;top:12px;border-width:2px 0 0 2px}
.kx-hsl .bk.b{right:12px;top:12px;border-width:2px 2px 0 0}
.kx-hsl .bk.c{left:12px;bottom:12px;border-width:0 0 2px 2px;border-color:var(--kx-main)}
.kx-hsl .bk.d{right:12px;bottom:12px;border-width:0 2px 2px 0;border-color:var(--kx-main)}

/* ---------- 10c. Otomatik yüzeyler (kx-auto) ------------------------------ */
.kx-card.kx-auto:not(.kx-nested){--kx-card-r:5px 18px 5px 18px}
.kx-card.kx-auto.kx-nested{--kx-card-r:4px 12px 4px 12px}

/* ---------- 10d. Kaydırmayla ilk giriş + eğim ------------------------------ */
.kx-card.kx-rv{opacity:0;translate:0 18px;scale:.985}
.kx-card.kx-rv.kx-rv-in{opacity:1;translate:0 0;scale:1;
  transition:opacity .75s var(--kx-ease) var(--rv-d,0ms),translate .85s var(--kx-ease) var(--rv-d,0ms),scale .85s var(--kx-ease) var(--rv-d,0ms),box-shadow .5s var(--kx-ease),border-color .4s}
.kx-card.kx-tilt{transition:transform .5s var(--kx-ease),translate .5s var(--kx-ease),box-shadow .5s var(--kx-ease),border-color .4s,background-color .4s}
.kx-tilt{transform:perspective(1100px) rotateX(var(--ty,0deg)) rotateY(var(--tx,0deg));transition:transform .5s var(--kx-ease);will-change:transform}

/* ---------- 10e. Detay bileşenleri ---------------------------------------- */
body.kx-on ::selection{background:var(--kx-m60);color:#fff}
body.kx-on{scrollbar-color:var(--kx-m35) transparent;scrollbar-width:thin}
body.kx-on ::-webkit-scrollbar{width:10px;height:10px}
body.kx-on ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--kx-m35),var(--kx-c35));border-radius:2px 8px 2px 8px;border:2px solid transparent;background-clip:padding-box}
body.kx-on ::-webkit-scrollbar-track{background:transparent}
body.kx-on :focus-visible{outline:2px solid var(--kx-sub);outline-offset:3px;box-shadow:0 0 0 5px var(--kx-c12)}

body.kx-on .pill,body.kx-on .chip,body.kx-on .tag,body.kx-on .badge{border-radius:3px 10px 3px 10px}
body.kx-on hr{border:0;height:1px;background:linear-gradient(90deg,transparent,var(--kx-m35) 25%,var(--kx-c35) 75%,transparent);overflow:visible}

body.kx-on .flash{position:relative;border-radius:4px 14px 4px 14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8),inset 3px 0 0 currentColor}
body.kx-on .flash:before{content:"";position:absolute;right:14px;top:0;width:42px;height:2px;background:currentColor;box-shadow:0 0 12px currentColor;opacity:.8}

body.kx-on .panel-head{position:relative;padding-bottom:14px;
  background:linear-gradient(90deg,var(--kx-m60),var(--kx-m12) 38%,transparent 80%) 0 100%/100% 1px no-repeat}
body.kx-on .panel-head:after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:3px;background:var(--kx-sub);box-shadow:0 0 12px var(--kx-sub)}

body.kx-on .stat strong,body.kx-on .dashboard-tile strong,body.kx-on .t-stat b,body.kx-on .mc-stat b,body.kx-on .admin-heading-stat strong{text-shadow:0 0 26px var(--kx-m35)}

body.kx-on .settings-nav-item{position:relative;transition:transform .35s var(--kx-ease),background .3s,box-shadow .3s,color .3s}
body.kx-on .settings-nav-item:hover{transform:translateX(5px)}
body.kx-on .settings-nav-item.is-active,body.kx-on .settings-nav-item.active{box-shadow:inset 3px 0 0 var(--kx-sub),0 0 34px -12px var(--kx-c35)}

body.kx-on .profile-avatar-wrap{outline:1px solid var(--kx-m35);outline-offset:7px;box-shadow:0 0 54px -10px var(--kx-m35)}
body.kx-on .nav-avatar{box-shadow:0 0 0 2px var(--kx-m35),0 0 18px -2px var(--kx-c35)}

body.kx-on .mobile-bottom-nav{-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 -1px 0 var(--kx-m35),0 -20px 40px -24px var(--kx-m35)}
body.kx-on .mobile-bottom-nav a{transition:transform .3s var(--kx-ease),color .3s}
body.kx-on .mobile-bottom-nav a:active{transform:scale(.92)}

body.kx-on dialog,body.kx-on .modal-card{border-radius:5px 22px 5px 22px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--kx-depth),0 0 0 1px var(--kx-m20)}
body.kx-on dialog::backdrop{background:radial-gradient(circle at 50% 40%,var(--kx-m12),rgba(2,3,8,.82));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

body.kx-on details>summary{cursor:pointer;transition:color .3s,text-shadow .3s}
body.kx-on details>summary:hover{text-shadow:0 0 16px var(--kx-c60)}
body.kx-on details[open]{border-color:var(--kx-m35)}

body.kx-on .table-wrap,body.kx-on .admin-table-wrap{overflow:auto}
body.kx-on .table-wrap.kx-card:hover,body.kx-on .admin-table-wrap.kx-card:hover{translate:none}

/* kart içi görseller: yavaş yaklaşma + tarama çizgisi */
.kx-card:not(.kx-nested)>a>img,.kx-card:not(.kx-nested)>img{transition:transform .9s var(--kx-ease),filter .5s}
.kx-card:hover>a>img,.kx-card:hover>img{transform:scale(1.035);filter:saturate(1.15) contrast(1.04)}

/* bağlantı alt çizgisi (metin içi) */
body.kx-on .page-wrap p a:not(.btn),body.kx-on .legal-content a{background:linear-gradient(var(--kx-sub),var(--kx-sub)) 0 100%/0 1px no-repeat;transition:background-size .45s var(--kx-ease)}
body.kx-on .page-wrap p a:not(.btn):hover,body.kx-on .legal-content a:hover{background-size:100% 1px}

@keyframes kx-scan{from{translate:0 -100%}to{translate:0 900%}}

/* ---------- 11. Duyarlılık, erişilebilirlik, performans -------------------- */
@media (max-width:900px){
  .kx-hsl .hx{opacity:.5;right:-8%}
  .kx-hsl .sc{display:none}
  .kx-beam.b2,.kx-beam.b3,.kx-shape.mid,.kx-vrule,.kx-plus{display:none}
  .kx-floor{opacity:.35}
  .kx-card.kx-glass{-webkit-backdrop-filter:none;backdrop-filter:none}
  .kx-reticle,.kx-sweep{right:-38vw;opacity:.7}
  .kx-grid{width:80vw}
  .kx-ghost{font-size:clamp(90px,26vw,150px)}
}
@media (max-width:560px){
  .kx-orb{width:340px;height:340px}
  .kx-shape{opacity:.7}
  .kx-card.kx-card{--kx-card-r:4px 16px 4px 16px}
  .kx-fx .tk{display:none}
}
@media (hover:none){
  .kx-tilt{transform:none}
  .kx-card.kx-card:hover{translate:none}
  .kx-fx .sp{display:none}
}
body.kx-paused .kx-hsl *,body.kx-paused .kx-stage *,body.kx-paused .kx-sec *,body.kx-paused .kx-hero *,body.kx-paused .kx-beamborder{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .kx-hsl *,.kx-tilt{animation:none!important}
  .kx-card.kx-rv{opacity:1;translate:none;scale:1}
  .kx-stage *,.kx-sec *,.kx-hero *,.kx-beamborder,.kx-hl:after,.live-dot,.kx-top b{animation:none!important}
  .kx-cell{display:none}
  .kx-card.kx-card,.kx-card.kx-card:hover{translate:none;transition:none}
  .kx-shine{display:none}
}
@media (forced-colors:active){.kx-stage,.kx-sec,.kx-hero,.kx-ph,.kx-hsl,.kx-fx,.kx-beamborder{display:none}}
@media print{.kx-stage,.kx-sec,.kx-hero,.kx-ph,.kx-hsl,.kx-fx,.kx-beamborder,.kx-hl{display:none!important}}