/* =====================================================================
   BioLink — Animasyonlu arka plan motorları + gelişmiş buton stilleri
   Görsel dosyası yok: her şey kodla çizilir. Renkler tema ayarından
   CSS değişkeni olarak gelir:
     --a1 arka plan · --a2 arka plan 2 · --a3 vurgu 1 · --a4 vurgu 2
     --tx yazı · --bc buton (şeffaflıklı) · --bcs buton (düz) · --bt buton yazısı
     --vt vurgulu buton yazısı
   Boyutlar konteyner birimleriyle (cqw/cqh/cqmax) yazıldı; böylece aynı
   motor hem tam ekranda hem de küçük şablon önizlemelerinde orantılı çalışır.
   ===================================================================== */

.bga{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;container-type:size;background:var(--a1)}
.bga.bga-mini{position:absolute;border-radius:inherit}
.bga>*{position:absolute;display:block}

/* ---------- BUHAR: yükselen sıcak buhar bulutları ---------- */
.bga-buhar{background:radial-gradient(120% 80% at 50% 110%,var(--a2) 0%,var(--a1) 62%)}
.bga-buhar .doku{inset:0;opacity:.35;background-image:radial-gradient(color-mix(in srgb,var(--tx) 8%,transparent) 1px,transparent 1.4px);background-size:5px 5px}
.bga-buhar i{bottom:-30cqmax;width:42cqmax;height:42cqmax;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--a3) 55%,transparent) 0%,transparent 65%);
  filter:blur(3cqmax);opacity:0;animation:bga-buhar 16s ease-in-out infinite}
.bga-buhar i:nth-of-type(1){left:-12cqmax}
.bga-buhar i:nth-of-type(2){left:22%;animation-delay:-4s;animation-duration:19s}
.bga-buhar i:nth-of-type(3){right:-14cqmax;animation-delay:-8s}
.bga-buhar i:nth-of-type(4){left:40%;width:30cqmax;height:30cqmax;animation-delay:-12s;animation-duration:21s}
@keyframes bga-buhar{0%{transform:translate3d(0,0,0) scale(.7);opacity:0}20%{opacity:.55}60%{opacity:.35}100%{transform:translate3d(6cqmax,-120cqh,0) scale(1.3);opacity:0}}

/* ---------- AURORA: yavaşça dönen renk bulutları + ışıltı ---------- */
.bga-aurora i{width:70cqmax;height:70cqmax;border-radius:50%;filter:blur(6cqmax);opacity:.85;mix-blend-mode:multiply}
.bga-koyu.bga-aurora i{mix-blend-mode:screen;opacity:.5}
.bga-acik.bga-aurora i{opacity:.42}
.bga-aurora i:nth-of-type(1){background:var(--a2);top:-30cqmax;left:-25cqmax;animation:bga-a1 18s ease-in-out infinite alternate}
.bga-aurora i:nth-of-type(2){background:var(--a3);top:20cqh;right:-35cqmax;animation:bga-a2 22s ease-in-out infinite alternate}
.bga-aurora i:nth-of-type(3){background:var(--a4);bottom:-35cqmax;left:-10cqmax;animation:bga-a3 20s ease-in-out infinite alternate}
@keyframes bga-a1{to{transform:translate(18cqmax,22cqmax) scale(1.15)}}
@keyframes bga-a2{to{transform:translate(-22cqmax,-10cqmax) scale(.9)}}
@keyframes bga-a3{to{transform:translate(14cqmax,-18cqmax) scale(1.1)}}
.bga-aurora b{width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px #fff;opacity:0;animation:bga-isilti 4s ease-in-out infinite}
.bga-aurora b:nth-of-type(1){top:18%;left:14%}
.bga-aurora b:nth-of-type(2){top:32%;left:82%;animation-delay:-1.2s}
.bga-aurora b:nth-of-type(3){top:64%;left:9%;animation-delay:-2.1s}
.bga-aurora b:nth-of-type(4){top:78%;left:70%;animation-delay:-3s}
.bga-aurora b:nth-of-type(5){top:46%;left:50%;animation-delay:-.6s}
.bga-aurora b:nth-of-type(6){top:8%;left:62%;animation-delay:-2.6s}
@keyframes bga-isilti{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:.9;transform:scale(1)}}

/* ---------- NEON: dönen renk çemberi + tarama çizgileri ---------- */
.bga-neon .don{left:50%;top:38%;width:150cqmax;height:150cqmax;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,var(--a2),var(--a3),var(--a4),var(--a2));filter:blur(7cqmax);opacity:.42;
  animation:bga-don 14s linear infinite}
.bga-neon .tara{inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 40%,transparent 30%,color-mix(in srgb,var(--a1) 85%,transparent) 85%)}
@keyframes bga-don{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- EKOLAYZIR: ritimle zıplayan çubuklar + nabız halkaları ---------- */
.bga-ekolayzir{background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--a2) 16%,var(--a1)),var(--a1) 70%)}
.bga-ekolayzir .cubuk{left:0;right:0;bottom:0;height:42cqh;display:flex;align-items:flex-end;gap:1.2cqw;padding:0 1.5cqw;
  -webkit-mask-image:linear-gradient(to top,#000 30%,transparent);mask-image:linear-gradient(to top,#000 30%,transparent)}
.bga-ekolayzir .cubuk i{position:relative;display:block;flex:1;height:100%;border-radius:4px 4px 0 0;transform-origin:bottom;
  background:linear-gradient(to top,var(--a2),var(--a3));opacity:.75;animation:bga-zipla var(--s,1s) ease-in-out infinite alternate}
@keyframes bga-zipla{0%{transform:scaleY(var(--d,.15))}100%{transform:scaleY(var(--y,.8))}}
.bga-ekolayzir .halka{left:50%;top:min(94px,12cqh);width:min(150px,30cqw);aspect-ratio:1;margin:calc(min(150px,30cqw) / -2) 0 0 calc(min(150px,30cqw) / -2);
  border-radius:50%;border:2px solid var(--a2);opacity:0;animation:bga-halka 2.4s ease-out infinite}
.bga-ekolayzir .halka:nth-of-type(2){animation-delay:.8s}
.bga-ekolayzir .halka:nth-of-type(3){animation-delay:1.6s}
@keyframes bga-halka{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* ---------- IZGARA: ufka akan perspektif ızgara + ışık ---------- */
.bga-izgara{background:linear-gradient(180deg,var(--a1) 0%,var(--a2) 55%,var(--a1) 100%)}
.bga-izgara .isik{top:-20cqh;left:50%;width:60cqmax;height:60cqmax;margin-left:-30cqmax;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--a4) 20%,transparent),transparent 60%);animation:bga-soluk 8s ease-in-out infinite alternate}
@keyframes bga-soluk{to{transform:scale(1.2);opacity:.6}}
.bga-izgara .ufuk{left:-10%;right:-10%;top:42%;height:2px;background:linear-gradient(90deg,transparent,var(--a3),transparent);
  box-shadow:0 0 5cqh 1.5cqh color-mix(in srgb,var(--a3) 25%,transparent)}
.bga-izgara .zemin{left:-50%;right:-50%;top:42%;height:120%;transform-origin:top;transform:perspective(38cqh) rotateX(62deg);
  background-image:linear-gradient(color-mix(in srgb,var(--a3) 34%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--a3) 34%,transparent) 1px,transparent 1px);
  background-size:6cqh 6cqh;animation:bga-akis 3s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 60%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 60%,transparent)}
@keyframes bga-akis{to{background-position:0 6cqh}}

/* ---------- SERIT: akan çapraz şeritler + hız çizgileri ---------- */
.bga-serit .serit{inset:-50%;opacity:.16;background:repeating-linear-gradient(-45deg,var(--a2) 0 18px,transparent 18px 64px);animation:bga-serit 6s linear infinite}
@keyframes bga-serit{to{transform:translateX(90.51px)}}
.bga-serit .vin{inset:0;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--a1) 20%,transparent),var(--a1) 75%)}
.bga-serit i{height:2px;width:30cqw;right:-30cqw;background:linear-gradient(90deg,transparent,var(--a2));opacity:.7;animation:bga-hiz 2.2s linear infinite}
.bga-serit i:nth-of-type(1){top:22%}
.bga-serit i:nth-of-type(2){top:48%;animation-delay:-.7s;animation-duration:1.8s}
.bga-serit i:nth-of-type(3){top:71%;animation-delay:-1.4s}
.bga-serit i:nth-of-type(4){top:86%;animation-delay:-.3s;animation-duration:2.6s}
@keyframes bga-hiz{to{transform:translateX(-160cqw)}}

/* ---------- DALGA: alttan kayan katmanlı dalgalar + kabarcıklar ---------- */
.bga-dalga{background:linear-gradient(180deg,color-mix(in srgb,var(--a1) 70%,#fff) 0%,var(--a1) 55%,color-mix(in srgb,var(--a1) 85%,var(--a2)) 100%)}
.bga-koyu.bga-dalga{background:linear-gradient(180deg,var(--a1) 0%,var(--a1) 50%,color-mix(in srgb,var(--a1) 75%,var(--a2)) 100%)}
.bga-dalga svg{left:0;bottom:0;width:200%;height:38cqh}
.bga-dalga .d1{fill:var(--a2);opacity:.55;animation:bga-kay 16s linear infinite}
.bga-dalga .d2{fill:var(--a3);opacity:.35;bottom:-3cqh;animation:bga-kay 11s linear infinite reverse}
.bga-dalga .d3{fill:var(--a4);opacity:.22;bottom:-7cqh;animation:bga-kay 22s linear infinite}
@keyframes bga-kay{to{transform:translateX(-50%)}}
.bga-dalga i{bottom:-40px;border-radius:50%;border:1.5px solid var(--a3);opacity:.2;animation:bga-kabar linear infinite}
.bga-dalga i:nth-of-type(1){left:12%;width:22px;height:22px;animation-duration:14s}
.bga-dalga i:nth-of-type(2){left:34%;width:12px;height:12px;animation-duration:11s;animation-delay:-4s}
.bga-dalga i:nth-of-type(3){left:68%;width:28px;height:28px;animation-duration:17s;animation-delay:-8s}
.bga-dalga i:nth-of-type(4){left:86%;width:14px;height:14px;animation-duration:12s;animation-delay:-2s}
@keyframes bga-kabar{to{transform:translate(20px,-110cqh)}}

/* ---------- PARILTI: süzülen ışık topları (bokeh) + yıldız pırıltısı ---------- */
.bga-parilti{background:radial-gradient(130% 90% at 50% 0%,var(--a2) 0%,var(--a1) 70%)}
.bga-parilti .isik{inset:-20%;background:conic-gradient(from 200deg at 50% 0%,transparent,color-mix(in srgb,var(--a3) 14%,transparent),transparent 30%);
  animation:bga-perde 16s ease-in-out infinite alternate}
@keyframes bga-perde{to{transform:rotate(14deg)}}
.bga-parilti i{border-radius:50%;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--a3) 42%,transparent) 0%,color-mix(in srgb,var(--a3) 22%,transparent) 45%,transparent 70%);
  filter:blur(2px);animation:bga-bokeh 14s ease-in-out infinite}
.bga-parilti i:nth-of-type(1){left:6%;top:62%;width:14cqmin;height:14cqmin}
.bga-parilti i:nth-of-type(2){left:72%;top:18%;width:20cqmin;height:20cqmin;animation-delay:-3s;animation-duration:17s}
.bga-parilti i:nth-of-type(3){left:40%;top:78%;width:9cqmin;height:9cqmin;animation-delay:-6s}
.bga-parilti i:nth-of-type(4){left:82%;top:66%;width:12cqmin;height:12cqmin;animation-delay:-9s;animation-duration:19s}
.bga-parilti i:nth-of-type(5){left:18%;top:24%;width:10cqmin;height:10cqmin;animation-delay:-11s}
.bga-parilti i:nth-of-type(6){left:55%;top:44%;width:24cqmin;height:24cqmin;animation-delay:-5s;animation-duration:21s}
.bga-parilti i:nth-of-type(7){left:-4%;top:6%;width:18cqmin;height:18cqmin;animation-delay:-13s;animation-duration:18s}
.bga-parilti i:nth-of-type(8){left:88%;top:88%;width:8cqmin;height:8cqmin;animation-delay:-7s}
@keyframes bga-bokeh{0%{transform:translateY(8cqh) scale(.8);opacity:0}30%{opacity:.6}70%{opacity:.4}100%{transform:translateY(-14cqh) scale(1.1);opacity:0}}
.bga-parilti b{width:12px;height:12px;background:var(--a4);opacity:0;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:bga-yildiz 3.6s ease-in-out infinite}
.bga-parilti b:nth-of-type(1){top:12%;left:24%}
.bga-parilti b:nth-of-type(2){top:28%;left:86%;animation-delay:-1s;width:9px;height:9px}
.bga-parilti b:nth-of-type(3){top:52%;left:10%;animation-delay:-2.2s}
.bga-parilti b:nth-of-type(4){top:70%;left:64%;animation-delay:-.5s;width:8px;height:8px}
.bga-parilti b:nth-of-type(5){top:40%;left:46%;animation-delay:-2.8s;width:7px;height:7px}
.bga-parilti b:nth-of-type(6){top:86%;left:30%;animation-delay:-1.6s}
.bga-parilti b:nth-of-type(7){top:6%;left:66%;animation-delay:-3.2s;width:9px;height:9px}
@keyframes bga-yildiz{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(45deg)}}

/* ---------- DEGRADE: akan renk geçişi + süzülen geometrik şekiller ---------- */
.bga-degrade .akis{inset:0;background:linear-gradient(-45deg,var(--a1),var(--a2),color-mix(in srgb,var(--a3) 40%,var(--a1)),var(--a1));background-size:400% 400%;animation:bga-degrade 18s ease infinite}
@keyframes bga-degrade{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.bga-degrade i{border:2px solid color-mix(in srgb,var(--tx) 28%,transparent);animation:bga-suzul 20s ease-in-out infinite alternate}
.bga-degrade i:nth-of-type(1){top:9%;left:8%;width:13cqmin;height:13cqmin;border-radius:50%}
.bga-degrade i:nth-of-type(2){top:16%;left:78%;width:11cqmin;height:11cqmin;border-radius:3px;animation-duration:24s}
.bga-degrade i:nth-of-type(3){top:52%;left:4%;width:20cqmin;height:7cqmin;border-radius:100px;animation-duration:26s}
.bga-degrade i:nth-of-type(4){top:64%;left:84%;width:9cqmin;height:9cqmin;border-radius:50%;animation-delay:-6s}
.bga-degrade i:nth-of-type(5){top:86%;left:22%;width:12cqmin;height:12cqmin;border-radius:3px;animation-delay:-10s}
.bga-degrade i:nth-of-type(6){top:38%;left:90%;width:6cqmin;height:6cqmin;border-radius:50%;background:color-mix(in srgb,var(--tx) 18%,transparent);border:0;animation-duration:16s}
@keyframes bga-suzul{to{transform:translate(4cqw,-6cqh) rotate(90deg)}}

/* ---------- AG: yavaşça süzülen bağlantı ağı + tarama ışığı ---------- */
.bga-ag{background:radial-gradient(120% 80% at 85% 0%,var(--a2) 0%,var(--a1) 60%)}
.bga-ag svg{left:-5%;top:-5%;width:110%;height:110%;animation:bga-ag 34s ease-in-out infinite alternate}
.bga-ag line{stroke:var(--a3);stroke-width:1;opacity:.2}
.bga-ag circle{fill:var(--a3);opacity:.55;animation:bga-nabiz 3.4s ease-in-out infinite}
.bga-ag circle.p{fill:var(--a4);opacity:.85}
@keyframes bga-ag{to{transform:translate(-3%,-4%) scale(1.06)}}
@keyframes bga-nabiz{50%{opacity:.15}}
.bga-ag .tarama{left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--a3) 9%,transparent),transparent);animation:bga-tarama 9s linear infinite}
@keyframes bga-tarama{to{transform:translateY(450%)}}

/* ---------- YILDIZ: yavaşça dönen gece göğü + kayan yıldızlar ---------- */
.bga-yildiz{background:radial-gradient(ellipse 140% 70% at 50% 110%,var(--a2) 0%,var(--a1) 65%)}
.bga-yildiz .gok{left:50%;top:50%;width:1px;height:1px;border-radius:50%;animation:bga-gok 240s linear infinite,bga-goz 5s ease-in-out infinite alternate}
.bga-yildiz .gok.k2{width:2px;height:2px;animation-duration:170s,7s}
@keyframes bga-gok{to{transform:rotate(360deg)}}
@keyframes bga-goz{to{opacity:.45}}
.bga-yildiz b{top:14%;left:72%;width:18cqw;height:1.5px;border-radius:2px;background:linear-gradient(90deg,var(--a4),transparent);opacity:0;animation:bga-kayan 8s ease-in infinite}
.bga-yildiz b:nth-of-type(2){top:34%;left:38%;animation-delay:-4s;animation-duration:11s}
@keyframes bga-kayan{0%,80%{opacity:0;transform:rotate(-35deg) translateX(0)}85%{opacity:1}100%{opacity:0;transform:rotate(-35deg) translateX(-45cqw)}}

/* ---------- KONFETİ: süzülerek düşen renkli kâğıtlar ---------- */
.bga-konfeti{background:linear-gradient(180deg,var(--a1) 0%,color-mix(in srgb,var(--a1) 78%,var(--a2)) 100%)}
.bga-konfeti i{top:-6cqh;width:max(6px,1.6cqmin);height:max(10px,2.6cqmin);border-radius:2px;opacity:.85;background:var(--a3);animation:bga-konfeti 10s linear infinite}
.bga-konfeti i:nth-of-type(3n+2){background:var(--a4)}
.bga-konfeti i:nth-of-type(3n){background:color-mix(in srgb,var(--a3) 50%,var(--a4))}
.bga-konfeti i:nth-of-type(4n){width:max(8px,2cqmin);height:max(8px,2cqmin);border-radius:50%}
.bga-konfeti i:nth-of-type(1){left:4%}
.bga-konfeti i:nth-of-type(2){left:12%;animation-delay:-6s;animation-duration:12s}
.bga-konfeti i:nth-of-type(3){left:21%;animation-delay:-2s;animation-duration:9s}
.bga-konfeti i:nth-of-type(4){left:29%;animation-delay:-8s}
.bga-konfeti i:nth-of-type(5){left:37%;animation-delay:-4s;animation-duration:13s}
.bga-konfeti i:nth-of-type(6){left:46%;animation-delay:-1s;animation-duration:11s}
.bga-konfeti i:nth-of-type(7){left:54%;animation-delay:-7s;animation-duration:9.5s}
.bga-konfeti i:nth-of-type(8){left:62%;animation-delay:-3s}
.bga-konfeti i:nth-of-type(9){left:70%;animation-delay:-9s;animation-duration:12.5s}
.bga-konfeti i:nth-of-type(10){left:78%;animation-delay:-5s;animation-duration:10.5s}
.bga-konfeti i:nth-of-type(11){left:86%;animation-delay:-2.5s;animation-duration:9s}
.bga-konfeti i:nth-of-type(12){left:94%;animation-delay:-7.5s;animation-duration:11.5s}
.bga-konfeti i:nth-of-type(13){left:16%;animation-delay:-11s;animation-duration:14s}
.bga-konfeti i:nth-of-type(14){left:66%;animation-delay:-12s;animation-duration:13.5s}
@keyframes bga-konfeti{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(3cqw,29cqh) rotate(140deg)}50%{transform:translate(-2cqw,58cqh) rotate(270deg)}75%{transform:translate(3cqw,87cqh) rotate(400deg)}100%{transform:translate(0,116cqh) rotate(540deg)}}

/* ---------- LAV: yükselip alçalan, şekil değiştiren lav lambası damlaları ---------- */
.bga-lav{background:linear-gradient(180deg,var(--a1),color-mix(in srgb,var(--a1) 75%,var(--a2)))}
.bga-lav i{border-radius:42% 58% 63% 37%/41% 44% 56% 59%;background:linear-gradient(160deg,var(--a3),color-mix(in srgb,var(--a3) 45%,var(--a2)));
  filter:blur(.5cqmax);opacity:.55;animation:bga-lav 18s ease-in-out infinite alternate,bga-sekil 9s ease-in-out infinite alternate}
.bga-acik.bga-lav i{opacity:.42}
.bga-lav i:nth-of-type(1){left:4%;bottom:-8%;width:36cqmin;height:36cqmin}
.bga-lav i:nth-of-type(2){right:4%;top:56%;width:26cqmin;height:28cqmin;background:linear-gradient(160deg,var(--a4),color-mix(in srgb,var(--a4) 45%,var(--a2)));animation-duration:22s,11s;animation-delay:-6s,-3s}
.bga-lav i:nth-of-type(3){left:26%;top:22%;width:20cqmin;height:21cqmin;animation-duration:16s,8s;animation-delay:-9s,-5s}
.bga-lav i:nth-of-type(4){right:18%;top:4%;width:15cqmin;height:16cqmin;background:linear-gradient(160deg,var(--a4),color-mix(in srgb,var(--a4) 45%,var(--a2)));animation-duration:20s,10s;animation-delay:-13s,-2s}
.bga-lav i:nth-of-type(5){left:58%;bottom:-14%;width:42cqmin;height:40cqmin;animation-duration:26s,12s;animation-delay:-4s,-7s}
@keyframes bga-lav{to{transform:translateY(-38cqh) scale(1.15)}}
@keyframes bga-sekil{to{border-radius:58% 42% 35% 65%/55% 62% 38% 45%}}

/* ---------- YAĞMUR: düşen ışık damlaları + ince ızgara (teknoloji) ---------- */
.bga-yagmur{background:radial-gradient(100% 70% at 50% 0%,color-mix(in srgb,var(--a2) 55%,var(--a1)),var(--a1) 70%)}
.bga-yagmur .izg{inset:0;opacity:.4;background-image:linear-gradient(color-mix(in srgb,var(--a3) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--a3) 12%,transparent) 1px,transparent 1px);background-size:5cqmin 5cqmin}
.bga-yagmur i{top:-40cqh;width:2px;height:var(--h,30cqh);border-radius:2px;background:linear-gradient(180deg,transparent,var(--a3));opacity:.7;animation:bga-yagmur var(--s,3s) linear infinite}
.bga-yagmur i::after{content:'';position:absolute;bottom:-2px;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--a4);box-shadow:0 0 10px 2px var(--a4)}
@keyframes bga-yagmur{to{transform:translateY(150cqh)}}

/* ---------- YÖRÜNGE: avatarın etrafında dönen yörüngeler ---------- */
.bga-yorunge{background:radial-gradient(circle at 50% 12%,color-mix(in srgb,var(--a2) 70%,var(--a1)) 0%,var(--a1) 60%)}
.bga-yorunge i{left:50%;top:min(94px,12cqh);aspect-ratio:1;border-radius:50%;translate:-50% -50%;
  border:1px dashed color-mix(in srgb,var(--a3) 45%,transparent);animation:bga-don2 40s linear infinite}
.bga-yorunge i::before{content:'';position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;
  background:var(--a4);box-shadow:0 0 12px 3px color-mix(in srgb,var(--a4) 55%,transparent)}
.bga-yorunge i:nth-of-type(1){width:34cqmin;animation-duration:26s}
.bga-yorunge i:nth-of-type(2){width:62cqmin;animation-duration:44s;animation-direction:reverse}
.bga-yorunge i:nth-of-type(2)::before{background:var(--a3);box-shadow:0 0 12px 3px color-mix(in srgb,var(--a3) 55%,transparent);width:7px;height:7px;margin-left:-3.5px;top:-3.5px}
.bga-yorunge i:nth-of-type(3){width:96cqmin;animation-duration:66s}
.bga-yorunge i:nth-of-type(4){width:136cqmin;animation-duration:90s;animation-direction:reverse;border-style:solid;border-color:color-mix(in srgb,var(--a3) 20%,transparent)}
.bga-yorunge i:nth-of-type(4)::before{width:6px;height:6px;margin-left:-3px;top:-3px}
@keyframes bga-don2{to{transform:rotate(360deg)}}
.bga-yorunge b{left:50%;top:min(94px,12cqh);width:30cqmin;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--a3) 30%,transparent),transparent 65%);animation:bga-soluk 5s ease-in-out infinite alternate}

/* =====================================================================
   Sayfa ortak düzenlemeleri (animasyonlu arka plan açıkken)
   ===================================================================== */
body.bga-on .avatar{background:linear-gradient(140deg,var(--a3),var(--a4));color:var(--vt);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--tx) 12%,transparent),0 18px 40px rgba(0,0,0,.3)}
body.bga-on .b-header{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:14px 0 0;color:color-mix(in srgb,var(--a3) 70%,var(--tx))}
body.bga-on .b-text.b-kart{text-align:left;padding:16px 18px;border-radius:18px;line-height:1.7;
  background:color-mix(in srgb,var(--tx) 7%,transparent);border:1px solid color-mix(in srgb,var(--tx) 14%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
body.bga-on .b-cd .u{background:color-mix(in srgb,var(--tx) 10%,transparent)}
body.bga-on .b-faq details{background:color-mix(in srgb,var(--tx) 8%,transparent);border:1px solid color-mix(in srgb,var(--tx) 12%,transparent)}
body.bga-on .b-timeline{border-left-color:color-mix(in srgb,var(--tx) 25%,transparent)}
body.bga-on .b-timeline .ev::before{background:var(--a3);box-shadow:0 0 0 3px color-mix(in srgb,var(--a3) 25%,transparent)}
body.bga-on .b-progress .bar{background:color-mix(in srgb,var(--tx) 14%,transparent)}
body.bga-on .b-progress .bar i{background:linear-gradient(90deg,var(--a3),var(--a4))}
body.acik.bga-on .b-header{color:color-mix(in srgb,var(--a3) 45%,var(--tx))}
body.acik.bga-on .b-text.b-kart,body.acik.bga-on .b-faq details,body.acik.bga-on .b-cd .u{background:rgba(255,255,255,.7);border-color:rgba(255,255,255,.9);box-shadow:0 10px 24px -16px rgba(0,0,0,.35)}

/* Bağlantı içi: alt yazı + ok (ok yalnızca Çizgi stilinde görünür) */
.b-link .b-y{display:flex;flex-direction:column;align-items:inherit;line-height:1.25}
.b-link .b-y small{display:block;font-size:12.5px;font-weight:400;opacity:.72;margin-top:2px;text-transform:none;letter-spacing:0;font-style:normal}
.b-link .b-ok{display:none}
/* Öne çıkan bağlantı (tüm stillerde hafif nabız) */
.b-link.b-vurgu{animation:bs-nabiz 2.6s ease-in-out infinite}
@keyframes bs-nabiz{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--a3) 22%,transparent),0 8px 22px rgba(0,0,0,.25)}}

/* =====================================================================
   BUTON STİLLERİ (body.bs-*)
   ===================================================================== */

/* ---------- YUMUŞAK: dolgun hap, yumuşak gölge, renkli ikon dairesi ---------- */
body.bs-yumusak .b-link{min-height:58px;padding:14px 58px;border-radius:100px;background:var(--bc);color:var(--bt);border:0;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45),inset 0 -3px 0 rgba(0,0,0,.08);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
body.bs-yumusak .b-link:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 30px -12px rgba(0,0,0,.55),inset 0 -3px 0 rgba(0,0,0,.08)}
body.bs-yumusak .b-link:active{transform:translateY(1px)}
body.bs-yumusak .b-ico{left:8px;width:42px;height:42px;box-shadow:none;background:color-mix(in srgb,var(--a3) 24%,var(--bcs));color:color-mix(in srgb,var(--a3) 65%,#000)!important}
body.bs-yumusak .b-link.b-vurgu{background:linear-gradient(100deg,var(--a3),var(--a4));color:var(--vt)}
body.bs-yumusak .b-link.b-vurgu .b-ico{background:rgba(255,255,255,.24);color:var(--vt)!important}
body.bs-yumusak .socials a{box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}

/* ---------- CAM: buzlu cam, parlak kenar, kayan ışık ---------- */
body.bs-cam{--cam-bg:rgba(255,255,255,.12);--cam-kenar:rgba(255,255,255,.3)}
body.bs-cam.acik{--cam-bg:rgba(255,255,255,.45);--cam-kenar:rgba(255,255,255,.85)}
body.bs-cam .b-link{min-height:58px;padding:14px 54px;border-radius:22px;background:var(--cam-bg);color:var(--tx);border:1px solid var(--cam-kenar);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.4),inset 0 1px 0 var(--cam-kenar);overflow:hidden;transition:transform .25s}
body.bs-cam .b-link::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:bs-parilti 5s ease-in-out infinite}
body.bs-cam .b-link:nth-child(3n+2)::after{animation-delay:.6s}
body.bs-cam .b-link:nth-child(3n)::after{animation-delay:1.2s}
@keyframes bs-parilti{0%,70%{left:-60%}100%{left:130%}}
body.bs-cam .b-link:hover{transform:translateY(-2px)}
body.bs-cam .b-ico{left:12px;background:transparent;box-shadow:none;color:var(--a3)!important}
body.bs-cam .b-link.b-vurgu{background:linear-gradient(110deg,color-mix(in srgb,var(--a3) 88%,transparent),color-mix(in srgb,var(--a4) 88%,transparent));color:var(--vt);border-color:rgba(255,255,255,.6)}
body.bs-cam .b-link.b-vurgu .b-ico{color:var(--vt)!important}
body.bs-cam .socials a{background:var(--cam-bg);border:1px solid var(--cam-kenar);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------- NEON: dönen degrade çerçeve, parlama ---------- */
@property --na{syntax:'<angle>';inherits:false;initial-value:90deg}
body.bs-neon .b-link{min-height:58px;padding:14px 54px;border-radius:16px;background:transparent;color:var(--tx);border:0;isolation:isolate;box-shadow:none;transition:transform .2s,box-shadow .2s}
body.bs-neon .b-link::before{content:'';position:absolute;inset:-1.5px;border-radius:17.5px;z-index:-2;
  background:linear-gradient(var(--na),var(--a2),var(--a3),var(--a4));animation:bs-cerceve 6s linear infinite}
body.bs-neon .b-link:nth-child(4n+2)::before{animation-delay:-1.5s}
body.bs-neon .b-link:nth-child(4n+3)::before{animation-delay:-3s}
body.bs-neon .b-link:nth-child(4n)::before{animation-delay:-4.5s}
@keyframes bs-cerceve{to{--na:450deg}}
body.bs-neon .b-link::after{content:'';position:absolute;inset:0;border-radius:16px;z-index:-1;background:color-mix(in srgb,var(--a1) 90%,transparent)}
body.bs-neon .b-link:hover{transform:translateY(-2px);box-shadow:0 0 28px -6px var(--a2)}
body.bs-neon .b-ico{left:12px;background:transparent;box-shadow:none;color:var(--a4)!important}
body.bs-neon .b-link.b-vurgu::after{background:linear-gradient(100deg,color-mix(in srgb,var(--a2) 38%,var(--a1)),color-mix(in srgb,var(--a3) 38%,var(--a1)))}
body.bs-neon .b-link.b-vurgu{animation:bs-nefes 2.6s ease-in-out infinite}
@keyframes bs-nefes{50%{box-shadow:0 0 32px -6px var(--a2)}}
body.bs-neon .socials a{background:color-mix(in srgb,var(--tx) 6%,transparent);border:1px solid color-mix(in srgb,var(--tx) 16%,transparent);border-radius:14px}
body.bs-neon .socials a{color:var(--tx)!important}
body.bs-neon .socials a:hover{box-shadow:0 0 18px -2px var(--a4)}

/* ---------- SERT: keskin köşe, kalın kenar, ofset gölge ---------- */
body.bs-sert .b-link{min-height:58px;padding:14px 54px;border-radius:0;background:var(--bc);color:var(--bt);border:2px solid var(--a4);
  box-shadow:6px 6px 0 var(--a4);text-transform:uppercase;letter-spacing:.06em;font-size:16px;transition:transform .12s,box-shadow .12s}
body.bs-sert .b-link:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--a4)}
body.bs-sert .b-link:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--a4)}
body.bs-sert .b-ico{left:12px;border-radius:0;background:transparent;box-shadow:none;color:inherit!important}
body.bs-sert .b-link.b-vurgu{background:var(--a3);border-color:var(--a3);color:var(--vt);animation:none}
body.bs-sert .avatar,body.bs-sert.bga-on .avatar{box-shadow:6px 6px 0 var(--a4)}
body.bs-sert.bga-on .avatar{background:var(--a3);border:2px solid var(--a4)}
body.bs-sert h1{text-transform:uppercase;letter-spacing:.04em}
body.bs-sert .socials a{border-radius:0;box-shadow:3px 3px 0 var(--a4)}
body.bs-sert .b-faq details,body.bs-sert .b-cd .u,body.bs-sert .b-text.b-kart{border-radius:0;border:2px solid var(--tx)}

/* ---------- ÇİZGİ: ince kenar, solda ikon kutusu, sağda ok; üzerine gelince dolar ---------- */
body.bs-cizgi .b-link{justify-content:flex-start;gap:14px;min-height:62px;padding:12px 16px;border-radius:14px;text-align:left;color:var(--tx);
  background:color-mix(in srgb,var(--a1) 55%,transparent);border:1px solid color-mix(in srgb,var(--tx) 20%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);isolation:isolate;overflow:hidden;box-shadow:none;transition:border-color .25s}
body.bs-cizgi .b-link::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--a3) 22%,transparent),color-mix(in srgb,var(--a3) 5%,transparent));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
body.bs-cizgi .b-link:hover{transform:none;border-color:var(--a3);box-shadow:none}
body.bs-cizgi .b-link:hover::before{transform:scaleX(1)}
body.bs-cizgi .b-ico{position:static;flex:none;width:38px;height:38px;border-radius:10px;box-shadow:none;background:color-mix(in srgb,var(--a3) 16%,transparent);color:var(--a3)!important}
body.bs-cizgi .b-link .b-y{flex:1;min-width:0;align-items:flex-start}
body.bs-cizgi .b-link .b-ok{display:block;width:18px;height:18px;flex:none;opacity:.55;transition:transform .25s,opacity .25s}
body.bs-cizgi .b-link:hover .b-ok{transform:translate(3px,-3px);opacity:1;color:var(--a3)}
body.bs-cizgi .b-link.b-vurgu{border-color:color-mix(in srgb,var(--a4) 60%,transparent);background:linear-gradient(100deg,color-mix(in srgb,var(--a4) 22%,transparent),color-mix(in srgb,var(--a1) 55%,transparent))}
body.bs-cizgi .b-link.b-vurgu .b-ico{background:var(--a4);color:var(--a1)!important}
body.bs-cizgi .socials a{border-radius:12px}
body.acik.bs-cizgi .b-link{background:rgba(255,255,255,.6)}

/* ---------- KALIN: eğik, kalın yazı; üzerine gelince şerit akar ---------- */
body.bs-kalin .b-link{min-height:60px;padding:14px 56px;border-radius:0;background:var(--bc);color:var(--bt);border:0;border-left:5px solid var(--a3);
  transform:skewX(-8deg);font-size:16px;font-weight:800;font-style:italic;letter-spacing:.02em;text-transform:uppercase;overflow:hidden;box-shadow:none;transition:transform .15s}
body.bs-kalin .b-link>*{transform:skewX(8deg)}
body.bs-kalin .b-link::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s;
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--a3) 20%,transparent) 0 10px,transparent 10px 22px)}
body.bs-kalin .b-link:hover{transform:skewX(-8deg) translateX(4px);box-shadow:none}
body.bs-kalin .b-link:hover::before{opacity:1;animation:bs-serit 1s linear infinite}
@keyframes bs-serit{to{background-position:31px 0}}
body.bs-kalin .b-ico{left:14px;border-radius:0;background:transparent;box-shadow:none;color:var(--a3)!important}
body.bs-kalin .b-link.b-vurgu{background:var(--a3);color:var(--vt);border-left-color:var(--tx);animation:none}
body.bs-kalin .b-link.b-vurgu .b-ico{color:var(--vt)!important}
body.bs-kalin h1{font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.02em}
body.bs-kalin .avatar{border-radius:0;clip-path:polygon(25% 0,100% 0,75% 100%,0 100%)}
body.bs-kalin .socials a{border-radius:0;transform:skewX(-10deg)}
body.bs-kalin .socials a svg,body.bs-kalin .socials a img{transform:skewX(10deg)}
body.bs-kalin .b-cd .u,body.bs-kalin .b-faq details{border-radius:0}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion:reduce){
  .bga,.bga *,.b-link,.b-link::before,.b-link::after{animation:none!important;transition:none!important}
  .bga-buhar i,.bga-parilti i,.bga-parilti b,.bga-aurora b{opacity:.35}
  .bga-ekolayzir .cubuk i{transform:scaleY(.5)}
}