/* ===== Glow buton efekti (CEO 2026-10-10) =====
   components/ui/glowing-button.tsx bileşeninin statik vitrin karşılığı.
   Her sayfanın kendi .btn tanımının ÜZERİNE katman biner; ışıma rengi o
   sayfanın --acc değişkeninden gelir (index mavisi, ürün sayfaları kırmızı...).
   Next.js yüzeylerindeki karşılığı: apps/web/styles/globals.css sonundaki
   "Glow buton efekti" bloğu. İçerik değişince HTML'deki ?v= yükseltin.

   Gruplar:
   - TAM (5px çizgi + sheen): .btn .hq-fbtn .pn-cta .gp-open
   - SEKME/küçük (3px çizgi + sheen): .tchip .lang button .pgn-btn .vbtn .mbtn
   - ÇİZGİ-YALNIZ (::after .ditem.active göstergesine ait): .ditem           */

.btn,
.hq-fbtn,
.pn-cta,
.gp-open,
.tchip,
.lang button,
.pgn-btn,
.vbtn,
.mbtn,
.hq-open,
.ditem {
  position: relative;
  overflow: hidden;
  z-index: 0;
  --glow-color: var(--acc, #079FF5);
  --glow-color-via: color-mix(in srgb, var(--glow-color) 7.5%, transparent);
  --glow-color-to: color-mix(in srgb, var(--glow-color) 20%, transparent);
  --glow-streak-w: 5px;
}

/* sekmeler ve küçük kontrollerde daha ince çizgi */
.tchip,
.lang button,
.pgn-btn,
.vbtn,
.mbtn,
.hq-open,
.ditem {
  --glow-streak-w: 3px;
}

/* sheen — butonun enine yayılan, metnin üstünde duran cam parıltısı */
.btn::after,
.hq-fbtn::after,
.pn-cta::after,
.gp-open::after,
.tchip::after,
.lang button::after,
.pgn-btn::after,
.vbtn::after,
.mbtn::after,
.hq-open::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    transparent 40%,
    var(--glow-color-via) 70%,
    var(--glow-color-to) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink, #EDF0F4) 15%, transparent);
}

/* streak — sağ kenardaki ışıyan çizgi; hover'da sağa kayıp taşar
   (.ditem'de ::after aktif göstergesine ait olduğu için çizgi ::before'da) */
.btn::before,
.hq-fbtn::before,
.pn-cta::before,
.gp-open::before,
.tchip::before,
.lang button::before,
.pgn-btn::before,
.vbtn::before,
.mbtn::before,
.hq-open::before,
.ditem::before {
  content: "";
  position: absolute;
  top: 20%;
  right: 0;
  width: var(--glow-streak-w, 5px);
  height: 60%;
  border-radius: 4px 0 0 4px;
  background: var(--glow-color);
  box-shadow: -2px 0 10px var(--glow-color);
  transition: transform 0.2s ease;
  z-index: 1;
  pointer-events: none;
}

.btn:hover::before,
.hq-fbtn:hover::before,
.pn-cta:hover::before,
.gp-open:hover::before,
.tchip:hover::before,
.lang button:hover::before,
.pgn-btn:hover::before,
.vbtn:hover::before,
.mbtn:hover::before,
.hq-open:hover::before,
.ditem:hover::before {
  transform: translateX(100%);
}

/* ===== 3. tur (CEO): sidebar + kalan butonlar + hover'da tam iç renk =====
   Işıma her butonun kendi dolgu rengiyle yanar (btn-p/İncele → kendi --acc,
   sidebar mtab → kendi --mc). Hover'da sheen tam renge doğru güçlenir. */

/* üst çubuk / şerit pill butonları (Ana Sayfa vb.) */
.pill,
.fhome {
  position: relative;
  overflow: hidden;
  z-index: 0;
  --glow-color: var(--acc, #079FF5);
  --glow-color-via: color-mix(in srgb, var(--glow-color) 7.5%, transparent);
  --glow-color-to: color-mix(in srgb, var(--glow-color) 20%, transparent);
  --glow-streak-w: 3px;
}
.pill::after,
.fhome::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to right,
    transparent 40%,
    var(--glow-color-via) 70%,
    var(--glow-color-to) 100%
  );
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink, #EDF0F4) 15%, transparent);
}
.pill::before,
.fhome::before {
  content: "";
  position: absolute;
  top: 20%;
  right: 0;
  width: var(--glow-streak-w, 3px);
  height: 60%;
  border-radius: 4px 0 0 4px;
  background: var(--glow-color);
  box-shadow: -2px 0 10px var(--glow-color);
  transition: transform 0.2s ease;
  z-index: 1;
  pointer-events: none;
}
.pill:hover::before,
.fhome:hover::before {
  transform: translateX(100%);
}

/* sidebar (fmenu > a.mtab): her öğe KENDİ --mc rengiyle yanar.
   .mtab.on::before sol aktif göstergesidir (left:-15px taşar) → KIRPMA yok,
   ışıma çizgisi ::after'da, hover'da söner. */
.mtab {
  position: relative;
  z-index: 0;
  --glow-color: var(--mc, var(--acc, #079FF5));
  --glow-streak-w: 3px;
}
.mtab::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 0;
  width: var(--glow-streak-w, 3px);
  height: 60%;
  border-radius: 4px 0 0 4px;
  background: var(--glow-color);
  box-shadow: -2px 0 10px var(--glow-color);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
  z-index: 1;
  pointer-events: none;
}
.mtab:hover::after {
  opacity: 0;
}

/* hover'da buton kendi iç renginde TAM parlar (sheen güçlenir) */
.btn:hover::after,
.hq-fbtn:hover::after,
.pn-cta:hover::after,
.gp-open:hover::after,
.tchip:hover::after,
.lang button:hover::after,
.pgn-btn:hover::after,
.vbtn:hover::after,
.mbtn:hover::after,
.hq-open:hover::after,
.pill:hover::after,
.fhome:hover::after {
  background: linear-gradient(
    to right,
    transparent 25%,
    color-mix(in srgb, var(--glow-color) 30%, transparent) 60%,
    color-mix(in srgb, var(--glow-color) 55%, transparent) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .btn::before,
  .hq-fbtn::before,
  .pn-cta::before,
  .gp-open::before,
  .tchip::before,
  .lang button::before,
  .pgn-btn::before,
  .vbtn::before,
  .mbtn::before,
  .hq-open::before,
  .ditem::before,
  .pill::before,
  .fhome::before,
  .mtab::after {
    transition: none;
  }
}


/* ===== 4. tur (CEO): DOLGU DOLU butonlarda sağ çizgi kaba durur.
   Çizgi KALDIRILIR; yerine: hover'da buton KENDİ rengiyle yumuşakça dolar.
   (btn-p/pn-cta dolgu dolu; gp-open = kart İncele'si) ===== */
.btn-p::before,
.pn-cta::before,
.gp-open::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: var(--glow-color);
  box-shadow: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.btn-p:hover::before,
.pn-cta:hover::before,
.gp-open:hover::before {
  transform: none;
  opacity: 0.32;
}