/* ════════════════════════════════════════════════════════════════
   IN-LAB INTRO — MERKEZİ STANDART (TEK KAYNAK)
   ----------------------------------------------------------------
   Tüm IN-LAB alt sayfalarının giriş (intro) ekranı bu dosya ile
   BİREBİR aynı layout / hiza / font / boyutta tutulur.

   Kapsanan sayfalar ve class varyasyonları:
     inloop.html        → .nmi-eyebrow .bb-title .bb-sub .ov-btn .nmi-guide .nmi-item .nmi-hint
     brief-breaker.html → .nmi-eyebrow .bb-title .bb-sub .nmi-guide .nmi-item .nmi-hint
     paintwall.html     → .nmi-eyebrow .nmi-h1  .nmi-sub .nmi-cta .nmi-guide .nmi-item .nmi-hint
     freewall.html      → .nmi-eyebrow .nmi-h1  .nmi-sub .nmi-cta .nmi-guide .nmi-item .nmi-hint
     lifein.html        → .nmi-eyebrow .nmi-h1  .nmi-sub .nmi-cta .nmi-guide .nmi-item .nmi-hint
     pix-drop.html      → .hp-eyebrow  .hp-title .hp-sub .hp-enter .hp-guide .hp-item .hp-hint
     kaahin.html        → .kk-eyebrow  .kk-intro-title .kk-sub .kk-cta .kk-guide .kk-item .kk-hint

   DEĞİŞİKLİK PROPAGASYONU:
     Intro görünümünü değiştirmek için SADECE bu dosyayı düzenle.
     Sayfa-içi <style> override YASAK.

   Değişkenler (sayfa :root'larında tanımlı):
     --pp  → 'Poppins', sans-serif   (eyebrow, sub, hint, guide metinleri)
     --sf  → 'Steelfish', sans-serif (büyük başlık)
     --red → #e92038
   Bazı sayfalar farklı isim kullanabilir (--acc); fallback verildi.
═══════════════════════════════════════════════════════════════════ */

/* ── 1) EYEBROW (üst etiket) ──────────────────────────────────── */
.nmi-eyebrow,
.hp-eyebrow,
.kk-eyebrow {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .48rem !important;
  letter-spacing: .5em !important;
  text-transform: uppercase !important;
  color: var(--red, var(--acc, #e92038)) !important;
  margin: 0 0 1.2rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.nmi-eyebrow::before, .nmi-eyebrow::after,
.hp-eyebrow::before,  .hp-eyebrow::after,
.kk-eyebrow::before,  .kk-eyebrow::after {
  content: '' !important;
  flex: 1 1 auto !important;
  height: 1px !important;
  background: rgba(233, 32, 56, .3) !important;
  max-width: 55px !important;
}

/* ── 2) BAŞLIK (büyük title — TEK SATIR) ──────────────────────── */
.bb-title,
.nmi-h1,
.hp-title,
.kk-intro-title {
  font-family: var(--sf, 'Steelfish', sans-serif) !important;
  font-size: clamp(4rem, 10vw, 9rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -.03em !important;
  line-height: 1.02 !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 0 .6rem 0 !important;
  position: relative !important;
  display: inline-block !important;
  white-space: nowrap !important;   /* TEK SATIR garanti */
}
/* Başlık içindeki <br> etkisiz — tek satıra zorla */
.bb-title br,
.nmi-h1 br,
.hp-title br,
.kk-intro-title br {
  display: none !important;
}
.bb-title em,
.nmi-h1 em,
.hp-title em,
.kk-intro-title em {
  font-style: normal !important;
  color: var(--red, var(--acc, #e92038)) !important;
  position: relative;
  display: inline-block;
}

/* ── 3) SUB (alt açıklama) ────────────────────────────────────── */
.bb-sub,
.nmi-sub,
.hp-sub,
.kk-sub {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .56rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .5) !important;
  text-align: center !important;
  margin: 0 auto 2.2rem auto !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* ── 4) CTA BUTONU (pill / kırmızı) ─────────────────────────────
   STANDART: 1px dış border (içte) + dönen border ışık animasyonu.
   Hover'da YUKARI KAYMAZ (transform yok) — sadece parlar. */
.nmi-cta,
.hp-enter,
.kk-cta,
#ovIntro .ov-btn {
  appearance: none !important;
  position: relative !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;   /* 1px dış border */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .9rem !important;
  padding: 1.1rem 2.4rem !important;
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: var(--red, var(--acc, #e92038)) !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 30px rgba(233, 32, 56, .4) !important;
  transition: background .25s ease, box-shadow .25s ease !important;  /* transform YOK → kaymaz */
  margin: 0 0 2rem 0 !important;
  overflow: visible !important;
  isolation: isolate !important;
}
/* Border ışık treni: HALKA SABİT, ışık border boyunca dolaşır.
   Sabit ince çerçeve (::before) + dönen parlak segment (::after = tren). */
.nmi-cta::before,
.hp-enter::before,
.kk-cta::before,
#ovIntro .ov-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 999px !important;
  padding: 1px !important;
  background: rgba(255, 255, 255, .22) !important;   /* SABİT halka */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Işık treni — sadece bu segment dolaşır (conic açısı animasyonlu) */
.nmi-cta::after,
.hp-enter::after,
.kk-cta::after,
#ovIntro .ov-btn::after {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 999px !important;
  padding: 1px !important;
  background: conic-gradient(from var(--inlab-angle, 0deg),
      transparent 0deg,
      rgba(255, 255, 255, .15) 18deg,
      rgba(255, 255, 255, 1) 30deg,
      rgba(255, 120, 130, 1) 38deg,
      rgba(255, 255, 255, .15) 52deg,
      transparent 70deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  filter: drop-shadow(0 0 4px rgba(255, 120, 130, .9)) !important;
  animation: inlabCtaBorderTrain 3.2s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
@property --inlab-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
/* Açıyı animasyonla → halka sabit, ışık treni border'da gezer.
   @property destekli tarayıcılarda akıcı; eski tarayıcılarda fallback aşağıda. */
@keyframes inlabCtaBorderTrain { to { --inlab-angle: 360deg; } }
/* Buton içeriği ışık halkasının ÜSTünde kalsın */
.nmi-cta > *,
.hp-enter > *,
.kk-cta > *,
#ovIntro .ov-btn > * {
  position: relative !important;
  z-index: 3 !important;
}
.nmi-cta:hover,
.hp-enter:hover,
.kk-cta:hover,
#ovIntro .ov-btn:hover {
  background: #ff3047 !important;
  box-shadow: 0 12px 40px rgba(233, 32, 56, .55), 0 0 0 1px rgba(255, 255, 255, .35) !important;
}
.nmi-cta:hover::after,
.hp-enter:hover::after,
.kk-cta:hover::after,
#ovIntro .ov-btn:hover::after {
  animation-duration: 1.5s !important;   /* hover'da tren hızlanır */
}
/* @property desteklemeyen tarayıcılar: tren segmenti yerine yumuşak parlama */
@supports not (background: conic-gradient(from var(--inlab-angle))) {
  .nmi-cta::after,
  .hp-enter::after,
  .kk-cta::after,
  #ovIntro .ov-btn::after {
    background: rgba(255, 255, 255, .55) !important;
    animation: inlabCtaBorderPulse 2s ease-in-out infinite !important;
  }
  @keyframes inlabCtaBorderPulse { 0%,100% { opacity:.3 } 50% { opacity:.9 } }
}

/* ── 5) GUIDE (4'lü kutu) — REFLEXIN .nmi-quads görünümü standardı ──
   Yuvarlak köşeli kap, hafif iç zemin, kutularda radial hover glow. */
.nmi-guide,
.hp-guide,
.kk-guide {
  display: flex !important;
  gap: 0 !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .025) !important;
  width: 100% !important;
  max-width: 700px !important;
  margin: 0 auto 1.5rem auto !important;
}
.nmi-item,
.hp-item,
.kk-item {
  position: relative !important;
  flex: 1 1 0 !important;
  padding: 1.4rem 1rem !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  border-bottom: none !important;
  text-align: center !important;
  isolation: isolate !important;
  transition: background .4s ease !important;
}
.nmi-item:last-child,
.hp-item:last-child,
.kk-item:last-child {
  border-right: none !important;
}
/* REFLEXIN radial hover glow */
.nmi-item::before,
.hp-item::before,
.kk-item::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: 0 !important;
  transition: opacity .45s ease !important;
  background: radial-gradient(circle at 50% 0%, rgba(233, 32, 56, .16), transparent 65%) !important;
}
.nmi-item:hover::before,
.hp-item:hover::before,
.kk-item:hover::before {
  opacity: 1 !important;
}
.nmi-item:hover,
.hp-item:hover,
.kk-item:hover {
  background: rgba(255, 255, 255, .02) !important;
}
.nmi-item i,
.hp-item i,
.kk-item i {
  font-size: 1rem !important;
  color: var(--red, var(--acc, #e92038)) !important;
  display: block !important;
  margin: 0 0 .5rem 0 !important;
  transition: transform .35s ease, color .35s ease !important;
}
.nmi-item:hover i,
.hp-item:hover i,
.kk-item:hover i {
  transform: scale(1.12) !important;
  color: #ff7080 !important;
}
/* GUIDE BAŞLIĞI → POPPINS, İNCE font.
   text-transform:uppercase KALDIRILDI → Türkçe i/İ büyük-küçük harf hatası
   (örn "İNDIR") önlenir; metin HTML'de yazıldığı gibi görünür. */
.nmi-item h5,
.hp-item h5,
.kk-item h5 {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .92rem !important;
  font-weight: 300 !important;          /* İNCE */
  text-transform: none !important;       /* Türkçe karakter güvenli */
  letter-spacing: .02em !important;
  color: #fff !important;
  margin: 0 0 .25rem 0 !important;
  line-height: 1.15 !important;
}
.nmi-item p,
.hp-item p,
.kk-item p {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .45rem !important;
  color: rgba(255, 255, 255, .5) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

/* ── 6) HINT (dipnot + pulse dot) ─────────────────────────────── */
.nmi-hint,
.hp-hint,
.kk-hint {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .4rem !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .32) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  margin: 0 !important;
}
.nmi-dot,
.hp-dot,
.kk-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--red, var(--acc, #e92038)) !important;
  flex-shrink: 0 !important;
  animation: inlabIntroDot 1.8s ease-in-out infinite !important;
}
@keyframes inlabIntroDot { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* ── 7) CARD / WRAPPER hizalama ───────────────────────────────── */
#ovIntro .ov-card {
  max-width: 780px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* ── 8) RESPONSIVE — guide kutusu mobilde dikey ───────────────── */
@media (max-width: 720px) {
  .bb-title,
  .nmi-h1,
  .hp-title,
  .kk-intro-title {
    font-size: clamp(3rem, 13vw, 5.5rem) !important;
  }
  .nmi-guide,
  .hp-guide,
  .kk-guide {
    flex-direction: column !important;
    max-width: 420px !important;
  }
  .nmi-item,
  .hp-item,
  .kk-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
  }
  .nmi-item:last-child,
  .hp-item:last-child,
  .kk-item:last-child {
    border-bottom: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   9) GÜÇLÜ OVERRIDE — sayfa-içi <style> bloklarını kesin ezer
   ----------------------------------------------------------------
   Sayfa-içi stiller `#xxxIntro .class` (id+class) özgüllüğü kullanıyor
   ve merkezi CSS'ten SONRA yükleniyor. Aynı özgüllük + !important
   durumunda sonradan gelen kazanır. Bu yüzden `html` element prefix'i
   ekleyerek özgüllüğü bir tık YUKARI çekiyoruz; böylece bu blok her
   zaman kazanır ve TÜM intro sayfaları birebir aynı görünür.

   Container ID'leri:
     #ovIntro (inloop) · #screenIntro (brief-breaker) · #nmIntro (paintwall)
     #pbIntro (freewall) · #mcIntro (lifein) · #heapIntro (pix-drop)
     #kaahinIntro (kaahin)
═══════════════════════════════════════════════════════════════════ */

/* ── 0) INTRO KÖK BAZ FONT — TÜM SAYFALARDA AYNI rem ÖLÇEĞİ ──
   Bazı sayfalar (örn. kaahin.html) html/body üzerinde font-size override
   ediyor (13px). Bu, rem tabanlı clamp() başlık boyutlarını küçültüyor.
   Intro container'ına sabit 16px baz vererek tüm rem hesapları Brief Breaker
   ile BİREBİR eşitlenir → başlık ve tüm öğeler aynı boyutta. */
html #ovIntro,
html #screenIntro,
html #nmIntro,
html #pbIntro,
html #mcIntro,
html #heapIntro,
html #kaahinIntro,
html #iniverseIntro {
  font-size: 16px !important;
}

/* ── INIVERSE intro container — Brief Breaker (.bb-screen) ile BİREBİR ──
   .kk-* markup kullanır; html/body font override'ı YOK (16px) → rem doğru. */
html #iniverseIntro {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  text-align: center !important;
}

/* ── INTRO CONTAINER LAYOUT — Brief Breaker (.bb-screen) ile BİREBİR ──
   inset:0 tam ekran · dikey + yatay ortalı · padding 2rem.
   KAAHIN'in farklı (top:0/bottom:96px) konumlandırması ezilir. */
html #kaahinIntro {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem !important;
  text-align: center !important;
}

/* ── EYEBROW ── */
html #ovIntro .nmi-eyebrow,
html #screenIntro .nmi-eyebrow,
html #nmIntro .nmi-eyebrow,
html #pbIntro .nmi-eyebrow,
html #mcIntro .nmi-eyebrow,
html #heapIntro .hp-eyebrow,
html #kaahinIntro .kk-eyebrow,
html #iniverseIntro .kk-eyebrow {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .48rem !important;
  letter-spacing: .5em !important;
  text-transform: uppercase !important;
  color: var(--red, var(--acc, var(--p-accent, #e92038))) !important;
  margin: 0 0 1.2rem 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* ── TITLE (tek satır) ── */
html #ovIntro .bb-title,
html #screenIntro .bb-title,
html #nmIntro .nmi-h1,
html #pbIntro .nmi-h1,
html #mcIntro .nmi-h1,
html #heapIntro .hp-title,
html #kaahinIntro .kk-intro-title,
html #iniverseIntro .kk-intro-title {
  font-family: var(--sf, 'Steelfish', sans-serif) !important;
  font-size: clamp(4rem, 10vw, 9rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -.03em !important;
  line-height: 1.02 !important;
  color: #fff !important;
  text-align: center !important;
  margin: 0 0 .6rem 0 !important;
  white-space: nowrap !important;
  display: inline-block !important;
}
html #ovIntro .bb-title br,
html #screenIntro .bb-title br,
html #nmIntro .nmi-h1 br,
html #pbIntro .nmi-h1 br,
html #mcIntro .nmi-h1 br,
html #heapIntro .hp-title br,
html #kaahinIntro .kk-intro-title br,
html #iniverseIntro .kk-intro-title br { display: none !important; }

/* kaahin TR karakter fallback'i korunur (Steelfish ı/İ içermez) */
html #kaahinIntro .kk-intro-title {
  font-family: 'Steelfish', 'Bebas Neue', 'Oswald', 'Impact', sans-serif !important;
}

/* ── SUB ── */
html #ovIntro .bb-sub,
html #screenIntro .bb-sub,
html #nmIntro .nmi-sub,
html #pbIntro .nmi-sub,
html #mcIntro .nmi-sub,
html #heapIntro .hp-sub,
html #kaahinIntro .kk-sub,
html #iniverseIntro .kk-sub {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .56rem !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .5) !important;
  text-align: center !important;
  margin: 0 auto 2.2rem auto !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* ── CTA ── */
html #ovIntro .ov-btn,
html #screenIntro .nmi-cta,
html #nmIntro .nmi-cta,
html #pbIntro .nmi-cta,
html #mcIntro .nmi-cta,
html #heapIntro .hp-enter,
html #kaahinIntro .kk-cta,
html #iniverseIntro .kk-cta {
  position: relative !important;
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  padding: 1.1rem 2.4rem !important;
  border: 1px solid rgba(255, 255, 255, .25) !important;   /* 1px dış border */
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--red, var(--acc, var(--p-accent, #e92038))) !important;
  margin: 0 0 2rem 0 !important;
  box-shadow: 0 8px 30px rgba(233, 32, 56, .4) !important;
  transition: background .25s ease, box-shadow .25s ease !important;
  transform: none !important;   /* sayfa-içi hover translateY'yi nötrle */
  overflow: visible !important;
  isolation: isolate !important;
}
/* Border ışık treni — yüksek özgüllük (sayfa-içi stilleri ezer).
   ::before = SABİT halka, ::after = dolaşan ışık treni. */
html #ovIntro .ov-btn::before,
html #screenIntro .nmi-cta::before,
html #nmIntro .nmi-cta::before,
html #pbIntro .nmi-cta::before,
html #mcIntro .nmi-cta::before,
html #heapIntro .hp-enter::before,
html #kaahinIntro .kk-cta::before,
html #iniverseIntro .kk-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 999px !important;
  padding: 1px !important;
  background: rgba(255, 255, 255, .22) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  animation: none !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
html #ovIntro .ov-btn::after,
html #screenIntro .nmi-cta::after,
html #nmIntro .nmi-cta::after,
html #pbIntro .nmi-cta::after,
html #mcIntro .nmi-cta::after,
html #heapIntro .hp-enter::after,
html #kaahinIntro .kk-cta::after,
html #iniverseIntro .kk-cta::after {
  content: '' !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: 999px !important;
  padding: 1px !important;
  background: conic-gradient(from var(--inlab-angle, 0deg),
      transparent 0deg,
      rgba(255, 255, 255, .15) 18deg,
      rgba(255, 255, 255, 1) 30deg,
      rgba(255, 120, 130, 1) 38deg,
      rgba(255, 255, 255, .15) 52deg,
      transparent 70deg,
      transparent 360deg) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  filter: drop-shadow(0 0 4px rgba(255, 120, 130, .9)) !important;
  animation: inlabCtaBorderTrain 3.2s linear infinite !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
/* Hover: KAYMAZ — sadece parlar + tren hızlanır */
html #ovIntro .ov-btn:hover,
html #screenIntro .nmi-cta:hover,
html #nmIntro .nmi-cta:hover,
html #pbIntro .nmi-cta:hover,
html #mcIntro .nmi-cta:hover,
html #heapIntro .hp-enter:hover,
html #kaahinIntro .kk-cta:hover,
html #iniverseIntro .kk-cta:hover {
  background: #ff3047 !important;
  transform: none !important;
  box-shadow: 0 12px 40px rgba(233, 32, 56, .55), 0 0 0 1px rgba(255, 255, 255, .35) !important;
}
html #ovIntro .ov-btn:hover::after,
html #screenIntro .nmi-cta:hover::after,
html #nmIntro .nmi-cta:hover::after,
html #pbIntro .nmi-cta:hover::after,
html #mcIntro .nmi-cta:hover::after,
html #heapIntro .hp-enter:hover::after,
html #kaahinIntro .kk-cta:hover::after,
html #iniverseIntro .kk-cta:hover::after {
  animation-duration: 1.5s !important;
}

/* ── GUIDE WRAPPER ── */
html #ovIntro .nmi-guide,
html #screenIntro .nmi-guide,
html #nmIntro .nmi-guide,
html #pbIntro .nmi-guide,
html #mcIntro .nmi-guide,
html #heapIntro .hp-guide,
html #kaahinIntro .kk-guide,
html #iniverseIntro .kk-guide {
  max-width: 700px !important;
  width: 100% !important;
  margin: 0 auto 1.5rem auto !important;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .025) !important;
}
/* GUIDE ITEM — REFLEXIN kutu hissi (yüksek özgüllük) */
html #ovIntro .nmi-item,
html #screenIntro .nmi-item,
html #nmIntro .nmi-item,
html #pbIntro .nmi-item,
html #mcIntro .nmi-item,
html #heapIntro .hp-item,
html #kaahinIntro .kk-item,
html #iniverseIntro .kk-item {
  position: relative !important;
  isolation: isolate !important;
  padding: 1.4rem 1rem !important;
  border-right: 1px solid rgba(255, 255, 255, .08) !important;
  transition: background .4s ease !important;
}
html #ovIntro .nmi-item::before,
html #screenIntro .nmi-item::before,
html #nmIntro .nmi-item::before,
html #pbIntro .nmi-item::before,
html #mcIntro .nmi-item::before,
html #heapIntro .hp-item::before,
html #kaahinIntro .kk-item::before,
html #iniverseIntro .kk-item::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: 0 !important;
  transition: opacity .45s ease !important;
  background: radial-gradient(circle at 50% 0%, rgba(233, 32, 56, .16), transparent 65%) !important;
}
html #ovIntro .nmi-item:hover::before,
html #screenIntro .nmi-item:hover::before,
html #nmIntro .nmi-item:hover::before,
html #pbIntro .nmi-item:hover::before,
html #mcIntro .nmi-item:hover::before,
html #heapIntro .hp-item:hover::before,
html #kaahinIntro .kk-item:hover::before,
html #iniverseIntro .kk-item:hover::before {
  opacity: 1 !important;
}

/* ── GUIDE ITEM h5 → POPPINS (kullanıcı talebi) ── */
html #ovIntro .nmi-item h5,
html #screenIntro .nmi-item h5,
html #nmIntro .nmi-item h5,
html #pbIntro .nmi-item h5,
html #mcIntro .nmi-item h5,
html #heapIntro .hp-item h5,
html #kaahinIntro .kk-item h5,
html #iniverseIntro .kk-item h5 {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
  color: #fff !important;
  margin: 0 0 .25rem 0 !important;
  line-height: 1.1 !important;
}

/* ── GUIDE ITEM p ── */
html #ovIntro .nmi-item p,
html #screenIntro .nmi-item p,
html #nmIntro .nmi-item p,
html #pbIntro .nmi-item p,
html #mcIntro .nmi-item p,
html #heapIntro .hp-item p,
html #kaahinIntro .kk-item p,
html #iniverseIntro .kk-item p {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .45rem !important;
  color: rgba(255, 255, 255, .5) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  letter-spacing: 0 !important;
}

/* ── GUIDE ITEM i ── */
html #ovIntro .nmi-item i,
html #screenIntro .nmi-item i,
html #nmIntro .nmi-item i,
html #pbIntro .nmi-item i,
html #mcIntro .nmi-item i,
html #heapIntro .hp-item i,
html #kaahinIntro .kk-item i,
html #iniverseIntro .kk-item i {
  font-size: 1rem !important;
  color: var(--red, var(--acc, var(--p-accent, #e92038))) !important;
  display: block !important;
  margin: 0 0 .5rem 0 !important;
}

/* ── HINT ── */
html #ovIntro .nmi-hint,
html #screenIntro .nmi-hint,
html #nmIntro .nmi-hint,
html #pbIntro .nmi-hint,
html #mcIntro .nmi-hint,
html #heapIntro .hp-hint,
html #kaahinIntro .kk-hint,
html #iniverseIntro .kk-hint {
  font-family: var(--pp, 'Poppins', sans-serif) !important;
  font-size: .4rem !important;
  letter-spacing: .3em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, .32) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem !important;
  margin: 0 !important;
}

/* ── MOBILE (≤720px) güçlü override ── */
@media (max-width: 720px) {
  html #ovIntro .bb-title,
  html #screenIntro .bb-title,
  html #nmIntro .nmi-h1,
  html #pbIntro .nmi-h1,
  html #mcIntro .nmi-h1,
  html #heapIntro .hp-title,
  html #kaahinIntro .kk-intro-title,
  html #iniverseIntro .kk-intro-title {
    font-size: clamp(3rem, 13vw, 5.5rem) !important;
  }
  html #ovIntro .nmi-guide,
  html #screenIntro .nmi-guide,
  html #nmIntro .nmi-guide,
  html #pbIntro .nmi-guide,
  html #mcIntro .nmi-guide,
  html #heapIntro .hp-guide,
  html #kaahinIntro .kk-guide,
  html #iniverseIntro .kk-guide {
    flex-direction: column !important;
    max-width: 420px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   10) INTRO BETA ROZETİ — TEK STANDART (tüm sayfalarda birebir aynı)
   ----------------------------------------------------------------
   Referans: brief-breaker.html
   Başlığın <em> (kırmızı) kısmının sağında, üst hizada konumlanır.
   Tüm sayfa-içi farklı em::after BETA tanımlarını ezer.
═══════════════════════════════════════════════════════════════════ */
html #ovIntro .bb-title em::after,
html #screenIntro .bb-title em::after,
html #nmIntro .nmi-h1 em::after,
html #pbIntro .nmi-h1 em::after,
html #mcIntro .nmi-h1 em::after,
html #heapIntro .hp-title em::after,
html #kaahinIntro .kk-intro-title em::after,
html #iniverseIntro .kk-intro-title em::after {
  content: 'beta' !important;
  position: absolute !important;
  top: .15em !important;
  left: 100% !important;
  margin-left: .35rem !important;
  font-family: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  color: #fff !important;
  background: var(--red, var(--acc, var(--p-accent, #e92038))) !important;
  border-radius: 3px !important;
  text-transform: uppercase !important;
  pointer-events: none !important;
  user-select: none !important;
  white-space: nowrap !important;
  box-shadow: 0 0 10px rgba(233, 32, 56, .55) !important;
}

/* ════════════════════════════════════════════════════════════════
   11) KAAHIN px KİLİDİ — html{font-size:13px} ETKİSİNİ SIFIRLA
   ----------------------------------------------------------------
   rem her zaman <html>'e (KAAHIN'de 13px) bağlıdır; container'a verdiğimiz
   16px rem'i ETKİLEMEZ. Bu yüzden KAAHIN intro öğeleri %19 küçük çıkıyordu.
   ÇÖZÜM: KAAHIN intro öğelerini Brief Breaker'ın 16px-baz px karşılıklarına
   SABİTLE. Bu blok dosyanın sonunda → genel kuralları kesin ezer.
   (Diğer sayfalar root=16px olduğu için zaten doğru; onlara dokunulmaz.)
═══════════════════════════════════════════════════════════════════ */
html #kaahinIntro .kk-eyebrow     { font-size: 7.7px !important;  margin-bottom: 19.2px !important; }
html #kaahinIntro .kk-intro-title { margin-bottom: 9.6px !important; }
html #kaahinIntro .kk-sub         { font-size: 9px !important;    margin: 0 auto 35.2px auto !important; max-width: 520px !important; }
html #kaahinIntro .kk-cta         { font-size: 12.8px !important; padding: 17.6px 38.4px !important; margin: 0 0 32px 0 !important; }
html #kaahinIntro .kk-guide       { margin: 0 auto 24px auto !important; max-width: 700px !important; }
html #kaahinIntro .kk-item        { padding: 19.2px 14.4px !important; }
html #kaahinIntro .kk-item i      { font-size: 16px !important;   margin-bottom: 8px !important; }
html #kaahinIntro .kk-item h5     { font-size: 15.2px !important; margin-bottom: 4px !important; }
html #kaahinIntro .kk-item p      { font-size: 7.2px !important;  }
html #kaahinIntro .kk-hint        { font-size: 6.4px !important;  }