/* ==========================================================
   Test/Index — Urunler/Index glass dili (scope'lu)
   ========================================================== */

.test-page .card,
.test-page .card.border,
.test-page .card.shadow-sm,
.test-page .card.shadow-lg{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
}

.test-page h1{ color: rgba(255,255,255,.92) !important; }
.test-page .test-muted{ color: rgba(234,240,255,.72) !important; }

.test-page .test-link{
  color: inherit;
  text-decoration: none;
}

/* kutular */
.test-page .test-tile{
  background: rgba(12,16,28,.30);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 18px;
  padding: 16px 12px;
  min-height: 110px;

  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);

  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.test-page .test-tile:hover{
  transform: translateY(-2px);
  background: rgba(17,25,40,.40);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.34);
}

/* icon */
.test-page .test-icon{
  font-size: 2rem;
  color: #ff4500;
  filter: drop-shadow(0 10px 18px rgba(255,69,0,.12));
}

/* kutu içi text */
.test-page .test-tile > div{
  color: rgba(255,255,255,.90);
  font-weight: 800;
}

/* mobilde sıkışmasın */
@media (max-width: 576px){
  .test-page .test-tile{
    min-height: 104px;
    padding: 14px 10px;
  }
  .test-page .test-icon{ font-size: 1.85rem; }
}
/* ==========================================================
   Test/Index — Urunler/Index glass dili (scope'lu)
   ========================================================== */
/* ==========================================================
   Test/GamePad — Aurora Glass (scope: .gp-sim)
   ========================================================== */

.gp-sim{
  /* küçük tokenlar */
  --gp-border: rgba(148,163,184,.16);
  --gp-panel: rgba(12,16,28,.28);
  --gp-panel-2: rgba(17,25,40,.34);
  --gp-text: rgba(234,240,255,.92);
  --gp-muted: rgba(234,240,255,.72);
}

/* başlık */
.gp-sim .gp-head h2{
  margin: 0 0 .25rem 0;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.92);
}
.gp-sim .gp-head p{
  margin: 0 0 .9rem 0;
  color: var(--gp-muted);
}

/* layout */
.gp-sim .gp-grid{
  display: grid;
  gap: 14px;
}

/* analog kartları */
.gp-sim .gp-analogs{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.gp-sim .gp-panel{
  background: var(--gp-panel);
  border: 1px solid var(--gp-border);
  border-radius: 18px;
  padding: 16px 14px;

  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);

  box-shadow: 0 18px 50px rgba(0,0,0,.26);
}

.gp-sim .gp-label{
  margin: 0 0 .6rem 0;
  font-weight: 800;
  color: rgba(255,255,255,.90);
}

/* analog alan */
.gp-sim .gp-analog-area{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;

  border: 1px dashed rgba(255,69,0,.55);
  background:
    radial-gradient(140px 140px at 50% 50%, rgba(255,69,0,.10), transparent 62%),
    rgba(12,16,28,.24);

  position: relative;
  overflow: hidden;
}

.gp-sim .gp-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4500;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 18px rgba(255,69,0,.35);
  transition: transform .05s ease;
}

/* L2/R2 alanı */
.gp-sim .gp-triggers{
  background: var(--gp-panel);
  border: 1px solid var(--gp-border);
  border-radius: 18px;
  padding: 16px 14px;

  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* label + progress hizalama (kayma burada çözülüyor) */
.gp-sim .gp-triggers .row{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: center;
  margin: 0;
}

.gp-sim .gp-triggers label{
  margin: 0;
  color: rgba(255,255,255,.86);
  font-weight: 800;
  white-space: nowrap;
}

.gp-sim .gp-progress{
  width: 100%;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  appearance: none;
}

/* progress glass */
.gp-sim .gp-progress::-webkit-progress-bar{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 999px;
}
.gp-sim .gp-progress::-webkit-progress-value{
  background: linear-gradient(90deg, rgba(255,69,0,.95), rgba(255,69,0,.55));
  border-radius: 999px;
}
.gp-sim .gp-progress::-moz-progress-bar{
  background: linear-gradient(90deg, rgba(255,69,0,.95), rgba(255,69,0,.55));
  border-radius: 999px;
}

/* buton grid */
.gp-sim .gp-buttons{
  background: var(--gp-panel);
  border: 1px solid var(--gp-border);
  border-radius: 18px;
  padding: 16px 14px;

  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

.gp-sim .gp-button-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 10px;
}

.gp-sim .gp-button-grid button{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(12,16,28,.28);
  color: rgba(255,255,255,.88);
  font-weight: 900;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease;
}

.gp-sim .gp-button-grid button.pressed{
  background:
    radial-gradient(120% 120% at 20% 0%, rgba(255,69,0,.35), transparent 60%),
    rgba(255,69,0,.14);
  border-color: rgba(255,69,0,.45);
  transform: translateY(-1px);
}

/* aksiyon */
.gp-sim .gp-actions{
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-top: 6px;
}

.gp-sim .note{
  margin: 0;
  color: var(--gp-muted);
  font-weight: 700;
  font-size: .92rem;
  text-align: center;
}

/* responsive */
@media (max-width: 768px){
  .gp-sim .gp-analogs{ grid-template-columns: 1fr; }
  .gp-sim .gp-triggers .row{
    grid-template-columns: 1fr;
  }
  .gp-sim .gp-triggers label{
    white-space: normal;
  }
}
/* ==========================================================
   Test/GamePad — Aurora Glass (scope: .gp-sim)
   ========================================================== */
   /* ============== Hoparlör Test (Denerim Aurora Glass) ============== */

.hop-test-page .test-card{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.hop-test-page .test-card:hover{
  transform: translateY(-1px);
}

/* Title: turuncu aurora */
.hop-test-page .test-title{
  font-weight: 900;
  letter-spacing: -.02em;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  background: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hop-test-page .test-subtle,
.hop-test-page .test-status,
.hop-test-page .track-subtle,
.hop-test-page .time{
  color: rgba(234,240,255,.72) !important;
}

.hop-test-page kbd{
  background: rgba(12,16,28,.45);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 10px;
  padding: .12rem .42rem;
  color: rgba(255,255,255,.86);
}

/* truncation */
.hop-test-page .truncate{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Player layout */
.hop-test-page .player{ gap: 1rem; }

/* Cover */
.hop-test-page .cover{
  width: 72px;
  height: 72px;
  border-radius: 14px;
  background: rgba(12,16,28,.35);
  border: 1px solid rgba(148,163,184,.14);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

.hop-test-page .badge-note{
  display:flex;
  gap: 6px;
  opacity: .92;
}

.hop-test-page .badge-note .dot{
  width: 10px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,69,0,.95), rgba(255,255,255,.55));
  opacity: .95;
}

/* Track */
.hop-test-page .track-title{
  font-weight: 800;
  color: rgba(255,255,255,.92);
}

/* Chips = urunler index chip mantığı */
.hop-test-page .channel-chips{ display:flex; gap:.4rem; flex-wrap: wrap; }

.hop-test-page .chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .34rem .72rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.88);
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.hop-test-page .chip:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }

.hop-test-page .chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18);
}

.hop-test-page .chip[aria-pressed="true"]{
  background: rgba(255,69,0,.90);
  border-color: rgba(255,69,0,.90);
  color: #fff;
  box-shadow: 0 14px 34px rgba(255,69,0,.18);
}

/* Play btn: theme.css zaten .btn'leri glass yapıyor
   burada ctrl özel görünüm */
.hop-test-page .ctrl{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgba(255,69,0,.35);
  background:
    radial-gradient(140% 140% at 20% 0%, rgba(255,69,0,.40), transparent 60%),
    linear-gradient(180deg, rgba(255,69,0,.90), rgba(255,69,0,.72));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.05rem;
  box-shadow: 0 16px 40px rgba(255,69,0,.18);
  transition: transform .12s ease, filter .18s ease, box-shadow .18s ease;
}

.hop-test-page .ctrl:active{ transform: scale(.98); }
.hop-test-page .ctrl:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,106,26,.22), 0 16px 40px rgba(255,69,0,.18);
}

/* Ranges */
.hop-test-page .seek-range{
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 999px;
  width: 100%;
  background: rgba(255,255,255,.08);
  outline: none;
}

.hop-test-page .seek-range::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.14);
}

.hop-test-page .seek-range::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.14);
}

.hop-test-page .seek-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(17,25,40,.55);
  border: 2px solid rgba(255,69,0,.95);
  margin-top: -3px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.hop-test-page .seek-range:focus-visible{
  box-shadow: 0 0 0 3px rgba(168,85,247,.18);
}

.hop-test-page .vol-range{
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  outline: none;
  border: 1px solid rgba(148,163,184,.14);
}

.hop-test-page .vol-range::-webkit-slider-runnable-track{
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.hop-test-page .vol-range::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(17,25,40,.55);
  border: 2px solid rgba(255,69,0,.95);
  margin-top: -4px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

@media (max-width: 480px){
  .hop-test-page .vol-range{ width: 110px; }
}

@media (prefers-reduced-motion: reduce){
  .hop-test-page .test-card,
  .hop-test-page .chip,
  .hop-test-page .ctrl{
    transition: none !important;
  }
}


/* ============== Test/Klavye (Denerim Aurora Glass) ============== */
.kbtest-page .kb-card{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
}

.kbtest-page .kb-title{
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.92);
}

.kbtest-page .kb-title-sm{
  font-weight: 900;
  letter-spacing: -.02em;
  background: linear-gradient(90deg, rgba(255,69,0,.92), rgba(255,255,255,.92));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kbtest-page .kb-sub{
  color: rgba(234,240,255,.76) !important;
}

.kbtest-page .kb-sep{
  border: 0;
  height: 2px;
  width: clamp(220px, 52vw, 540px);
  margin: .75rem auto 1.1rem;
  background: linear-gradient(90deg, transparent, rgba(255,69,0,.9), transparent);
}

/* ===== Klavye sim kabuğu ===== */
.kbtest-page .kb-sim{
  margin-top: 1rem;
}

.kbtest-page .kb-overlay{
  background: rgba(12,16,28,.55);
  border: 1px solid rgba(148,163,184,.18);
  color: rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 10px 14px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}

.kbtest-page .kb-keyboard{
  background: rgba(12,16,28,.35);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* ===== Tuşlar (key) ===== */
.kbtest-page .key{
  background: rgba(17,25,40,.38);
  border: 1px solid rgba(148,163,184,.16);
  color: rgba(255,255,255,.88);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  user-select: none;
}

.kbtest-page .key:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}

/* JS genelde .active/.pressed gibi class basıyor, ikisini de yakalayalım */
.kbtest-page .key.active,
.kbtest-page .key.pressed{
  background: rgba(255,69,0,.90) !important;
  border-color: rgba(255,69,0,.90) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(255,69,0,.18) !important;
}

/* Eğer JS class yerine inline style veriyorsa da görünüm bozulmasın */
.kbtest-page .key[style*="background"]{
  border-color: rgba(255,255,255,.18);
}

/* ===== Paneller ===== */
.kbtest-page .kb-panels{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.kbtest-page .kb-panels .panel{
  background: rgba(12,16,28,.35);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 16px;
  padding: 12px 14px;
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

.kbtest-page .kb-panels .ttl{
  font-weight: 900;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.kbtest-page .kb-panels .content{
  color: rgba(234,240,255,.76);
  font-variant-numeric: tabular-nums;
}

/* ===== Alert (chatter legend) ===== */
.kbtest-page .kb-alert{
  background: rgba(12,16,28,.35) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  color: rgba(255,255,255,.86) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* ===== Chatter word chips (testWords içine span/div basıyorsan) ===== */
.kbtest-page #testWords > *{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.16);
  color: rgba(255,255,255,.88);
  border-radius: 999px;
  padding: .28rem .6rem;
  font-weight: 800;
}

/* textarea glass */
.kbtest-page .form-control{
  background: rgba(12,16,28,.40) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.kbtest-page .form-control::placeholder{
  color: rgba(234,240,255,.55) !important;
}
.kbtest-page .form-control:focus{
  border-color: rgba(168,85,247,.45) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
  outline: none !important;
}


/* ============== Test/Mikrofon (Denerim Aurora Glass) ============== */
.mic-page .mic-card{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
}

.mic-page .mic-title{
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.92);
}

.mic-page .mic-sub{
  color: rgba(234,240,255,.76);
}

.mic-page .mic-alert{
  background: rgba(255,69,0,.10) !important;
  border: 1px solid rgba(255,69,0,.35) !important;
  color: rgba(255,235,228,.96) !important;
  border-radius: 16px !important;
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* Select glass */
.mic-page .form-select{
  background: rgba(12,16,28,.40) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.mic-page .form-select:focus{
  border-color: rgba(168,85,247,.45) !important; /* mor focus */
  box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
  outline: none !important;
}

/* Timer pill */
.mic-page .mic-timer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .45rem .8rem;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(148,163,184,.16);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* Visualizer frame */
.mic-page .mic-viz-wrap{
  display: inline-flex;
  padding: 12px;
  border-radius: 16px;
  background: rgba(12,16,28,.35);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* Canvas boyutu net dursun */
.mic-page #visualizer{
  width: 240px;
  height: 80px;
  display: block;
}

/* Audio glass */
.mic-page .mic-audio{
  border-radius: 16px;
  padding: 8px;
  background: rgba(12,16,28,.35);
  border: 1px solid rgba(148,163,184,.14);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}
/* ============== Test/Monitor (Denerim Index Glass) ============== */
.monitor-page .monitor-card{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
}

.monitor-page .monitor-title{
  color: rgba(255,255,255,.92);
  letter-spacing: -.02em;
  font-weight: 900;
}

.monitor-page .monitor-hr{
  border: 0;
  height: 2px;
  width: 60%;
  margin: 14px auto 16px;
  background: linear-gradient(90deg, transparent, rgba(255,69,0,.95), transparent);
}

.monitor-page .monitor-sub{ color: rgba(234,240,255,.76); }
.monitor-page .monitor-help{ color: rgba(234,240,255,.70); }
.monitor-page .monitor-muted{ color: rgba(234,240,255,.62); }

/* Controls wrapper -> iç kart hissi */
.monitor-page .monitor-controls{
  padding: 14px;
  border-radius: 18px;
  background: rgba(12,16,28,.30);
  border: 1px solid rgba(148,163,184,.14);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* Divider */
.monitor-page .monitor-divider{
  border-color: rgba(148,163,184,.14) !important;
}

/* Form controls glass (Index ile aynı) */
.monitor-page .form-control,
.monitor-page .form-select{
  background: rgba(12,16,28,.40) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.monitor-page .form-control:focus,
.monitor-page .form-select:focus{
  border-color: rgba(168,85,247,.45) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
  outline: none !important;
}

/* Switch / checkbox */
.monitor-page .form-check-input{
  background-color: rgba(12,16,28,.55) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
}
.monitor-page .form-check-input:checked{
  background-color: rgba(255,69,0,.95) !important;
  border-color: rgba(255,69,0,.95) !important;
}

/* Range: biraz glass */
.monitor-page .form-range{
  accent-color: var(--dn-orange, #ff4500);
}
.monitor-page input[type="range"]{
  filter: saturate(1.1);
}

/* Swatches: button yapınca focus + hover güzelleşir */
.monitor-page .monitor-swatches .swatch{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
  cursor: pointer;
  padding: 0;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.monitor-page .monitor-swatches .swatch:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22);
}
.monitor-page .monitor-swatches .swatch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(168,85,247,.22), 0 10px 22px rgba(0,0,0,.25);
}

/* Color picker biraz daha cam dursun */
.monitor-page .monitor-color{
  padding: .35rem !important;
  height: 44px;
}

/* Test area: frame */
.monitor-page .monitor-testarea{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  min-height: 360px; /* JS boyamadan önce de alan belli olsun */
}

/* Sticky "show UI" */
.monitor-page .monitor-sticky{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 6000;
}

/* ============== Test/Kamera (Denerim Index Glass) ============== */
.kamera-page .kamera-card{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
}

.kamera-page .kamera-title{
  color: rgba(255,255,255,.92);
  letter-spacing: -.02em;
  font-weight: 900;
}

.kamera-page .kamera-sub{
  color: rgba(234,240,255,.76);
}

.kamera-page .kamera-hr{
  border: 0;
  height: 2px;
  width: 60%;
  margin: 14px auto 18px;
  background: linear-gradient(90deg, transparent, rgba(255,69,0,.95), transparent);
}

/* Control block (küçük iç panel hissi) */
.kamera-page .kamera-controls{
  padding: 12px;
  border-radius: 18px;
  background: rgba(12,16,28,.30);
  border: 1px solid rgba(148,163,184,.14);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* Form controls glass */
.kamera-page .form-control,
.kamera-page .form-select{
  background: rgba(12,16,28,.40) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

.kamera-page .form-control:focus,
.kamera-page .form-select:focus{
  border-color: rgba(168,85,247,.45) !important;
  box-shadow: 0 0 0 3px rgba(168,85,247,.18) !important;
  outline: none !important;
}

/* Checkbox / switch */
.kamera-page .form-check-input{
  background-color: rgba(12,16,28,.55) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
}
.kamera-page .form-check-input:checked{
  background-color: rgba(255,69,0,.95) !important;
  border-color: rgba(255,69,0,.95) !important;
}
.kamera-page .form-check-label{
  color: rgba(234,240,255,.76) !important;
}

/* Video frame */
.kamera-page .kamera-video-wrap{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(0,0,0,.35);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.kamera-page .kamera-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Advanced panel */
.kamera-page .kamera-advanced{
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(12,16,28,.30);
  border: 1px solid rgba(148,163,184,.14);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
}

/* Range */
.kamera-page .form-range{
  accent-color: var(--dn-orange, #ff4500);
}

/* Snapshot card */
.kamera-page .kamera-snap{
  text-align: left;
  border-radius: 18px;
  background: rgba(12,16,28,.30);
  border: 1px solid rgba(148,163,184,.14);
  box-shadow: 0 18px 50px rgba(0,0,0,.30);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  overflow: hidden;
}

.kamera-page .kamera-snap-head{
  padding: 12px 14px;
  font-weight: 900;
  color: rgba(255,255,255,.90);
  border-bottom: 1px solid rgba(148,163,184,.14);
  background: rgba(17,25,40,.26);
}

.kamera-page .kamera-snap-body{
  padding: 16px;
  min-height: 160px;
}

.kamera-page .kamera-snap-foot{
  padding: 12px 14px;
  border-top: 1px solid rgba(148,163,184,.14);
  background: rgba(17,25,40,.18);
}

/* Bootstrap disabled anchor biraz garip durabiliyor, daha net yapalım */
.kamera-page a.disabled{
  pointer-events: none;
  opacity: .55;
}

/* ============== Test/Mouse (Denerim Index Glass) ============== */
.mouse-page .mouse-card{
  background: rgba(17,25,40,.42) !important;
  border: 1px solid rgba(148,163,184,.16) !important;
  border-radius: 18px !important;
  box-shadow: var(--shadow-md, 0 22px 60px rgba(0,0,0,.45)) !important;
  -webkit-backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  backdrop-filter: blur(var(--blur,16px)) saturate(1.35);
  color: rgba(234,240,255,.92);
}

.mouse-page .mouse-title{
  color: rgba(255,255,255,.92);
  letter-spacing: -.02em;
  font-weight: 900;
}

.mouse-page .mouse-sub{
  color: rgba(234,240,255,.76);
  max-width: 760px;
  margin: 0 auto;
}

.mouse-page .mouse-hr{
  border: 0;
  height: 2px;
  width: 60%;
  margin: 12px auto 18px;
  background: linear-gradient(90deg, transparent, rgba(255,69,0,.95), transparent);
}

/* Mouse sahnesi */
.mouse-page .mouse-shape{
  position: relative;
  width: 220px;
  height: 320px;
  border-radius: 999px;
  background: rgba(12,16,28,.38);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  overflow: hidden;
}

/* Üstte aurora highlight */
.mouse-page .mouse-shape::before{
  content:"";
  position:absolute;
  inset:-30% -20% auto -20%;
  height: 55%;
  background:
    radial-gradient(closest-side at 40% 30%, rgba(168,85,247,.26), transparent 70%),
    radial-gradient(closest-side at 70% 20%, rgba(37,99,235,.18), transparent 72%);
  pointer-events:none;
}

/* Butonlar */
.mouse-page .mouse-button{
  position: absolute;
  top: 26px;
  width: 50%;
  height: 48%;
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(17,25,40,.25);
  transition: transform .12s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.mouse-page .mouse-button.left{
  left: 0;
  border-top-left-radius: 999px;
  border-right: 1px solid rgba(148,163,184,.10);
}
.mouse-page .mouse-button.right{
  right: 0;
  border-top-right-radius: 999px;
  border-left: 1px solid rgba(148,163,184,.10);
}

.mouse-page .mouse-button.middle{
  left: 50%;
  transform: translateX(-50%);
  top: 62px;
  width: 44px;
  height: 96px;
  border-radius: 999px;
  background: rgba(12,16,28,.45);
}

/* “Aktif” durum (JS tıklayınca class basıyorsan) */
.mouse-page .mouse-button.is-active{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,69,0,.42);
  box-shadow: 0 12px 30px rgba(255,69,0,.12);
  transform: translateY(-1px);
}

/* Scroll göstergesi */
.mouse-page .scroll-indicator{
  position: absolute;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.mouse-page .scroll-indicator.is-scrolling{
  border-color: rgba(168,85,247,.42);
  background: rgba(168,85,247,.18);
}

/* Output box */
.mouse-page .output-box{
  background: rgba(12,16,28,.35);
  border: 1px solid rgba(148,163,184,.16);
  color: rgba(255,255,255,.88);
  border-radius: 16px;
  padding: 14px 16px;
  -webkit-backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  backdrop-filter: blur(calc(var(--blur,16px) - 6px)) saturate(1.25);
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}