/* ════════════════════════════════════════════════════════════════════
   template-034 SHOWROOM — Vibrant Wellness sadık kopyası (Websiteks.com)
   Tasarım dili birebir orijinalden: renk paleti, tipografi, nabız/parıltı
   animasyonları, harf-harf başlık, 13 noktalı ses ekolayzeri, preloader.
   Kod temiz odada sıfırdan yazıldı (orijinal bundle kopyalanmadı).
   ════════════════════════════════════════════════════════════════════ */

@font-face{font-display:swap;font-family:"PlusJakarta";font-style:normal;font-weight:400;src:url(../assets/fonts/PlusJakartaSans-Regular.woff2) format("woff2")}
@font-face{font-display:swap;font-family:"PlusJakarta";font-style:normal;font-weight:600;src:url(../assets/fonts/PlusJakartaSans-SemiBold.woff2) format("woff2")}
@font-face{font-display:swap;font-family:"PlusJakarta";font-style:normal;font-weight:700;src:url(../assets/fonts/PlusJakartaSans-Bold.woff2) format("woff2")}
@font-face{font-display:swap;font-family:"UbuntuMono";font-style:normal;font-weight:700;src:url(../assets/fonts/UbuntuMono-Bold.woff2) format("woff2")}

:root{
  /* Orijinal palet — entry.D4y_q0WT.css'ten birebir */
  --marka-mavi:#0774c4;          /* --color-brand-green (orijinal ad) */
  --marka-koyu:#282f3c;
  --mavi-100:#a8bffd;
  --mor-100:#d9cffb;
  --yesil-200:#88aafb;
  --beyaz:#c9dcec;
  --beyaz-200:#e5eaf8;
  --sahne-lacivert:#010835;      /* 3B sahne fonu (bundle'da 23 kez) */
  --turuncu:#f2a35c;
}

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:10px;height:100%;overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%}
body{
  font-family:"PlusJakarta",ui-sans-serif,system-ui,sans-serif;
  background:var(--sahne-lacivert);
  color:#fff;height:100vh;overflow:hidden;position:relative;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
img{display:block}

/* ── 3B sahne + sinematik vinyet (bloom yumuşatması — CSS karşılığı) ── */
#sahne{position:fixed;inset:0;z-index:1}
#sahne canvas{display:block;width:100%;height:100%}
.vinyet{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 42%, rgba(136,170,251,.10), transparent 55%),
    radial-gradient(ellipse 140% 110% at 50% 50%, transparent 55%, rgba(1,4,24,.72) 100%);
  mix-blend-mode:screen;
}

/* ════════ PRELOADER — beyaz zemin, nabız halkaları, radyal kaybolma ════════ */
#preloader{
  position:fixed;inset:0;z-index:50;background:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease-in-out .4s, visibility .7s .4s;
}
#preloader.bitti{opacity:0;visibility:hidden}
.pre-orta{position:relative;width:13vw;height:13vw;min-width:140px;min-height:140px;display:flex;align-items:center;justify-content:center}
.pre-blur{
  position:absolute;inset:0;border-radius:9999px;background:var(--mavi-100);
  filter:blur(20px);transform:scale(1.8);animation:nabizBlur 2s ease-in-out infinite;
}
.pre-mor{
  position:absolute;inset:0;border-radius:9999px;background:var(--mor-100);
  filter:blur(20px);transform:scale(0);transition:transform 1s ease-in-out;
}
#preloader.bitti .pre-mor{transform:scale(2.4)}
.pre-halka{position:absolute;inset:0;border-radius:9999px;border:1px solid var(--beyaz-200);animation:nabizHalka 3s linear infinite}
.halka-2{animation-delay:1s;opacity:0}
.halka-3{animation-delay:2s;opacity:0}
.pre-logo{width:42%;animation:nabizLogo 1s ease-in-out infinite;border-radius:18%}
.pre-not{
  position:absolute;bottom:-5.2rem;left:50%;transform:translateX(-50%);
  white-space:nowrap;color:var(--marka-koyu);font-size:1.3rem;letter-spacing:.08em;opacity:.65;
}
@keyframes nabizLogo{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes nabizBlur{0%,100%{transform:scale(1.8);opacity:.85}50%{transform:scale(2.05);opacity:1}}
@keyframes nabizHalka{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.2);opacity:0}}

/* ════════ HERO ════════ */
.hero{
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  justify-content:space-between;padding:6rem 2rem 5rem;
  transition:opacity .5s ease-in-out, visibility .5s;
}
body:not([data-durum="hero"]):not([data-durum="yukleniyor"]) .hero{opacity:0;visibility:hidden;pointer-events:none}
.hero-ic{display:flex;width:100%;flex:1;align-items:center;gap:4rem}
.hero-sol{flex:1 1 50%;display:flex;flex-direction:column;align-items:center}
.hero-logo{height:3.4rem;margin-bottom:2.4rem;opacity:0;transition:opacity .8s ease-in-out 1.8s}
body[data-durum="hero"] .hero-logo{opacity:1}

/* Harf-harf yükselen başlık + shimmer — orijinal data-v-22c8e034 deseni */
.animasyonlu-baslik{font-weight:400;font-size:8rem;line-height:1.04;text-align:center;letter-spacing:-.02em}
.animasyonlu-baslik .satir{display:block;overflow:hidden;position:relative}
.animasyonlu-baslik .harf{
  display:inline-block;transform:translateY(96px);opacity:0;
  transition:transform .9s ease-in-out, opacity .9s ease-in-out;
  white-space:pre;
}
body[data-durum="hero"] .animasyonlu-baslik .harf{transform:translateY(0);opacity:1}
.animasyonlu-baslik .parlak{
  position:absolute;left:0;top:0;width:100%;text-align:center;opacity:0;transition:opacity .5s ease-in-out 2.8s;font-style:normal;
  background:linear-gradient(91.11deg,#dee9ff 16.15%,#f2f3ff 26.11%,#d7eeff 40.04%,#fff 46.02%,#f2f3ff 52.39%,#d7eeff 58.62%,#f2f3ff 69.63%,#dee9ff 80.16%);
  background-clip:text;-webkit-background-clip:text;background-size:200% auto;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:parla 4s linear infinite;
}
body[data-durum="hero"] .animasyonlu-baslik .parlak{opacity:1}
@keyframes parla{to{background-position:200%}}

.hero-alt-cizgi{
  margin-top:2.6rem;max-width:46rem;text-align:center;font-size:1.5rem;line-height:1.55;
  color:var(--beyaz);opacity:0;transform:translateY(20px);
  transition:all .8s ease-in-out 2.4s;
}
body[data-durum="hero"] .hero-alt-cizgi{opacity:.92;transform:none}

.hero-sag{flex:0 1 32%;display:flex;flex-direction:column;align-items:flex-end;gap:1.6rem}
.hero-sag p{
  display:flex;align-items:center;font-size:1.8rem;letter-spacing:-.01em;color:#fff;
  overflow:hidden;transform:translateY(90px);opacity:0;transition:all .9s ease-in-out;
}
body[data-durum="hero"] .hero-sag p{transform:none;opacity:1}
.hero-sag p:nth-child(1){transition-delay:1.5s}
.hero-sag p:nth-child(2){transition-delay:1.6s}
.hero-sag p:nth-child(3){transition-delay:1.7s}
.hero-sag p:nth-child(4){transition-delay:1.8s}
.dots{width:2.4rem;margin-right:1rem}

/* ── Başlat butonu — nabız halkası + blur gradyan + harf hover, orijinal data-v-ffaad5cf ── */
.hero-cta{
  display:flex;justify-content:center;
  opacity:0;transform:translateY(90px);transition:all .5s ease-in-out 2.1s;
}
body[data-durum="hero"] .hero-cta{opacity:1;transform:none}
.baslat{
  position:relative;display:flex;align-items:center;height:8.1rem;padding:0 .8rem;
  border-radius:9999px;background:rgba(255,255,255,.41);
  transition:background .3s ease-in-out;
}
.baslat:hover{background:rgba(7,116,196,.41)}
.nabiz{position:absolute;inset:0;border-radius:9999px;pointer-events:none}
.nabiz::before{
  content:"";position:absolute;inset:0;border-radius:9999px;
  border:1px solid var(--mavi-100);animation:nabizButon 1.5s linear infinite;
  will-change:transform,opacity;
}
@keyframes nabizButon{0%{transform:scale(1);opacity:1}100%{transform:scale(1.45);opacity:0}}
.baslat-ic{
  position:relative;display:flex;align-items:center;height:6.5rem;padding:0 3.2rem;
  background:#fff;border-radius:9999px;overflow:hidden;
}
.hover-gradyan{
  position:absolute;top:-1rem;left:0;width:98px;height:98px;border-radius:9999px;opacity:0;
  background:linear-gradient(226.74deg,#e8efff 14.97%,#c1e8ff 20.41%,#fff6fe 29.94%,#e6dfff 38.78%,#fff 46.6%,#d5e8ff 57.14%,#fff 66.33%,#f6eaff 70.41%,#e8efff 77.89%);
  filter:blur(12px);mix-blend-mode:multiply;pointer-events:none;transition:opacity .3s ease-in-out;
}
.baslat:hover .hover-gradyan{opacity:1}
.baslat-metin{
  position:relative;font-weight:600;font-size:1.6rem;color:var(--marka-mavi);
  white-space:nowrap;display:inline-flex;overflow:hidden;
}
.baslat-metin .h{
  position:relative;display:inline-block;white-space:pre;
  transition:transform .3s cubic-bezier(.65,.05,.36,1);
}
.baslat-metin .h .alt{position:absolute;left:0;top:0;transform:translateY(2rem)}
.baslat:hover .baslat-metin .h{transform:translateY(-2rem)}

/* ════════ SES KONTROLÜ — 13 nokta, moveLeft/moveRight orijinal keyframe ════════ */
.ses{
  position:fixed;left:2rem;bottom:2rem;z-index:41;cursor:pointer;
  opacity:0;transform:translateX(-90px);transition:all .6s ease-in-out 2.1s;
}
body:not([data-durum="yukleniyor"]) .ses{opacity:1;transform:none}
.ses-dalga{
  width:4.8rem;height:2rem;margin-bottom:.2rem;background:var(--yesil-200);
  border-radius:9999px;display:flex;justify-content:center;align-items:center;position:relative;
}
.nokta{width:2px;height:2px;border-radius:9999px;background:#fff;position:absolute}
.nokta.sol:nth-child(1){transform:translateX(-4px)}
.nokta.sol:nth-child(2){transform:translateX(-8px)}
.nokta.sol:nth-child(3){transform:translateX(-12px)}
.nokta.sol:nth-child(4){transform:translateX(-16px)}
.nokta.sol:nth-child(5),.nokta.sol:nth-child(6){display:none}
.nokta.sag:nth-child(8){transform:translateX(4px)}
.nokta.sag:nth-child(9){transform:translateX(8px)}
.nokta.sag:nth-child(10){transform:translateX(12px)}
.nokta.sag:nth-child(11){transform:translateX(16px)}
.nokta.sag:nth-child(12),.nokta.sag:nth-child(13){display:none}
.ses.calar .nokta{display:block;width:5px;height:12px;transform:none}
.ses.calar .nokta.orta{transform:scale(1.1)}
.ses.calar .nokta.sol{animation:solaGit 3s ease-in-out infinite}
.ses.calar .nokta.sol:nth-child(1){animation-delay:0s}
.ses.calar .nokta.sol:nth-child(2){animation-delay:.5s}
.ses.calar .nokta.sol:nth-child(3){animation-delay:1s}
.ses.calar .nokta.sol:nth-child(4){animation-delay:1.5s}
.ses.calar .nokta.sol:nth-child(5){animation-delay:2s}
.ses.calar .nokta.sol:nth-child(6){animation-delay:2.5s}
.ses.calar .nokta.sag{animation:sagaGit 3s ease-in-out infinite}
.ses.calar .nokta.sag:nth-child(8){animation-delay:0s}
.ses.calar .nokta.sag:nth-child(9){animation-delay:.5s}
.ses.calar .nokta.sag:nth-child(10){animation-delay:1s}
.ses.calar .nokta.sag:nth-child(11){animation-delay:1.5s}
.ses.calar .nokta.sag:nth-child(12){animation-delay:2s}
.ses.calar .nokta.sag:nth-child(13){animation-delay:2.5s}
@keyframes solaGit{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:.5;transform:translateX(-17px) scale(.4)}}
@keyframes sagaGit{0%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:.5;transform:translateX(17px) scale(.4)}}
.ses-etiket{
  height:2rem;min-width:7.2rem;padding:0 1rem;background:var(--yesil-200);
  border-radius:9999px;display:flex;justify-content:center;align-items:center;
}
.ses-etiket p{font-weight:700;font-size:1.1rem;color:#fff;letter-spacing:.06em;white-space:nowrap}

/* ════════ TOOLTIPLER ════════ */
.tooltip{
  position:fixed;left:50%;transform:translateX(-50%) translateY(8px);z-index:42;
  opacity:0;visibility:hidden;transition:all .5s ease-in-out;pointer-events:none;
}
.tooltip span{
  display:inline-block;padding:.9rem 1.8rem;border-radius:9999px;
  background:rgba(201,220,236,.13);border:1px solid rgba(201,220,236,.25);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-family:"UbuntuMono",monospace;font-size:1.25rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--beyaz);white-space:nowrap;
}
.tooltip.gorunur{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.tooltip-ust{top:4.4rem}
.tooltip-alt{bottom:13rem}

/* ════════ VÜCUT TİPİ SEÇİMİ ════════ */
.vucut-tipi{
  position:fixed;left:50%;bottom:4.2rem;transform:translateX(-50%) translateY(40px);z-index:42;
  display:flex;gap:1.2rem;align-items:center;opacity:0;visibility:hidden;transition:all .5s ease-in-out;
}
body[data-durum="vucut"] .vucut-tipi{opacity:1;visibility:visible;transform:translateX(-50%)}
.tip-buton{
  display:flex;align-items:center;gap:1rem;height:5.6rem;padding:0 2.6rem;border-radius:9999px;
  background:rgba(255,255,255,.10);border:1px solid rgba(201,220,236,.30);
  color:#fff;font-size:1.5rem;font-weight:600;letter-spacing:.02em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:background .3s,border-color .3s,transform .3s;
}
.tip-buton img{width:2.2rem;filter:invert(1)}
.tip-buton:hover{background:rgba(255,255,255,.18);transform:translateY(-2px)}
.tip-buton[aria-pressed="true"]{background:rgba(7,116,196,.55);border-color:var(--mavi-100)}
.tip-onay{
  display:flex;align-items:center;gap:1.2rem;height:5.6rem;padding:0 3rem;border-radius:9999px;
  background:#fff;color:var(--marka-mavi);font-size:1.5rem;font-weight:600;
  transition:transform .3s,box-shadow .3s;
}
.tip-onay img{width:1.6rem;transform:rotate(180deg)}
.tip-onay:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(168,191,253,.45)}

/* ════════ SİSTEM KARTLARI (7) ════════ */
.sistemler{
  position:fixed;left:50%;bottom:3.2rem;transform:translateX(-50%) translateY(60px);z-index:42;
  display:flex;gap:1rem;opacity:0;visibility:hidden;transition:all .55s ease-in-out;
  max-width:96vw;
}
body[data-durum="sistem"] .sistemler{opacity:1;visibility:visible;transform:translateX(-50%)}
body[data-durum="liste"] .sistemler,body[data-durum="hikaye"] .sistemler{
  opacity:1;visibility:visible;transform:translateX(-50%) scale(.82);bottom:2rem;
}
.sistem-kart{
  display:flex;flex-direction:column;align-items:center;gap:.9rem;width:11.4rem;padding:1.5rem 1rem 1.3rem;
  border-radius:1.8rem;background:rgba(229,234,248,.92);color:var(--marka-koyu);
  border:1px solid transparent;transition:transform .3s ease-in-out,background .3s,box-shadow .3s;
}
.sistem-kart img{width:3rem;height:3rem;object-fit:contain}
.sistem-kart span{font-size:1.25rem;font-weight:600;letter-spacing:.01em;text-align:center;line-height:1.2}
.sistem-kart:hover{transform:translateY(-6px);background:#fff;box-shadow:0 14px 40px rgba(136,170,251,.35)}
.sistem-kart.aktif{background:#fff;border-color:var(--marka-mavi);box-shadow:0 0 0 2px rgba(7,116,196,.35),0 14px 40px rgba(136,170,251,.4)}

/* ════════ TEST LİSTESİ ════════ */
.test-listesi{
  position:fixed;left:3rem;top:50%;transform:translateY(-50%) translateX(-30px);z-index:42;
  display:flex;flex-direction:column;gap:1.2rem;width:30rem;max-width:38vw;
  opacity:0;visibility:hidden;transition:all .5s ease-in-out .15s;
}
body[data-durum="liste"] .test-listesi{opacity:1;visibility:visible;transform:translateY(-50%)}
.test-kart{
  text-align:left;padding:1.7rem 2rem;border-radius:1.6rem;
  background:rgba(229,234,248,.10);border:1px solid rgba(201,220,236,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;transition:background .3s,border-color .3s,transform .3s;
}
.test-kart:hover{background:rgba(229,234,248,.20);border-color:var(--mavi-100);transform:translateX(4px)}
.test-kart h3{font-size:1.7rem;font-weight:600;margin-bottom:.5rem;display:flex;align-items:center;gap:1rem}
.test-kart h3 img{width:1.4rem;opacity:.8;transform:rotate(180deg)}
.test-kart p{font-size:1.25rem;line-height:1.45;color:var(--beyaz);opacity:.85}
.liste-not{
  font-family:"UbuntuMono",monospace;font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mavi-100);opacity:.9;padding-left:.4rem;
}

/* ════════ ÜST BAŞLIK + GERİ ════════ */
.ust-baslik{
  position:fixed;top:3.6rem;left:50%;transform:translateX(-50%) translateY(-12px);z-index:42;
  opacity:0;visibility:hidden;transition:all .5s ease-in-out;text-align:center;
}
body[data-durum="hikaye"] .ust-baslik{opacity:1;visibility:visible;transform:translateX(-50%)}
.ust-baslik span{font-size:2.2rem;font-weight:600;letter-spacing:.01em;color:#fff}
.geri{
  position:fixed;top:3.2rem;left:3rem;z-index:43;width:5rem;height:5rem;border-radius:9999px;
  background:rgba(229,234,248,.12);border:1px solid rgba(201,220,236,.3);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transition:all .4s ease-in-out;
}
body[data-durum="liste"] .geri,body[data-durum="hikaye"] .geri,body[data-durum="sistem"] .geri{opacity:1;visibility:visible}
.geri img{width:1.6rem;filter:brightness(4)}
.geri:hover{background:rgba(229,234,248,.25)}

/* ════════ HİKÂYE PANELİ ════════ */
.hikaye{
  position:fixed;right:3rem;top:50%;transform:translateY(-50%) translateX(40px);z-index:42;
  width:44rem;max-width:92vw;max-height:78vh;display:flex;flex-direction:column;
  border-radius:2.4rem;background:rgba(8,16,52,.78);border:1px solid rgba(201,220,236,.22);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:all .55s ease-in-out .1s;overflow:hidden;
}
body[data-durum="hikaye"] .hikaye{opacity:1;visibility:visible;transform:translateY(-50%)}
.hikaye-sekmeler{display:flex;gap:.6rem;padding:1.6rem 1.6rem 0}
.hikaye-sekmeler [role="tab"]{
  flex:1;padding:1.1rem 0;border-radius:9999px;font-size:1.35rem;font-weight:600;
  color:var(--beyaz);background:rgba(229,234,248,.08);transition:background .3s,color .3s;
}
.hikaye-sekmeler [role="tab"][aria-selected="true"]{background:#fff;color:var(--marka-mavi)}
.hikaye-icerik{padding:2rem 2.4rem 2.6rem;overflow-y:auto;scrollbar-width:thin}
.hikaye-icerik h2{font-size:2.1rem;font-weight:600;line-height:1.25;margin-bottom:1.4rem}
.hikaye-icerik p{font-size:1.4rem;line-height:1.6;color:var(--beyaz);margin-bottom:1.4rem}
.hikaye-icerik p strong{color:#fff}
.hikaye-icerik ul{list-style:none;margin:0 0 1.6rem}
.hikaye-icerik li{
  font-size:1.35rem;line-height:1.5;color:var(--beyaz);padding-left:2rem;position:relative;margin-bottom:.7rem;
}
.hikaye-icerik li::before{content:"";position:absolute;left:0;top:.55em;width:.8rem;height:.8rem;border-radius:50%;
  background:linear-gradient(135deg,var(--mavi-100),var(--mor-100))}

/* Video yerine zarif gradyan panel (eksik medya temsili) */
.medya-temsil{
  position:relative;height:15rem;border-radius:1.6rem;margin-bottom:1.6rem;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 90% at 30% 20%, rgba(168,191,253,.55), transparent 60%),
    radial-gradient(ellipse 70% 80% at 75% 75%, rgba(217,207,251,.45), transparent 65%),
    linear-gradient(140deg,#0a1a52 0%,#071040 55%,#010835 100%);
}
.medya-temsil::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.16), transparent 40%);
  animation:medyaAkis 6s ease-in-out infinite alternate;
}
@keyframes medyaAkis{from{transform:translate(-12%,-8%) scale(1)}to{transform:translate(12%,8%) scale(1.15)}}
.medya-temsil span{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:"UbuntuMono",monospace;font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--beyaz);text-align:center;width:88%;line-height:1.6;
}
/* Kardiyo & sindirim panellerinde gerçek temsili illüstrasyon (agy üretimi, 2026-06-12);
   üstteki yumuşak gradyan metin okunurluğunu korur, ::after ışık süpürmesi aynı kalır */
.medya-temsil--kardiyo{
  background:linear-gradient(rgba(1,8,53,.30),rgba(1,8,53,.62)),
    url("../assets/images/illu-kardiyo.jpg") center 38% / cover no-repeat #010835;
}
.medya-temsil--sindirim{
  background:linear-gradient(rgba(1,8,53,.30),rgba(1,8,53,.62)),
    url("../assets/images/illu-sindirim.jpg") center 42% / cover no-repeat #010835;
}

/* Örnek etiket tablosu — orijinal biyobelirteç tablosunun showroom temsili */
.etiket-tablo{border-top:1px solid rgba(201,220,236,.18);margin-bottom:1.6rem}
.etiket-satir{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.1rem .2rem;border-bottom:1px solid rgba(201,220,236,.18);
}
.etiket-satir span{font-family:"UbuntuMono",monospace;font-size:1.3rem;color:var(--beyaz)}
.tag{
  font-family:"UbuntuMono",monospace;font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.4rem 1.1rem;border-radius:9999px;white-space:nowrap;
}
.tag.yesil{background:rgba(162,219,60,.16);color:#a2db3c;border:1px solid rgba(162,219,60,.4)}
.tag.turuncu{background:rgba(242,163,92,.14);color:var(--turuncu);border:1px solid rgba(242,163,92,.4)}

/* QR temsili — gerçek QR eksik; stilize yer tutucu */
.qr-temsil{display:flex;align-items:center;gap:1.6rem;margin-bottom:.4rem}
.qr-kare{
  width:8.4rem;height:8.4rem;border-radius:1rem;flex:none;
  background:
    conic-gradient(from 0deg, var(--beyaz-200) 25%, transparent 0 50%, var(--beyaz-200) 0 75%, transparent 0) 0 0/2.1rem 2.1rem,
    rgba(229,234,248,.07);
  border:1px solid rgba(201,220,236,.3);opacity:.85;
}
.qr-temsil p{font-size:1.25rem;margin:0}

/* ════════ ROZET + CTA ════════ */
.rozet{
  position:fixed;right:2rem;bottom:2rem;z-index:44;display:flex;flex-direction:column;align-items:flex-end;gap:.6rem;
}
.rozet-ad{
  font-family:"UbuntuMono",monospace;font-size:1.2rem;letter-spacing:.12em;color:var(--beyaz);
  background:rgba(8,16,52,.6);border:1px solid rgba(201,220,236,.25);
  padding:.6rem 1.4rem;border-radius:9999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.rozet-ad i{color:var(--mavi-100);font-style:normal}
.rozet-cta{
  font-size:1.25rem;font-weight:600;color:#fff;text-decoration:none;
  background:linear-gradient(120deg,var(--marka-mavi),#0a8fe0);
  padding:.9rem 1.6rem;border-radius:9999px;
  box-shadow:0 6px 24px rgba(7,116,196,.45);
  transition:transform .3s,box-shadow .3s;
}
.rozet-cta:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(7,116,196,.6)}

.nojs{position:fixed;inset:auto 0 0 0;z-index:60;background:#fff;color:var(--marka-koyu);padding:2rem;font-size:1.5rem;text-align:center}

/* ════════ MOBİL ════════ */
@media (max-width:900px){
  .hero{padding:4rem 1.6rem 3.4rem}
  .hero-ic{flex-direction:column;justify-content:center;gap:2.4rem}
  .hero-sag{display:none}
  .animasyonlu-baslik{font-size:4.8rem}
  .animasyonlu-baslik .parlak{display:none}
  .ses{display:none}
  .sistemler{flex-wrap:wrap;justify-content:center;gap:.8rem;bottom:2rem}
  .sistem-kart{width:9.6rem;padding:1.1rem .6rem 1rem}
  .test-listesi{left:1.4rem;right:1.4rem;width:auto;max-width:none;top:auto;bottom:12rem;transform:none}
  body[data-durum="liste"] .test-listesi{transform:none}
  .hikaye{right:1.2rem;left:1.2rem;width:auto;top:auto;bottom:1.4rem;transform:translateY(30px);max-height:62vh}
  body[data-durum="hikaye"] .hikaye{transform:none}
  .rozet{right:1.2rem;bottom:auto;top:1.2rem}
}

/* ════════ ERİŞİLEBİLİRLİK: hareket azaltma (03 doktrini — ZORUNLU) ════════ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important;transition-delay:0ms !important}
  .animasyonlu-baslik .harf{transform:none;opacity:1}
  .hero-sag p,.hero-cta,.hero-alt-cizgi,.hero-logo{transform:none;opacity:1}
  .pre-blur,.pre-halka{display:none}
}