/* YAZI TİPLERİ — BULUT TASARIMI (2026-10-18, Fatih onaylı tasarım atlası).
   · 'Goglis Sans' = gövde: NUNITO (yuvarlak uçlu, sıcak; v1'de de Nunito türeviydi). Takma ad
     korundu → uygulamadaki ~20 'Goglis Sans' başvurusu ve Mud tipografisi kendiliğinden geçer.
     Değişken ağırlık 400..900, Latin + Latin-ext + KİRİL (Rusça arayüz artık yedek fonta düşmez),
     italik de var (mesajlardaki *italik* sentez değil gerçek).
   · 'Goglis Display' = başlık/düğme/sekme: FREDOKA (logodaki tombul harfler). Google'ın dağıttığı
     Fredoka'da ğ Ğ ş Ş İ HAZIR glif değil (birleşik işaretle kurulur, alt kümelerde işaret de yok →
     o harfler sessizce yedek fonta düşüyordu). Bu yüzden 500/600/700 statik örneklendi ve eksik
     harfler fontun kendi işaret bağlantı noktalarından eklendi (scratchpad aracı: build_fredoka.py
     → NOTICE). Kiril'de Fredoka yok → yığındaki Nunito'ya düşer.
   Kendi origin'imizden (CDN YOK). Lisans: SIL OFL 1.1 — fonts/*-OFL.txt + NOTICE dağıtımda KALMALI.
   TÜRKÇE: `locl` kuralları i/ı/İ için <html lang="tr"> ister (App.razor:2'de var). */
@font-face { font-family: 'Goglis Sans'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-Italic-cyrillicext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Goglis Sans'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-Italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Goglis Sans'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-Italic-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Goglis Sans'; font-style: italic; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-Italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Goglis Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-cyrillicext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: 'Goglis Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Goglis Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Goglis Sans'; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url('/fonts/Nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Goglis Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/Fredoka-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+011E-011F, U+0130, U+015E-015F, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0308, U+0327, U+2010-2044, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Goglis Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/Fredoka-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+011E-011F, U+0130, U+015E-015F, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0308, U+0327, U+2010-2044, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Goglis Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/Fredoka-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+011E-011F, U+0130, U+015E-015F, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0308, U+0327, U+2010-2044, U+20AC, U+2122, U+2212; }
/* ÜLKE BAYRAKLARI (2026-09-19, Fatih: "yönetim panelinde mobilde bayraklar görünüyor,
   masaüstü ve webde görünmüyor"). SEBEP UYGULAMADA DEĞİL: bayrak emojisi iki "bölgesel
   gösterge" harfinden türer (TR -> U+1F1F9 U+1F1F7) ve Windows'un Segoe UI Emoji fontunda
   ülke bayrağı glifi BİLEREK YOKTUR — Android/iOS/macOS çizer, Windows çizmez. Yani aynı
   HTML telefonda bayrak, masaüstünde iki kutu harf gösteriyordu.
   ÇÖZÜM: yalnız bayrak kod noktalarını kapsayan küçük bir font (77 KB). `unicode-range`
   sayesinde tarayıcı onu SADECE bayrak karakteri görünce indirir ve başka hiçbir metni
   etkilemez; bu yüzden yazı tipi yığınının önüne konması güvenlidir.
   Kaynak: country-flag-emoji-polyfill (MIT) içindeki Twemoji bayrakları (CC-BY 4.0). */
@font-face { font-family: 'Twemoji Country Flags'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/TwemojiCountryFlags.woff2') format('woff2');
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; }
/* Public Sans — GOGLIS SANS'a geçilene kadar yedek olarak duruyordu; artık yalnız font
   yüklenemezse devreye giren zincirin parçası değil, tamamen kaldırıldı.
   (Aşağıdaki iki blok Space Mono'dur — kod blokları için, korunur.) */
/* Space Mono — kod blokları / klavye tuşları için tek-aralıklı yazı tipi. KENDİ origin'imizden (CDN YOK). */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/SpaceMono-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/SpaceMono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/SpaceMono-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/SpaceMono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { color-scheme: light dark; }
/* ---- KAYDIRMA CUBUKLARI TEMAYA UYAR (2026-08-11, kullanici: "uygulamadaki tum scrollar
   temaya gore ozellesmiyor, standart hep, bu da profesyonelligi bozuyor") ----
   Tarayicinin varsayilan cubugu isletim sistemi renginde ciziliyordu: koyu temada beyaz bir
   serit, acik temada gri bir serit. Renkler tema degiskenlerinden gelir, yani 18 temanin
   hepsinde kendiliginden dogru.
   IKI SOZDIZIMI birden: `scrollbar-*` standarttir (Firefox + Chrome 121+), `::-webkit-*` ise
   eski WebKit/Blink icin. Ikisini birden yazmak zorunlu — yalniz standardi yazmak Safari'de,
   yalniz webkit'i yazmak Firefox'ta ise yaramaz.
   `scrollbar-gutter: stable` YAZILMADI bilincli: dar panellerde (kanal listesi) icerik
   genisligini kalici daraltirdi. */
/* Renk METIN RENGINDEN turetilir (color-mix), tema basina degisken TANIMLANMAZ: uygulamada 18
   tema var ve her birine ayri satir yazmak biri eklenince unutulacak bir bakim borcu olurdu.
   --q-text her temada tanimli oldugu icin cubuk koyu temada acik, acik temada koyu cikar. */
/* KAYDIRAC RENGI TEMADAN (2026-08-12, kullanici: "scrollarin renkleri temaya gore
   ayarlanamaz mi?"). Eskiden --q-text'in %30'uydu — teknik olarak temaliydi ama govde rengi
   her koyu temada ayni gri-beyaza yakinsadigi icin varsayilan tarayici cubugu gibi
   gorunuyordu. Artik --q-accent karisimi: okyanusta mavi, ormanda yesil, kahvede kahve...
   "Hakkimizda" popup'inin kaydiraci zaten bu desendeydi, genellestirildi. */
/* KAYDIRAC KURALLARI TEK KAYNAKTA (3580 civari, --q-scroll token'i) — buradaki eski
   kopya 2026-08-12'de kaldirildi: ayni ozgullukteki iki `*` blogu kaynak sirasiyla
   birbirini eziyordu ve buraya yapilan duzenlemeler SESSIZCE olu kaliyordu. */

html, body { margin: 0; height: 100%; }
body { font-family: 'Goglis Sans', system-ui, sans-serif; background: #1a1b1e; overflow: hidden; }
/* #mobil: iOS/Android kenar sektirmesi (rubber-band) uygulama dışını gösteriyordu — light temada
   body'nin sabit koyu rengi "siyahlık" olarak sızıyordu. Tema class'ı body'ye de yansıdığından
   (goglisTheme #9) arka plan temayla eşitlenir + sektirme tamamen kapatılır. */
html, body { overscroll-behavior: none; }
/* `html[class*=]` DE eklendi (2026-08-11): tema artık ilk paint'ten önce <html>'e basılıyor;
   body'nin sınıfı ancak goglis.js çalışınca geliyor ve o ana kadar zemin sabit #1a1b1e kalıp
   temanın ambient gradyanına ATLIYORDU. İkisi birden yazılınca zemin de doğru doğuyor. */
body[class*="theme-"], html[class*="theme-"] body { background: var(--q-ambient, #1a1b1e); }

/* ANDROID FONT BOOST KİLİDİ (#Y5, 2026-07-28 — kullanıcı bug'ı: "PiP'ten dönünce arayüz büyümüş
   gibi duruyor, uygulamayı kapatıp açınca düzeliyor").
   Android WebView varsayılan olarak TEXT_AUTOSIZING ile çalışır: yazı boyutlarına, PENCERE
   GENİŞLİĞİNDEN hesaplanan bir "font boost" çarpanı uygular. PiP'in ~145 CSS px'lik penceresinde
   bu çarpan bozuluyor ve tam ekrana dönünce YENİDEN HESAPLANMIYOR → her şey devasa kalıyor.
   `width=device-width` viewport'umuzda çarpan normalde zaten 1.0 olduğundan bu kilit olağan
   görünümü DEĞİŞTİRMEZ, yalnız PiP'in bozduğu çarpanı imkânsız kılar. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Marka renkleri tema-bağımsız → :root (dialog portalları dahil her yerde tanımlı). #9 */
:root {
    --q-accent: #2F9BFF;   /* BULUT: gökyüzü (eski kahve #A9744C kalktı) */
    --q-online: #23a55a;
    --q-danger: #f23f43;
    --q-danger-soft: #f07b7d; /* koyu zeminde okunur açık kırmızı (metin/ikon) */
    --q-amber: #ef9f27;
    /* Modern yüzey kenarı (Fluent/Geist): yüzeyleri sadece dolguyla değil ince 1px hairline'la da ayır.
       Koyu-uyumlu varsayılan; .theme-light + açık renkli temalar siyah alpha'ya ezer. */
    --q-border: rgba(255,255,255,0.08);
}
.q-root {
    /* vh zoom'dan etkilenmez → root zoom (goglisScale) altında 100vh fiziksel ekranı aşıyordu
       (alt "Ses bağlı" dock'u taşıyordu). Zoom'a bölerek tam otur.
       #4 mobil: 100vh adres çubuğunu SAYAR → composer ekran altında kalıyordu; dvh (dinamik
       viewport) GÖRÜNEN alanı ölçer. İki satır = eski tarayıcı fallback'i. */
    height: calc(100vh / var(--q-zoom, 1));
    height: calc(100dvh / var(--q-zoom, 1));
    /* #2: uygulama kromu METİN DEĞİL — kanal adları, menüler, butonlar seçilemez (native-app hissi).
       Seçilebilir kalanlar aşağıda: mesajlar, girişler, kod. */
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    font-family: 'Goglis Sans', system-ui, sans-serif;
    font-size: 14px;
    color: var(--q-text);
    background: var(--q-chat-bg);
}

/* #9: tema değişkenleri class-bazlı (.q-root'A DA body'ye de uygulanabilsin) — MudDialog portal'ı
   .q-root dışında; body'ye tema class'ı konunca dialoglar da değişkenleri miras alır.
   BULUT (2026-10-18): tüm tema blokları aşağıda tek yerde ("BULUT TEMALARI"). */

/* ============ GOGLIS EMOJİ SETİ (BULUT 2026-10-18) ============
   160 salyangoz emojisi tek WebP atlasta; .gg-emoji boş bir <i>, görseli ve slug konumu
   gg/goglis-emoji.css'ten gelir (cut-emoji.py üretir). Boyutlandırma BURADA: boş öğenin kendi
   boyu yok, CSS vermezsek görünmez. `em` tabanlı → metinle birlikte ölçeklenir (kullanıcı arayüz
   ölçeği ve mesaj yoğunluğu ayarları kendiliğinden çalışır). */
.gg-emoji { width: 1.3em; height: 1.3em; vertical-align: -.28em; display: inline-block; flex: none; }
/* Sette olmayan emoji (👍, ❤️, bayraklar…) sunucuda HİÇ dönüştürülmez → sistem emojisi kalır. */
/* Tek başına duran büyük emoji (çıkartma mesajı) + seçici hücresi ayrı ölçülerde. */
.gg-emoji.big { width: 76px; height: 76px; vertical-align: middle; }
.gg-emoji.cell { width: 26px; height: 26px; vertical-align: middle; }
/* Sohbet gövdesinde bir tık büyük (2026-07-31 kullanıcı isteği): yazı boyutu 13-14px olunca
   1.3em ≈ 17px kalıyor, cümle içinde siliniyordu. Composer aynası AYNI değeri kullanır —
   yoksa yazarkenki boy ile gönderilen mesajdaki boy farklı görünür. */
.q-md .gg-emoji { width: 1.7em; height: 1.7em; vertical-align: -.42em; }
/* Salt-emoji mesaji (<=3): jumbo — yuz ifadeleri secilir (2026-08-15, kullanici istegi). */
.q-md .gg-emoji.gg-xl { width: 2.7em; height: 2.7em; vertical-align: -.55em; margin: 2px 1px; }
.q-msgmirror .gg-in > .gg-emoji { width: 1.45em; height: 1.45em; }
/* GOGLIS ARAYÜZ İKONLARI — emojiden farklı: `currentColor` ile metin rengini izler
   (hover/aktif/devre dışı için ayrı dosya yok). Boyut `em` tabanlı → metinle ölçeklenir. */
.gg-icon { width: 1.2em; height: 1.2em; vertical-align: -.22em; display: inline-block; flex: none; color: inherit; }
/* SEVİYE ATLAMA KUTLAMASI — MADALYON (2026-10-23, öneri sayfasında "A · Madalyon" seçildi; ayrıntı goglis.js
   goglisLevelUp). Perde TIKLAMAYI GEÇİRİR (pointer-events:none): kutlama sürerken kullanıcı yazmaya devam edebilmeli;
   yalnız madalyon ve yazılar tıklanabilir (erken kapatma). Karartma iki temada da koyu: bu bir sahne anı.
   Boyutlar görüntü alanına göre (vmin) — telefonda da masaüstünde de aynı oranda. */
.q-lvlup { position: fixed; inset: 0; z-index: 30500; pointer-events: none; overflow: hidden;
    --md: clamp(96px, 21vmin, 150px); --f1: #D8F5FF; --f2: #5DBDFF; --f3: #1E62D0; --glow: rgba(110,200,255,.55);
    --ray: rgba(255,255,255,.12); --ray2: rgba(120,200,255,.15);
    --rim: conic-gradient(from 210deg, #F4FBFF, #8CC8FF, #FFFFFF 25%, #5AA9F5, #E3F3FF 55%, #7DBEFF, #FFFFFF 80%, #F4FBFF); }
/* KİLOMETRE TAŞI (5, 10, 15…): altın madalyon, altın ışık, altın çubuk; konfeti de bolca (JS). */
.q-lvlup.gold { --f1: #FFF6CF; --f2: #FFC94A; --f3: #C67508; --glow: rgba(255,198,80,.6); --ray2: rgba(255,210,120,.17);
    --rim: conic-gradient(from 210deg, #FFF8DC, #E8B54A, #FFFFFF 25%, #C98A1B, #FFF1B8 55%, #E2A537, #FFFFFF 80%, #FFF8DC); }
.q-lvlup.out { animation: q-lvlup-out .4s ease forwards; }
@keyframes q-lvlup-out { to { opacity: 0; } }
.q-lvlup-dim { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 42%, rgba(6,12,36,.34), rgba(6,12,36,.8) 78%); opacity: 0; transition: opacity .35s; }
.q-lvlup.on .q-lvlup-dim { opacity: 1; }
.q-lvlup.leaving .q-lvlup-dim { opacity: 0; transition: opacity .6s .15s; }
.q-lvlup-cv { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.q-lvlup-ctr { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: clamp(8px, 1.6vmin, 14px); padding: 16px; text-align: center; }
.q-lvlup-fly, .q-lvlup-title, .q-lvlup-sub, .q-lvlup-xp { pointer-events: auto; cursor: pointer; }
.q-lvlup-fly { position: relative; width: var(--md); height: var(--md); margin-bottom: calc(var(--md) * .16); }
.q-lvlup-fly.fade { transition: opacity .45s, transform .45s; opacity: 0; transform: scale(.4); }
/* Işık huzmeleri: iki kat, ters yönlerde döner. Büyük katman → yalnız transform (kompozitörde ucuz). */
.q-lvlup-rays { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transform: scale(.3); transition: opacity .6s, transform 1s cubic-bezier(.22,.8,.24,1); }
.q-lvlup.on .q-lvlup-rays { opacity: 1; transform: scale(1); }
.q-lvlup.leaving .q-lvlup-rays, .q-lvlup.leaving .q-lvlup-bloom { opacity: 0; transition: opacity .3s; }
.q-lvlup-rays i { position: absolute; width: 130vmin; height: 130vmin; left: -65vmin; top: -65vmin; border-radius: 50%; will-change: transform;
    background: repeating-conic-gradient(var(--ray) 0deg 5deg, transparent 5deg 15deg);
    -webkit-mask: radial-gradient(circle, #000 6%, transparent 58%); mask: radial-gradient(circle, #000 6%, transparent 58%);
    animation: q-lvlup-rot 30s linear infinite; }
.q-lvlup-rays i + i { background: repeating-conic-gradient(var(--ray2) 0deg 9deg, transparent 9deg 24deg); animation-duration: 46s; animation-direction: reverse; }
@keyframes q-lvlup-rot { to { transform: rotate(360deg); } }
.q-lvlup-bloom { position: absolute; inset: -65%; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 62%); opacity: 0; transition: opacity .6s; }
.q-lvlup.on .q-lvlup-bloom { opacity: .9; }
.q-lvlup.boom .q-lvlup-bloom { animation: q-lvlup-bloom .9s ease-out; }
@keyframes q-lvlup-bloom { 30% { transform: scale(1.4); opacity: 1; } }
/* Madalyon: önce bozuk para gibi dönerek gelir, patlamada bir kez atar. */
.q-lvlup-mw { position: absolute; inset: 0; opacity: 0; }
.q-lvlup.on .q-lvlup-mw { animation: q-lvlup-in .85s cubic-bezier(.2,1.1,.3,1) .08s both; }
.q-lvlup.boom .q-lvlup-mw { opacity: 1; animation: q-lvlup-pulse .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes q-lvlup-in { 0% { opacity: 0; transform: perspective(700px) rotateY(110deg) scale(.25); } 55% { opacity: 1; transform: perspective(700px) rotateY(-16deg) scale(1.1); } 78% { transform: perspective(700px) rotateY(7deg) scale(.97); } 100% { opacity: 1; transform: perspective(700px) rotateY(0deg) scale(1); } }
@keyframes q-lvlup-pulse { 0% { transform: scale(1); } 28% { transform: scale(1.17); } 100% { transform: scale(1); } }
.q-lvlup-rim { position: absolute; inset: -7%; border-radius: 50%; background: var(--rim); box-shadow: 0 16px 40px rgba(0,16,60,.55), inset 0 0 0 1px rgba(255,255,255,.4); }
.q-lvlup.charge .q-lvlup-rim { animation: q-lvlup-charge .6s ease-in forwards; }
@keyframes q-lvlup-charge { to { box-shadow: 0 16px 40px rgba(0,16,60,.55), inset 0 0 0 1px rgba(255,255,255,.4), 0 0 50px 12px var(--glow); } }
.q-lvlup-medal { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: grid; place-content: center; justify-items: center;
    background: radial-gradient(circle at 34% 28%, var(--f1) 0 10%, var(--f2) 46%, var(--f3) 100%); box-shadow: inset 0 -6px 14px rgba(0,30,90,.35), inset 0 4px 10px rgba(255,255,255,.5); }
.q-lvlup.charge .q-lvlup-medal { animation: q-lvlup-tremble .12s linear infinite; }
@keyframes q-lvlup-tremble { 25% { transform: translate(1px, -1px); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px); } }
.q-lvlup-medal::after { content: ""; position: absolute; inset: 8%; border-radius: 50%; border: 2px solid rgba(255,255,255,.42); }
.q-lvlup-cap { font: 800 calc(var(--md) * .085)/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .2em; color: rgba(255,255,255,.9); margin: 0 0 3px .2em; }
.q-lvlup-roll { display: block; height: 1em; overflow: hidden; font: 600 calc(var(--md) * .44)/1 var(--q-display); color: #fff; text-shadow: 0 3px 12px rgba(0,40,110,.45); }
.q-lvlup.gold .q-lvlup-roll { text-shadow: 0 3px 12px rgba(120,60,0,.55); }
.q-lvlup-roll-in { display: grid; transition: transform .6s cubic-bezier(.3,1.6,.5,1); }
.q-lvlup-roll-in b { display: block; height: 1em; font-weight: 600; }
.q-lvlup.boom .q-lvlup-roll-in { transform: translateY(-1em); }
.q-lvlup-shine { position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.8) 50%, transparent 62%); transform: translateX(-130%); pointer-events: none; }
.q-lvlup.boom .q-lvlup-shine { animation: q-lvlup-shine 1s .12s ease-in-out, q-lvlup-shine 1s 2.3s ease-in-out; }
@keyframes q-lvlup-shine { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
/* Kurdeleler madalyon oturunca aşağı açılır (pembe + gökyüzü; altında altın + pembe). */
.q-lvlup-rib { position: absolute; left: 50%; top: 60%; width: 0; height: 0; z-index: -1; }
.q-lvlup-rib i { position: absolute; top: 0; width: calc(var(--md) * .26); height: calc(var(--md) * .58); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transform-origin: 50% 0; transform: rotate(var(--a)) scaleY(0); transition: transform .5s cubic-bezier(.3,1.6,.5,1) .6s; }
.q-lvlup-rib i:first-child { right: -2px; background: linear-gradient(#FF9DBE, #E8467A); --a: 20deg; }
.q-lvlup-rib i:last-child { left: -2px; background: linear-gradient(#8FD6FF, #2F8FF0); --a: -20deg; }
.q-lvlup.gold .q-lvlup-rib i:last-child { background: linear-gradient(#FFE08A, #E39A12); }
.q-lvlup.on .q-lvlup-rib i { transform: rotate(var(--a)) scaleY(1); }
.q-lvlup.leaving .q-lvlup-rib, .q-lvlup.leaving .q-lvlup-shock { opacity: 0; transition: opacity .25s; }
.q-lvlup-shock { position: absolute; inset: -6%; border-radius: 50%; border: 4px solid rgba(255,255,255,.9); opacity: 0; pointer-events: none; }
.q-lvlup-shock.b { border-color: rgba(140,215,255,.85); }
.q-lvlup.gold .q-lvlup-shock.b { border-color: rgba(255,214,120,.9); }
.q-lvlup.boom .q-lvlup-shock { animation: q-lvlup-shock .85s ease-out forwards; }
.q-lvlup.boom .q-lvlup-shock.b { animation-delay: .15s; }
@keyframes q-lvlup-shock { 0% { opacity: .95; transform: scale(1); border-width: 4px; } 100% { opacity: 0; transform: scale(2.8); border-width: 1px; } }
/* Başlık harf harf zıplar; alt satır topluluk çipi + açıklama. Yazılar karartma üstünde, iki temada beyaz. */
.q-lvlup-title { font: 600 clamp(24px, 4.4vmin, 38px)/1.12 var(--q-display); color: #fff; letter-spacing: .01em; text-shadow: 0 4px 22px rgba(0,30,100,.6); display: flex; justify-content: center; white-space: nowrap; min-height: 1.12em; }
.q-lvlup-title span { display: inline-block; opacity: 0; transform: translateY(.45em) scale(.5); }
.q-lvlup.boom .q-lvlup-title span { animation: q-lvlup-ch .55s cubic-bezier(.3,1.6,.5,1) forwards; animation-delay: calc(var(--i) * 32ms); }
@keyframes q-lvlup-ch { to { opacity: 1; transform: none; } }
.q-lvlup-sub { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: min(520px, 90vw); font-size: 13px; color: #CFE2FF; font-weight: 700; opacity: 0; transform: translateY(6px); transition: opacity .4s .45s, transform .5s .45s cubic-bezier(.22,.8,.24,1); }
.q-lvlup.boom .q-lvlup-sub { opacity: 1; transform: none; }
.q-lvlup-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 800; }
.q-lvlup-chip img, .q-lvlup-chip i { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; font: 600 8.5px/1 var(--q-display); font-style: normal; color: #fff; background: linear-gradient(150deg, #78D8FF, #35A6FF 52%, #2477E8); }
.q-lvlup-xp { width: min(300px, 72vw); display: grid; gap: 6px; margin-top: 2px; opacity: 0; transform: translateY(10px); transition: opacity .4s .3s, transform .5s .3s cubic-bezier(.22,.8,.24,1); }
.q-lvlup.on .q-lvlup-xp { opacity: 1; transform: none; }
.q-lvlup-xprow { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-weight: 800; color: #CFE2FF; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.q-lvlup-xprow b { color: #fff; }
.q-lvlup-bar { position: relative; height: 9px; border-radius: 99px; background: rgba(255,255,255,.14); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.3); }
.q-lvlup-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #6FD0FF, #4CB0FF 65%, #E8F7FF); box-shadow: 0 0 14px rgba(120,200,255,.85); transition: width .6s cubic-bezier(.55,0,.75,.2); }
.q-lvlup.gold .q-lvlup-bar i { background: linear-gradient(90deg, #FFE08A, #F5B32B 65%, #FFF6D6); box-shadow: 0 0 14px rgba(255,200,90,.85); }
.q-lvlup.boom .q-lvlup-bar { animation: q-lvlup-barflash .7s ease-out; }
.q-lvlup.boom .q-lvlup-bar i { transition: width .5s cubic-bezier(.22,.8,.24,1); }
@keyframes q-lvlup-barflash { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.9); background: rgba(255,255,255,.75); } 100% { box-shadow: 0 0 0 10px rgba(255,255,255,0); background: rgba(255,255,255,.14); } }
.q-lvlup.leaving .q-lvlup-title, .q-lvlup.leaving .q-lvlup-sub, .q-lvlup.leaving .q-lvlup-xp { opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .35s; }
/* Varış: profil resminde halka + seviye rozeti (Blazor düğümüne dokunmayan geçici katman). */
.q-lvlup-ping { position: fixed; z-index: 30501; width: 0; height: 0; pointer-events: none; }
.q-lvlup-ping i { position: absolute; left: calc(var(--d) / -2 - 4px); top: calc(var(--d) / -2 - 4px); width: calc(var(--d) + 8px); height: calc(var(--d) + 8px); border-radius: 50%; border: 2.5px solid #8FD0FF; animation: q-lvlup-pingr .9s ease-out forwards; }
.q-lvlup-ping.gold i { border-color: #FFD86B; }
.q-lvlup-ping b { position: absolute; left: calc(var(--d) / 2 - 8px); top: calc(var(--d) / -2 - 12px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: linear-gradient(150deg, #6FD0FF, #2F8FF0); color: #fff; font: 600 11px/20px var(--q-display); text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.3); animation: q-lvlup-pingb 1.6s cubic-bezier(.3,1.6,.5,1) forwards; }
.q-lvlup-ping.gold b { background: linear-gradient(150deg, #FFE08A, #F5A524); color: #4A2E00; }
@keyframes q-lvlup-pingr { from { opacity: 1; transform: scale(.9); } to { opacity: 0; transform: scale(1.9); } }
@keyframes q-lvlup-pingb { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; transform: scale(1.25); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
/* Hareket azaltma / anında açılış: dönme, patlama, uçuş yok; son hâl sabit görünür. */
.q-lvlup.still *, .q-lvlup.still *::before, .q-lvlup.still *::after { animation: none !important; transition: none !important; }
.q-lvlup.still .q-lvlup-rays, .q-lvlup.still .q-lvlup-bloom, .q-lvlup.still .q-lvlup-shock { display: none; }
.q-lvlup.still .q-lvlup-title span { opacity: 1; transform: none; }

/* ARAMA SALYANGOZU (2026-10-23; ayrıntı goglis.js goglisCallSnail). Sabit katman — hedefin (arama sahnesi,
   gelen arama kartı, yazı kutusu köşesi) dikdörtgenine göre JS konumlar; yer değiştirince kayarak gider.
   z-index: uygulama içeriğinin üstü, MudBlazor diyaloglarının (1400) altı; gelen arama kartının üstünde 1401. */
.q-csn { position: fixed; z-index: 1090; left: 0; top: 0; width: 132px; touch-action: none;
    transition: left .45s cubic-bezier(.22,.8,.24,1), top .45s cubic-bezier(.22,.8,.24,1), width .45s cubic-bezier(.22,.8,.24,1); }
.q-csn[data-dock="ring"] { z-index: 1401; }
.q-csn[data-dock="pip"] { z-index: 1201; }   /* yüzen arama kutusunun (1200) kenarında, önünde */
.q-csn.drag { transition: none; }
.q-csn.vid { display: none; }
.q-csn.enter { animation: q-csn-in .55s cubic-bezier(.3,1.6,.5,1) both; }
.q-csn.out { animation: q-csn-out .26s ease forwards; }
.q-csn.leave { transition: transform 1.25s cubic-bezier(.55,0,.75,.35), opacity 1.1s .15s; transform: translateX(160%); opacity: 0; }
@keyframes q-csn-in { from { opacity: 0; transform: translateY(26px) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes q-csn-out { to { opacity: 0; transform: scale(.7); } }
.q-csn-body { cursor: grab; }
.q-csn[data-dock="corner"] .q-csn-body, .q-csn[data-dock="pip"] .q-csn-body { cursor: pointer; }
.q-csn.drag .q-csn-body { cursor: grabbing; }
.q-csn[data-dock="ring"] .q-csn-body, .q-csn[data-dock="stage"] .q-csn-body { cursor: default; }
.q-csn-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
/* Konuşma balonu: Bulut camı; varsayılan salyangozun ÜSTÜNDE sağa yaslı (köşede), sol yarıda ise sola. */
.q-csn-bub { position: absolute; bottom: calc(100% - 2px); right: 34%; width: max-content; max-width: 236px; padding: 9px 12px 10px; border-radius: 16px 16px 5px 16px;
    background: #F8FCFF; color: #1A2648; font-size: 12.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 12px 30px rgba(0,0,0,.35); display: grid; gap: 8px;
    transform-origin: 92% 100%; animation: q-csn-bub .38s cubic-bezier(.3,1.6,.5,1); }
.q-csn.flip .q-csn-bub { right: auto; left: 34%; border-radius: 16px 16px 16px 5px; transform-origin: 8% 100%; }
.q-csn.below .q-csn-bub { bottom: auto; top: calc(100% + 6px); border-radius: 5px 16px 16px 16px; transform-origin: 8% 0; }
.q-csn[data-dock="ring"] .q-csn-bub { display: none; }
.q-csn.yan .q-csn-bub { left: calc(100% - 6px); right: auto; top: auto; bottom: 22%; max-width: min(236px, var(--csn-bub, 236px)); border-radius: 16px 16px 16px 5px; transform-origin: 0 100%; }
@keyframes q-csn-bub { from { opacity: 0; transform: scale(.55) translateY(8px); } to { opacity: 1; transform: none; } }
.q-csn-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.q-csn-acts button { border: 0; border-radius: 10px; padding: 6px 11px; font: 800 12px/1.2 'Goglis Sans', system-ui, sans-serif; cursor: pointer; background: #E6F1FF; color: #1A2648; }
.q-csn-acts button:hover { filter: brightness(1.04); }
.q-csn-acts button.pri { background: #2F9BFF; color: #fff; }
.q-csn-acts button:focus-visible { outline: 2px solid #2F9BFF; outline-offset: 2px; }
.q-csn-dots { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.q-csn-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: q-csn-dots 1.2s infinite; }
.q-csn-dots i:nth-child(2) { animation-delay: .15s; } .q-csn-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes q-csn-dots { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.q-csn-time { position: absolute; left: 50%; top: 100%; translate: -50% -4px; padding: 1px 9px; border-radius: 99px; background: rgba(20,60,50,.9); color: #3EDCAE; border: 1px solid rgba(62,220,174,.4);
    font: 800 11px/1.5 'Goglis Sans', system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-csn-x { position: absolute; left: -6px; top: 6%; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(140,180,255,.3); background: rgba(12,21,52,.92); color: #CFE2FF;
    font: 700 14px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .2s; display: grid; place-items: center; padding: 0; }
.q-csn:hover .q-csn-x, .q-csn-x:focus-visible { opacity: 1; }
.q-csn[data-dock="ring"] .q-csn-x { display: none; }
/* Çizimin parçaları — SnailLogo'nun .sn-* kurallarından AYRI önek (cs-), birbirine sızmasınlar. */
.q-csn-svg .cs-gr { fill: #000; opacity: .22; transform-box: fill-box; transform-origin: center; }
.q-csn-svg .cs-mk { fill: #4CB0FF; }
.q-csn-svg .cs-blush { fill: #FF84AE; opacity: 0; transition: opacity .3s; }
.q-csn-svg .cs-lids path { fill: #FFFFFF; }
.q-csn-svg .cs-joy path, .q-csn-svg .cs-shut path { fill: none; stroke: #0E2C63; stroke-width: 13; stroke-linecap: round; }
.q-csn-svg .cs-smile, .q-csn-svg .cs-frown { fill: none; stroke: #0E2C63; stroke-width: 7; stroke-linecap: round; }
.q-csn-svg .cs-sweat { fill: #9EDBFF; stroke: #FFFFFF; stroke-width: 3; }
.q-csn-svg .cs-arcs path { fill: none; stroke: #FFD86B; stroke-width: 9; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.q-csn-svg .cs-z text { font: 600 46px var(--q-display); fill: #CFE6FF; opacity: 0; transform-box: fill-box; transform-origin: center; }
.q-csn-svg .cs-dial circle { fill: #EAF7FF; }
.q-csn-svg .cs-lids, .q-csn-svg .cs-joy, .q-csn-svg .cs-shut, .q-csn-svg .cs-open, .q-csn-svg .cs-o, .q-csn-svg .cs-frown, .q-csn-svg .cs-mouth,
.q-csn-svg .cs-sweat, .q-csn-svg .cs-phone, .q-csn-svg .cs-arcs, .q-csn-svg .cs-z, .q-csn-svg .cs-dial { display: none; }
.q-csn-svg .cs-shell { transform-origin: 215px 210px; }
.q-csn-svg .cs-head { transform-origin: 360px 300px; transition: transform .5s cubic-bezier(.22,.8,.24,1); }
.q-csn-svg .cs-all { transform-origin: 290px 398px; }
.q-csn-svg .cs-eye { transform-box: fill-box; transform-origin: center; }
.q-csn-svg .cs-m { transform-box: fill-box; transform-origin: 50% 100%; }
.q-csn-svg .cs-look { transition: transform .35s cubic-bezier(.22,.8,.24,1); }
/* Ahize: kulakta (varsayılan), kabuğun üstünde (çatal) ya da indirilmiş. Yer değişimi yaylanarak. */
.q-csn-svg .cs-phone { transform: translate(566px, 214px) rotate(8deg) scale(.84); transition: transform .65s cubic-bezier(.3,1.25,.5,1); }
.q-csn-svg.p-cradle .cs-phone { transform: translate(215px, 18px) rotate(-90deg) scale(.84); }
.q-csn-svg.p-down .cs-phone { transform: translate(612px, 326px) rotate(58deg) scale(.84); }
.q-csn-svg .cs-hs { transform-box: fill-box; transform-origin: 50% 50%; }
/* İfadeler */
.q-csn-svg.x-happy .cs-eyes, .q-csn-svg.x-sleep .cs-eyes { display: none; }
.q-csn-svg.x-happy .cs-joy, .q-csn-svg.x-sleep .cs-shut { display: inline; }
.q-csn-svg.x-happy .cs-blush { opacity: .5; }
.q-csn-svg.x-happy .cs-smile, .q-csn-svg.x-wow .cs-smile, .q-csn-svg.x-sad .cs-smile, .q-csn-svg.x-talk .cs-smile { display: none; }
.q-csn-svg.x-happy .cs-open, .q-csn-svg.x-wow .cs-o, .q-csn-svg.x-sad .cs-lids, .q-csn-svg.x-sad .cs-frown { display: inline; }
.q-csn-svg.x-wow .cs-eye { transform: scale(1.08); }
.q-csn-svg.x-talk .cs-mouth { display: inline; transform-box: fill-box; transform-origin: 50% 0; animation: q-csn-talk .78s linear infinite; }
/* Eşyalar */
.q-csn-svg.a-phone .cs-phone, .q-csn-svg.a-dial .cs-dial, .q-csn-svg.a-z .cs-z { display: inline; }
.q-csn-svg.a-sweat .cs-sweat { display: inline; animation: q-csn-sweat 1.8s ease-in infinite; }
.q-csn-svg.a-z .cs-z text { animation: q-csn-z 3s ease-in-out infinite; }
.q-csn-svg.a-z .cs-z text:nth-child(2) { animation-delay: 1s; }
.q-csn-svg.a-z .cs-z text:nth-child(3) { animation-delay: 2s; }
/* Hareketler (sıra önemli: aynı özelliği yazan sonraki kural öncekini ezer) */
.q-csn-svg.k-idle .cs-eye { animation: q-csn-blink 4.6s ease-in-out infinite; }
.q-csn-svg.k-idle .cs-m { animation: q-csn-wig 2.6s ease-in-out infinite; }
.q-csn-svg.k-idle .cs-m + .cs-m { animation-delay: -.9s; }
.q-csn-svg.k-idle .cs-shell { animation: q-csn-breathe 3.8s ease-in-out infinite; }
.q-csn-svg.k-look .cs-look { animation: q-csn-look 6.5s ease-in-out infinite; }
.q-csn-svg.k-dial .cs-shell { animation: q-csn-dial 1.7s ease-in-out 1; }
.q-csn-svg.k-ring .cs-hs { animation: q-csn-shake 2.4s linear infinite; }
.q-csn-svg.k-ring .cs-arcs.ear { display: inline; }
.q-csn-svg.k-ring .cs-arcs path { animation: q-csn-arc 2.4s ease-out infinite; }
.q-csn-svg.k-crring .cs-hs { animation: q-csn-jump 1.25s linear infinite; }
.q-csn-svg.k-crring .cs-arcs.cr { display: inline; }
.q-csn-svg.k-crring .cs-arcs path { animation: q-csn-arc 1.25s ease-out infinite; }
.q-csn-svg .cs-arcs path:nth-child(2n) { animation-delay: .12s; }
.q-csn-svg.k-hop .cs-all { animation: q-csn-hop .9s ease-in-out infinite; }
.q-csn-svg.k-hop .cs-gr { animation: q-csn-grhop .9s ease-in-out infinite; }
.q-csn-svg.k-hop1 .cs-all { animation: q-csn-hop .9s ease-in-out 1; }
.q-csn-svg.k-nod .cs-head { animation: q-csn-nod 1.1s ease-in-out infinite; }
.q-csn-svg.k-doze .cs-head { animation: q-csn-doze 3.4s ease-in-out infinite; }
.q-csn-svg.k-droop .cs-head { transform: rotate(8deg) translateY(10px); }
.q-csn-svg.k-wave .cs-m { animation: q-csn-wig .5s ease-in-out infinite; }
.q-csn-svg.k-wave .cs-m + .cs-m { animation-delay: -.25s; }
@keyframes q-csn-blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes q-csn-wig { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(9deg); } }
@keyframes q-csn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.016); } }
@keyframes q-csn-look { 0%, 16%, 100% { transform: none; } 22%, 38% { transform: translateX(-13px); } 46%, 62% { transform: translate(11px, -3px); } 70% { transform: none; } }
@keyframes q-csn-dial { 0% { transform: rotate(0); } 24% { transform: rotate(122deg); } 50% { transform: rotate(0); } 58% { transform: rotate(0); } 78% { transform: rotate(86deg); } 100% { transform: rotate(0); } }
@keyframes q-csn-shake { 0% { transform: rotate(0); } 3% { transform: rotate(-10deg); } 6% { transform: rotate(10deg); } 9% { transform: rotate(-10deg); } 12% { transform: rotate(10deg); } 15% { transform: rotate(-10deg); } 18% { transform: rotate(9deg); } 21% { transform: rotate(-7deg); } 24% { transform: rotate(6deg); } 27% { transform: rotate(-4deg); } 30% { transform: rotate(2deg); } 33%, 100% { transform: rotate(0); } }
@keyframes q-csn-jump { 0%, 52%, 100% { transform: translateX(0) rotate(0); } 8% { transform: translateX(28px) rotate(-7deg); } 16% { transform: translateX(0) rotate(5deg); } 24% { transform: translateX(24px) rotate(6deg); } 32% { transform: translateX(0) rotate(-4deg); } 40% { transform: translateX(14px) rotate(-3deg); } 48% { transform: translateX(0) rotate(2deg); } }
@keyframes q-csn-arc { 0% { opacity: 0; transform: scale(.55); } 12% { opacity: 1; } 40%, 100% { opacity: 0; transform: scale(1.3); } }
@keyframes q-csn-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 14% { transform: translateY(0) scale(1.06, .9); } 42% { transform: translateY(-58px) scale(.95, 1.06); } 66% { transform: translateY(0) scale(1.06, .92); } 80% { transform: translateY(0) scale(1, 1); } }
@keyframes q-csn-grhop { 0%, 100% { transform: scale(1); opacity: .22; } 42% { transform: scale(.72); opacity: .1; } }
@keyframes q-csn-nod { 0%, 100% { transform: rotate(0); } 28% { transform: rotate(-6deg); } 60% { transform: rotate(3deg); } }
@keyframes q-csn-doze { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(9deg) translateY(8px); } }
@keyframes q-csn-talk { 0% { transform: scaleY(.25); } 16% { transform: scaleY(1); } 30% { transform: scaleY(.45); } 48% { transform: scaleY(.95); } 64% { transform: scaleY(.3); } 82% { transform: scaleY(.8); } 100% { transform: scaleY(.25); } }
@keyframes q-csn-sweat { 0% { transform: translateY(-8px); opacity: 0; } 25% { opacity: 1; } 75% { transform: translateY(24px); opacity: 1; } 100% { transform: translateY(32px); opacity: 0; } }
@keyframes q-csn-z { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(46px, -96px) scale(1.25); } }
/* Hareket azaltma / anında açılış: karakter durur ama ifadeleri (göz, ağız, ahizenin yeri) bilgiyi taşımaya devam eder. */
@media (prefers-reduced-motion: reduce) { .q-csn, .q-csn *, .q-csn-svg * { animation: none !important; transition: none !important; } }
html.q-instant .q-csn, html.q-instant .q-csn * { animation: none !important; transition: none !important; }

/* Gönder düğmesi — MudIconButton yerine sade buton (Goglis ikon setiyle aynı dil). */
.q-send-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border: 0; border-radius: 9px; background: transparent; color: var(--q-accent); cursor: pointer; flex: none;
    transition: background .12s, color .12s, opacity .12s; }
.q-send-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--q-accent) 16%, transparent); }
.q-send-btn:disabled { color: var(--q-faint); opacity: .55; cursor: default; }

/* Emoji seçici arama kutusu + boş sonuç (2026-07-30) */
.q-emoji-search { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-bottom: 1px solid var(--q-divider); color: var(--q-muted); }
.q-emoji-search .mud-icon-root { font-size: 17px; flex: none; }
.q-emoji-search input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--q-strong); font-size: 13.5px; font-family: inherit;
}
.q-emoji-search input::placeholder { color: var(--q-faint); }
.q-emoji-clear { display: inline-flex; background: none; border: none; padding: 2px; cursor: pointer; color: var(--q-muted); border-radius: 6px; }
.q-emoji-clear:hover { color: var(--q-strong); background: var(--q-hover); }
.q-emoji-empty { padding: 18px 12px; text-align: center; font-size: 12.5px; color: var(--q-muted); }

/* ---- top bar ---- */
/* (2026-07-31, kullanici: "header cok sade, temaya gore iki renkli gecis") Duz rail rengi yerine
   temanin aksan ciftiyle YUMUSAK degrade — yuzde dusuk tutuldu (%10-14 karisim): renk kimligi
   hissedilir ama metin/ikon kontrasti bozulmaz; accent-2'si olmayan temalar accent'e duser. */
.q-topbar { height: 52px; display: flex; align-items: flex-end; gap: 6px; padding: 0 12px; flex: none;
    background: linear-gradient(90deg, var(--q-rail-bg) 0%, color-mix(in srgb, var(--q-accent) 10%, var(--q-rail-bg)) 52%, color-mix(in srgb, var(--q-accent-2, var(--q-accent)) 14%, var(--q-rail-bg)) 100%); }
/* #titlebar (2026-07-26 → 2026-07-30 DÜZELTİLDİ): ELECTRON kabuğunda üst bar = PENCERE BAŞLIK ÇUBUĞU
   (renk native titleBarOverlay'e main.js'ten boyanır). Boş alan SÜRÜKLE-taşı; etkileşimliler no-drag.
   Native min/max/close düğmeleri sayfanın ÜSTÜNDE durur → o şeride hiçbir şey konmaz.

   2026-07-30 KÖK NEDEN: bu kurallar `html.q-electron` ile yazılmıştı ama O SINIF HİÇBİR YERDE
   ATANMIYORDU (grep: yalnız bu dosyada) → kurallar hiç uygulanmadı; kullanıcı Electron'da hem ayar
   diyaloğunun düğmelerini hem yönetim panelinin ✕'ini native düğmelerin altında buldu. Artık sınıf
   `q-wco` ve gerçek API'den (navigator.windowControlsOverlay) ATANIYOR + geometri ÖLÇÜLÜYOR:
   --q-wco-h (şerit yüksekliği), --q-wco-r / --q-wco-l (kontrollerin sağ/sol inseti).
   Fallback değerleri Windows Electron'un bilinen ölçüleri (52px / 148px). */
html.q-wco .q-topbar {
    -webkit-app-region: drag;
    padding-right: calc(var(--q-wco-r, 148px) + 6px);
    padding-left: calc(12px + var(--q-wco-l, 0px));    /* macOS: trafik ışıkları SOLDA */
}
html.q-wco .q-topbar button, html.q-wco .q-topbar a, html.q-wco .q-topbar input,
html.q-wco .q-topbar .q-brand, html.q-wco .q-topbar .q-tab, html.q-wco .q-topbar .q-mini,
html.q-wco .q-topbar .q-menu, html.q-wco .q-topbar .mud-icon-button,
html.q-wco .q-topbar .q-dmadd, html.q-wco .q-topbar [role="button"] { -webkit-app-region: no-drag; }
/* (2026-07-31, kullanici bug'i: "arkadasimin sesini artirirken uygulamayi suruklyorum") Yuzen
   paneller (menu/sag-tik/tepki secici/profil popover/diyalog) pencere ust seridiyle CAKISABILIR
   (fixed konum + yukari acilan menu) — app-region:drag GEOMETRIKTIR, ustune cizilen eleman
   otomatik muaf olmaz. Hepsi acikca no-drag. Kaydiraclar da (ses/kazanc) her yerde no-drag. */
html.q-wco .q-menu-panel, html.q-wco .q-ctx-panel, html.q-wco .q-reactpick,
html.q-wco .q-pp, html.q-wco .mud-dialog, html.q-wco .mud-popover,
html.q-wco input[type="range"] { -webkit-app-region: no-drag; }
/* Menu icinde metin secimi de olmasin: buyuk bir secim varken kaydiraca basmak tarayicida
   SECIMIN hayalet kopyasini surukletebiliyor — menuler zaten metin secilecek yer degil. */
.q-menu-panel, .q-ctx-panel, .q-menu-vol { user-select: none; -webkit-user-select: none; }
.q-brand { display: flex; align-items: center; gap: 9px; padding: 8px 6px 8px 0; cursor: pointer; }
/* ============================================================================
   BULUT TEMALARI (2026-10-18, Fatih onaylı tasarım atlası) — 6 tema × GÜNDÜZ/GECE.
   Model iki eksenli kaldı: BAZ (gündüz/gece/sistem) × RENK. Renk anahtarları ESKİ adlarını
   korudu (depolanmış tercihler göçsüz yaşasın): ocean = Gökyüzü (varsayılan), grape = Lavanta,
   rose = Şeker, sunset = Güneş, forest = Nane, midnight = Yıldız. Toprak (kahve) ve tam temalar
   (Cyberpunk/Steampunk/Anime/Meyve/Tatlı) KALDIRILDI — eski seçimler goglisTheme.get() ve
   App.razor'daki baş betiğinde en yakın yeni temaya göç eder.
   .theme-dark / .theme-light = Gökyüzü'nün kendisi (renk ekseni bilinmeyen eski yolların yedeği).
   Bloklar docs/araclar/tema-paletleri.py ile ÜRETİLDİ (yüzeyler zemin→yüzey karışımından türer);
   değiştirirken goglisAccent._themeAccents'i de güncelle (aksan çift bakım). */
.theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight, .theme-dark {
    --mud-palette-primary: var(--q-accent);
    --q-state-primary: color-mix(in srgb, var(--q-accent) 16%, transparent);
    --q-state-primary-strong: color-mix(in srgb, var(--q-accent) 24%, transparent);
}
.theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light, .theme-light {
    --mud-palette-primary: var(--q-accent);
    --q-state-primary: color-mix(in srgb, var(--q-accent) 12%, transparent);
    --q-state-primary-strong: color-mix(in srgb, var(--q-accent) 20%, transparent);
}
/* Gökyüzü · gece */
.theme-ocean, .theme-dark {
    --q-accent:#4CB0FF !important; --q-accent-2:#A193FF !important;
    --q-rail-bg:#09112d; --q-panel-bg:#0f193c; --q-side-bg:#131d43; --q-chat-bg:#16214A; --q-input-bg:#283258; --q-code-bg:#080f27; --q-code-text:#9eaeff;
    --q-text:#dce3ed; --q-strong:#f8fcff; --q-muted:#9aa3b7; --q-faint:#818ba3;
    --q-border:rgba(184,223,255,0.13); --q-divider:rgba(184,223,255,0.085); --q-hover:rgba(242,249,255,0.05); --q-selected:rgba(76,176,255,0.17);
    --q-glass:rgba(22,33,74,0.74); --q-glass-strong:rgba(10,18,48,0.86); --q-glass-border:rgba(176,220,255,0.15); --q-glass-menu:rgba(20,30,69,0.97);
    --q-orb-1:rgba(40,130,255,.34); --q-orb-2:rgba(130,100,255,.3); --q-bg-grad: linear-gradient(160deg, #0A1230 0%, #130F38 60%, #0C1A3E 100%);
}
/* Gökyüzü · gündüz */
.theme-ocean-light, .theme-light {
    --q-accent:#2F9BFF !important; --q-accent-2:#9183FF !important;
    --q-rail-bg:#e1f0ff; --q-panel-bg:#EEF6FF; --q-side-bg:#f7fbff; --q-chat-bg:#ffffff; --q-input-bg:#f3f9ff; --q-code-bg:#EEF6FF; --q-code-text:#5259de;
    --q-text:#313c5a; --q-strong:#1A2648; --q-muted:#5c657d; --q-faint:#636b82;
    --q-border:rgba(26,38,72,0.12); --q-divider:rgba(26,38,72,0.07); --q-hover:rgba(26,38,72,0.045); --q-selected:rgba(47,155,255,0.13);
    --q-glass:rgba(255,255,255,.78); --q-glass-strong:rgba(245,250,255,0.86); --q-glass-border:rgba(26,38,72,0.1); --q-glass-menu:rgba(255,255,255,.97);
    --q-orb-1:rgba(120,200,255,.55); --q-orb-2:rgba(180,165,255,.42); --q-bg-grad: linear-gradient(160deg, #EEF6FF 0%, #F4F0FF 60%, #FFF7EA 100%);
}
/* Lavanta · gece */
.theme-grape {
    --q-accent:#A193FF !important; --q-accent-2:#FF84AE !important;
    --q-rail-bg:#110d30; --q-panel-bg:#19133f; --q-side-bg:#1d1746; --q-chat-bg:#211A4D; --q-input-bg:#322c5b; --q-code-bg:#0f0b2a; --q-code-text:#b3a7ff;
    --q-text:#e2e1ed; --q-strong:#fcfbff; --q-muted:#a29fb8; --q-faint:#8985a3;
    --q-border:rgba(218,212,255,0.13); --q-divider:rgba(218,212,255,0.085); --q-hover:rgba(248,247,255,0.05); --q-selected:rgba(161,147,255,0.17);
    --q-glass:rgba(33,26,77,0.74); --q-glass-strong:rgba(18,14,51,0.86); --q-glass-border:rgba(213,207,255,0.15); --q-glass-menu:rgba(30,24,72,0.97);
    --q-orb-1:rgba(133,118,255,0.34); --q-orb-2:rgba(255,111,159,0.3); --q-bg-grad: linear-gradient(160deg, #120E33 0%, #201439 60%, #19143f 100%);
}
/* Lavanta · gündüz */
.theme-grape-light {
    --q-accent:#8576FF !important; --q-accent-2:#FF6F9F !important;
    --q-rail-bg:#eae7ff; --q-panel-bg:#F2EFFF; --q-side-bg:#f9f8ff; --q-chat-bg:#ffffff; --q-input-bg:#f6f4ff; --q-code-bg:#F2EFFF; --q-code-text:#6352de;
    --q-text:#3a3463; --q-strong:#241D52; --q-muted:#635e84; --q-faint:#6a6589;
    --q-border:rgba(36,29,82,0.12); --q-divider:rgba(36,29,82,0.07); --q-hover:rgba(36,29,82,0.045); --q-selected:rgba(133,118,255,0.13);
    --q-glass:rgba(255,255,255,.78); --q-glass-strong:rgba(247,245,255,0.86); --q-glass-border:rgba(36,29,82,0.1); --q-glass-menu:rgba(255,255,255,.97);
    --q-orb-1:rgba(182,173,255,0.55); --q-orb-2:rgba(255,161,193,0.42); --q-bg-grad: linear-gradient(160deg, #F2EFFF 0%, #ffeff4 60%, #fff9ec 100%);
}
/* Şeker · gece */
.theme-rose {
    --q-accent:#FF84AE !important; --q-accent-2:#A193FF !important;
    --q-rail-bg:#240f1d; --q-panel-bg:#2f1528; --q-side-bg:#34182d; --q-chat-bg:#3A1B33; --q-input-bg:#4a2d43; --q-code-bg:#1f0d19; --q-code-text:#caa4eb;
    --q-text:#ebe0e5; --q-strong:#fffafc; --q-muted:#b09eaa; --q-faint:#9b8694;
    --q-border:rgba(255,206,223,0.13); --q-divider:rgba(255,206,223,0.085); --q-hover:rgba(255,246,249,0.05); --q-selected:rgba(255,132,174,0.17);
    --q-glass:rgba(58,27,51,0.74); --q-glass-strong:rgba(38,16,31,0.86); --q-glass-border:rgba(255,200,219,0.15); --q-glass-menu:rgba(54,25,47,0.97);
    --q-orb-1:rgba(255,95,150,0.34); --q-orb-2:rgba(145,131,255,0.3); --q-bg-grad: linear-gradient(160deg, #26101F 0%, #2c172c 60%, #331526 100%);
}
/* Şeker · gündüz */
.theme-rose-light {
    --q-accent:#FF5F96 !important; --q-accent-2:#9183FF !important;
    --q-rail-bg:#ffe6ef; --q-panel-bg:#FFF0F6; --q-side-bg:#fff8fb; --q-chat-bg:#ffffff; --q-input-bg:#fff4f9; --q-code-bg:#FFF0F6; --q-code-text:#7c4dc9;
    --q-text:#503147; --q-strong:#3D1A33; --q-muted:#755c6e; --q-faint:#7c6475;
    --q-border:rgba(61,26,51,0.12); --q-divider:rgba(61,26,51,0.07); --q-hover:rgba(61,26,51,0.045); --q-selected:rgba(255,95,150,0.13);
    --q-glass:rgba(255,255,255,.78); --q-glass-strong:rgba(255,246,250,0.86); --q-glass-border:rgba(61,26,51,0.1); --q-glass-menu:rgba(255,255,255,.97);
    --q-orb-1:rgba(255,159,192,0.55); --q-orb-2:rgba(184,174,255,0.42); --q-bg-grad: linear-gradient(160deg, #FFF0F6 0%, #f3f1ff 60%, #fff9ec 100%);
}
/* Güneş · gece */
.theme-sunset {
    --q-accent:#FFC04D !important; --q-accent-2:#FF84AE !important;
    --q-rail-bg:#20170a; --q-panel-bg:#2c2010; --q-side-bg:#322412; --q-chat-bg:#382915; --q-input-bg:#483a27; --q-code-bg:#1c1409; --q-code-text:#cab2d2;
    --q-text:#ebe6dd; --q-strong:#fffdf9; --q-muted:#afa79a; --q-faint:#9b9183;
    --q-border:rgba(255,230,185,0.13); --q-divider:rgba(255,230,185,0.085); --q-hover:rgba(255,251,243,0.05); --q-selected:rgba(255,192,77,0.17);
    --q-glass:rgba(56,41,21,0.74); --q-glass-strong:rgba(34,24,11,0.86); --q-glass-border:rgba(255,227,177,0.15); --q-glass-menu:rgba(52,38,19,0.97);
    --q-orb-1:rgba(240,143,14,0.34); --q-orb-2:rgba(255,111,159,0.3); --q-bg-grad: linear-gradient(160deg, #22180B 0%, #2f1d14 60%, #2e1f0b 100%);
}
/* Güneş · gündüz */
.theme-sunset-light {
    --q-accent:#F08F0E !important; --q-accent-2:#FF6F9F !important;
    --q-rail-bg:#fef0d9; --q-panel-bg:#FFF7E8; --q-side-bg:#fffbf5; --q-chat-bg:#ffffff; --q-input-bg:#fff9ef; --q-code-bg:#FFF7E8; --q-code-text:#7957ae;
    --q-text:#4e3f2a; --q-strong:#3A2A12; --q-muted:#716554; --q-faint:#786d5c;
    --q-border:rgba(58,42,18,0.12); --q-divider:rgba(58,42,18,0.07); --q-hover:rgba(58,42,18,0.045); --q-selected:rgba(240,143,14,0.13);
    --q-glass:rgba(255,255,255,.78); --q-glass-strong:rgba(255,250,241,0.86); --q-glass-border:rgba(58,42,18,0.1); --q-glass-menu:rgba(255,255,255,.97);
    --q-orb-1:rgba(246,188,110,0.55); --q-orb-2:rgba(255,161,193,0.42); --q-bg-grad: linear-gradient(160deg, #FFF7E8 0%, #ffeff4 60%, #fff9ec 100%);
}
/* Nane · gece */
.theme-forest {
    --q-accent:#3EDCAE !important; --q-accent-2:#4CB0FF !important;
    --q-rail-bg:#081d1a; --q-panel-bg:#0d2824; --q-side-bg:#0f2e29; --q-chat-bg:#12342E; --q-input-bg:#24443e; --q-code-bg:#071917; --q-code-text:#9abaeb;
    --q-text:#dbe9e5; --q-strong:#f8fefc; --q-muted:#98ada8; --q-faint:#839a95;
    --q-border:rgba(178,241,223,0.13); --q-divider:rgba(178,241,223,0.085); --q-hover:rgba(241,253,249,0.05); --q-selected:rgba(62,220,174,0.17);
    --q-glass:rgba(18,52,46,0.74); --q-glass-strong:rgba(9,31,28,0.86); --q-glass-border:rgba(169,240,219,0.15); --q-glass-menu:rgba(16,48,42,0.97);
    --q-orb-1:rgba(22,179,135,0.34); --q-orb-2:rgba(47,155,255,0.3); --q-bg-grad: linear-gradient(160deg, #091F1C 0%, #0b262a 60%, #0a2822 100%);
}
/* Nane · gündüz */
.theme-forest-light {
    --q-accent:#16B387 !important; --q-accent-2:#2F9BFF !important;
    --q-rail-bg:#dbf6ed; --q-panel-bg:#EAFBF5; --q-side-bg:#f6fdfa; --q-chat-bg:#ffffff; --q-input-bg:#f0fcf8; --q-code-bg:#EAFBF5; --q-code-text:#4d5ec6;
    --q-text:#2a4f47; --q-strong:#123B33; --q-muted:#4e6c67; --q-faint:#55736d;
    --q-border:rgba(18,59,51,0.12); --q-divider:rgba(18,59,51,0.07); --q-hover:rgba(18,59,51,0.045); --q-selected:rgba(22,179,135,0.13);
    --q-glass:rgba(255,255,255,.78); --q-glass-strong:rgba(242,253,249,0.86); --q-glass-border:rgba(18,59,51,0.1); --q-glass-menu:rgba(255,255,255,.97);
    --q-orb-1:rgba(115,209,183,0.55); --q-orb-2:rgba(120,190,255,0.42); --q-bg-grad: linear-gradient(160deg, #EAFBF5 0%, #e8f4ff 60%, #fff9ec 100%);
}
/* Yıldız · gece */
.theme-midnight {
    --q-accent:#8C9BFF !important; --q-accent-2:#CFE8FF !important;
    --q-rail-bg:#070a1d; --q-panel-bg:#0c112b; --q-side-bg:#0f1432; --q-chat-bg:#121839; --q-input-bg:#242a49; --q-code-bg:#060919; --q-code-text:#aea9ff;
    --q-text:#e0e2eb; --q-strong:#fbfcff; --q-muted:#9b9eb0; --q-faint:#7e8296;
    --q-border:rgba(210,215,255,0.13); --q-divider:rgba(210,215,255,0.085); --q-hover:rgba(247,248,255,0.05); --q-selected:rgba(140,155,255,0.17);
    --q-glass:rgba(18,24,57,0.74); --q-glass-strong:rgba(7,11,31,0.86); --q-glass-border:rgba(204,211,255,0.15); --q-glass-menu:rgba(16,21,52,0.97);
    --q-orb-1:rgba(100,116,242,0.34); --q-orb-2:rgba(145,131,255,0.3); --q-bg-grad: linear-gradient(160deg, #070B1F 0%, #0f122c 60%, #0d112c 100%);
}
/* Yıldız · gündüz */
.theme-midnight-light {
    --q-accent:#6474F2 !important; --q-accent-2:#9183FF !important;
    --q-rail-bg:#e4e7fe; --q-panel-bg:#EEF0FF; --q-side-bg:#f7f8ff; --q-chat-bg:#ffffff; --q-input-bg:#f3f4ff; --q-code-bg:#EEF0FF; --q-code-text:#5d52dc;
    --q-text:#323662; --q-strong:#1B2050; --q-muted:#5b5f82; --q-faint:#626687;
    --q-border:rgba(27,32,80,0.12); --q-divider:rgba(27,32,80,0.07); --q-hover:rgba(27,32,80,0.045); --q-selected:rgba(100,116,242,0.13);
    --q-glass:rgba(255,255,255,.78); --q-glass-strong:rgba(245,246,255,0.86); --q-glass-border:rgba(27,32,80,0.1); --q-glass-menu:rgba(255,255,255,.97);
    --q-orb-1:rgba(162,172,247,0.55); --q-orb-2:rgba(184,174,255,0.42); --q-bg-grad: linear-gradient(160deg, #EEF0FF 0%, #f3f1ff 60%, #fff9ec 100%);
}

/* ARKA PLAN PARILTISI (2026-10-18, Fatih: "temalardaki şu parlaklık efekti eksik, o canlılık katıyordu").
   Atlasta her ekranın arkasında iki bulanık küre var (.mk .orbs: 520 px'lik sol üstte ANA renk, 460 px'lik
   sağ altta İKİNCİ renk, filter: blur(50px)) + üç duraklı zemin degradesi; uygulamada yalnız soluk, geniş
   iki degrade vardı (ölçüldü — gece sol üst ray 22/40/80 ↔ atlas 22/51/110, gündüz 233/244/255 ↔ 190/227/255,
   sağ alttaki lavanta hiç yoktu). Küre BULANIK ÖĞE DEĞİL radyal degrade: Gauss bulanıklığı geçirilmiş
   diskin kenar düşüşü (σ = 50 px) duraklarla yeniden kurulur — piksel olarak aynı sonuç, ek katman/filtre
   yok, istifleme bağlamı açılmaz. Renkler + zemin temaya özgü (üretilmiş bloklarda --q-orb-1/-2,
   --q-bg-grad); Gökyüzü atlastan birebir. Sütunlar zaten atlas saydamlığında (%20/34/58/34) → küreler
   arkadan sızar. */
.theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight, .theme-dark,
.theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light, .theme-light {
    --q-orbs:
        radial-gradient(circle at 100px 60px,
            var(--q-orb-1) 0 160px, color-mix(in srgb, var(--q-orb-1) 93%, transparent) 185px, color-mix(in srgb, var(--q-orb-1) 84%, transparent) 210px,
            color-mix(in srgb, var(--q-orb-1) 69%, transparent) 235px, color-mix(in srgb, var(--q-orb-1) 50%, transparent) 260px, color-mix(in srgb, var(--q-orb-1) 31%, transparent) 285px,
            color-mix(in srgb, var(--q-orb-1) 16%, transparent) 310px, color-mix(in srgb, var(--q-orb-1) 7%, transparent) 335px, color-mix(in srgb, var(--q-orb-1) 2%, transparent) 360px,
            transparent 390px),
        radial-gradient(circle at calc(100% - 70px) calc(100% - 50px),
            var(--q-orb-2) 0 130px, color-mix(in srgb, var(--q-orb-2) 93%, transparent) 155px, color-mix(in srgb, var(--q-orb-2) 84%, transparent) 180px,
            color-mix(in srgb, var(--q-orb-2) 69%, transparent) 205px, color-mix(in srgb, var(--q-orb-2) 50%, transparent) 230px, color-mix(in srgb, var(--q-orb-2) 31%, transparent) 255px,
            color-mix(in srgb, var(--q-orb-2) 16%, transparent) 280px, color-mix(in srgb, var(--q-orb-2) 7%, transparent) 305px, color-mix(in srgb, var(--q-orb-2) 2%, transparent) 330px,
            transparent 360px);
    --q-ambient: var(--q-orbs), var(--q-bg-grad);
}
/* Atlasın mobil çerçevelerinde küre yok (.mob .mk .orbs { display: none }) → mobilde yalnız zemin degradesi. */
@media (max-width: 700px), (max-height: 520px) {
.theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight, .theme-dark,
.theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light, .theme-light { --q-ambient: var(--q-bg-grad); }
}

/* BULUT tema kartları (Ayarlar → Görünüm + ilk giriş seçicisi): ikiye bölünmüş önizleme —
   sol üst imza rengi, sağ alt gece zemini; altında ad. Seçili kart aksan halkası. */
.q-thgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
/* grid-template-columns ŞART: <button>'un örtük sütunu içerik (ad) genişliğinde kalıyor ve önizlemenin
   width:100%'ü ona göre çözülüyordu → kartlar ad uzunluğuna göre farklı boyda çıkıyordu (ölçüldü: 50/46/33/30 px). */
.q-thcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; justify-items: stretch; text-align: center; width: 100%; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 700; color: var(--q-text); }
.q-thcard > i { position: relative; display: block; width: 100%; aspect-ratio: 1.4; border-radius: 14px; overflow: hidden;
    background: linear-gradient(150deg, var(--th-a) 0 42%, var(--th-b) 42%);
    box-shadow: inset 0 0 0 1px var(--q-border); transition: transform .18s cubic-bezier(.3,1.6,.5,1), box-shadow .15s; }
.q-thcard > i::before { content: ""; position: absolute; left: 10%; top: 16%; width: 34%; height: 12%; border-radius: 6px; background: rgba(255,255,255,.88); }
.q-thcard > i::after { content: ""; position: absolute; right: 10%; bottom: 16%; width: 40%; height: 14%; border-radius: 7px; background: var(--th-a); filter: brightness(1.15); }
.q-thcard:hover > i { transform: translateY(-2px); }
.q-thcard.on > i { box-shadow: 0 0 0 2px var(--q-chat-bg), 0 0 0 4px var(--q-accent); }
.q-thcard.on { color: var(--q-strong); }
@media (prefers-reduced-motion: reduce) { .q-thcard > i { transition: none; } .q-thcard:hover > i { transform: none; } }

/* #17: ilk giriş tema seçici overlay */
.q-tpick-overlay { position: fixed; inset: 0; z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); }
.q-tpick-card { width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: var(--q-glass-menu, #21232a); border: 1px solid var(--q-glass-border, rgba(255,255,255,.1)); border-radius: 20px; padding: 30px 26px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.q-tpick-logo { color: var(--q-accent); display: flex; justify-content: center; margin-bottom: 10px; }
.q-tpick-title { margin: 0 0 6px; font-size: 24px; font-weight: 800; color: var(--q-strong); }
.q-tpick-sub { margin: 0 0 22px; font-size: 14px; color: var(--q-muted); }
/* Gündüz / Gece / Sistem bölmeli düğmesi + altı kart + alt düğmeler (BULUT 2026-10-18) */
.q-tpick-base { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; margin-bottom: 18px; border-radius: 13px; background: var(--q-hover); border: 1px solid var(--q-border); }
.q-tpick-base button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--q-muted); }
.q-tpick-base button.on { background: var(--q-chat-bg); color: var(--q-accent); box-shadow: 0 2px 6px rgba(30,80,160,.14); }
.q-tpick-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; text-align: center; }
.q-tpick-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.q-tpick-foot .q-tpick-skip { margin-top: 0; }
.q-tpick-go { padding: 10px 22px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; color: #fff;
    background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 70%, #fff), var(--q-accent) 55%, color-mix(in srgb, var(--q-accent) 80%, #000));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent); }
.q-tpick-go:hover { filter: brightness(1.06); }
.q-tpick-skip { margin-top: 22px; background: none; border: 0; color: var(--q-muted); font-family: inherit; font-size: 13.5px; cursor: pointer; text-decoration: underline; }
.q-tpick-skip:hover { color: var(--q-text); }
/* İlk giriş topluluk sorusu (2026-09-29): tema seçici kartının üçüncü adımı gibi görünür. */
.q-cprompt { max-width: 440px; }
.q-cprompt-icon { width: 64px; height: 64px; border-radius: 18px; object-fit: cover; }
.q-cprompt-actions { display: flex; flex-direction: column; gap: 10px; }
.q-cprompt-btn { width: 100%; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--q-border); background: transparent; color: var(--q-text); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; transition: background .12s ease, filter .12s ease; }
.q-cprompt-btn:hover:not(:disabled) { background: var(--q-hover); }
.q-cprompt-btn.primary { border-color: transparent; background: var(--q-accent); color: #fff; }
.q-cprompt-btn.primary:hover:not(:disabled) { background: var(--q-accent); filter: brightness(1.08); }
.q-cprompt-btn:disabled { opacity: .6; cursor: default; }
/* KULLANIM ŞARTLARI ONAYI (2026-10-01, Apple Guideline 1.2) — ilk giriş kartlarıyla aynı kabuk.
   Madde listesi sola yaslı (kart ortalı); tam metin bağlantısı düğmelerin hemen üstünde. */
.q-terms { max-width: 480px; }
.q-terms-link { display: inline-block; margin-bottom: 16px; font-size: 13px; font-weight: 600; color: var(--q-accent); text-decoration: none; }
.q-terms-link:hover { text-decoration: underline; }

/* #2/#3 Alt panel profil kartı (Discord-vari) */
.q-userpanel-me { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; border-radius: 8px; padding: 3px 5px; margin: -3px -5px; transition: background .12s ease; }
.q-userpanel-me:hover { background: var(--q-hover); }
/* yalnız İLK menü (profil kartı) genişlesin — Tune (ses ayarları) menüsü sağda sabit kalsın
   (genel .q-menu kuralı ikisine de flex:1 verip sağda boşluk bırakıyordu). */
.q-userpanel > .q-menu:first-of-type { flex: 1; min-width: 0; }
/* (2026-07-31, kullanıcı bug'ı "üst üste biniyor oynuyor ekranıyla") min-width:0 ŞART.
   .q-menu-act bir flex ÖĞESİ ve varsayılan `min-width:auto` onu min-content'ten (yani ad +
   "🎮 X oynuyor 7:20" metninin TAM genişliğinden) daha dar yapmıyordu → kutu 166px'lik yuvasında
   259px'e taşıp mikrofon/kulaklık/dişli butonlarının altına giriyordu (ölçüldü). Sıfırlanınca
   zincir kapanıyor ve alt satır beklendiği gibi "…" ile kırpılıyor. */
.q-userpanel > .q-menu:first-of-type .q-menu-act { display: block; flex: 1; min-width: 0; }
.q-mecard { min-width: 230px; }
.q-mecard-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 6px; }
.q-mecard-sub { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }

/* #5 Gelişmiş arama filtre çubuğu */
/* Arama diyaloğu içeriği YATAYDA KAYMAZ (2026-08-21): çocuklar kaba sığar, taşan varsa kırpılır. */
.q-srch-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 9px; border: 1px solid var(--q-divider); color: var(--q-muted); cursor: pointer; user-select: none; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.q-srch-chip:hover { border-color: var(--q-accent); }
.q-srch-chip.on { background: color-mix(in srgb, var(--q-accent) 16%, transparent); border-color: var(--q-accent); color: var(--q-accent); }

/* #4 Birleşik ifade paneli — üst sekmeler + composer ikon vurgusu */
.q-expr { min-width: 340px; }
.q-expr-tabs { display: flex; gap: 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--q-divider); margin-bottom: 6px; }
.q-expr-tab { font-size: 13px; font-weight: 600; color: var(--q-muted); padding: 5px 12px; border-radius: 8px; cursor: pointer; user-select: none; transition: background .12s ease, color .12s ease; }
.q-expr-tab:hover { color: var(--q-strong); background: var(--q-hover); }
.q-expr-tab.on { color: #fff; background: var(--q-accent); }
/* Panel içindeki scroll çubukları panelin TAM SAĞ kenarına yaslansın:
   body, panelin 6px padding'ini negatif margin'le doldurur; picker'ların sabit
   genişliği kaldırılır; içerik-scrollbar arası 6px iç boşlukla korunur. */
.q-expr-body { margin-right: -6px; }
.q-expr .q-stickers, .q-expr .q-emoji { width: auto; }
.q-expr-icons { display: inline-flex; align-items: center; gap: 8px; }
/* İfade/efekt/GIF/anket araç grubu — masaüstünde input ile gönder arasında satır içi.
   Mobilde (aşağıda) input'un altına tam-genişlik ikinci satıra düşer. */
.q-composer-tools { display: inline-flex; align-items: center; gap: 6px; }
.q-composer-tools:empty { display: none; }
.q-expr-ic { display: inline-flex; align-items: center; justify-content: center; color: var(--q-muted); cursor: pointer; border-radius: 7px; padding: 3px; transition: color .12s ease, background .12s ease; }
.q-expr-ic:hover { color: var(--q-strong); }
.q-expr-ic.on { color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 16%, transparent); }

/* ÜST BANT DİLİ (2026-08-11, kullanıcı isteği: "yeniden bağlanıyor ekranı üstte badge şeklinde
   olsun... tekrar eposta gönder bandı gibi" + "loading ekranı yerine gene üst bantta olsun; amaç
   bağlanana kadar ekranda kalan mesajlarımı görmek"). Hem PRELOAD hem YENİDEN BAĞLANMA artık
   ekranı kaplamıyor: ince, üstte duran, camsı bir şerit. Ortak sınıf `.q-topbanner` — ikisi de
   aynı yükseklikte ve aynı yerde belirir, üst üste gelseler bile hizalı görünürler.
   NOT: yeniden bağlanma <dialog>'u artık show() ile açılıyor (showModal DEĞİL), yoksa sayfa
   inert olur ve "arkadaki mesajları görebilme" amacı boşa çıkardı. */
/* BANT ARTIK ALTTA (2026-08-12, kullanici: "madem ust banner Electron'da maximize/minimize/close
   dugmelerinin ustune cikamiyor, o halde ust banner yerine altta olsun").
   Sebep teknik bir sinirdi: Windows Controls Overlay'de o dugmeleri ISLETIM SISTEMI cizer ve her
   zaman web iceriginin ustundedir; z-index ile asilamaz. Ustte kalip onlarin altindan gecmek
   yerine bandi hic o bolgeye sokmayan bir yere aldik.
   SINIF ADI `q-topbanner` BILEREK KORUNDU: App.razor, ReconnectModal ve goglis.js bu adi
   kullaniyor; yeniden adlandirmak uc dosyada eszamanli degisiklik ister ve hicbir sey kazandirmaz.
   ADI "ust" ama YERI alt — burasi tek dogruluk kaynagi. */
/* AĞ DURUMU ÇERÇEVESİ (2026-08-25, kullanıcı isteği: "bağlanıyor ve yeniden bağlanıyor
   bandının altına, sayfanın kenarındaki çerçeve efekti çok hoş olur").
   Kenardan içeri sönümlenen bir ışık: bant ne diyorsa onun rengini alır (bağlanıyor = marka
   vurgusu, bağlantı koptu = tehlike rengi) ve nefes alır. Bant zaten METNİ söylüyor; çerçeve
   ekranın neresine bakarsan bak görülen çevresel işarettir.
   PERF: box-shadow SABİT, animasyon YALNIZ opacity — box-shadow'u canlandırmak her karede
   yeniden boyama demektir (login aurorasında da aynı kural: sadece transform/opacity).
   GÖRÜNÜRLÜK ANİMASYONA BAĞLI DEĞİL: sekme arka plandayken animasyon saati ilerlemez, o yüzden
   taban durum zaten opacity:1 (aynı ders yeniden-bağlanma bandında da alınmıştı).
   pointer-events:none ŞART — görünmez ama tıklama yutan tam ekran katman bu kod tabanının
   bilinen tuzağı (bkz. placeSmart/backdrop turu). z-index bandın (20000) hemen ALTI: çerçeve
   her şeyin üstünde çizilir ama bandın kendisini örtmez. */
.q-netfx {
    position: fixed; inset: 0; pointer-events: none; z-index: 19990;
    opacity: 0; transition: opacity .45s ease;
    --q-netfx-c: var(--q-accent, #A9744C);
    /* Yuvarlak kose: kare cerceve pencerenin kendi kenarina yapisip "bozuk kenarlik" gibi
       duruyordu; 14px kose onu bilincli bir ISIK cercevesi yapiyor. */
    border-radius: 14px;
    /* UC KATMAN: keskin cizgi + dar parlama + genis hale. Degerler TARAYICIDA denenerek
       secildi — ilk deneme (1.5px/45%, 20px/32%, 72px/15%) ekranda neredeyse gorunmuyordu. */
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--q-netfx-c) 70%, transparent),
        inset 0 0 30px 4px color-mix(in srgb, var(--q-netfx-c) 50%, transparent),
        inset 0 0 130px 18px color-mix(in srgb, var(--q-netfx-c) 24%, transparent);
}
@keyframes q-netfx-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* İki kaynak, İKİ AYRI SINIF (tek "açık" bayrağı değil): preload ile yeniden-bağlanma aynı anda
   görünürse biri kapanırken diğerini söndürmesin. */
html.q-netfx-conn .q-netfx,
html.q-netfx-lost .q-netfx { opacity: 1; animation: q-netfx-breathe 2.6s ease-in-out infinite; }
html.q-netfx-lost .q-netfx { --q-netfx-c: var(--q-danger, #E24B4A); }
/* Deneme bitti (başarısız/duraklatıldı): nabız DURUR, çerçeve sabit kalır — bandın kendi
   diliyle aynı: "artık bekleme, iş sende". */
html.q-netfx-dead .q-netfx { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    html.q-netfx-conn .q-netfx,
    html.q-netfx-lost .q-netfx { animation: none; }
}

.q-topbanner {
    position: fixed; bottom: 0; left: 0; right: 0; width: 100%; max-width: none; margin: 0;
    z-index: 20000; box-sizing: border-box;

    /* DİKEY ORTALAMA — TEK MEKANİZMA (2026-08-11, üçüncü tur; kullanıcı: "yazı gene dikey
       ortalı değil, mobilde çirkin görünüyor, profesyonelce hallet").
       Önceki iki tur `height` + `align-items:center` + piksel düzeltmeleriyle uğraştı ve her
       seferinde başka bir şey kaydı (alt kenarlık, font metrikleri, animasyon takılması).
       Kalıcı çözüm SABİT YÜKSEKLİĞİ BIRAKMAK: yükseklik artık DOLGUDAN doğuyor. Üst ve alt
       dolgu birbirinin AYNISI olduğu için içerik, font metriklerinden BAĞIMSIZ olarak tam
       ortada durur — ölçülecek bir sapma kalmaz, düzeltme pikseli de gerekmez.
       Alt kenarlık da dengelenir: `border-bottom` kadar fazladan üst dolgu verilir. */
    display: flex; align-items: center; justify-content: center; gap: 10px;
    /* Cenkti/gesture payi ARTIK ALTTAN: safe-area-inset-BOTTOM (eskiden top'ti). */
    padding: 9px 14px calc(8px + env(safe-area-inset-bottom, 0px));
    /* ÇENTİK PAYI: telefonlarda bant durum çubuğunun ALTINA giriyordu (kullanıcı: "mobilde
       çirkin"). safe-area kadar yukarıdan nefes bırakılır; masaüstünde değer 0'dır. */
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--q-accent, #22A6FF) 45%, transparent);

    /* RENKLER TEMADAN (2026-08-11): eskiden `rgba(16,22,32,.94)` ve `#e6e7ef` SABİT yazılıydı —
       18 temanın 17'sinde yabancı duruyordu, açık temalarda ise koyu bir şerit olarak sırıtıyordu.
       Cam yüzey uygulamanın menüleriyle aynı değişkenden gelir. */
    background: var(--q-glass-menu, var(--q-side-bg));
    backdrop-filter: blur(14px);
    color: var(--q-text);
    font: 700 13px/1.25 'Goglis Sans', system-ui, sans-serif;
    letter-spacing: .2px;
    box-shadow: 0 -6px 20px rgba(0,0,0,.28);   /* golge YUKARI dogru (bant altta) */
    /* GİRİŞ ANİMASYONU YOK — bilinçli, iki tur bug ürettikten sonra kaldırıldı (2026-08-11).
       Önce `both` fill'liydi: animasyon hiç koşmazsa eleman translateY(-100%)'te, ekran dışında
       donuyordu. Fill kaldırıldı ve kayma 8px'e indirildi; bu sefer de ÖLÇÜLDÜ ki animasyon
       KOŞARKEN (arka plan sekmesinde animasyon saati ilerlemez) eleman 0% karesinde takılıyor ve
       bant kalıcı olarak 8px yukarıda duruyor — getBoundingClientRect().top = -8. Kullanıcının
       "dikeylemesine ortalı değil" dediği şey buydu: bandın üst 8px'i ekranın dışında kalınca
       içerik alta yaslanmış görünüyor. Bu bandın çıktığı AN zaten sekmenin arka planda olduğu
       (bağlantı koptu) an; yani en kötü koşul, tipik koşul. Konum HİÇBİR zaman animasyonun
       koşmasına bağlı olmamalı → süsleme atıldı, bant olduğu yerde belirir. */
}
/* NOT: bir onceki turda eklenen WCO inset kurali KALDIRILDI — bant artik altta ve orada
   pencere dugmesi yok, dolayisiyla insete gerek kalmadi. */

.q-topbanner .gp-dots span { width: 6px; height: 6px; }
/* Metin kutuları + OPTİK HİZA.
   Kutu artık simetrik dolguyla tam ortada (ölçüldü: üst 9 / alt 9). Geriye yazı tipinin kendi
   asimetrisi kalıyor: harflerin GÖVDESİ (cap-height) kutu merkezinin 1px ÜSTÜNDE oturuyor.
   ÖLÇÜT BİLİNÇLİ SEÇİLDİ — "mürekkep kutusu" değil "cap-height": mürekkep kutusu metne göre
   değişir (inen harfleri olan bir cümle ile olmayan farklı çıkar) ve ona göre hizalarsak yazı
   DEĞİŞTİKÇE dikeyde ZIPLAR. Cap-height ölçütü yazı tipine bağlıdır, metne değil — nitekim
   "Bağlanıyor…" ve "Sunucuya yeniden bağlanılıyor…" için sapma AYNI çıktı (-1,0px), yani bu
   düzeltme her mesajda doğru kalır. */
.q-topbanner > span, .q-topbanner p { margin: 0; line-height: 1.25; transform: translateY(1px); }

/* MOBİLDE DAHA OKUNUR (2026-08-11, kullanıcı: "mobilde çirkin görünüyor"): 13px yazı küçük
   ekranda sıkışık duruyordu; bant biraz daha nefes alır ve yazı büyür. */
/* MOBILDE USTTE, MASAUSTU/WEB'DE ALTTA (2026-08-12, kullanici karari).
   Gerekce farkli iki platformda farkli: MASAUSTUNDE bant ustte olamiyor cunku Electron'un
   native pencere dugmeleri her zaman web iceriginin ustunde ve bandin sag ucunu ortuyor.
   MOBILDE oyle bir dugme yok; orada dogal yer ust — alt bolge zaten navigasyon cubugunun ve
   sistem gesture alaninin. */
@media (max-width: 700px) {
    .q-topbanner {
        top: 0; bottom: auto;
        padding: calc(11px + env(safe-area-inset-top, 0px)) 12px 10px;   /* centik payi USTTEN */
        font-size: 13.5px; gap: 9px;
        border-top: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--q-accent, #22A6FF) 45%, transparent);
        box-shadow: 0 6px 20px rgba(0,0,0,.28);   /* golge asagi dogru */
    }
    /* Kopma bandinin kirmizi kenarligi mobilde de dogru kenarda olsun. */
    #components-reconnect-modal.q-topbanner {
        border-bottom-color: color-mix(in srgb, var(--q-danger, #E24B4A) 60%, transparent);
    }
}

/* Preload bandı üç dili de basar (statik HTML, devre yok → Loc çağrılamaz); goglis.js kayıtlı
   ya da tarayıcı diline göre <html>'e sınıf koyar, gösterilecek olan seçilir. Varsayılan TR
   DEĞİL: dil işareti yoksa İngilizce (Loc.Normalize ile aynı kural). */
.q-pl-t { display: none; }
.q-pl-en { display: inline; }
html.q-lang-tr .q-pl-en, html.q-lang-de .q-pl-en, html.q-lang-ru .q-pl-en, html.q-lang-fa .q-pl-en { display: none; }
html.q-lang-tr .q-pl-tr { display: inline; }
html.q-lang-de .q-pl-de { display: inline; }
html.q-lang-ru .q-pl-ru { display: inline; }
html.q-lang-fa .q-pl-fa { display: inline; }

#goglis-preload { opacity: 1; transition: opacity .3s ease; }
#goglis-preload.done { opacity: 0; pointer-events: none; }

/* AŞAMA 1 — TAM EKRAN markalı yükleme (2026-08-11). Kullanıcının kayıtlı arayüz ayarları
   uygulanana kadar burada durulur; goglis.js ayarları uygulayınca sınıf `q-topbanner`a döner
   ve ince şeride iner ("Bağlanıyor…"). Zemin TEMA değişkeninden gelir — tema artık ilk
   paint'ten önce <html>'e basıldığı için doğru renkle doğar (eski kahve flaşı bu yüzden yoktu
   sanılmasın: FOUC ayrı düzeltildi, burası onun devamı). */
#goglis-preload.gp-full {
    position: fixed; inset: 0; z-index: 20000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
    /* BULUT (2026-10-18): açılış artık temadan bağımsız GECE GÖKYÜZÜ — markanın tek "sahne" anı.
       Kullanıcının teması bu aşamada henüz uygulanmamış oluyor; ayarlar gelince bant moduna
       iner ve o bant tema renginde (aşağıda), yani açık temada uzun bir koyu ekran kalmaz. */
    background: radial-gradient(60% 60% at 50% 45%, #1A4FB0 0%, #0C2463 50%, #060F33 100%);
    color: #EAF5FF;
}
/* yıldız tozu: sabit noktalar + yavaş göz kırpma (tek katman, tek animasyon) */
#goglis-preload.gp-full::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(1.6px 1.6px at 12% 18%, #CFF1FF 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 27% 72%, #CFF1FF 50%, transparent 52%),
        radial-gradient(2px 2px at 41% 12%, #E6F6FF 50%, transparent 52%),
        radial-gradient(1.4px 1.4px at 63% 82%, #CFF1FF 50%, transparent 52%),
        radial-gradient(1.8px 1.8px at 78% 22%, #E6F6FF 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 88% 64%, #CFF1FF 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 7% 54%, #CFF1FF 50%, transparent 52%),
        radial-gradient(1.3px 1.3px at 54% 30%, #CFF1FF 50%, transparent 52%);
    animation: gp-twinkle 3.6s ease-in-out infinite;
}
@keyframes gp-twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.gp-snail { position: relative; width: min(190px, 46vw); }
.gp-snail .gsnail { width: 100%; height: auto; filter: drop-shadow(0 0 18px rgba(120,205,255,.85)); }
/* halka dalgaları kabuğun merkezinden yayılır (viewBox'ta 215,210 → %36 / %48.7) */
.gp-wave { position: absolute; left: 36%; top: 48.7%; width: 52%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(140,215,255,.75); opacity: 0; transform: translate(-50%, -50%) scale(.6); animation: gp-ripple 2.8s cubic-bezier(.22,.8,.24,1) infinite; pointer-events: none; }
.gp-wave + .gp-wave { animation-delay: .93s; }
@keyframes gp-ripple { 0% { transform: translate(-50%, -50%) scale(.6); opacity: .55; } 100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; } }
#goglis-preload.gp-full .gp-brand { font-size: 34px; font-weight: 600; text-shadow: 0 0 18px rgba(120,200,255,.7); }
#goglis-preload.gp-full .gp-dots span { background: #9FDBFF; animation-name: gp-hop; }
@keyframes gp-hop { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-7px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #goglis-preload.gp-full::before, .gp-wave { animation: none; } .gp-wave { display: none; } }
#goglis-preload.gp-full .q-pl-t { display: none !important; }   /* bant yazısı yalnız 2. aşamada */
.gp-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* 2. aşamada (bant) marka kartı yok — yalnız yazı + noktalar. */
#goglis-preload.q-topbanner .gp-card { display: none; }

/* AÇILIŞ BANDI TEMA RENGİNDE (2026-08-20, kullanıcı: "Bağlanıyor bandı tema rengine uygun
   olsun — şu an hep okyanus mavisi"). Önceki karar (--q-logo sabiti) bilinçliydi ama kullanıcı
   temaya uymayı seçti: kaynak artık --q-accent (tema/kişisel vurgu). Kırmızı accent seçen
   birinde hata bandına benzeme riski kabul edildi — hata bandı NABIZLI, bu değil; ayrım orada.
   Yedek zincir accent -> logo mavisi (tema-dışı bağlamda değişken çözülmezse bant düşmesin). */
#goglis-preload.q-topbanner {
    background: color-mix(in srgb, var(--q-accent, var(--q-logo, #35A6FF)) 22%, var(--q-glass-menu, var(--q-side-bg)));
    border-bottom-color: color-mix(in srgb, var(--q-accent, var(--q-logo, #35A6FF)) 60%, transparent);
}
.gp-badge { width: 84px; height: 84px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); box-shadow: 0 16px 46px rgba(89,131,177,.45), 0 0 0 1px rgba(255,255,255,.08) inset; animation: gp-bob 2.6s ease-in-out infinite; }
.gp-brand { font-size: 19px; font-weight: 700; letter-spacing: .6px; color: #fff; font-family: 'Goglis Sans', system-ui, sans-serif; }
@keyframes gp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.gp-dots { display: flex; gap: 7px; }
.gp-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--q-logo, #35A6FF); animation: gp-dot 1.2s ease-in-out infinite; } /* #4 (2026-07-26): yükleme noktaları da NEON mavi (relogin+preload); eski kahve gitti. */
.gp-dots span:nth-child(2) { animation-delay: .18s; }
.gp-dots span:nth-child(3) { animation-delay: .36s; }
/* Kopma bandinda noktalar da KIRMIZI (2026-08-12): marka mavisi kirmizi bandin icinde yabanci
   duruyordu. Acilis bandinda mavi KALIR — oradaki mesaj "her sey yolunda, baglaniyoruz". */
#components-reconnect-modal .gp-dots span { background: var(--q-danger, #E24B4A); }
@keyframes gp-dot { 0%, 100% { opacity: .3; transform: scale(.8); } 45% { opacity: 1; transform: scale(1.15); } }

/* ---- ÇIKIŞ (veda) ekranı — 2026-07-30 ----
   Preload'ın kardeşi: aynı rozet/marka dili, ters yön. Uygulama BULANIKLAŞARAK geri çekilir
   (kullanıcı gerçekten "kapandığını" görür), veda kartı öne gelir. z-index preload'ın (20000)
   ve MudBlazor portallarının üstünde. GÖRÜNÜRLÜK ANİMASYONA BAĞLI DEĞİL (skeleton dersi):
   taban durum görünür, `.on` yalnız yumuşatır — animasyon koşmazsa ekran boş kalmaz. */
#q-bye {
    position: fixed; inset: 0; z-index: 30000;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(900px 600px at 50% 35%, rgba(40,150,220,.20), transparent 62%),
                linear-gradient(160deg, rgba(14,26,39,.93), rgba(10,16,23,.97));
    -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
    /* GÖRÜNÜRLÜK ANİMASYONA BAĞLI DEĞİL (2026-07-30, doğrulamada yakalandı): ilk yazımda
       `opacity:0` + JS'te requestAnimationFrame ile `.on` sınıfı vardı — rAF ARKA PLAN
       SEKMESİNDE HİÇ TETİKLENMEZ, overlay kalıcı görünmez kalıyordu. Taban durum GÖRÜNÜR;
       giriş yumuşatması `animation`la yapılır (eleman eklenince kendiliğinden koşar) ve
       animasyonlar kapalıysa (q-instant / reduced-motion) ekran ANINDA görünür. */
    opacity: 1; animation: q-bye-in .22s ease both;
}
@keyframes q-bye-in { from { opacity: 0; } to { opacity: 1; } }
.q-bye-card { display: flex; flex-direction: column; align-items: center; gap: 15px; animation: q-bye-card-in .34s cubic-bezier(.2,.9,.25,1) both; }
@keyframes q-bye-card-in { from { transform: translateY(8px) scale(.97); } to { transform: none; } }
/* BULUT (2026-10-18): rozet yerine açılıştaki parlayan salyangoz; "kapanıyor" hissini artık
   salyangozun yavaşça kabuğuna çekilmesi veriyor (baş küçülüp kabuğa doğru kayar). */
.q-bye-snail { width: min(150px, 40vw); }
.q-bye-snail .gsnail { width: 100%; height: auto; filter: drop-shadow(0 0 16px rgba(120,205,255,.8)); }
.q-bye-snail .gsnail .sn-headg { transform-origin: 300px 300px; animation: q-bye-tuck 1.1s .25s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes q-bye-tuck { to { transform: translateX(-40px) scale(.72); opacity: .55; } }
.q-bye-bye { font-size: 19px; font-weight: 700; letter-spacing: .3px; color: #fff; font-family: 'Goglis Sans', system-ui, sans-serif; }
.q-bye-out { display: flex; align-items: center; gap: 9px; font-size: 13px; color: rgba(255,255,255,.62); }
.q-bye-spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); border-top-color: var(--q-logo, #35A6FF); animation: q-bye-spin .8s linear infinite; }
@keyframes q-bye-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    /* Ekran GÖRÜNÜR kalır (bilgi taşıyor), yalnız hareket durur. */
    #q-bye, .q-bye-card, .q-bye-snail .gsnail .sn-headg, .q-bye-spin { animation: none; }
}

/* #2 Mesaj yanıtlama */
.q-replybar { display: flex; align-items: center; gap: 8px; margin: 0 14px; padding: 7px 12px; border-radius: 9px 9px 0 0; background: var(--q-panel-bg); border: 1px solid var(--q-divider); border-bottom: none; font-size: 12.5px; color: var(--q-muted); }
.q-replybar-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-replybar-prev { margin-left: 6px; color: var(--q-faint); font-style: italic; }
.q-replybar-x { display: inline-flex; cursor: pointer; color: var(--q-muted); border-radius: 6px; padding: 2px; }
.q-replybar-x:hover { color: var(--q-strong); background: var(--q-hover); }
.q-reply-ref { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--q-muted); margin-bottom: 1px; padding-left: 2px; border-left: 2px solid var(--q-accent); padding-left: 8px; }
.q-reply-ref b { color: var(--q-accent); font-weight: 600; }
.q-reply-ref-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; opacity: .85; }

/* #9 Şikayet dialogu + panosu */
.q-report { display: flex; flex-direction: column; gap: 6px; min-width: 380px; max-width: 460px; }
/* #3: not alanı sebep butonlarıyla AYNI genişlikte (q-settings-select'in 420px sınırı burada geçersiz) */
.q-report .q-settings-select { max-width: none; width: 100%; box-sizing: border-box; }
/* #2: üye satırı ⋮ menü butonu */
.q-member-more { display: inline-flex; align-items: center; justify-content: center; padding: 6px; border-radius: 8px; color: var(--q-muted); cursor: pointer; }
.q-member-more:hover { background: var(--q-hover); color: var(--q-strong); }
.q-report-sub { font-size: 13px; color: var(--q-muted); margin-bottom: 8px; }
.q-report-msg { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: var(--q-input-bg); color: var(--q-text); font-size: 13px; font-style: italic; }
.q-report-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border-radius: 9px; background: var(--q-input-bg); border: 1px solid var(--q-divider); color: var(--q-strong); font-size: 14px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.q-report-opt:hover { border-color: var(--q-accent); }
.q-report-opt.on { border-color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-report-card { padding: 12px 14px; border-radius: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); margin-bottom: 10px; max-width: 640px; }
.q-report-card.resolved { opacity: .55; }
/* Şikayet diyaloğu: "bu kişiyi de engelle" kutusu (Apple 1.2 — tek adımda şikayet + engelle). */
.q-report-block { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; font-size: 13px; color: var(--q-text); cursor: pointer; line-height: 1.4; }
.q-report-block input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--q-accent); flex: none; cursor: pointer; }
/* YÖNETİM PANELİ → ŞİKAYETLER (2026-10-01): bekleyen kart solda kırmızı şeritli, ele alınan sönük. */
.q-arp-bar { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; max-width: 640px; }
.q-arp-hint { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--q-muted); line-height: 1.45; }
.q-arp-seg { display: flex; gap: 6px; flex: none; }
.q-arp.open { border-left: 3px solid var(--q-danger, #ed4245); }
.q-arp.done { opacity: .72; }
.q-arp-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.q-arp-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--q-hover); color: var(--q-strong); }
.q-arp-kind.k-block { background: color-mix(in srgb, var(--q-danger, #ed4245) 18%, transparent); color: var(--q-danger, #ed4245); }
.q-arp-reason { color: var(--q-strong); }
.q-arp-where { color: var(--q-muted); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-arp-time { margin-left: auto; font-size: 11.5px; color: var(--q-faint); }
.q-arp-who { margin-top: 6px; font-size: 13px; color: var(--q-text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.q-arp-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--q-hover); color: var(--q-muted); }
.q-arp-chip.warn { background: color-mix(in srgb, var(--q-amber, #f0b232) 20%, transparent); color: var(--q-amber, #f0b232); }
.q-arp-sub { margin-top: 5px; font-size: 12px; color: var(--q-muted); white-space: pre-wrap; }
.q-arp-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.q-arp-done { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--q-muted); }
.q-report-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: var(--q-strong); }
.q-report-reason { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 8px; background: color-mix(in srgb, var(--q-danger) 18%, transparent); color: var(--q-danger); }
.q-report-note { margin-top: 6px; font-size: 13px; color: var(--q-text); }
.q-report-snap { margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: var(--q-panel-bg); font-size: 12.5px; font-style: italic; color: var(--q-muted); }
.q-report-meta { margin-top: 6px; font-size: 11.5px; color: var(--q-faint); display: flex; align-items: center; gap: 10px; }

/* SUSTURULANLAR PANOSU (2026-08-25) — topluluk ayarları → Susturulanlar.
   Şikayet panosuyla aynı dili konuşur (kart + kenar rayı + rozet) ama satır DAHA YOĞUN:
   kim, kimin eliyle, ne kadar süreyle susturulmuş — hepsi tek bakışta. */
.q-settings-hrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-settings-hint { font-size: 12.5px; color: var(--q-muted); margin: 4px 0 12px; line-height: 1.45; }

/* Özet şeridi: üç sayı kutusu. Renk taşıyıcı — kırmızı süresizi, amber süreliyi anlatır. */
.q-mute-stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.q-mute-stat {
    min-width: 96px; padding: 9px 14px; border-radius: 10px;
    background: var(--q-input-bg); border: 1px solid var(--q-divider);
    display: flex; flex-direction: column; gap: 1px;
}
.q-mute-stat b { font-size: 20px; line-height: 1.1; color: var(--q-strong); }
.q-mute-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--q-faint); }
.q-mute-stat.forever { border-color: color-mix(in srgb, var(--q-danger) 40%, transparent); }
.q-mute-stat.forever b { color: var(--q-danger); }
.q-mute-stat.timed { border-color: color-mix(in srgb, var(--q-amber, #E0A03A) 40%, transparent); }
.q-mute-stat.timed b { color: var(--q-amber, #E0A03A); }

/* Satır: solda 3px'lik durum rayı (amber = süreli, kırmızı = süresiz). Rayı border-left ile
   çiziyoruz — ::before kullansaydık satırın kendi dolgusuyla hizalamak gerekirdi. */
.q-mute-row {
    display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
    padding: 10px 13px; margin-bottom: 8px; max-width: 640px;
    border-radius: 10px; background: var(--q-input-bg);
    border: 1px solid var(--q-divider);
    border-left: 3px solid color-mix(in srgb, var(--q-amber, #E0A03A) 75%, transparent);
}
.q-mute-row.forever { border-left-color: var(--q-danger); }
.q-mute-main { flex: 1; min-width: 130px; }
.q-mute-name { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--q-strong); }
.q-mute-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11.5px; color: var(--q-faint); margin-top: 2px; }
.q-mute-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.q-mute-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 8px;
    font-variant-numeric: tabular-nums; /* geri sayım tık tık ederken satır genişliği oynamasın */
}
.q-mute-badge.forever { background: color-mix(in srgb, var(--q-danger) 18%, transparent); color: var(--q-danger); }
.q-mute-badge.timed { background: color-mix(in srgb, var(--q-amber, #E0A03A) 18%, transparent); color: var(--q-amber, #E0A03A); }
.q-mute-badge .q-mute-left.over { opacity: .6; }
.q-mute-until { font-size: 10.5px; color: var(--q-faint); }

.q-mute-lift {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    height: 30px; padding: 0 11px; border-radius: 8px; cursor: pointer;
    background: transparent; border: 1px solid var(--q-divider); color: var(--q-muted);
    font: 600 12px/1 inherit; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.q-mute-lift:hover { background: color-mix(in srgb, var(--q-ok, #23a55a) 14%, transparent); color: var(--q-ok, #23a55a); border-color: color-mix(in srgb, var(--q-ok, #23a55a) 45%, transparent); }

/* Kendi satırın: eylem yerine sebep. Sönük ve tıklanmaz — yanlış umut vermesin. */
.q-mute-self {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    height: 30px; padding: 0 11px; border-radius: 8px;
    background: var(--q-panel-bg); border: 1px dashed var(--q-divider);
    color: var(--q-faint); font: 600 12px/1 inherit; cursor: default;
}

.q-mute-refresh {
    display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px;
    border-radius: 8px; cursor: pointer; background: transparent;
    border: 1px solid var(--q-divider); color: var(--q-muted); font: 600 12px/1 inherit;
}
.q-mute-refresh:hover { background: var(--q-hover); color: var(--q-strong); }

.q-mute-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 34px 16px; max-width: 640px; color: var(--q-faint);
    border: 1px dashed var(--q-divider); border-radius: 12px; font-size: 13px; text-align: center;
}

/* Dar ekran: eylem düğmesi alt satıra tam genişlik (satır sıkışıp metin kırpılmasın). */
@media (max-width: 560px) {
    .q-mute-right { align-items: flex-start; }
    .q-mute-lift { width: 100%; justify-content: center; height: 34px; }
}

/* #1 Klavye kısayolları listesi + kbd çipleri */
.q-hk-list { display: flex; flex-direction: column; gap: 8px; max-width: 580px; }
.q-hk-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border-radius: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); }
.q-hk-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
.q-hk-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb, var(--q-accent) 18%, transparent); color: var(--q-accent); flex-shrink: 0; }
.q-hk-label { font-size: 14px; color: var(--q-text); font-weight: 500; }
.q-hk-bind { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; min-width: 104px; justify-content: center; padding: 4px 10px; border-radius: 9px; background: var(--q-panel-bg); border: 1px solid var(--q-divider); cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.q-hk-bind:hover { border-color: var(--q-accent); }
.q-hk-bind.capturing { border-color: var(--q-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 26%, transparent); }
.q-hk-rec { font-size: 12.5px; color: var(--q-accent); font-weight: 600; white-space: nowrap; }
.q-hk-empty { font-size: 12.5px; color: var(--q-faint); font-style: italic; }
.q-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 24px; padding: 0 7px; border-radius: 6px; background: linear-gradient(180deg, var(--q-side-bg), var(--q-rail-bg)); border: 1px solid var(--q-divider); border-bottom-width: 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); font-family: 'Space Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--q-strong); line-height: 1; }

/* BULUT LOGO (2026-10-18, Fatih: "logo icon tasarımları değişiyor, yeni resimler daha tatlı").
   Rozet degradesi yeni uygulama simgesinin kendisi: açık gökyüzü #78D8FF → #35A6FF → #2477E8.
   Eski neon mavi (#6FE6FF/#0A66DB) ve onun sert parlaması kalktı; ışıltı yumuşak ve daha az doygun.
   Salyangoz artık RENKLİ bir çizim (SnailLogo.razor): beyaz gövde + mavi halkalı kabuk + iri gözler. */
:root { --q-logo: #35A6FF; --q-logo-hi: #78D8FF; --q-logo-lo: #2477E8; --q-logo-glow: rgba(53,166,255,.40); }
.gsnail { display: block; flex: none; overflow: visible; }
/* "Heyecan" çizgileri: rozetsiz yerde mavi, mavi rozetin içinde beyaz (aşağıda --gsn-mark). */
.gsnail .sn-mk { fill: var(--gsn-mark, #4CB0FF); }
/* Rozetsiz salyangoz (yasal sayfa başlığı, boş durumlar, tema seçici…): beyaz gövde açık zeminde
   kaybolmasın diye yumuşak mavi gölge — tasarımdaki "bulut" karosunun gölgesi. */
.gsnail:not(.mono) { filter: drop-shadow(0 2px 4px rgba(30,120,220,.30)); }
.q-logo, .q-login-logo, .q-welcome-badge, .gp-badge, .q-about-logo,
.q-invcard-banner-fallback, .q-camask-ic { --gsn-mark: #fff; }
/* Mavi rozetin içinde: karonun %82'si, optik merkez için biraz aşağı (tasarımdaki .tile .sn). */
.q-logo > .gsnail, .q-login-logo > .gsnail, .q-welcome-badge > .gsnail, .gp-badge > .gsnail,
.q-about-logo > .gsnail, .q-invcard-banner-fallback > .gsnail {
    width: 82%; height: auto; margin-top: 4%; filter: drop-shadow(0 2px 3px rgba(10,70,170,.28));
}
/* HAREKET (Animate): baş salınır, gözler kırpar, çizgiler kıpırdar, kabuk nefes alır. SVG
   dönüşümleri kompozitörde değil boyamada koşar — bu yüzden yalnız GEÇİCİ ekranlarda (yükleme,
   giriş, sıra, hata) sonsuz; uygulama içinde kalıcı duran yerlerde birkaç tur oynayıp durur. */
.sn-anim .sn-headg { animation: gsn-bob 3.8s ease-in-out infinite; }
.sn-anim .sn-eye { animation: gsn-blink 5.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sn-anim .sn-m { animation: gsn-wig 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.sn-anim .sn-m + .sn-m, .q-brand:hover .q-logo .sn-m + .sn-m { animation-delay: -.9s; }
.sn-anim .sn-shell { animation: gsn-breathe 3.8s ease-in-out infinite; transform-origin: 215px 210px; }
.sn-anim.sn-few .sn-headg, .sn-anim.sn-few .sn-shell { animation-iteration-count: 3; }
.sn-anim.sn-few .sn-eye { animation-iteration-count: 2; }
.sn-anim.sn-few .sn-m { animation-iteration-count: 4; }
/* Üst şeritteki logo yalnız imleç üstündeyken canlanır (2026-08-29 ölçümü: sürekli oynayan
   şerit öğesi derleyiciyi hiç uyutmuyordu). */
.q-brand:hover .q-logo .sn-m { animation: gsn-wig 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.q-brand:hover .q-logo .sn-eye { animation: gsn-blink 2.7s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes gsn-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes gsn-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
@keyframes gsn-wig { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
@keyframes gsn-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.014); } }
@media (prefers-reduced-motion: reduce) { .gsnail *, .gsnail { animation: none !important; } }
html.q-instant .gsnail, html.q-instant .gsnail * { animation: none !important; }
/* ÜST ŞERİT YÜKSEKLİĞİ TEK KAYNAK (2026-08-21 akşam): mobil tam-alan panelleri şeridin ALTINDAN
   başlar ve bunu ayrı ayrı `52px` yazarak yapıyorlardı — alçak ekranda şerit 46px'e inince
   (aşağıdaki max-height:520px bloğu) o sabitler yalan oluyor, panellerin üstünde 6px'lik boşluk
   kalıyordu. Artık hepsi bu değişkeni okur. */
:root { --q-topbar-h: 52px; }
/* ALT MENÜ YÜKSEKLİĞİ TEK KAYNAK + SAFE-AREA PAYI YOK (2026-08-22, kullanıcı: "iOS'ta alt menü
   tam dipte değildi, sanırım iPhone'da safe area var diye; ben her türlü en aşağıda olsun").
   Eskiden çubuk `54px + env(safe-area-inset-bottom)` yüksekliğindeydi ve `padding-bottom` ile
   düğmeleri o kadar YUKARI itiyordu: iPhone'da (env ≈ 34px) düğmelerin altında boş bir cam şerit
   kalıyor, Android'de (env = 0) kalmıyordu — kullanıcının gördüğü fark buydu.
   ÖDÜNÜN FARKINDA: düğmeler artık ana ekran çubuğunun (home indicator) bandına giriyor; kullanıcı
   bunu bilerek istedi. Geri almak gerekirse tek yer burasıdır. */
:root { --q-mobar-h: 54px; }
.q-logo { width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(150deg, var(--q-logo-hi), var(--q-logo) 52%, var(--q-logo-lo)); box-shadow: 0 3px 9px color-mix(in srgb, var(--q-logo) 36%, transparent), 0 1px 0 rgba(255,255,255,.45) inset; display: flex; align-items: center; justify-content: center; color: #fff; position: relative; }
/* #5: büyük logo rozetlerinde neon mavi ışıltı (welcome/login/preloader/about) — sonraki tanımları ezer. */
.q-welcome-badge, .q-login-logo, .gp-badge, .q-about-logo { box-shadow: 0 12px 30px rgba(36,119,232,.26), 0 0 26px var(--q-logo-glow), inset 0 1px 0 rgba(255,255,255,.45) !important; }
/* #C1 (2026-07-26): SOL ÜST mini logo — welcome rozeti gibi neon glow + ÇOK YAVAŞ nefes (box-shadow
   büyü/küçül, 8s) + 10 sn'de bir shimmer sweep. Nefes animasyonunun box-shadow keyframe'i statik gölgeyi
   (1847'deki --q-elev-1) ezer → glow geri gelir. Yalnız .q-brand içindeki logo (login/preloader etkilenmez). */
/* Logo animasyonu MASAUSTUNE ozel (2026-08-17): dar ekranda surekli parlayan kare
   dikkat dagitiyordu; mobilde sabit durur. */
/* Süs animasyonları HOVER'A ALINDI (2026-08-29, aynı ölçüm): nefes + parıltı üst şeritte
   HER ZAMAN görünür olduğu için uygulama açık kaldığı sürece derleyici uyumuyordu. Efekt
   kayboldu değil — imlecle üstüne gelince oynuyor; boştayken sayfa gerçekten boşa çıkıyor. */
.q-brand .q-logo { overflow: hidden; }
.q-brand:hover .q-logo { animation: q-logo-breathe 8s ease-in-out infinite; }
@media (max-width: 1000px) { .q-brand .q-logo, .q-brand .q-logo::after { animation: none; } }
@keyframes q-logo-breathe {
  0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--q-logo) 42%, transparent), 0 0 14px var(--q-logo-glow), 0 0 0 1px rgba(255,255,255,.14) inset; }
  50% { box-shadow: 0 3px 12px color-mix(in srgb, var(--q-logo) 55%, transparent), 0 0 30px var(--q-logo-glow), 0 0 0 1px rgba(255,255,255,.20) inset; }
}
.q-brand .q-logo::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-140%); }
.q-brand:hover .q-logo::after { animation: q-logo-sheen 10s ease-in-out infinite; }
@keyframes q-logo-sheen { 0% { transform: translateX(-140%); } 7% { transform: translateX(140%); } 100% { transform: translateX(140%); } }
@media (prefers-reduced-motion: reduce) { .q-brand .q-logo, .q-brand .q-logo::after { animation: none; } }
.q-brandname { font-size: 16px; font-weight: 500; color: var(--q-strong); }
.q-badge { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--q-danger); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.q-divider-v { width: 1px; height: 24px; background: var(--q-divider); margin: 0 4px 12px; }
/* overflow-x clip: sekme taşma güvenliği; overflow-y visible: sekme menüleri (klasör/sunucu ▾/...) aşağı açılabilsin (clip, hidden'ın aksine diğer ekseni auto'ya zorlamaz). */
/* overflow-clip-margin: seçili sunucunun neon glow'u SOL/SAĞ kenarda kesilmesin (overflow-x:clip taşma
   sekmelerini "..."e taşımak için gerekli ama ilk sekmenin sol glow'unu kırpıyordu) — 26px pay glow'a yeter. */
.q-tabs { display: flex; align-items: flex-end; justify-content: center; gap: 4px; flex: 1; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 26px; }
/* #tabalign (2026-07-26): sunucu sırası VARSAYILAN ORTALI; ayardan sol/sağ seçilebilir (body sınıfı). */
body.q-tabalign-left .q-tabs { justify-content: flex-start; }
body.q-tabalign-right .q-tabs { justify-content: flex-end; }
.q-tab { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px 9px 0 0; font-size: 14px; font-weight: 500; color: var(--q-muted); cursor: pointer; border-top: 2px solid transparent; white-space: nowrap; }
/* Seçili sekme — kahve tint gradyanı + üst gloss (liquid glass) + aksan üst çizgisi = premium/branded. */
.q-tab.sel { background: linear-gradient(180deg, var(--q-state-primary), transparent 90%), var(--q-side-bg); color: var(--q-strong); border-top: 2px solid var(--q-accent); box-shadow: inset 0 1px 0 var(--q-gloss); }
.q-tab:hover:not(.sel) { background: var(--q-hover); color: var(--q-text); }
.q-tab.q-add { color: var(--q-online); padding: 7px 9px; }
/* ===== #14: Sunucu nav VARSAYILAN = Discord-vari yatay İKON pill'leri. Ad gizli → hover title'da.
   Chrome-sekmesi görünümü (kapatma hissi) gitti. Ayardan (body.q-nav-names) klasik "ad yanında" döner.
   Ölçüm sözde-barı (.q-tabs-measure) da aynı boyutta → taşma mantığı DOĞRU sayar. Seçili sekme caret için
   otomatik-genişler. ===== */
.q-tabs { align-items: center; gap: 6px; }
:is(.q-tabs, .q-tabs-measure) .q-tab { padding: 3px; border-radius: 13px; border-top: 0; min-height: 42px; min-width: 42px; justify-content: center; }
:is(.q-tabs, .q-tabs-measure) .q-tab .q-tab-name { display: none; }
/* tam YUVARLAK sunucu ikonları + sunucular arası geçişte halka/glow YUMUŞAK animasyon (kütük değil). */
:is(.q-tabs, .q-tabs-measure) .q-tab .q-mini { width: 36px; height: 36px; border-radius: 50%; font-size: 15px; transition: transform .16s var(--q-ease); }  /* #12: box-shadow ANİMASYONU kaldırıldı — gölge her karede yeniden boyama yaptırıyordu (pahalı); transform GPU'da ücretsiz */
.q-tabs .q-tab:active .q-mini { transform: scale(.9); }
.q-tabs .q-tab { margin-bottom: 5px; } /* #14-fix: pill'ler topbar alt kenarına yapışmasın (yuvarlak alttan tamamlansın) */
.q-tabs .q-tab.sel { background: transparent; border-top: 0; box-shadow: none; width: auto; padding-right: 5px; }
/* #14-fix: seçili sunucu = yuvarlak + ABARTISIZ neon glow; ALT ÇİZGİ YOK (kullanıcı isteği). */
/* seçili sunucu halkası rengi TEMAYA GÖRE (--q-tabring): koyu/açık = LOGO neon mavisi (marka kimliği;
   eski kahve halka istenmedi), özel temalar = kendi imza rengi (cyberpunk magenta, kediler turuncu…).
   --q-tabring HALKANIN KENDİ elementinde tanımlı (var-içinde-var kalıtım belirsizliği yok): varsayılan
   accent; dark/light override'ı --q-logo'ya çevirir. */
/* SAKIN SECIM HALKASI (2026-08-17, kullanici: "kosedeki border cirkin, profesyonel
   durmuyor"): yanip sonen neon + genis glow yerine iki katmanli ince halka — once zemin
   renginde bir bosluk, sonra vurgu rengi. Discord/Slack deseni; acik temada da yumusak. */
.q-tabs .q-tab.sel .q-mini { --q-tabring: var(--q-accent);
    box-shadow: 0 0 0 2px var(--q-topbar-bg, var(--q-rail-bg)), 0 0 0 4px var(--q-tabring);
    transition: box-shadow .18s ease; }
.theme-dark .q-tabs .q-tab.sel .q-mini, .theme-light .q-tabs .q-tab.sel .q-mini { --q-tabring: var(--q-logo); }

.q-tabs .q-tab:hover:not(.sel) { background: transparent; }
.q-tabs .q-tab:hover:not(.sel) .q-mini { box-shadow: 0 0 0 2px var(--q-border); }
/* ---- Ayar açık: klasik sunucu adı görünümü ---- */
body.q-nav-names .q-tabs { align-items: flex-end; gap: 4px; }
body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab { padding: 7px 12px; border-radius: 9px 9px 0 0; border-top: 2px solid transparent; min-height: 0; min-width: 0; justify-content: flex-start; margin-bottom: 0; }
body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab .q-tab-name { display: inline; }
body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab .q-mini { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; box-shadow: none; }
body.q-nav-names .q-tabs .q-tab.sel { background: linear-gradient(180deg, var(--q-state-primary), transparent 90%), var(--q-side-bg); border-top: 2px solid var(--q-accent); box-shadow: inset 0 1px 0 var(--q-gloss); }
body.q-nav-names .q-tabs .q-tab.sel .q-mini { box-shadow: none; animation: none; }
body.q-nav-names .q-tabs .q-tab.sel::after { display: none; }
/* #7: "+" (yeni sunucu) YUVARLAK + açık yeşil zemin → "sekme oluştur" hissi gitti. */
.q-tabs .q-tab.q-add { color: var(--q-online); background: rgba(35,165,90,.15); border-radius: 50%; min-width: 42px; padding: 0; }
.q-tabs .q-tab.q-add:hover { background: rgba(35,165,90,.30); }
/* #6: sunucu ikonuna hover'da tek geçişli ışıltı (shimmer) — canlılık, abartısız. Yalnız yaprak ::after (güvenli). */
.q-tabs .q-tab .q-mini { position: relative; overflow: hidden; }
.q-tabs .q-tab:hover:not(.q-add) .q-mini::after { content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 50%, transparent 65%); transform: translateX(-120%); animation: q-shimmer .75s ease; }
@keyframes q-shimmer { to { transform: translateX(120%); } }
/* Sürükle-bırak bölgeleri: orta = klasörle (kesikli çerçeve), kenar = araya sırala (dikey çizgi) */
.q-tab.drop-center { background: var(--q-selected); outline: 2px dashed var(--q-accent); outline-offset: -2px; }
.q-tab { position: relative; }
.q-tab.drop-left::before, .q-tab.drop-right::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--q-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--q-accent) 60%, transparent); }
.q-tab.drop-left::before { left: -4px; }
.q-tab.drop-right::after { right: -4px; }
.q-mini { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: #fff; flex: none; }
.q-topactions { display: flex; align-items: center; gap: 4px; padding-bottom: 7px; flex: none; color: var(--q-muted); }
/* Ust serit ikon butonu (2026-07-30): MudIconButton yalniz Material yolunu basabildigi icin
   arama/geri bildirim Goglis cizgisine gecerken sade butona donustu - gorunum MudIconButton
   ile ayni (dairesel hover, 34px dokunma alani). */
.q-topico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--q-muted); cursor: pointer; }
.q-topico:hover { background: var(--q-hover); color: var(--q-strong); }

/* ---- avatars ---- */
.q-av { border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; font-weight: 500; font-size: 13px; }
.q-statuswrap { position: relative; display: inline-flex; }
.q-dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--q-online); border: 2px solid var(--q-side-bg); }
.q-dot.idle { background: var(--q-amber); }
.q-dot.dnd { background: var(--q-danger); }
.q-dot.invisible { background: var(--q-faint); }
.q-dot.off { background: var(--q-faint); } /* çevrimdışı — gri (görünmezle aynı; ayırt edilemez = sızıntı yok) */
/* durum seçici menüsündeki küçük renk noktası */
.q-sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; background: var(--q-faint); }
.q-sdot.on { background: var(--q-online); }
.q-sdot.idle { background: var(--q-amber); }
.q-sdot.dnd { background: var(--q-danger); }
/* Görünmez = içi boş halka. Sınıf 'ghost' — 'invisible' MudBlazor'un visibility:hidden
   utility'siyle çakışıyor, nokta hiç çizilmiyordu. */
.q-sdot.ghost { background: transparent; border: 2.5px solid var(--q-muted); box-sizing: border-box; }
/* Masaüstü ayarları dialogu — anahtar satırları. */
.q-dset { display: flex; flex-direction: column; gap: 4px; }
.q-dset-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--q-divider); cursor: pointer; }
.q-dset-row:last-child { border-bottom: 0; }
.q-dset-row.off { opacity: .55; }
.q-dset-t { font-size: 14px; font-weight: 600; color: var(--q-strong); }
.q-dset-h { font-size: 12px; color: var(--q-muted); margin-top: 2px; }

/* #2 GİZLİ önizleme (2026-07-20 — artık ANA arayüzde): amber band + amber çerçeveli sekme. */
.q-preview-band { display: flex; align-items: center; gap: 9px; padding: 9px 13px; margin-bottom: 12px; border-radius: 10px;
    border: 1px solid var(--q-amber); background: rgba(240,178,50,0.12); color: var(--q-amber); font-size: 13.5px; }
.q-tab-preview { border: 1px dashed var(--q-amber); background: rgba(240,178,50,0.07); }
.q-tab-preview .q-tab-name { color: var(--q-amber); }
.q-tab-preview.sel { background: rgba(240,178,50,0.16); }

/* Başka sekme/cihazda sesteyken bu sekmenin profil panelinin üstünde pasif bilgi bandı. */
.q-voice-elsewhere { display: flex; align-items: center; gap: 7px; padding: 7px 12px; font-size: 12px; font-weight: 600;
    color: var(--q-amber); background: rgba(240,178,50,0.10); border-top: 1px solid var(--q-divider); }
.q-voice-elsewhere > span { flex: 1; min-width: 0; }
/* "Buraya al" (2026-10-03, iki cihaz): görüşmeyi bu cihaza açıkça almak. Bant rengiyle aynı aile. */
.q-ve-take { flex: none; border: 1px solid rgba(240,178,50,0.45); background: transparent; color: var(--q-amber);
    font-family: inherit; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 7px; cursor: pointer; }
.q-ve-take:hover { background: rgba(240,178,50,0.16); }

/* ---- main ---- */
.q-main { flex: 1; display: flex; min-height: 0; }
/* KOLON TAKASI (2026-07-31, kullanıcı isteği): varsayılan yerleşim DEĞİŞMEZ (üyeler solda,
   kanallar sağda); ayardan açılınca ikisi yer değiştirir. `order` kullanılıyor çünkü DOM
   sırasına dokunmuyor: Blazor ağacı, klavye gezinme sırası ve ekran okuyucu düzeni korunur.
   Kenarlıklar da yön değiştirir, yoksa iki çizgi aynı tarafta kalırdı. */
html.q-sideswap .q-main.q-srv > .q-online { order: 3; border-right: 0; border-left: 1px solid var(--q-border); }
html.q-sideswap .q-main.q-srv > .q-center { order: 2; }
html.q-sideswap .q-main.q-srv > .q-channels { order: 1; border-left: 0; border-right: 1px solid var(--q-border); }
html.q-sideswap .q-main.q-srv > .q-online { border-left-color: var(--q-glass-border); }
html.q-sideswap .q-main.q-srv > .q-channels { border-right-color: var(--q-glass-border); }
/* AMFI DUZENI (2026-08-14): solda metin kanallari + SECILI kanalin altinda o kanali
   gorebilen uyeler (akordeon), sagda yalniz medya (ses+video) kanallari. Kolon sirasi
   Arena'yla ayni (sol/orta/sag) — yalniz icerik dagilimi degisir (Razor _amfi dali). */
html.q-layout-amfi .q-amfi-mem { margin: 2px 4px 10px 16px; padding-left: 10px;
    border-left: 2px solid var(--q-divider); }
html.q-layout-amfi .q-amfi-mem .q-cat { padding-top: 4px; }
/* solda kanal satirlari mevcut .q-chrow stilini kullanir; secili satirin akordeonla
   butunlesmesi icin alt bosluk sifirlanir */
html.q-layout-amfi .q-online .q-chrow { margin: 1px 4px; }
/* A ONERISI (2026-08-14): sag kolon Amfi'de TAMAMEN gizli — kanallar solda tek listede,
   sohbet genisler. Dock + kullanici paneli sol kolonun dibinde (sticky) yasar. */
html.q-layout-amfi .q-main.q-srv > .q-channels { display: none; }
html.q-layout-amfi .q-main.q-srv > .q-online { flex: 0 0 var(--q-amfi-w, 300px); width: var(--q-amfi-w, 300px); }
/* Surukle-genislet tutamaci (2026-08-15): SAG IC kenar — kolon overflow:hidden, dis tasma kirpilirdi. */
.q-amfiresize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; }
.q-amfiresize:hover, .q-amfiresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); }
html.q-layout-amfi .q-online { display: flex; flex-direction: column; }
/* PANEL/LISTE UST USTE BINME FIXI (2026-08-15, kullanici canli acik-tema goruntusu):
   sticky bottom, aside'in padding/zemin kosullarinda listeyle ceakisebiliyordu. Yapisal cozum:
   aside sutun, LISTE kendi scroll kabi (flex:1 + overflow), panel AKISTA en altta — icerik
   panelin altindan fiziksel olarak gecemez, zemin degiskenine de ihtiyac kalmaz. */
html.q-layout-amfi .q-main.q-srv > .q-online { overflow: hidden; }
/* FORUM ORTA ALAN (2026-08-15): akis TERS (yeni ustte) — column-reverse DOM sirasini
   KORUR (gun ayraci/@key/lazy-load/canli ekleme mantigi hic degismedi), yalniz gorsel
   ters doner. Sentinel DOM basinda = gorselde EN ALTTA: asagi kaydirdikca eskiler yuklenir.
   Composer + arac cubugu CSS order ile basliğin altina tasinir. */
.q-forumchat .q-chathead { order: -3; }
.q-forumchat .q-fmd-bar { order: -2; }
.q-forumchat .q-fprev { order: -2; }
.q-forumchat .q-composer { order: -1; margin-bottom: 2px; }
/* BEKLEYEN DOSYA KARTLARI FORUMDA INPUT'UN ALTINDA (2026-08-18, kullanıcı: "forumda input
   yukarıda olduğu için ekleyeceğim dosya da yukarıda görünmeli"). Forum kolonu CSS order ile
   diziliyor; q-stagebar'ın order'ı yoktu (0) ve mesaj listesiyle birlikte EN ALTA düşüyordu.
   Mesajlara açık order verilir, kartlar composer(-1) ile mesajlar(1) arasına oturur. */
.q-forumchat .q-stagebar { order: 0; margin: 0 16px 6px; }
.q-forumchat .q-messages { order: 1; }
/* Forum listesi NORMAL akis: sira Razor'da cevrilir (column-reverse tasan icerigi
   kaydirilamaz yapiyordu — olculdu). Boylece kaydirma/gun ayraci/lazy-load aynen calisir. */
.q-messages.q-forum { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.q-messages.q-forum > .q-msg { background: var(--q-panel-bg, rgba(255,255,255,0.03));
    border: 1px solid var(--q-divider); border-radius: 10px; margin: 5px 10px;
    padding: 10px 12px !important; }
/* `[data-menuhost]` NİTELİK (2026-08-26; eski `.q-menu-host` sınıfı Blazor diff'inde siliniyordu). */
.q-messages.q-forum > .q-msg[data-menuhost], .q-messages.q-forum > .q-msg:hover { background: var(--q-hover); }
.q-fmd-bar { display: flex; align-items: center; gap: 2px; padding: 4px 10px 0; }
.q-fmd-b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px;
    height: 24px; padding: 0 5px; border-radius: 6px; cursor: pointer; color: var(--q-muted);
    font-size: 13px; user-select: none; }
.q-fmd-b:hover { background: var(--q-hover); color: var(--q-text); }
.q-fmd-sep { width: 1px; height: 14px; background: var(--q-divider); margin: 0 4px; }
.q-fmd-prev { margin-left: auto; font-size: 12px; color: var(--q-muted); cursor: pointer;
    padding: 3px 8px; border-radius: 6px; user-select: none; }
.q-fmd-prev:hover, .q-fmd-prev.on { background: var(--q-hover); color: var(--q-text); }
/* WYSIWYG kutusu: gizli textarea'nin gorunur ikizi. Bicimler gercek etiketlerle cizilir. */
.q-forumchat .q-composer textarea#q-fta, .q-forumchat .q-msgmirror { display: none !important; }
.q-fed { flex: 1; min-width: 0; min-height: 22px; max-height: 200px; overflow-y: auto;
    outline: none; font-size: var(--q-msg-size, 14px); line-height: 1.45; color: var(--q-text);
    padding: 2px 0; }
.q-fed:empty::before { content: attr(data-ph); color: var(--q-faint); pointer-events: none; }
.q-fed b, .q-fed strong { font-weight: 700; }
.q-fed h2 { font-size: 17px; font-weight: 700; margin: 2px 0; }
.q-fed ul { margin: 2px 0 2px 18px; }
.q-fed code { background: var(--q-hover); border-radius: 4px; padding: 0 4px; font-family: var(--q-mono, monospace); font-size: 12.5px; }
.q-fed a { color: var(--q-accent); }
.q-fed-emo { display: inline-block; vertical-align: -5px; }
.q-fed-emo .gg-emoji { width: 22px; height: 22px; display: block; }
/* DIALOG RENKLERI TEMADAN (2026-08-17, kullanici: "beyaz temada beyaz yazilar var").
   MudBlazor dialog zemini/metnini KENDI paletinden alir; o palet (IsDarkMode) ile bizim
   tema degiskenlerimiz iki ayri yerden turedigi icin ayrisabiliyordu. Artik dialog yuzeyi
   ve metni DOGRUDAN tema degiskenlerinden gelir — body tema sinifini tasidigi icin bunlar
   ekranda gorulen temayla HER ZAMAN ayni. Renkli butonlar (Error/Primary filled) muaf. */
.mud-dialog { background: var(--q-panel-bg) !important; color: var(--q-text) !important; }
.mud-dialog .mud-dialog-title, .mud-dialog .mud-dialog-title * { color: var(--q-strong) !important; }
.mud-dialog .mud-dialog-content { color: var(--q-text); }
.mud-dialog .mud-button-root.mud-button-text:not(.mud-button-filled):not(.mud-error-text):not(.mud-primary-text) { color: var(--q-text); }
.mud-dialog .mud-input, .mud-dialog .mud-input-root, .mud-dialog .mud-input-label { color: var(--q-text); }
/* Perde tema-bagimsiz KOYU: acik palette beyaz perde tum uygulamayi soluklastiriyordu. */
.mud-overlay .mud-overlay-scrim, .mud-overlay-dialog { background: rgba(0, 0, 0, 0.55) !important; }

/* MOBIL IZIN LISTESI (2026-08-17): durum cipleri + iste dugmesi. */
.q-dset-sep { height: 1px; background: var(--q-divider); margin: 10px 0 6px; }
.q-permlist { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 4px; }
.q-permrow { display: flex; align-items: center; gap: 8px; }
.q-permrow-n { flex: 1; min-width: 0; font-size: 13.5px; color: var(--q-text); }
.q-permchip { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.q-permchip.ok { background: color-mix(in srgb, var(--q-online, #23a55a) 22%, transparent); color: var(--q-online, #23a55a); }
.q-permchip.no { background: color-mix(in srgb, var(--q-danger, #ed4245) 20%, transparent); color: var(--q-danger, #ed4245); }
.q-permchip.warn { background: var(--q-hover); color: var(--q-muted); }
.q-permchip.na { background: transparent; color: var(--q-faint); }
.q-permask { flex: none; font-size: 12px; padding: 3px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--q-divider); color: var(--q-text); }
.q-permask:hover { background: var(--q-hover); }

/* SABITLENMIS MESAJLAR PANELI (2026-08-15): baslikta raptiye dugmesi + kart listesi. */
.q-pinbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px;
    color: var(--q-muted); cursor: pointer; }
.q-pinbtn:hover { background: var(--q-hover); color: var(--q-text); }
.q-pinbtn-n { font-size: 11px; font-weight: 700; color: var(--q-strong); background: var(--q-hover);
    border-radius: 999px; padding: 1px 6px; line-height: 1.5; }
.q-pinpanel { width: 340px; max-width: 86vw; padding: 4px; }
.q-pinpanel-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px;
    font-size: 15px; font-weight: 700; color: var(--q-strong); }
.q-pinpanel-head .gg-icon { color: var(--q-accent); }
.q-pinpanel-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 0 4px 4px; }
.q-pincard { position: relative; display: flex; gap: 9px; padding: 9px 10px; border-radius: 10px;
    background: var(--q-input-bg); border: 1px solid var(--q-divider); cursor: pointer; }
.q-pincard:hover { background: var(--q-hover); }
.q-pincard-av { width: 32px !important; height: 32px !important; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; }
.q-pincard-b { flex: 1; min-width: 0; }
.q-pincard-h { display: flex; align-items: baseline; gap: 7px; }
.q-pincard-nm { font-size: 13.5px; font-weight: 600; color: var(--q-strong); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.q-pincard-h time { font-size: 11px; color: var(--q-faint); flex: none; }
.q-pincard-t { font-size: 13px; color: var(--q-text); margin-top: 2px; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.q-pincard-x { position: absolute; top: 5px; right: 5px; display: none; padding: 2px; border-radius: 6px;
    color: var(--q-muted); }
.q-pincard:hover .q-pincard-x { display: inline-flex; }
.q-pincard-x:hover { background: var(--q-danger, #ed4245); color: #fff; }

/* SAYILI okunmamis rozetleri (2026-08-15): kanal satiri + topluluk sekmesi. */
.q-ch-badge { flex: none; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px;
    background: var(--q-danger, #ed4245); color: #fff; font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* Rozet topluluk IKONUNUN sag-ust kosesine biner (Discord deseni). */
.q-tab-icw { position: relative; display: inline-flex; flex: none; }
.q-tab-badge { position: absolute; top: -5px; right: -6px; z-index: 2; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: 999px; background: var(--q-danger, #ed4245); color: #fff;
    font-size: 10px; font-weight: 700; display: inline-flex; align-items: center;
    justify-content: center; line-height: 1; border: 2px solid var(--q-topbar-bg, #10151f);
    box-sizing: content-box; }
.q-tab-unread.on-ic { position: absolute; top: -2px; right: -2px; }
.q-ftabs { display: flex; gap: 14px; padding: 6px 14px 0; order: -2; }
.q-ftab { font-size: 13px; color: var(--q-muted); cursor: pointer; padding: 3px 2px 5px; border-bottom: 2px solid transparent; user-select: none; }
.q-ftab:hover { color: var(--q-text); }
.q-ftab.on { color: var(--q-accent); border-bottom-color: var(--q-accent); }
.q-fhide .q-messages, .q-fhide .q-composer, .q-fhide .q-fmd-bar, .q-fhide .q-fprev, .q-fhide .q-msgcount { display: none !important; }
.q-fpanel { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 14px; }
.q-fphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.q-fphotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.q-frow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
    color: var(--q-text); text-decoration: none; }
.q-frow:hover { background: var(--q-hover); }
.q-frow-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.q-frow-m { font-size: 12px; color: var(--q-muted); flex: none; }
.q-ev-cal { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
.q-ev-calbtn { font-size: 12px; padding: 3px 9px; border: 1px solid var(--q-divider); border-radius: 7px;
    color: var(--q-muted); text-decoration: none; }
.q-ev-calbtn:hover { background: var(--q-hover); color: var(--q-text); }
.q-fprev { margin: 4px 10px 0; padding: 8px 12px; border: 1px dashed var(--q-divider);
    border-radius: 8px; max-height: 220px; overflow-y: auto; }
/* UYE KOLONU AC/KAPA (2026-08-15): Arena/Klasik'te basliktaki kisiler ikonu kolonu
   gizler. Amfi/Forum muaf (:not — orada ayni eleman KANAL listesi). Yalniz masaustu:
   mobilde .q-online tam-ekran cekmece, gizlemek cekmeceyi oldururdu. */
@media (min-width: 1001px) {
    html.q-memcol-off:not(.q-layout-amfi) .q-main.q-srv > .q-online { display: none !important; }
}
/* Arena/Klasik uye toggle'i mobilde gizli — kolon orada zaten cekmece, dugme anlamsiz.
   Forum'un q-fmemtoggle'i mobilde KALIR (sag cekmeceyi acar). */
@media (max-width: 1000px) {
    .q-memtoggle { display: none !important; }
}
/* FORUM (2026-08-15): tek-kolon iskeleti q-layout-amfi sinifindan miras. Sag kolon
   forumda UYE PANELI olur: varsayilan gizli (amfi kurali), q-fmem-on ile acilir;
   icindeki kanal agaci/banner her durumda gizli, yalniz .q-fmem gorunur. */
html.q-layout-forum.q-fmem-on .q-main.q-srv > .q-channels { display: flex; }
html.q-layout-forum .q-main.q-srv > .q-channels .q-srvheader,
html.q-layout-forum .q-main.q-srv > .q-channels .q-chlist { display: none; }
html.q-layout-forum .q-fmem { display: flex; flex-direction: column; min-height: 0; flex: 1; }
html.q-layout-forum .q-fmem-list { overflow-y: auto; min-height: 0; flex: 1; padding: 0 6px; }
/* Sunucu banner'i Amfi solunda kenardan kenara (aside'in 12/10px padding'i geri alinir). */
html.q-layout-amfi .q-online .q-srvheader { margin: -12px -10px 8px; }
/* Urun gorseli: buyuk, hafif perspektif, katmanli golge — "kocaman monitor" hissi. */
@keyframes q-prop-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
/* Ust nav: kayarken cam zemin (sayfaya yapisik hissi gitsin). */
/* ── HERO SAHNESI (2026-08-15, gercek tasarim turu): CSS monitor mockup'i + one tasan
   telefon + BUYUK salyangoz karakterler + zemin isiklari + bolum gecis dalgasi. ── */

.q-land-nav { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--q-ambient, #0c111c) 62%, transparent);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin: 0; padding: 0; }

html.q-layout-amfi .q-amfi-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* PANEL TAM OTURSUN (2026-08-15, kullanici: "profil kismi tam oturmamis"): .q-online'in
   12px/10px ic padding'i paneli kolon icinde yuzen kopuk bir blok yapiyordu (panel 279px,
   kolon 300px, altta 12px bosluk). Negatif margin padding'i geri alir — panel Arena'daki
   gibi kolonun gercek kenarlarina tam genislik oturur (dock da ayni sarmalayicida). */
html.q-layout-amfi .q-amfi-bottom { flex: none; margin: 0 -10px -12px; }
/* .q-mbtn-right gizlemesi Razor kosuluna tasindi (2026-08-15): ev modunda buton gerekli. */
/* AKORDEON UYELERI KOMPAKT (2026-08-14, kullanici: "uye avatari adi biraz daha kucuk gorunsun,
   cok fazla kiside goruntu kirliligi olusturur"): avatar 30->20px (inline style'i ezmek icin
   !important — kompakt mesaj modundaki desenle ayni), yazi 12.5px, satir sikilastirildi. */
html.q-layout-amfi .q-amfi-mem { font-size: 12.5px; }
html.q-layout-amfi .q-amfi-mem .q-av { width: 20px !important; height: 20px !important; font-size: 9px !important; }
html.q-layout-amfi .q-amfi-mem .q-member { padding: 2px 6px; gap: 7px; }
html.q-layout-amfi .q-amfi-mem .q-dot { width: 8px; height: 8px; }
html.q-layout-amfi .q-amfi-mem .q-cat { font-size: 10px; padding: 3px 6px 1px; }
/* AMFI MINI PROFIL KARTI (2026-08-15, kullanici: "kompakt listede kart da minik olsun") */
html.q-layout-amfi .q-pp { width: 292px; }
html.q-layout-amfi .q-pcard2-banner { height: 72px; }
html.q-layout-amfi .q-pcard2-avwrap { width: 68px; height: 68px; margin: -34px 0 0 16px; }
html.q-layout-amfi .q-pcard2-av { width: 68px; height: 68px; font-size: 27px; border-width: 4px; }
html.q-layout-amfi .q-pcard2-name { font-size: 18px; }
html.q-layout-amfi .q-pcard2-body { padding: 8px 14px 4px; }
html.q-layout-amfi .q-pca-icon { width: 34px; height: 34px; }
/* Akordeon rol-gruplama anahtari (2026-08-15; kullanici: "ayri satir acmasin, oraya
   2 kisi sigardi") — akistan cikarilip ILK grup basliginin hizasina, sag koseye bindirilir:
   listeye dikey maliyeti SIFIR. Grup basligi ("SAHIP — 1") kisa, sag kose hep bos. */
.q-amfi-mem { position: relative; }
.q-amfi-memhead { position: absolute; top: 0; right: 4px; z-index: 2; padding: 0; }
.q-amfi-memhead { display: flex; gap: 2px; }
.q-amfi-memhead .q-sort-toggle { padding: 1px 3px; }
.q-amfi-memfold { font-size: 11px; color: var(--q-faint); padding: 2px 8px 5px; cursor: pointer; }
.q-amfi-memfold:hover { color: var(--q-text); }
/* TARIH/SAAT INPUT IKONU (2026-08-14, kullanici: "takvim ikonu koyu temada siyah, acik renk
   olmali"): color-scheme tarayicinin native picker gostergesini temaya uydurur (WebKit'te
   beyaz ikon + koyu takvim paneli). Acik temalarda light'a geri doner. */
input[type="datetime-local"], input[type="date"], input[type="time"], input[type="month"], input[type="week"] { color-scheme: dark; }
html.theme-light input[type="datetime-local"], html[class*="-light"] input[type="datetime-local"],
html.theme-light input[type="date"], html[class*="-light"] input[type="date"],
html.theme-light input[type="time"], html[class*="-light"] input[type="time"],
html.theme-light input[type="month"], html[class*="-light"] input[type="month"],
html.theme-light input[type="week"], html[class*="-light"] input[type="week"] { color-scheme: light; }
/* DND HEDEF VURGUSU (2026-08-14): satir = ust kenarda accent cizgi ("onune birakilir");
   kategori basligi = cerceve ("icine"); liste boslugu = kesikli cerceve ("kategorisize"). */
/* SATIR HEDEFI = YERLESTIRME CIZGISI (2026-08-14 v2, kullanici: "kutu vurgusu icine
   sokacakmisim gibi hissettirdi"): satir boyanmaz; ust kenarda uclu ince cizgi
   'ONUNE girer' der (Discord deseni). Kutu vurgusu yalniz GERCEKTEN icine birakilan
   hedeflerde (kategori basligi) kalir. */
div[draggable="true"].q-dropping { position: relative; }
div[draggable="true"].q-dropping::before { content: ""; position: absolute; left: 10px; right: 8px; top: -1px;
    height: 2px; border-radius: 2px; background: var(--q-accent, #22A6FF); pointer-events: none; z-index: 2; }
div[draggable="true"].q-dropping::after { content: ""; position: absolute; left: 3px; top: -4px; width: 8px; height: 8px;
    box-sizing: border-box; border-radius: 50%; border: 2px solid var(--q-accent, #22A6FF);
    background: var(--q-side-bg, #10151f); pointer-events: none; z-index: 2; }
/* Kategori hedefi (v6): baslik hafif tonlanir; GRUBUN tamamini JS'in yerlestirdigi TEK
   PARCA .q-drop-frame overlay'i cerceveler — kardes-bazli kenar cizgileri akordeon
   girintisinde hizalanamiyordu, tek dikdortgen her zaman duzgun. */
.q-cathdr.q-dropping { background: color-mix(in srgb, var(--q-accent, #22A6FF) 14%, transparent); border-radius: 6px; }
.q-amfi-list, .q-chlist { position: relative; }
.q-drop-frame { position: absolute; left: 2px; right: 2px; border: 2px solid var(--q-accent, #22A6FF);
    border-radius: 8px; pointer-events: none; z-index: 5; }
.q-chlist.q-dropping, .q-amfi-list.q-dropping { outline: 2px dashed color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent);
    outline-offset: -4px; border-radius: 8px; }
/* DUZEN STILI KARTLARI (ayarlar + ilk-giris): 3 kolonlu mini sema — soldaki/ortadaki/sagdaki
   <i> bloklari kolonlari temsil eder; stil sinifi (marena/mklasik/mamfi) vurgulanan kolonu boyar. */
.q-lay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.q-lay-grid.big { margin: 6px 0 14px; }
.q-lay-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 10px;
    border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-input-bg);
    color: var(--q-text); cursor: pointer; text-align: center; position: relative; }
.q-lay-card:hover { border-color: var(--q-accent); }
.q-lay-card.on { border-color: var(--q-accent); box-shadow: 0 0 0 1px var(--q-accent); }
.q-lay-name { font-weight: 700; font-size: 13.5px; }
.q-lay-hint { font-size: 11px; color: var(--q-muted); line-height: 1.35; }
.q-lay-new { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 10px;
    font-weight: 700; letter-spacing: .4px; color: #fff; background: var(--q-accent, #22A6FF);
    border-radius: 999px; padding: 3px 9px; }
.q-lay-mini { display: flex; gap: 3px; width: 74px; height: 44px; }
.q-lay-mini i { border-radius: 3px; background: color-mix(in srgb, var(--q-text, #dde) 18%, transparent); }
.q-lay-mini i:nth-child(1), .q-lay-mini i:nth-child(3) { width: 16px; }
.q-lay-mini i:nth-child(2) { flex: 1; }
/* vurgulu kolonlar: arena = sol uyeler + sag kanallar; klasik tersi; amfi sol kalin + sag ince */
.q-lay-mini.marena i:nth-child(1), .q-lay-mini.marena i:nth-child(3),
.q-lay-mini.mklasik i:nth-child(1), .q-lay-mini.mklasik i:nth-child(3) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent); }
.q-lay-mini.mamfi i:nth-child(1) { width: 24px; background: color-mix(in srgb, var(--q-accent, #22A6FF) 75%, transparent); }
.q-lay-mini.mamfi i:nth-child(3) { display: none; }
/* Forum mini semasi: sol dar kolon + ortada YATAY kart cizgileri (gonderi akisi hissi). */
.q-lay-mini.mforum i:nth-child(1) { width: 16px; background: color-mix(in srgb, var(--q-accent, #22A6FF) 55%, transparent); }
.q-lay-mini.mforum i:nth-child(2) { background: repeating-linear-gradient(180deg,
    color-mix(in srgb, var(--q-accent, #22A6FF) 60%, transparent) 0 8px, transparent 8px 12px); }
.q-lay-mini.mforum i:nth-child(3) { display: none; }
.q-lay-mini.mamfi i:nth-child(3) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 35%, transparent); }
.q-lay-mini.mklasik i:nth-child(1) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 75%, transparent); }
.q-lay-mini.marena i:nth-child(3) { background: color-mix(in srgb, var(--q-accent, #22A6FF) 75%, transparent); }
/* Dar ekran: 3 kart yan yana sigmaz -> tek kolon, kart ici YATAY (sema solda, metin sagda). */
@media (max-width: 720px) {
    .q-lay-grid { grid-template-columns: 1fr; }
    .q-lay-card { flex-direction: row; text-align: left; align-items: center; gap: 12px; padding: 10px 12px; }
    .q-lay-card .q-lay-mini { flex: none; width: 58px; height: 36px; }
    .q-lay-card .q-lay-name { min-width: 52px; }
    .q-lay-card .q-lay-hint { flex: 1; }
}
/* Mobilde kolonlar zaten drawer (fixed) — sıralamaya karışma. */
@media (max-width: 700px), (max-height: 520px) {
    html.q-sideswap .q-main.q-srv > .q-online,
    html.q-sideswap .q-main.q-srv > .q-center,
    html.q-sideswap .q-main.q-srv > .q-channels { order: 0; }
}
/* #2: seçilebilir istisnalar — mesaj içerikleri, tüm girişler, kod blokları, kanal konusu. */
.q-messages, .q-msgbox, .q-root input, .q-root textarea, .q-root [contenteditable],
.q-root pre, .q-root code, .q-chtopic, .q-report-msg {
    user-select: text;
    -webkit-user-select: text;
}
/* EV MODUNDA GENİŞLETİLEBİLİR (2026-08-04): sol kolon burada DM/arkadaş panelidir; sunucudaki
   .q-dmrail gibi sürüklenebilir. `position:relative` tutamacı konumlandırmak için ŞART.
   Genişlik değişkeni AYRI (--q-home-dm-w): sunucu modunda aynı eleman ÜYE listesidir ve onun
   220px'i sabit kalmalı — tek değişken paylaşılsaydı biri diğerini bozardı. */
.q-online { width: 220px; background: var(--q-side-bg); flex: none; padding: 12px 10px; overflow-y: auto; border-right: 1px solid var(--q-border); position: relative; }
.q-main:not(.q-srv) .q-online { width: var(--q-home-dm-w, 220px); }
/* Sunucu modunda UYE kolonu genisligi (2026-08-15, surukle-genislet): --q-mem-w. Amfi'nin
   html.q-layout-amfi kurali daha ozgul, kendi --q-amfi-w'sunu kullanmaya devam eder. */
.q-main.q-srv > .q-online { width: var(--q-mem-w, 220px); }
.q-memresize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; }
.q-memresize:hover, .q-memresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); }
html.q-sideswap .q-main.q-srv > .q-online .q-memresize { right: auto; left: 0; }
.q-channels { width: 248px; background: var(--q-side-bg); flex: none; display: flex; flex-direction: column; border-left: 1px solid var(--q-border); position: relative; }
/* kanallar kolonu yeniden-boyutlandırma tutamacı (sol kenar) — sürükle: genişlet/daralt */
.q-chresize { position: absolute; left: -3px; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; }
.q-chresize:hover, .q-chresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); }
/* Takas modunda kanal kolonu SOLDA → tutamaç da karşı kenara geçer (sağ kenar). */
html.q-sideswap .q-main.q-srv .q-chresize { left: auto; right: -3px; }
/* #3 (2026-07-26): SUNUCUDAYKEN soldaki kalıcı DM/arkadaş rayı — genişletilebilir (goglisDmResize
   .q-dmresize'ı sürükler, genişlik localStorage'da). Masaüstü-özel: ≤1180px'te GİZLİ (dar ekranda
   sohbet nefesi korunur; DM'e logo→ev ile ulaşılır). Mobilde zaten .q-online drawer'ı DM'i taşır. */
.q-dmrail { width: var(--q-dmrail-w, 216px); background: var(--q-side-bg); flex: none; border-right: 1px solid var(--q-border); position: relative; display: flex; flex-direction: column; overflow: hidden; transition: width .18s var(--q-ease);  /* #12: width animasyonu yerleşim hesaplatır (pahalı) — süre kısaltıldı */ }
.q-dmrail-scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; }
.q-dmresize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 6; }
.q-dmresize:hover, .q-dmresize:active { background: color-mix(in srgb, var(--q-accent) 35%, transparent); }

/* MENÜ/DİYALOG AÇIKKEN KOLON TUTAMAÇLARI ÖLÜ (2026-08-18, kullanıcı: "ses ayarlarını açmışken
   soldaki kolonu genişletme çizgisine dokunuyormuş gibi oluyor, ne sağda ne solda olmalı").
   Tutamaçlar z-index 6 ile menülerin (1200+) ALTINDA kalıyor ama yine de imleç hedefi
   olabiliyorlar: menü panelleri position:fixed ve arayüz ölçeği (goglisScale → kök zoom)
   1 değilken tarayıcının vuruş testi ile boyanan yer ayrışıyor (bu dosyada bilinen tuzak).
   Sonuç: fare menünün üstündeyken alttaki tutamaç vurgulanıp "Sürükleyerek genişlet/daralt"
   ipucunu gösteriyordu. Ölçek matematiğiyle uğraşmak yerine kural basit: menü açıkken tutamaç
   imleç almaz — vurgu da ipucu da sürükleme de mümkün olmaz. Dört tutamaç da (kanal, üye,
   amfi, DM) aynı kurala girer. */
html.q-menuopen :is(.q-chresize, .q-memresize, .q-amfiresize, .q-dmresize),
html:has(.q-menu-backdrop) :is(.q-chresize, .q-memresize, .q-amfiresize, .q-dmresize),
html:has(.mud-overlay) :is(.q-chresize, .q-memresize, .q-amfiresize, .q-dmresize) {
    pointer-events: none;
    background: transparent !important;   /* açılmadan önce kalmış vurgu da sönsün */
}
/* (2026-07-26: DM rayı hover shimmer'ı KALDIRILDI — "fazla shimmer koyduk" (kullanıcı). Yumuşak daral/genişle kalır.) */
@media (prefers-reduced-motion: reduce) { .q-dmrail { transition: none; } }
@media (max-width: 1180px) { .q-dmrail { display: none; } }
/* #3 (2026-07-26): DARALT/GENİŞLET butonu — panelin ALT kısmında, ince ayraçlı; ‹ (genişken) / › (darken). */
.q-dmrail-toggle { flex: none; height: 34px; display: flex; align-items: center; justify-content: center; margin: 4px 8px 8px; border: 1px solid var(--q-border); border-radius: 9px; background: transparent; color: var(--q-muted); cursor: pointer; transition: background var(--q-dur) var(--q-ease), color var(--q-dur) var(--q-ease); }
.q-dmrail-toggle:hover { background: var(--q-hover); color: var(--q-strong); }
.q-dmrail-toggle .mud-icon-root { font-size: 20px; }
.q-dmc-r { display: none; }
/* DARALMIŞ RAY (body.q-dmrail-min): 64px + yalnız ikonlar (isim/başlık/eylemler gizli). */
body.q-dmrail-min .q-dmrail { width: 64px !important; }
body.q-dmrail-min .q-dmrail .q-dmresize { display: none; }
body.q-dmrail-min .q-dmrail .q-dm-cat,
body.q-dmrail-min .q-dmrail .q-fb-label,
body.q-dmrail-min .q-dmrail .q-dmrow-name,
body.q-dmrail-min .q-dmrail .q-friends-badge,
body.q-dmrail-min .q-dmrail .q-dmpin,
body.q-dmrail-min .q-dmrail .q-dmclose,
body.q-dmrail-min .q-dmrail .q-dmrow-nf,
body.q-dmrail-min .q-dmrail .q-dm-empty { display: none !important; } /* !important: .q-dm-cat inline style="display:flex" ezilecek */
body.q-dmrail-min .q-dmrail .q-friends-btn { justify-content: center; padding: 8px 0; }
body.q-dmrail-min .q-dmrail .q-dmrow { position: relative; justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
/* #(2026-07-30, kullanıcı bug'ı: "badge varken kayıyor") DARALMIŞ RAYDA rozet avatarın YANINDA
   yer kaplıyordu → avatar sola kayıp sütun hizası bozuluyordu. Artık çevrimiçi noktası gibi
   avatarın SAĞ ÜST KÖŞESİNE biner (akıştan çıkar), avatar tam ortada kalır.
   Ray 64px, avatar 30px, iç dolgu 6px → avatarın sağ kenarı ≈ %50 + 15px. */
body.q-dmrail-min .q-dmrail .q-dmrow .q-dm-count,
body.q-dmrail-min .q-dmrail .q-dmrow .q-unread {
    position: absolute; top: 2px; right: calc(50% - 21px); margin: 0; z-index: 1;
    box-shadow: 0 0 0 2px var(--q-rail-bg);
}
body.q-dmrail-min .q-dmrail .q-dmrow .q-dm-count {
    min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; border-radius: 8px;
}
body.q-dmrail-min .q-dmrail-scroll { padding: 10px 6px; }
body.q-dmrail-min .q-dmc-l { display: none; }
body.q-dmrail-min .q-dmc-r { display: inline-flex; }
.q-center { flex: 1; display: flex; min-width: 0; background: var(--q-chat-bg); }
.q-cat { font-size: 11px; color: var(--q-faint); margin: 14px 8px 4px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; }
.q-member { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 13px; color: var(--q-text); border-radius: 7px; cursor: pointer; }
.q-member:hover { background: var(--q-hover); }
/* #1: sunucu/klasör sekmesinde okunmamış noktası */
.q-tab-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--q-accent); margin-left: 2px; flex: none; box-shadow: 0 0 0 2px var(--q-panel-bg); }
/* #13 (2026-07-25): sekmede "bu sunucuda sesteyim" yeşil ses ikonu */
.q-tab-voice { display: inline-flex; align-items: center; color: var(--q-online, #23a55a); margin-left: 3px; flex: none; }
/* SESSIZ/BEKLEYEN ARAMA: hoparlor YANIP SONER (2026-08-12). Normal aramada sabit yesil yanar;
   burada "seni bekleyen bir arama var" demek istiyoruz. Yalnizca OPAKLIK animasyonlanir —
   konum/boyut degismez, cunku bu isaret listede baska satirlari kaydirmamali. */
@keyframes q-ring-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.q-tab-voice.ringing { animation: q-ring-blink 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .q-tab-voice.ringing { animation: none; opacity: .7; } }
/* DAR RAYDA SES ROZETI AVATARIN USTUNE (2026-08-12, kullanici: "aramadayken arama ikonu
   profilin ustunde olsun"). Genis rayda isimden sonra akar; dar rayda isim gizli oldugu icin
   rozet avatarin YANINA itiliyor ve satiri tasiriyordu. Satir zaten position:relative. */
body.q-dmrail-min .q-dmrail .q-tab-voice {
    position: absolute; right: 3px; bottom: 3px; margin: 0;
    background: var(--q-side-bg); border-radius: 50%;
    box-shadow: 0 0 0 2px var(--q-side-bg);   /* avatardan ayrilsin */
}
/* #3: üye-listesi gruplama anahtarı başlığı */
.q-online-head { display: flex; align-items: center; gap: 6px; padding: 4px 6px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--q-faint); }
/* Basliktaki + menusunun paneli basligin tipografi mirasini (11px uppercase) almasin —
   diger menulerle ayni gorunum (2026-08-14, Amfi + menusu). */
.q-online-head .q-menu-panel, .q-cat .q-menu-panel { text-transform: none; letter-spacing: normal;
    font-size: 13.5px; font-weight: 500; color: var(--q-text); }
.q-sort-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; color: var(--q-muted); cursor: pointer; }
.q-sort-toggle:hover { background: var(--q-hover); color: var(--q-text); }
.q-member.off { opacity: 0.4; }
/* Steam canlı oyun aktivitesi — üye satırında isim altı ince satır */
.q-member-act { display: block; font-size: 11px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* B: oyun üstü overlay (/overlay — masaüstü kabuk şeffaf pencerede açar) */
html:has(.q-ov-root), body:has(.q-ov-root) { background: transparent !important; }
/* Tam-ekran ŞEFFAF overlay (kabuk WinUI DWM-cam ile pencereyi saydam yapar). Zemin şeffaf —
   yalnız kişi çipleri (kendi koyu zeminleri var) + kısayol ipucu görünür, oyun altta akar. */
.q-ov-root { position: fixed; inset: 0; background: transparent; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Overlay öğeleri BAĞIMSIZ konumlanır (saat / ses paneli / kısayol ipucu) — JS localStorage'dan
   9-konum sınıfını (pos-*) veya display:none uygular; ayarlardan konumlandırılıp kapatılabilir. */
.q-ov-clock, .q-ov-voice { position: fixed; pointer-events: none; }
.q-ov-voice { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; max-width: 240px; }
.q-ov-voice.pos-tc, .q-ov-voice.pos-c, .q-ov-voice.pos-bc { align-items: center; }
.q-ov-voice.pos-tr, .q-ov-voice.pos-mr, .q-ov-voice.pos-br { align-items: flex-end; }
.q-ov-clock { font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.75); background: rgba(0,0,0,.36); padding: 4px 14px; border-radius: 12px; backdrop-filter: blur(4px); letter-spacing: 1px; line-height: 1.15; white-space: nowrap; }
/* 9 konum (kenar payı 16px; orta hizalar transform ile) */
.q-ov-root .pos-tl { top: 16px; left: 16px; }
.q-ov-root .pos-tc { top: 16px; left: 50%; transform: translateX(-50%); }
.q-ov-root .pos-tr { top: 16px; right: 16px; }
.q-ov-root .pos-ml { top: 50%; left: 16px; transform: translateY(-50%); }
.q-ov-root .pos-c  { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.q-ov-root .pos-mr { top: 50%; right: 16px; transform: translateY(-50%); }
.q-ov-root .pos-bl { bottom: 16px; left: 16px; }
.q-ov-root .pos-bc { bottom: 16px; left: 50%; transform: translateX(-50%); }
.q-ov-root .pos-br { bottom: 16px; right: 16px; }
/* #4: overlay kısayol ipucu — sağ üstte, hafif, tıklama-geçirgen (görünürlüğü JS ayardan) */
.q-ov-hint { position: fixed; top: 8px; right: 10px; font-size: 11px; color: rgba(255,255,255,.82); background: rgba(0,0,0,.42); padding: 3px 9px; border-radius: 20px; pointer-events: none; backdrop-filter: blur(3px); }
/* Ayarlar → Overlay: 3x3 konum seçici ızgarası */
.q-ov-posgrid { display: grid; grid-template-columns: repeat(3, 34px); gap: 5px; margin: 8px 0 6px; }
.q-ov-poscell { width: 34px; height: 30px; border-radius: 7px; border: 1px solid rgba(128,128,128,.35); background: var(--q-input-bg); color: var(--q-muted); font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.q-ov-poscell:hover { color: var(--q-text); }
.q-ov-poscell.on { background: var(--q-accent, #A9744C); color: #fff; border-color: transparent; }

/* PiP CSS'i KALDIRILDI (2026-07-29): Android resim-içinde-resim özelliği kullanıcı testinde
   başarısız oldu, istek üzerine tamamen kaldırıldı (panel + JS modülü + MAUI zinciri dahil). */
.q-ov-user { display: flex; align-items: center; gap: 8px; background: rgba(20,18,24,.72); backdrop-filter: blur(6px); border-radius: 20px; padding: 4px 12px 4px 4px; box-shadow: 0 2px 8px rgba(0,0,0,.35); max-width: 220px; }
.q-ov-user.speaking { box-shadow: 0 0 0 2px #23c552, 0 2px 8px rgba(0,0,0,.35); }
.q-ov-av { position: relative; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.q-ov-name { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* BULUT (2026-10-18, atlas "Oyun overlay'i"): saat, kişi hapları ve kısayol ipucu yarı saydam GECE
   MAVİSİ haplar; konuşanın AVATARI nane halkalı (eskiden hapın tamamı yeşil çerçeveliydi); ipucu
   altta ortada. Konumlar yine kullanıcı ayarından (goglisOverlay) — yalnız biçim değişti. */
.q-ov-clock { font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: .5px;
    text-shadow: none; background: rgba(10,18,48,.55); padding: 6px 14px; border-radius: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.q-ov-voice { gap: 6px; }
.q-ov-user { gap: 8px; padding: 5px 10px 5px 5px; border-radius: 999px; background: rgba(10,18,48,.55); box-shadow: none; }
.q-ov-user.speaking { box-shadow: none; }
.q-ov-av { width: 26px; height: 26px; font-size: 10px; font-weight: 800; }
.q-ov-user.speaking .q-ov-av { box-shadow: 0 0 0 2px rgba(10,18,48,.55), 0 0 0 4px #3EDCAE; }
.q-ov-name { font-weight: 800; text-shadow: none; }
.q-ov-mute { width: 16px !important; height: 16px !important; flex: none; color: #fff; opacity: .8; }
.q-ov-hint { top: auto; right: auto; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px;
    background: rgba(10,18,48,.55); color: #fff; font-size: 12px; font-weight: 800; white-space: nowrap; }
.q-ov-card { text-align: center; }
.q-ov-card .q-login-logo { margin: 0 auto 4px; }
.q-ov-card .q-invite-home { margin-top: 18px; }

/* (2026-08-05) "?" sadeleşti: kenarlıklı kabarcık başlığın yanında gürültüydü. */
.q-xp-help { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--q-strong) 10%, transparent); color: var(--q-muted); font-size: 9.5px; font-weight: 700; cursor: help; vertical-align: middle; margin-left: 3px; }

/* ---- channels ---- */
.q-chlist { flex: 1; padding: 6px 8px; overflow-y: auto; }
.q-chrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; color: var(--q-muted); font-size: 14px; cursor: pointer; }
.q-chrow:hover { background: var(--q-hover); color: var(--q-text); }
.q-chrow.sel { background: var(--q-selected); color: var(--q-strong); }
.q-voiceusers { padding: 2px 0 4px 26px; display: flex; flex-direction: column; gap: 2px; }
.q-vuser { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--q-muted); white-space: nowrap; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.q-vuser:hover { background: var(--q-hover); color: var(--q-text); }
/* TAŞINABİLİR KATILIMCI (2026-09-17): yetkili kişiyi başka bir ses kanalına sürükleyebilir.
   Tutma anında imleç değişir — SÜRÜKLENİRKEN hedef vurgusu YOK, çünkü dragenter/dragleave
   Blazor Server'da satır başına sunucu turu demek (kanal sürüklemesinde de yok, tutarlı). */
.q-vuser[draggable="true"]:active { cursor: grabbing; }
.q-vuav { width: 22px; height: 22px; font-size: 9px; border: 2px solid transparent; }
img.q-vuav { object-fit: cover; } /* profil fotoğrafı kare kırpılır (baş harf yerine gerçek avatar) */
/* #33/#2 konuşma dalgası: yeşil halka + nabız animasyonu (konuşurken belli olsun) */
.q-vuav.speaking { border-color: var(--q-online); animation: q-speak-pulse 1.1s ease-out infinite; }
.q-speakring { border: 2px solid var(--q-online); animation: q-speak-pulse 1.1s ease-out infinite; }
@keyframes q-speak-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(35,165,90,0.55); }
    70%  { box-shadow: 0 0 0 5px rgba(35,165,90,0); }
    100% { box-shadow: 0 0 0 0 rgba(35,165,90,0); }
}
/* dock'ta kendi konuşma göstergesi (canlı ses barları) */
.q-voicedock.speaking .q-voicedock-on { color: var(--q-online); }
@keyframes q-speakbar { 0%,100% { height: 25%; } 50% { height: 100%; } }
/* KONUŞMA SALYANGOZU — BULUT 2 (2026-10-18, Fatih: "konuşma animasyonunu beğenmedim, sen yap, benim
   verdiğim kareleri boş ver"). Kare şeridi (gg/goglis-konusma.webp) KALDIRILDI; yerine canlı vektör:
   marka karosunun içinde SnailLogo (Talk). Sessizken salyangoz durur (kullanıcı isteği: yalnız konuşurken
   oynasın). Konuşurken: (1) karodan dışarı iki gökyüzü halkası sırayla yayılır — 22 px'te bile okunan
   asıl "ses çıkıyor" işareti; (2) salyangoz konuşma ritminde hafifçe zıplar/esner, başı sallanır,
   antenleri kıpırdar, kabuk nefes alır; (3) gülümseme yerine açılıp kapanan ağız (büyük boylarda seçilir);
   (4) karo yumuşak gökyüzü ışığıyla atar. Hepsi transform/opacity → kompozitörde ucuz. */
.q-speaksnail { position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 30%; vertical-align: middle;
    background: linear-gradient(150deg, #78D8FF 0%, #35A6FF 52%, #2477E8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); --gsn-mark: #fff; }
.q-speaksnail > .gsnail { width: 84%; height: auto; margin-top: 6%; filter: drop-shadow(0 1px 1.5px rgba(10,70,170,.3)); transform-origin: 50% 92%; }
.q-speaksnail::before, .q-speaksnail::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid #6FD0FF; opacity: 0; pointer-events: none; }
.gsnail .sn-mouth { opacity: 0; transform-box: fill-box; transform-origin: 50% 0; }
.q-speaksnail.on { animation: q-spk-glow .92s ease-in-out infinite alternate; }
.q-speaksnail.on::before { animation: q-spk-ring 1.38s cubic-bezier(.2,.6,.35,1) infinite; }
.q-speaksnail.on::after { animation: q-spk-ring 1.38s cubic-bezier(.2,.6,.35,1) .69s infinite; }
.q-speaksnail.on > .gsnail { animation: q-spk-hop .46s ease-in-out infinite alternate; }
.q-speaksnail.on .sn-headg { animation: q-spk-nod .92s ease-in-out infinite; transform-origin: 360px 300px; }
.q-speaksnail.on .sn-m { animation: gsn-wig .55s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.q-speaksnail.on .sn-m + .sn-m { animation-delay: -.27s; }
.q-speaksnail.on .sn-shell { animation: q-spk-shell .92s ease-in-out infinite alternate; transform-origin: 215px 210px; }
.q-speaksnail.on .sn-smile { opacity: 0; }
.q-speaksnail.on .sn-mouth { opacity: 1; animation: q-spk-mouth .78s linear infinite; }
@keyframes q-spk-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes q-spk-glow { from { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 0 rgba(76,176,255,0); } to { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 11px 2px rgba(76,176,255,.6); } }
@keyframes q-spk-hop { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-1.5px) scale(.96, 1.05); } }
@keyframes q-spk-nod { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 70% { transform: rotate(3deg); } }
@keyframes q-spk-shell { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes q-spk-mouth { 0% { transform: scaleY(.25); } 16% { transform: scaleY(1); } 30% { transform: scaleY(.45); } 48% { transform: scaleY(.95); } 64% { transform: scaleY(.3); } 82% { transform: scaleY(.8); } 100% { transform: scaleY(.25); } }
/* Hareket kapalıyken bilgi kaybolmasın: konuşma sabit bir çevrimiçi halkası + açık ağızla anlatılır. */
@media (prefers-reduced-motion: reduce) {
    .q-speaksnail.on, .q-speaksnail.on::before, .q-speaksnail.on::after, .q-speaksnail.on > .gsnail, .q-speaksnail.on .gsnail * { animation: none !important; }
    .q-speaksnail.on { box-shadow: 0 0 0 2px var(--q-online); }
}

/* ---- ses dock'u (#34): kanallar kolonunun altında mic/deafen/çık ---- */
/* İki satırlı dock: üstte durum+ping, altta 5 buton (tek satıra sığmıyordu) */
.q-voicedock { display: flex; flex-direction: column; gap: 7px; padding: 8px 10px; background: var(--q-glass-strong); border-top: 1px solid var(--q-glass-border); flex: none; }
.q-voicedock-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.q-voicedock-btns { display: flex; gap: 6px; justify-content: space-between; }
.q-voicedock-btns .q-vctl.sm { flex: 1; border-radius: 10px; }
/* #4: dock cihaz-değiştir caret'i — mic/hoparlör/kamera butonunun köşesinde küçük "^", cihaz menüsü açar. */
.q-voicedock-btns .q-vctl-wrap { flex: 1; position: relative; display: flex; }
.q-vctl-wrap > .q-vctl.sm { flex: 1; }
.q-vctl-wrap > .q-menu { position: absolute; top: -4px; right: -4px; z-index: 4; }
.q-vctl-caret { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--q-side-bg); border: 1px solid var(--q-divider); color: var(--q-strong); cursor: pointer; box-shadow: var(--q-elev-1); }
.q-vctl-caret:hover { color: var(--q-accent); border-color: var(--q-accent); }
.q-devmenu { min-width: 210px; max-width: 300px; padding: 6px; }
.q-devmenu-title { font-size: 11px; font-weight: 700; color: var(--q-muted); text-transform: uppercase; padding: 4px 8px 6px; }
.q-devmenu-item { display: flex; align-items: center; gap: 7px; width: 100%; padding: 7px 8px; border: 0; background: none; color: var(--q-text); font-size: 13px; text-align: left; cursor: pointer; border-radius: 7px; }
.q-devmenu-item:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.q-devmenu-item.on { color: var(--q-accent); font-weight: 600; }
/* #8-A birlikte izle partisi kartı (composer) — LFG kartı deseniyle uyumlu */
.q-watchcard { background: var(--q-panel-bg); border-radius: 12px; padding: 12px 14px; max-width: 480px; box-shadow: var(--q-elev-1); }
.q-watchcard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.q-watchcard-title { font-weight: 600; color: var(--q-strong); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-watchcard-sub { font-size: 12px; color: var(--q-muted); }
.q-watchcard-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; cursor: pointer; background: #000; }
.q-watchcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* OYNATICI ACIKKEN KART 2x (2026-09-20, Fatih: "birlikte izleye katildiginda ekran cok kucuk,
   2 kati buyuk olsun ve resize edilebilsin"). Kucuk resim hali 480'de KALIR — sohbette 960px'lik
   bir onizleme kalabalik olurdu; buyuyen sey yalniz IZLENEN oynatici. `fit-content`: kart,
   kullanicinin oynaticiya verdigi boyutu SARAR (sabit genislik olsaydi buyutulen oynatici
   karttan tasardi). `max-width:100%` sohbet kolonunu asmasin; telefonda zaten tam genislik. */
.q-watchcard.playing { max-width: 100%; width: fit-content; }
.q-watchcard-player {
    aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000;
    /* SERBEST BOYUT: tarayicinin kendi tutamagi (PiP ile ayni karar). `overflow:hidden` zaten
       vardi ve `resize` icin SART. Kullanici tutamaktan cekince tarayici satir-ici width/height
       yazar; `aspect-ratio` yalniz bir kenar 'auto' iken calistigi icin cakismaz. Boyut JS'te
       hatirlanir (goglisWatch.init) — yoksa PiP'e gidip donunce ya da kanal degisince kart
       yeniden dogar ve secilen boyut ucardi. */
    /* PIKSEL GENISLIK + YUZDE MAX (olculdu): `width:min(920px,100%)` yuzde icerdigi icin kart
       `fit-content` iken ilk (icsel) olcum turunda 'auto' sayiliyor ve oynatici icerigine
       (bos div) buzuluyordu — harness'ta 281px cikti. Sabit 920px icsel turda kesindir;
       `max-width:100%` ikinci turda kartin kullanilan genisligine gore kirpar (img'deki
       klasik `max-width:100%` deseniyle ayni mekanizma). */
    width: 920px; max-width: 100%; min-width: 280px; min-height: 158px;
    resize: both;
}
.q-watchcard-player > div { width: 100%; height: 100%; }
/* YT.Player ic div'i IFRAME'e cevirir: `> div` kurali o andan itibaren tutmaz ve iframe kendi
   varsayilan 640x360 olcusunde kalirdi (dar kutuda sagdan KIRPILIR, genis kutuda kucuk kalir).
   PiP'teki `.q-scrpip-ozel > iframe` ile ayni duzeltme. */
.q-watchcard-player > iframe { width: 100%; height: 100%; border: 0; display: block; }
.q-watchcard-members { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.q-watchcard-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.q-watchcard-hosttag { font-size: 12px; color: var(--q-accent); font-weight: 600; }
/* #17 DM başlığı arkadaş belirteci — arkadaş / istek gönderildi / arkadaş ekle */
.q-dmfriend { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 9px; border: 1px solid var(--q-divider); color: var(--q-muted); background: none; white-space: nowrap; flex: none; }
.q-dmfriend.on { color: var(--q-online); border-color: color-mix(in srgb, var(--q-online) 40%, transparent); }
.q-dmfriend.add { cursor: pointer; color: var(--q-accent); border-color: color-mix(in srgb, var(--q-accent) 40%, transparent); }
.q-dmfriend.add:hover { background: color-mix(in srgb, var(--q-accent) 12%, transparent); }
/* #18 arkadaş bul — sonuç satırı etiketi + arama ipucu */
.q-friend-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--q-muted); padding: 4px 10px; white-space: nowrap; }
.q-friends-searchhint { color: var(--q-muted); font-size: 13px; padding: 14px 2px; }
.q-voicedock-on { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--q-online); }
.q-voicedock-ch { font-size: 11px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #1 (2026-07-21): seste geçen KİŞİSEL süre — içeriği goglisTimers (saf JS) yazar.
   q-voicedock-top satırında ping rozetinin solunda, ikisi aynı hizada (flex align-center). */
.q-vtime-wrap { position: relative; margin-left: auto; cursor: default; display: inline-flex; align-items: center; }
.q-vtime { font-size: 11px; font-weight: 600; color: var(--q-online); font-variant-numeric: tabular-nums; }
.q-vtime:empty::before { content: "0:00"; opacity: .55; }
.q-tipbub { position: absolute; bottom: calc(100% + 7px); right: -4px; background: var(--q-input-bg, #26221f); color: var(--q-strong); font-size: 11.5px; font-weight: 500; line-height: 1.35; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--q-border, rgba(128,128,128,.25)); white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease; z-index: 60; }
.q-vtime-wrap:hover .q-tipbub { opacity: 1; transform: none; }
/* #2: oyun aktivitesinde geçen süre — "🎮 X oynuyor" yanındaki canlı sayaç (JS doldurur).
   margin-left: markup boşluğuna güvenme — Blazor inline <text> boşluğunu yutabiliyor (alt panelde yaşandı) */
.q-actdur { font-variant-numeric: tabular-nums; opacity: .8; font-size: .93em; margin-left: 3px; }
.q-actdur:empty { display: none; }
.q-vctl.sm { width: 32px; height: 32px; flex: none; }
.q-userpanel { height: 52px; background: var(--q-panel-bg); display: flex; align-items: center; gap: 8px; padding: 0 10px; flex: none; cursor: default; user-select: none; }
.q-userpanel .q-dot { border-color: var(--q-panel-bg); }
/* Alt panel hızlı ses ayarları ⚙ butonu + popup */
.q-userpanel-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 7px; color: var(--q-muted); cursor: pointer; flex: none; }
.q-userpanel-btn:hover { background: var(--q-hover); color: var(--q-text); }
.q-vqs-slider { width: 100%; accent-color: var(--q-accent); cursor: pointer; }

/* ---- chat ---- */
.q-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.q-chathead { height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 0.5px solid var(--q-divider); flex: none; color: var(--q-muted); }
.q-chtitle { font-size: 15px; font-weight: 500; color: var(--q-strong); }
.q-chtopic { font-size: 12px; color: var(--q-muted); border-left: 1px solid var(--q-divider); padding-left: 10px; }
/* KANAL BAŞLIĞI (2026-10-24, Bulut rötuş 3): konu tek satır (tıklayınca tamamı), konu yoksa yetkiliye soluk "Konu ekle";
   sağda sabitlenenler, "Kanalda ara" ve bildirim zili; üye düğmesi sayıyı da gösterir. */
.q-chathead .q-menu-act:has(> .q-chtopic) { min-width: 0; max-width: 100%; }
.q-chtopic.q-chtopic-btn { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.q-chtopic.q-chtopic-btn:hover { color: var(--q-text); }
.q-chtopic.ghost { display: inline-flex; align-items: center; gap: 5px; flex: none; border: 0; border-left: 1px solid var(--q-divider); border-radius: 0;
    background: transparent; color: var(--q-faint); font: inherit; font-size: 12px; cursor: pointer; padding: 0 0 0 10px; }
.q-chtopic.ghost .mud-icon-root { font-size: 13px; }
.q-chtopic.ghost:hover { color: var(--q-accent); }
.q-topicpop { width: min(420px, calc(100vw - 16px)); }
.q-topicpop-t { padding: 8px 10px 10px; font-size: 13.5px; line-height: 1.5; color: var(--q-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.q-hsearch { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; height: 30px; padding: 0 12px; flex: none;
    border: 1px solid var(--q-border); border-radius: 10px; background: var(--q-input-bg); color: var(--q-faint);
    font: 600 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
.q-hsearch:hover { color: var(--q-muted); border-color: color-mix(in srgb, var(--q-accent) 40%, var(--q-border)); }
.q-hbtn { width: 30px; height: 30px; flex: none; border: 0; border-radius: 9px; background: transparent; color: var(--q-muted);
    display: inline-grid; place-items: center; cursor: pointer; }
.q-hbtn:hover { background: var(--q-hover); color: var(--q-text); }
.q-hbtn .mud-icon-root { font-size: 18px; }
.q-hbtn.off { color: var(--q-faint); }
.q-vt.n { width: auto; gap: 5px; padding: 0 8px; font: 700 12px/1 'Goglis Sans', system-ui, sans-serif; }
@media (max-width: 560px) {
    .q-hsearch { width: 30px; padding: 0; justify-content: center; border: 0; background: transparent; }
    .q-hsearch > span { display: none; }
}
.q-spacer { flex: 1; }
.q-messages { flex: 1; padding: 10px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 0; }
/* GAP DEGIL MARGIN (2026-08-13, gruplama): flex gap HER cocugun arasina girer ve satir bazinda
   kapatilamaz — grup ici bitisiklik icin bosluk grup BASININ margin'ine tasindi (eski gap'le
   ayni 14px: gruplar arasi gorunum degismedi, yalniz ayni yazarin pes pese satirlari bitisti). */
.q-msg { display: flex; gap: 12px; }
/* DISCORD-VARI GRUPLAMA (2026-08-13): grup BASI ustten nefes alir, devam satirlari (.cont)
   sikisik. Gutter avatar genisligini korur ki metinler alt alta hizali kalsin; icindeki
   mini saat yalniz satir hover'inda belirir (Discord davranisi). */
.q-msg:not(.cont) { margin-top: 14px; }
.q-msg.cont { margin-top: 0; }
/* grup ICI satirlar Discord kadar bitisik: metin marji sifir (kullanici: "boyle boslugu fazla") */
.q-msg.cont .q-msg-text { margin-top: 0; }
.q-msg-gut { flex: none; width: 38px; display: flex; justify-content: flex-end; padding-top: 3px; }
.q-msg-gut time { font-size: 10px; color: var(--q-faint); opacity: 0; white-space: nowrap; }
.q-msg.cont:hover .q-msg-gut time { opacity: 1; }
body.msg-compact .q-msg:not(.cont) { margin-top: 6px; }
/* kompakt avatar 20px — saat sigmaz, gutter dar kalir, saat gizli */
body.msg-compact .q-msg-gut { width: 20px; }
body.msg-compact .q-msg-gut time { display: none; }
/* WhatsApp-vari gün ayracı: ortada hap etiket, iki yanda ince çizgi (tema değişkenli). */
.q-day-sep { display: flex; align-items: center; gap: 10px; margin: 14px 10px 6px; color: var(--q-muted); }
/* --q-border her temada tanımlı değil → currentColor + düşük opaklık her temada görünür ince çizgi verir. */
.q-day-sep::before, .q-day-sep::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .22; }
.q-day-sep span { font-size: 11.5px; font-weight: 600; color: var(--q-muted); background: var(--q-input-bg); padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.q-msg-body { min-width: 0; }
/* DÜZENLEME MODU: gövde satırın TAMAMINI alır (2026-08-24). `.q-msg-body` flex öğesi olduğu
   için genişliği içeriğinden geliyor; kısa bir mesajı düzenlerken editör 205px'e sıkışıyordu
   (ölçüldü). Sınıf Razor'dan gelir — koşul zaten orada biliniyor. */
.q-msg-body.editing { flex: 1 1 auto; width: 100%; }
.q-msg-head { display: flex; align-items: baseline; gap: 8px; }
.q-msg-name { font-size: 15px; font-weight: 500; color: var(--q-strong); }
.q-clickav { cursor: pointer; }
.q-clickname { cursor: pointer; }
.q-clickname:hover { text-decoration: underline; }
.q-msg-time { font-size: 11px; color: var(--q-faint); }
.q-msg-text { font-size: 14px; line-height: 1.5; margin-top: 2px; color: var(--q-text); }
.q-msg-text strong { color: var(--q-strong); font-weight: 500; }
.q-reactions { display: flex; gap: 6px; margin-top: 6px; }
.q-react { display: flex; align-items: center; gap: 4px; background: var(--q-side-bg); border: 0.5px solid var(--q-divider); border-radius: 10px; padding: 1px 8px; font-size: 12px; color: var(--q-text); cursor: pointer; }
.q-react.on { border-color: var(--q-accent); }
/* #17: "yazıyor…" göstergesi — yumuşak pill + zıplayan noktalar */
/* Yatay konum COMPOSER ile aynı (2026-08-08, kullanıcı bildirdi): .q-composer'ın margin'i
   `6px 16px 14px`, buranınki ise `padding: 0 2px`'ti → "yazıyor…" satırı mesaj kutusunun 14px
   SOLUNDAN başlıyor, hizasız duruyordu. Aynı 16px verilir; değişirse ikisi birlikte değişmeli. */
.q-typing { display: flex; align-items: center; gap: 7px; height: 22px; font-size: 12px; color: var(--q-muted); margin: 0 16px; padding: 0; opacity: 0; transition: opacity .15s; cursor: default; }
.q-typing.on { opacity: 1; }
/* GPU (2026-08-29, sahadan: "Discord %5, Goglis %34"): animasyon TABANDAN kalktı, yalnız `.on`
   varken kurulur. `.q-typing` kimse yazmazken de DOM'da duruyor ve `opacity:0` ile gizleniyor —
   ama OPACITY ANIMASYONU DURDURMAZ: üç nokta görünmeden, her ekranda, sonsuza dek zıplıyordu.
   Tek başına önemsiz görünür; asıl zarar sayfanın HİÇ BOŞA ÇIKMAMASI: tek bir sonsuz animasyon
   bile derleyiciyi 60 fps'te tutar ve GPU hiç uykuya geçmez. Ölçüldü: boş ekranda 5 sonsuz
   animasyon (3'ü buradan), görünür backdrop-filter/blur ise SIFIR — yük tamamen buradan. */
.q-typing .d { width: 5px; height: 5px; border-radius: 50%; background: var(--q-muted); display: inline-block; }
.q-typing.on .d { animation: q-typing-bounce 1.3s infinite ease-in-out; }
.q-typing .d:nth-child(2) { animation-delay: .18s; }
.q-typing .d:nth-child(3) { animation-delay: .36s; }
@keyframes q-typing-bounce { 0%, 70%, 100% { transform: translateY(0); opacity: .5; } 35% { transform: translateY(-4px); opacity: 1; } }
.q-composer { margin: 6px 16px 14px; background: var(--q-input-bg); border-radius: 10px; display: flex; align-items: flex-end; padding: 7px 12px; min-height: 46px; gap: 10px; flex: none; color: var(--q-muted); box-sizing: border-box; }
/* Çok satırlı composer: kap textarea ile büyür; ikonlar/butonlar alt kenara hizalı kalır. */
/* (2026-07-30, kullanici: "padding-top fazla, tam ortalanmali") Composer TEK SATIRDA tam
   simetrikti degildi: yukseklik en uzun cocuktan (34px gonder butonu) geliyor, metin kutusu ise
   flex-end ile dibe yapisiyordu -> ustte ~7px fazla bosluk. Artik tum cocuklar metin satiriyla
   AYNI yukseklikte (30px) ve 3px'lik alt-bosluk hilesi kalkti; kutu 30 + 2x7 dolgu + 2x1 kenarlik
   = 46px, yazi tam ortada. Cok satirda flex-end yine dogru is gorur (ikonlar altta kalir). */
.q-composer > :not(.q-msgbox):not(.q-msgwrap) { margin-bottom: 0; }
.q-composer > .q-attach, .q-composer > .q-composer-tools, .q-composer > .q-send-btn,
.q-composer > .mud-icon-root { height: 30px; }
.q-composer > .q-send-btn { width: 30px; }
.q-composer > .q-attach, .q-composer > .q-composer-tools { display: inline-flex; align-items: center; }
/* "+" EKLE VE OLUŞTUR MENÜSÜ (2026-10-24, Bulut rötuş 3): etkinleştirici artık QMenu'nün `div.q-menu`'sünde —
   esnek satırda .q-attach'ın yerini o tutar. Gizli `.q-attach-src` (kalıcı dosya girişi) yer kaplamaz. */
.q-composer > .q-menu { flex: none; display: inline-flex; align-items: center; height: 30px; }
.q-composer > .q-menu > .q-menu-act { display: inline-flex; }
.q-attach.on { background: var(--q-chip); color: var(--q-accent-ink); }
.q-menu-create { width: 296px; max-width: calc(100vw - 16px); padding: 6px; }
.q-menu-create .q-menu-head { font: 600 10.5px/1 var(--q-display); letter-spacing: .09em; text-transform: uppercase; color: var(--q-faint); padding: 8px 10px 6px; }
.q-menu-create .q-menu-item { white-space: normal; padding: 7px 8px; border-radius: 11px; }
.q-menu-create .q-menu-item > span { display: flex; align-items: center; gap: 11px; min-width: 0; width: 100%; }
.q-cmi-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-cmi-ic .mud-icon-root { font-size: 18px; }
.q-cmi-t { min-width: 0; display: grid; gap: 1px; }
.q-cmi-t b { font-weight: 700; font-size: 13.5px; color: var(--q-strong); }
.q-cmi-t small { font-size: 11.5px; line-height: 1.35; color: var(--q-muted); }
.q-menu-item.q-cmi-adm .q-cmi-ic { color: var(--q-amber); background: color-mix(in srgb, var(--q-amber) 15%, transparent); }
/* Dosya satırı: tıklama alanının TAMAMI etiket olsun (dolgu etikette) — dolguya basmak da seçiciyi açar. */
.q-menu-create .q-menu-item.q-cmi-file { padding: 0; }
.q-cmi-lab { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 8px; border-radius: 11px; cursor: pointer; }
.q-menu-item.q-cmi-file.disabled .q-cmi-lab { cursor: default; opacity: .55; }

/* ---- login ---- */
/* Süslü zemin (2026-07-22): derin kahve-gece degrade + aurora küreleri + yıldız tozu + ince ızgara.
   Tümü saf CSS (statik SSR) — animasyonlar yalnız transform/opacity, reduced-motion'da durur. */
.q-login-bg {
    position: relative; overflow: hidden;
    min-height: calc(100vh / var(--q-zoom, 1)); min-height: calc(100dvh / var(--q-zoom, 1));
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
    background:
        radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--q-accent, #33a8f2) 22%, transparent), transparent 60%),
        radial-gradient(900px 560px at 108% 14%, rgba(126,151,172,0.16), transparent 62%),
        radial-gradient(1000px 700px at 50% 118%, rgba(138,90,56,0.20), transparent 64%),
        linear-gradient(160deg, #17181c 0%, #101114 52%, #15130f 100%);
    font-family: 'Goglis Sans', system-ui, sans-serif;
}
.q-login-fx { position: absolute; inset: 0; pointer-events: none; }
.q-login-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.q-login-orb.o1 { width: 460px; height: 460px; left: -140px; top: -120px; background: radial-gradient(circle at 35% 35%, var(--q-accent, #33a8f2), transparent 70%); animation: q-orb-a 24s ease-in-out infinite; }
.q-login-orb.o2 { width: 380px; height: 380px; right: -110px; top: 16%; background: radial-gradient(circle at 40% 40%, var(--q-logo-hi, #78D8FF), transparent 70%); opacity: .34; animation: q-orb-b 30s ease-in-out infinite; }
.q-login-orb.o3 { width: 520px; height: 520px; left: 32%; bottom: -240px; background: radial-gradient(circle at 45% 35%, var(--q-accent-2, #1c72bd), transparent 70%); opacity: .42; animation: q-orb-c 27s ease-in-out infinite; }
/* Yıldız tozu: iki katman minik nokta (parallax hissi için farklı yoğunluk), çok düşük parlaklık. */
.q-login-stars {
    position: absolute; inset: 0; opacity: .5;
    background-image:
        radial-gradient(1.3px 1.3px at 22px 34px, rgba(255,255,255,.55), transparent 55%),
        radial-gradient(1px 1px at 128px 92px, rgba(255,235,214,.4), transparent 55%),
        radial-gradient(1.6px 1.6px at 214px 156px, rgba(255,255,255,.35), transparent 55%),
        radial-gradient(1px 1px at 300px 58px, rgba(255,255,255,.3), transparent 55%),
        radial-gradient(1.2px 1.2px at 82px 208px, rgba(255,224,196,.35), transparent 55%),
        radial-gradient(1px 1px at 258px 250px, rgba(255,255,255,.28), transparent 55%);
    background-size: 340px 300px; animation: q-stars 90s linear infinite;
}
/* İnce teknik ızgara — zemine derinlik verir, neredeyse görünmez. */
.q-login-grid {
    position: absolute; inset: 0; opacity: .16;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 25%, transparent 78%);
    mask-image: radial-gradient(ellipse 70% 62% at 50% 44%, #000 25%, transparent 78%);
}
@keyframes q-orb-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, 44px) scale(1.12); } }
@keyframes q-orb-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-56px, 60px) scale(0.92); } }
@keyframes q-orb-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(48px, -52px) scale(1.08); } }
@keyframes q-stars { from { background-position: 0 0; } to { background-position: -340px 300px; } }
@media (prefers-reduced-motion: reduce) {
    .q-login-orb, .q-login-stars { animation: none; }
}
/* Kart: buzlu cam — zemin ışıltıları arkasından süzülür; üstte ince kahve vurgu çizgisi. */
.q-login-card {
    position: relative; z-index: 1; width: 360px; max-width: 100%;
    background: var(--q-glass-strong, rgba(34, 36, 41, 0.72));
    -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
    border-radius: 18px; border: 1px solid rgba(255,255,255,0.09);
    padding: 34px 30px; text-align: center; box-sizing: border-box;
    box-shadow: 0 24px 70px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.q-login-card::before {
    content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--q-logo-hi, #78D8FF), transparent);
}
.q-login-logo { width: 66px; height: 66px; border-radius: 20px; background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); color: #fff; font-size: 30px; font-weight: 500; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.q-login-title { font-size: 26px; font-weight: 500; color: #f2f3f5; }
.q-login-sub { font-size: 14px; color: #a7a9ad; margin-top: 8px; }
/* #3: "Google şart değil" bilgi notu */
.q-login-any { font-size: 12px; color: #8a8b93; margin-top: 14px; line-height: 1.5; }
/* Kayıt sayfasındaki sözleşme bağlantıları (gizlilik / çocuk güvenliği) düz metne benziyordu. */
.q-login-any a { color: var(--q-accent, #33a8f2); text-decoration: none; }
.q-login-any a:hover { text-decoration: underline; }
/* Giriş ÖNCESİ şart notu (Apple Guideline 1.2): "Devam ederek Kullanım Şartları ve Gizlilik…" */
.q-login-agree { font-size: 11.5px; color: #8a8b93; margin-top: 14px; line-height: 1.5; text-align: center; }
.q-login-agree a { color: var(--q-accent, #33a8f2); text-decoration: none; }
.q-login-agree a:hover { text-decoration: underline; }
.q-auth-check a { color: var(--q-accent, #33a8f2); text-decoration: none; }
.q-auth-check a:hover { text-decoration: underline; }
/* Web'den girene platform İNDİRME ikonları — kartın altında. Kabukta gizleme <html>.q-shell
   sınıfıyla (App.razor head inline script'i basar; html Blazor yeniden render'ından etkilenmez —
   hidden attribute yaklaşımı circuit bağlanınca ikonları söndürüyordu). Hazır platformlar
   tıklayınca indirir; iOS/Android saf-CSS tooltip'te "Pek yakında" der (data-tip). */
.q-login-apps { position: relative; z-index: 1; display: flex; gap: 12px; margin-top: 24px; }
html.q-shell .q-login-apps { display: none !important; }
.q-app-ic {
    position: relative; width: 46px; height: 46px; border-radius: 14px; padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: #cfd8e0; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .12s;
}
.q-app-ic svg { width: 21px; height: 21px; }
a.q-app-ic:hover, button.q-app-ic:hover { color: #fff; background: color-mix(in srgb, var(--q-accent, #33a8f2) 32%, transparent); border-color: color-mix(in srgb, var(--q-accent, #33a8f2) 60%, transparent); transform: translateY(-2px); text-decoration: none; }
.q-app-ic.off { opacity: .42; cursor: default; }
.q-app-ic[data-tip]::after {
    content: attr(data-tip); position: absolute; bottom: calc(100% + 9px); left: 50%;
    transform: translateX(-50%) translateY(3px); white-space: nowrap;
    background: rgba(24,22,26,.96); border: 1px solid rgba(255,255,255,.14); color: #efe9e4;
    font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
    opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 3;
}
.q-app-ic[data-tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Linux seçim balonu: ikona tıklayınca üstte AppImage/.deb menüsü (`.open` inline onclick toggle;
   dışarı/seçim tıklamasını goglis.js delegation'ı kapatır — Blazor re-render'ından bağımsız). */
.q-app-linux { position: relative; display: flex; }
.q-app-linux.open .q-app-ic { color: #fff; background: color-mix(in srgb, var(--q-accent, #33a8f2) 32%, transparent); border-color: color-mix(in srgb, var(--q-accent, #33a8f2) 60%, transparent); }
.q-app-linux.open .q-app-ic::after { display: none; } /* açıkken hover tooltip'i sussun */
.q-app-pop {
    position: absolute; bottom: calc(100% + 11px); left: 50%;
    transform: translateX(-50%) translateY(5px);
    min-width: 196px; padding: 6px; border-radius: 13px;
    background: rgba(26,24,29,.97); border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 36px rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 4;
}
.q-app-pop::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: rgba(26,24,29,.97); border-bottom-width: 0;
}
.q-app-linux.open .q-app-pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.q-app-pop a { display: block; padding: 9px 12px; border-radius: 9px; text-decoration: none; transition: background .12s; }
.q-app-pop a:hover { background: color-mix(in srgb, var(--q-accent, #33a8f2) 24%, transparent); text-decoration: none; }
.q-app-pop .t { display: block; font-size: 13px; font-weight: 700; color: #f0eae5; }
.q-app-pop .s { display: block; font-size: 11px; color: #a89f98; margin-top: 1px; }
/* Sign in with Apple — HIG: siyah zemin, beyaz metin */
/* margin-top 10px: Google primary değil — tüm giriş butonları EŞİT aralıkta (varsayılan 26px
   Google'la Apple arasını açıyordu, kullanıcı geri bildirimi 2026-07-22). */
.q-login-btn.apple { background: #000; color: #fff; border-color: #000; margin-top: 10px; }
.q-login-btn.apple:hover { background: #1c1c1e; }
/* Uygulama içi Welcome'daki indirme daveti — tema değişkenli (açık/koyu ikisinde de okunur). */
.q-welcome-dl {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 18px;
    padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
    color: var(--q-strong); text-decoration: none;
    background: color-mix(in srgb, var(--q-accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--q-accent) 40%, transparent);
    transition: background .15s, transform .1s;
}
.q-welcome-dl:hover { background: color-mix(in srgb, var(--q-accent) 26%, transparent); transform: translateY(-1px); text-decoration: none; }
.q-login-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 26px; height: 48px; background: #fff; color: #1a1b1e; border-radius: 10px; font-size: 15px; font-weight: 500; text-decoration: none; }
.q-login-btn:hover { background: #f1f1f1; }

/* ---- #1 (2026-07-29): e-posta/parola formu (login + kayıt + sıfırlama) ----
   EmptyLayout'ta MudBlazor sağlayıcıları YOK (onlar MainLayout'ta) → alanlar elle yazıldı.
   Kart 360px olduğundan her şey tek sütun; renkler login kartının koyu paletine sabit
   (bu sayfalar tema değişkenlerinden bağımsız — girişten önce tema bilinmiyor). */
.q-auth-form { display: flex; flex-direction: column; gap: 13px; margin-top: 22px; text-align: left; }
.q-auth-field { display: flex; flex-direction: column; gap: 6px; }
.q-auth-field > label { font-size: 12px; font-weight: 600; color: #a7a9ad; letter-spacing: .2px; }
.q-auth-input {
    width: 100%; height: 44px; box-sizing: border-box; padding: 0 13px;
    background: rgba(0,0,0,.28); color: #f2f3f5; font-size: 14.5px; font-family: inherit;
    border: 1px solid rgba(255,255,255,.13); border-radius: 10px; outline: none;
    transition: border-color .15s, background .15s;
}
.q-auth-input::placeholder { color: #6e7077; }
.q-auth-input:focus { border-color: color-mix(in srgb, var(--q-accent, #33a8f2) 85%, transparent); background: rgba(0,0,0,.36); }
/* Chrome otomatik doldurma beyaz zemin basıyordu — koyu kartta okunmaz oluyordu. */
.q-auth-input:-webkit-autofill,
.q-auth-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f2f3f5;
    -webkit-box-shadow: 0 0 0 1000px #24262b inset;
    caret-color: #f2f3f5;
}
/* Parola alanı + göster/gizle gözü */
.q-auth-pwd { position: relative; display: flex; }
.q-auth-pwd .q-auth-input { padding-right: 42px; }
.q-auth-eye {
    position: absolute; right: 4px; top: 0; height: 44px; width: 36px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; cursor: pointer; color: #8a8b93;
}
.q-auth-eye:hover { color: #d8d9e0; }
.q-auth-eye .off { display: none; }
.q-auth-eye.on .off { display: block; }
.q-auth-eye.on .on { display: none; }
.q-auth-hint { font-size: 11.5px; color: #7d7f87; }
/* 13+ onayı — zorunlu (sunucu tarafında da doğrulanır) */
.q-auth-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: #b8bac1; line-height: 1.45; cursor: pointer; }
.q-auth-check input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--q-accent, #33a8f2); cursor: pointer; flex: none; }
/* Görünür "kutuyu işaretle" uyarısı (2026-10-06): kutu boşken düğmeye basılınca etiket data-err alır,
   hemen altındaki satır açılır. SINIF DEĞİL NİTELİK: sayfa Blazor ağacında, bir sonraki diff JS'in
   eklediği sınıfı siler (data-fs deseni). Negatif üst boşluk formun 13px gap'ini kutuya yapıştırır. */
.q-auth-check-msg { display: none; margin: -8px 0 0 26px; font-size: 12.5px; color: #f0997b; }
.q-auth-check[data-err] + .q-auth-check-msg { display: block; }
.q-auth-check[data-err] input { outline: 2px solid #f0997b; outline-offset: 2px; }
.q-auth-submit {
    width: 100%; height: 46px; margin-top: 4px; border: 0; border-radius: 10px; cursor: pointer;
    background: linear-gradient(135deg, var(--q-accent, #33a8f2), var(--q-accent-2, #1c72bd)); color: #fff;
    font-size: 15px; font-weight: 600; font-family: inherit;
    transition: filter .15s, transform .1s;
}
/* GONDERILIYOR DURUMU (2026-08-11, kullanici: "login ve register butonlarina bastiktan sonra
   loading statusuna girsin"). Canlida bir kullanici Kayit Ol'a hizlica iki kez basip ayni
   e-postayla iki hesap acti. Bu katman kullaniciya "bir sey oluyor" der ve ikinci dokunusu
   emer; ASIL guvence veritabanindaki kismi benzersiz indekstir.
   Buton `disabled` YAPILMAZ (devre disi submit'in degeri forma girmez) — tiklama JS'te yutulur,
   burada yalniz gorunum degisir. */
.q-auth-sending .q-auth-submit {
    pointer-events: none;
    color: transparent;                  /* etiket gizlenir, yerini donen halka alir */
    position: relative;
}
.q-auth-sending .q-auth-submit::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 17px; height: 17px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: q-auth-spin .7s linear infinite;
}
@keyframes q-auth-spin { to { transform: rotate(360deg); } }
/* Animasyon kosmazsa (arka plan sekmesi / hareket azaltma) halka DURUR ama GORUNUR kalir —
   gorunurluk animasyona bagli degildir (bu repoda daha once yanan ders). */
@media (prefers-reduced-motion: reduce) { .q-auth-sending .q-auth-submit::after { animation: none; } }
/* Gonderilirken alanlar da kilitlenir: kullanici yaziyi degistirip "gonderdigim bu muydu?"
   sorusuna dusmesin. */
.q-auth-sending .q-auth-input, .q-auth-sending .q-auth-eye { pointer-events: none; opacity: .7; }

.q-auth-submit:hover { filter: brightness(1.08); }
.q-auth-submit:active { transform: translateY(1px); }
/* "ya da" ayracı — sağlayıcı butonlarıyla form arasında */
.q-auth-sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 -8px; color: #74767d; font-size: 12px; }
.q-auth-sep::before, .q-auth-sep::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.11); }
/* Alt bağlantı satırı (kayıt ol / parolamı unuttum) */
.q-auth-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; font-size: 13px; color: #8a8b93; flex-wrap: wrap; }
.q-auth-links a, .q-auth-inline { color: var(--q-accent, #33a8f2); text-decoration: none; font-weight: 500; background: none; border: 0; padding: 0; font-size: inherit; font-family: inherit; cursor: pointer; }
.q-auth-links a:hover, .q-auth-inline:hover { text-decoration: underline; }
/* Bildirim şeritleri: hata kırmızı, başarı yeşil (login'deki #f0997b tonuyla uyumlu) */
.q-auth-msg { margin-top: 16px; font-size: 12.5px; line-height: 1.5; padding: 10px 12px; border-radius: 9px; text-align: left; }
.q-auth-msg.err { color: #f0997b; background: rgba(240,153,123,.1); border: 1px solid rgba(240,153,123,.25); }
.q-auth-msg.ok { color: #86d99f; background: rgba(134,217,159,.1); border: 1px solid rgba(134,217,159,.25); }
/* Şerit içindeki eylem (ör. "doğrulamayı tekrar gönder") tıklanabilir GÖRÜNMELİ — düz metne
   benziyordu; şeridin kendi rengini miras alıp altı çizili durur. */
.q-auth-msg form { display: block; margin-top: 8px; }
.q-auth-msg .q-auth-inline { color: inherit; text-decoration: underline; font-weight: 600; }
.q-auth-back { display: inline-block; margin-top: 18px; font-size: 13px; color: #8a8b93; text-decoration: none; }
.q-auth-back:hover { color: #d8d9e0; }

/* ---- #3: davet ONAY kartı (otomatik katılma yerine) ---- */
.q-invite-card { text-align: center; }
.q-invite-server { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 4px; }
.q-invite-icon { width: 72px; height: 72px; border-radius: 20px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,0,0,0.35); }
.q-invite-icon-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); color: #fff; font-size: 30px; font-weight: 700; }
.q-invite-name { font-size: 22px; font-weight: 700; color: #fff; }
.q-invite-stats { font-size: 13px; color: #a7a9ad; display: flex; align-items: center; gap: 6px; }
.q-invite-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.q-invite-dot.online { background: #3ba55d; }
.q-invite-sep { color: #6b6d71; }
.q-invite-invited { margin-top: 16px; font-size: 15px; color: #d6d7db; line-height: 1.5; }
.q-invite-invited b { color: #fff; }
.q-login-btn.q-invite-accept { background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); color: #fff; border: 0; margin-top: 16px; }
.q-login-btn.q-invite-accept:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); }
.q-login-btn.q-invite-accept:disabled { opacity: 0.6; cursor: default; }
.q-login-btn.q-invite-cancel { background: rgba(255,255,255,0.06); color: #c9cace; border: 0.5px solid rgba(255,255,255,0.12); }
.q-login-btn.q-invite-cancel:hover { background: rgba(255,255,255,0.1); }

/* ---- login alt linkleri: Gizlilik · Çocuk Güvenliği · Sürüm Notları ("Biz kimiz" kalktı 2026-07-22) ---- */
.q-login-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; padding-top: 12px; border-top: 0.5px solid rgba(255,255,255,0.08); font-size: 12px; }
.q-login-links a, .q-login-links button { border: 0; background: none; padding: 0; font-family: inherit; font-size: 12px; color: #a7a9ad; cursor: pointer; text-decoration: none; }
.q-login-links a:hover, .q-login-links button:hover { color: var(--q-accent); text-decoration: underline; }
.q-login-links span { color: #6b6d71; }
/* Davet HAM LİNKİ mesaj gövdesinde gizli (kullanıcı isteği 2026-07-22): davet zaten Discord-vari
   KART olarak basılıyor ve Katıl butonu UYGULAMA İÇİNDE katıyor — ham linke tıklayan web'e/yeni
   pencereye düşüyordu (kabukta hiç açılmıyordu). Kart tek arayüz; eski mesajlar da düzelir. */
.q-md a[href*="/invite/"] { display: none; }

/* Yasal sayfa iframe popup'ı — kabukta (WebView) yeni pencere açılamadığından uygulama içi gösterim.
   z-index 5100 (2026-10-01): 4000 iken Kullanım Şartları onay perdesinin (.q-tpick-overlay 5000)
   ARKASINDA açılıyordu — "tamamını oku" tıklanınca metin görünmüyor, kullanıcı okumadan onaylamaya
   zorlanıyordu. Perdenin hemen üstü; tur (12000) ve yeniden bağlanma perdelerinin (20000+) altı. */
.q-legal-pop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 5100; display: flex; align-items: center; justify-content: center; padding: 14px; }
.q-legal-box { position: relative; width: min(860px, 96vw); height: min(760px, 92vh); background: var(--q-side-bg); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.q-legal-box iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--q-chat-bg); }
.q-legal-x { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 15px; cursor: pointer; z-index: 1; }
.q-legal-x:hover { background: rgba(255,255,255,.25); }
/* Tema takipli: uygulama içinde açık/koyu temaya uyar; login'de (tema class'ı yok) koyu fallback'ler geçerli. */
.q-about-in { position: relative; background: var(--q-side-bg, #2b2d31); border: 1px solid color-mix(in srgb, var(--q-accent) 40%, transparent); border-radius: 18px; padding: 24px 26px; color: var(--q-text, #e6e7ef); font-family: 'Goglis Sans', system-ui, sans-serif; max-height: calc(84vh / var(--q-zoom, 1)); overflow: auto; }
/* Popup scrollbar'ı: tarayıcı varsayılanı kartın yuvarlak köşesinde kaba duruyordu — ince,
   marka-kahvesi tonunda ve raydan boşluklu (login'in statik SSR'ında da geçerli). */
.q-about-in { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--q-accent) 45%, transparent) transparent; }
.q-about-in::-webkit-scrollbar { width: 8px; }
.q-about-in::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.q-about-in::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--q-accent) 40%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.q-about-in::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--q-accent) 65%, transparent); background-clip: padding-box; }
.q-about-in::-webkit-scrollbar-corner { background: transparent; }
.q-about-x { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--q-faint, #80848e); font-size: 15px; cursor: pointer; }
.q-about-x:hover { background: var(--q-hover, rgba(255,255,255,0.07)); color: var(--q-strong, #fff); }
.q-about-head { display: flex; align-items: center; gap: 12px; }
.q-about-logo { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.q-about-title { font-size: 19px; font-weight: 700; color: var(--q-strong, #f2f3f5); }
.q-about-ver { font-size: 12.5px; color: var(--q-muted, #a7a9ad); margin-top: 2px; }
.q-about-ver b { color: var(--q-accent, #C08A5C); }
.q-about-log { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.q-about-rel { background: var(--q-hover, rgba(255,255,255,0.03)); border: 0.5px solid var(--q-divider, rgba(255,255,255,0.06)); border-radius: 11px; overflow: hidden; }
.q-about-rel summary { display: flex; align-items: center; gap: 9px; padding: 10px 13px; cursor: pointer; font-size: 13.5px; color: var(--q-text, #e6e7ef); list-style: none; user-select: none; }
.q-about-rel summary::-webkit-details-marker { display: none; }
.q-about-rel summary::before { content: "▸"; color: var(--q-accent, #C08A5C); font-size: 12px; transition: transform 0.15s ease; }
.q-about-rel[open] summary::before { transform: rotate(90deg); }
.q-about-rel summary b { color: var(--q-accent, #C08A5C); }
.q-about-reltitle { color: var(--q-text, #cfd1dc); }
.q-about-relcount { margin-left: auto; background: color-mix(in srgb, var(--q-accent) 18%, transparent); color: var(--q-accent, #d8b294); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.q-about-rel ul { margin: 0; padding: 2px 16px 12px 34px; display: flex; flex-direction: column; gap: 5px; }
.q-about-rel li { font-size: 12.5px; color: var(--q-muted, #b9bbcc); line-height: 1.55; }
/* Uygulama içi MudDialog kabuğu: kendi beyaz yüzeyi/padding'i görünmesin — tek yüzey q-about-in (köşe taşması düzeltmesi) */
.q-about-host { background: transparent !important; box-shadow: none !important; overflow: visible !important; }
.q-about-dlgc { padding: 0 !important; }

/* ---- sunucu kurma isteği popup'ı (yetkisiz '+' akışı) ---- */
.q-srvreq { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 4px 2px; }
.q-srvreq-title { font-size: 16.5px; font-weight: 700; color: var(--q-strong); }
.q-srvreq-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.q-srvreq-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--q-strong); }
.q-srvreq-ico { font-size: 17px !important; color: var(--q-accent); flex: none; margin-top: 2px; }
.q-srvreq-pending { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--q-amber, #d8a03c); background: rgba(216,160,60,0.12); padding: 7px 12px; border-radius: 10px; }
.q-srvreq-done { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #3ad17e; background: rgba(35,165,90,0.12); padding: 10px 14px; border-radius: 11px; line-height: 1.5; }

/* Responsive login (dar ekran/telefon): kart daralır, popup içi sıkılaşır, damga alta sarabilir. */
@media (max-width: 430px) {
    .q-login-bg { padding: 14px; }
    .q-login-card { padding: 26px 18px; border-radius: 14px; }
    .q-login-logo { width: 56px; height: 56px; border-radius: 17px; margin-bottom: 14px; }
    .q-login-title { font-size: 22px; }
    .q-login-btn { height: 44px; font-size: 14px; }
    .q-about-in { padding: 18px 16px; }
    .q-about-logo { width: 40px; height: 40px; border-radius: 12px; }
    .q-about-title { font-size: 17px; }
}
/* Alçak pencereler (yatay telefon): dikey boşlukları kıs. */
@media (max-height: 560px) {
    .q-login-card { padding: 18px 22px; }
    .q-login-logo { width: 44px; height: 44px; margin-bottom: 8px; }
    .q-login-btn { margin-top: 14px; height: 42px; }
}

/* ---- empty / placeholder ---- */
.q-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; }
.q-empty-title { font-size: 18px; font-weight: 500; color: var(--q-strong); }
.q-empty-sub { font-size: 13px; color: var(--q-muted); line-height: 1.7; }
/* GOGLIS DUVAR KÂĞIDI (2026-07-31): ev ekranının boş orta alanı. Kap position:relative olur,
   SVG mutlak katman olarak arkaya serilir; içerik z-index ile üstte kalır. Renk currentColor'dan
   gelir → temaya kendiliğinden uyar. Opaklıklar bilerek ÇOK düşük: desen "farkedilir" değil
   "sezilir" olmalı, metin okunurluğunu bozmamalı. */
.q-empty-wall { position: relative; overflow: hidden; }
.q-empty-wall > *:not(.q-wall) { position: relative; z-index: 1; }
.q-wall { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; color: var(--q-strong); }
.q-wall-big { opacity: .055; }
/* ANA SAYFA (2026-10-24, Bulut rötuş 3 — İKİNCİ TUR, Fatih: "anasayfayı beğenmedim daha güzelini düşün" + sağ sütun boş
   kalmıştı). Üstte GÜNÜN SAATİNE göre gökyüzü bandı (data-tod: dawn · day · dusk · night): tanıtım sayfasının onaylı bulut
   çizimi, bulutun üstünde canlı salyangoz, arkasında güneş/ay, gece yıldızlar; tarih + selam + özet hapları. Altında üç bölüm:
   karolar (Kaldığın yerden), kapaklı topluluk kartları, takvim yapraklı etkinlik kartları. "Şu an aktif" sağ sütunda; telefonda
   o sütun yok → ortadaki kopyası (.q-hnow) yalnız dar ekranda görünür. Gök, iki temada da aynı resimdir (gece temasında hafif
   kısılır); kartlar tema yüzeyinden (--q-surface-3) türer. */
.q-home { flex: 1 1 auto; min-height: 0; display: block; --hc-bg: var(--q-surface-3); }
.q-home.q-empty-wall { overflow-y: auto; }
.q-home-in { max-width: 1060px; margin: 0 auto; padding: 24px 28px 44px; display: grid; gap: 26px; }

/* — gökyüzü bandı — */
.q-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 184px; padding: 28px 32px; border-radius: 28px;
    display: flex; align-items: center; color: #fff; box-shadow: var(--q-shadow); }
.q-hero[data-tod="dawn"]  { --hs-grad: linear-gradient(118deg, #2A63CF 0%, #5B98EC 40%, #F2A3A6 78%, #FFD29E 100%); --hs-orb: #FFE1A1; --hs-cl: #FFFFFF; }
.q-hero[data-tod="day"]   { --hs-grad: linear-gradient(118deg, #1A63D3 0%, #3593F2 48%, #86CFFF 100%); --hs-orb: #FFF0B3; --hs-cl: #FFFFFF; }
.q-hero[data-tod="dusk"]  { --hs-grad: linear-gradient(118deg, #3B2D97 0%, #87409D 38%, #DC6189 70%, #FFA36B 100%); --hs-orb: #FFC47E; --hs-cl: #FFE6EE; }
.q-hero[data-tod="night"] { --hs-grad: linear-gradient(118deg, #0A143C 0%, #152A70 55%, #28409E 100%); --hs-orb: #F3EFD2; --hs-cl: #B9C8FF; }
.q-hero-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--hs-grad); pointer-events: none; }
.q-root:not([class*="light"]) .q-hero-sky { filter: brightness(.92) saturate(.95); }
.q-hero-orb { position: absolute; right: 228px; top: 24px; width: 58px; height: 58px; border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #fff 0 16%, var(--hs-orb) 64%);
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--hs-orb) 18%, transparent), 0 0 70px 24px color-mix(in srgb, var(--hs-orb) 40%, transparent); }
.q-hero[data-tod="dawn"] .q-hero-orb { top: auto; bottom: 46px; right: 250px; }
.q-hero[data-tod="dusk"] .q-hero-orb { top: auto; bottom: -30px; right: 236px; width: 108px; height: 108px; }
/* ay: içi boş daire + iç gölge = hilal; dış gölge yumuşak hale */
.q-hero[data-tod="night"] .q-hero-orb { width: 46px; height: 46px; right: 238px; top: 26px; background: none;
    box-shadow: inset 13px -6px 0 0 var(--hs-orb), 0 0 34px 2px color-mix(in srgb, var(--hs-orb) 22%, transparent); }
.q-hero .q-twinkles { z-index: 0; }
.q-hero .q-tw { color: #fff; opacity: .6; }
.q-hero-cl { position: absolute; color: var(--hs-cl); }
.q-hero-cl svg { display: block; width: 100%; height: auto; }
.q-hero-cl.a { right: -40px; bottom: -42px; width: 330px; opacity: .97; filter: drop-shadow(0 10px 26px rgba(16, 46, 120, .2)); }
.q-hero-cl.b { right: 282px; bottom: -44px; width: 240px; opacity: .42; }
.q-hero-cl.c { right: 132px; top: 20px; width: 92px; opacity: .5; }
.q-hero[data-tod="night"] .q-hero-cl { opacity: .14; }
.q-hero[data-tod="night"] .q-hero-cl.a { opacity: .26; filter: none; }
.q-hero-cl.b, .q-hero-cl.c { animation: q-hcl-drift 11s ease-in-out 2 alternate; }
@keyframes q-hcl-drift { to { transform: translateX(-16px); } }
.q-hero-snail { position: absolute; right: 80px; bottom: 30px; z-index: 1; width: 116px; filter: drop-shadow(0 12px 18px rgba(8, 34, 100, .3)); }
.q-hero-snail .gsnail { display: block; width: 100%; height: auto; }
.q-hero-txt { position: relative; z-index: 2; min-width: 0; max-width: min(560px, 60%); display: grid; gap: 8px; animation: q-hero-in .5s var(--q-ease, ease) both; }
@keyframes q-hero-in { from { opacity: 0; transform: translateY(6px); } }
.q-hero-date { font: 800 11.5px/1.2 'Goglis Sans', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .88; }
.q-hero h2 { margin: 0; font: 600 34px/1.08 var(--q-display); color: #fff; text-wrap: balance; text-shadow: 0 2px 14px rgba(5, 20, 70, .28); }
.q-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.q-hero-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; white-space: nowrap;
    background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; color: #fff; }
.q-hero-pill .mud-icon-root { font-size: 15px; }
.q-hero-pill.miss { background: #fff; border-color: #fff; color: #D33D74; }
.q-hero-pill.on > i { width: 8px; height: 8px; border-radius: 50%; background: #5BEAAE; box-shadow: 0 0 0 3px rgba(91, 234, 174, .28); }

/* — bölümler — */
.q-hsec { display: grid; gap: 12px; min-width: 0; }
.q-hsec-h { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; }
.q-hsec-h h3 { margin: 0; font: 600 19px/1.2 var(--q-display); color: var(--q-strong); }
.q-hsec-n { font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; color: var(--q-faint); }
.q-hsec-empty { padding: 16px 18px; border-radius: 18px; border: 1px dashed var(--q-line-2); color: var(--q-muted); font-size: 13.5px; }
.q-htile, .q-hcom, .q-hev, .q-hcom-cta, .q-hnow { background: var(--hc-bg); border: 1px solid var(--q-line-2); border-radius: 20px; box-shadow: var(--q-elev-1); }
.q-htile, .q-hcom { cursor: pointer; transition: transform .18s var(--q-ease, ease), box-shadow .18s var(--q-ease, ease), border-color .18s; }
.q-htile:hover, .q-hcom:hover { transform: translateY(-2px); box-shadow: var(--q-shadow); border-color: color-mix(in srgb, var(--q-accent) 42%, transparent); }
.q-htile:focus-visible, .q-hcom:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 2px; }

/* — Kaldığın yerden: karolar — */
.q-htiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.q-htile { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px; }
.q-htile-srv { width: 44px; height: 44px; flex: none; border-radius: 14px; object-fit: cover; display: grid; place-items: center; color: #fff;
    font: 800 14px/1 'Goglis Sans', system-ui, sans-serif; }
.q-htile-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.q-htile-t b { font-size: 14.5px; font-weight: 800; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-htile-t small { font-size: 12.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-htile.miss { background: linear-gradient(120deg, color-mix(in srgb, var(--q-pink) 16%, var(--hc-bg)), var(--hc-bg) 72%);
    border-color: color-mix(in srgb, var(--q-pink) 40%, transparent); }
.q-htile.miss .q-htile-t small { color: color-mix(in srgb, var(--q-pink) 72%, var(--q-strong)); font-weight: 700; }
.q-home-n { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--q-pink, #FF84AE); color: #fff;
    font: 800 11.5px/22px 'Goglis Sans', system-ui, sans-serif; text-align: center; }
.q-home-b { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
    background: var(--q-chip-on); color: var(--q-accent-ink); font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.q-home-b .mud-icon-root { font-size: 15px; }
.q-home-call { flex: none; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--q-online); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--q-online) 38%, transparent); }
.q-home-call .mud-icon-root { font-size: 18px; }
.q-home-call:hover { filter: brightness(1.08); }
.q-home-b.on { background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); }

/* — Toplulukların: kapaklı kartlar (kapak yoksa topluluk renginden gök — profil kartıyla aynı SkyCover) — */
.q-hcoms { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.q-hcom { position: relative; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.q-hcom-ban { position: relative; display: block; height: 78px; flex: none; overflow: hidden; background-size: cover; background-position: center; }
.q-hcom-n { position: absolute; top: 10px; right: 10px; z-index: 1; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--q-pink, #FF84AE);
    color: #fff; font: 800 11.5px/22px 'Goglis Sans', system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.q-hcom-ic { position: absolute; left: 14px; top: 52px; z-index: 1; width: 52px; height: 52px; border-radius: 16px; object-fit: cover;
    display: grid; place-items: center; color: #fff; font: 800 17px/1 'Goglis Sans', system-ui, sans-serif; box-shadow: 0 0 0 4px var(--hc-bg); }
.q-hcom-b { flex: 1; min-width: 0; display: grid; align-content: start; gap: 4px; padding: 34px 14px 14px; }
.q-hcom-name { font: 600 16.5px/1.2 var(--q-display); color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-hcom-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--q-muted); }
.q-hcom-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-hcom-meta > i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--q-online); }
.q-hcom-meta > i.off { background: var(--q-faint); opacity: .6; }
/* MudBlazor'ın genel button sıfırlaması içeriği ORTALAR (tuzak #24) → justify-content: flex-start şart */
.q-hcom-voice { margin-top: 8px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; width: 100%; min-width: 0; height: 34px;
    padding: 0 5px 0 10px; border: 0; border-radius: 12px; text-align: left; cursor: pointer;
    background: color-mix(in srgb, var(--q-online) 14%, transparent); color: color-mix(in srgb, var(--q-online) 78%, var(--q-strong));
    font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; }
.q-hcom-voice .mud-icon-root { font-size: 16px; flex: none; }
.q-hcom-voice > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-hcom-voice > i { flex: none; display: inline-flex; align-items: center; gap: 1px; font-style: normal; opacity: .85; }
.q-hcom-voice > i .mud-icon-root { font-size: 14px; }
.q-hcom-voice > em { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px; font-style: normal;
    background: var(--q-online); color: #fff; }
.q-hcom-voice:hover > em { filter: brightness(1.08); }
.q-hcom-voice.mine > em { background: transparent; color: inherit; padding: 0 6px; }
.q-hcom-add { min-width: 0; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px;
    border: 1.5px dashed var(--q-line-2); border-radius: 20px; background: transparent; color: var(--q-muted); cursor: pointer; text-align: center;
    transition: border-color .18s, background .18s, color .18s; }
.q-hcom-add:hover { border-color: color-mix(in srgb, var(--q-accent) 55%, transparent); background: color-mix(in srgb, var(--q-accent) 6%, transparent); color: var(--q-strong); }
.q-hcom-add-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-hcom-add-ic .mud-icon-root { font-size: 24px; }
.q-hcom-add b { font: 600 15px/1.2 var(--q-display); color: var(--q-strong); }
.q-hcom-add small { font-size: 12px; line-height: 1.35; max-width: 180px; }
.q-hcom-cta { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; }
.q-hcom-cta-ic { width: 48px; height: 48px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-hcom-cta-ic .mud-icon-root { font-size: 24px; }

/* — Yaklaşan: takvim yapraklı kartlar — */
.q-hevs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.q-hev { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; }
.q-hev-cal { width: 50px; flex: none; border-radius: 14px; overflow: hidden; display: grid; text-align: center; background: var(--q-chat-bg);
    box-shadow: 0 0 0 1px var(--q-line-2), var(--q-elev-1); }
.q-hev-cal small { display: block; padding: 5px 2px 4px; background: var(--q-btn-grad); color: #fff; font: 800 10px/1 'Goglis Sans', system-ui, sans-serif;
    letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.q-hev-cal b { display: block; padding: 6px 0 7px; font: 600 22px/1 var(--q-display); color: var(--q-strong); }
.q-hev-when { color: color-mix(in srgb, var(--q-accent) 78%, var(--q-strong)); font-weight: 800; }

/* — Şu an aktif: yalnız dar ekranda (geniş ekranda sağ sütunda) — */
.q-hnow { display: none; padding: 4px 2px; }

/* — Yenilikler hapı (2026-10-25): gökyüzü bandında, okunmamış sürüm notu varken; beyaz rozet + başlık + ok — */
.q-hero-new { justify-self: start; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; max-width: 100%; min-width: 0;
    height: 32px; padding: 0 10px 0 4px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; cursor: pointer; text-align: left;
    font: 700 12.5px/1 'Goglis Sans', system-ui, sans-serif; transition: background .16s; }
.q-hero-new:hover { background: rgba(255, 255, 255, .27); }
.q-hero-new:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.q-hero-new > b { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px;
    background: #fff; color: #1D63CF; font-weight: 800; }
.q-hero-new > b .mud-icon-root { font-size: 14px; }
.q-hero-new > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-hero-new > .mud-icon-root { flex: none; font-size: 16px; }

/* — Altbilgi (2026-10-25): karşılamadaki satırın sessiz ikizi; sürüm notları düğme, yasal sayfalar bağlantı — */
.q-home-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; padding: 4px 4px 0;
    font-size: 12px; color: var(--q-muted); }
.q-home-foot i { font-style: normal; color: var(--q-faint); }
.q-home-foot a, .q-home-foot button { padding: 0; border: 0; background: none; color: var(--q-muted); font: inherit; cursor: pointer; text-decoration: none; }
.q-home-foot a:hover, .q-home-foot button:hover { color: var(--q-accent); text-decoration: underline; }

@media (max-width: 900px) {
    .q-home-in { padding: 18px 16px 32px; gap: 22px; }
    .q-hero { padding: 24px; }
    .q-hero-txt { max-width: 62%; }
}
@media (max-width: 700px), (max-height: 520px) {
    .q-home-in { padding: 14px 12px 28px; gap: 20px; }
    /* telefonda salyangoz + bulutu SAĞ ÜSTTE: haplar alt satırda tam genişliğe yayılabilsin */
    .q-hero { min-height: 0; padding: 18px 16px 16px; border-radius: 24px; align-items: flex-start; }
    /* flex: 1 ŞART — esnek satırda sütun içeriği kadar kalıyordu (278 px) ve hap da onun yüzdesini alıp kesiliyordu */
    .q-hero-txt { flex: 1 1 auto; max-width: 100%; gap: 6px; }
    .q-hero-date, .q-hero h2 { padding-right: 92px; }
    .q-hero h2 { font-size: 25px; }
    .q-hero-pills { margin-top: 16px; gap: 6px; }
    .q-hero-pill { height: 28px; padding: 0 10px; font-size: 12px; }
    .q-hero-snail { width: 62px; right: 18px; top: 8px; bottom: auto; }
    .q-hero-cl.a { width: 112px; right: -12px; top: 40px; bottom: auto; }
    .q-hero-cl.b { width: 150px; right: auto; left: -40px; bottom: -36px; }
    .q-hero-cl.c { display: none; }
    .q-hero-orb, .q-hero[data-tod] .q-hero-orb { right: 104px; top: 14px; bottom: auto; width: 34px; height: 34px; }
    .q-hero[data-tod="night"] .q-hero-orb { box-shadow: inset 10px -5px 0 0 var(--hs-orb), 0 0 26px 2px color-mix(in srgb, var(--hs-orb) 22%, transparent); }
    .q-htiles, .q-hevs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .q-hcoms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .q-hcom-ban { height: 62px; }
    .q-hcom-ic { top: 38px; left: 12px; width: 44px; height: 44px; border-radius: 14px; font-size: 15px; }
    .q-hcom-b { padding: 28px 12px 12px; }
    .q-hcom-voice { padding: 0 4px 0 8px; gap: 5px; }
    .q-hcom-add { min-height: 140px; }
    .q-hero-new { max-width: calc(100% - 88px); height: 30px; }   /* sağda salyangoz + bulut: hap onların solunda biter */
    .q-hnow { display: block; }
}
@media (prefers-reduced-motion: reduce) { .q-hero-txt, .q-hero-cl { animation: none !important; } .q-htile, .q-hcom { transition: none; } }
html.q-instant .q-hero-txt, html.q-instant .q-hero-cl { animation: none !important; }
.q-wall-small { opacity: .085; }
/* Açık temalarda aynı opaklık daha soluk kalıyor (koyu yazı, açık zemin) — bir tık artır. */
.q-root[class*="light"] .q-wall-big { opacity: .07; }
.q-root[class*="light"] .q-wall-small { opacity: .1; }
/* Duvar kağıtlı temalarda (cyberpunk/steampunk/meyve) desen üstüne desen olmasın. */
.q-root[style*="--q-wallpaper"] .q-wall { display: none; }
@media (max-width: 700px) { .q-wall-small { display: none; } }
.q-welcome-badge { width: 124px; height: 124px; border-radius: 34px; background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 14px 44px rgba(89,131,177,0.45); margin-bottom: 8px; }
.q-empty-hints { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* #2 (2026-07-26 düzeltme): SAĞ panel (kanallar kolonu) ev modunda boşken kendi profil kartın —
   "Bir sunucu seç" yerine. Dikey kaydırmalı zarf + ince kart kabuğu (kabuk YALNIZ bu bağlamda:
   .q-selfcard-wrap .q-pcard2 → popover/dialog .q-pcard2'sine dokunmaz).
   2026-07-26 (Fatih): DM yan panelindeki (.q-peer) gibi DÜZ görünsün — kutucuk-üstüne-kutucuk
   ("arka arkaya border") profesyonel durmuyordu. Banner tam yayılır, bölümler kutusuz/düz,
   kart hafif iç boşluklu (margin) + panel arka planı; sığmazsa zarf zaten kaydırır. */
.q-selfcard-wrap { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0; }

/* PROFİL KARTI — A DÜZENİ (2026-07-31): kısa bilgiler ikişerli ızgarada.
   Sadece BU sarmalayıcının çocukları eşleşir; seviye çubukları/listeler ızgaranın dışında
   kaldığı için tam satır olmaya devam eder. Dar kartta (mobil/popover) tek sütuna düşer —
   iki sütun 150px'in altında okunmaz hâle geliyordu. */
/* (2026-10-24) Sabit iki sütun yerine AUTO-FILL, EN FAZLA İKİ sütun (`max(200px, %50)` asgarisi): karo 200 px'ten
   daralmaz — telefonda (370 px) iki sütunda etiket iki satıra sarıyor, tarih "24 Ağustos 2…" diye kesiliyordu;
   artık orada kendiliğinden teke düşer, ayrı bir 400 px kuralı gerekmez. Tavan iki sütun, çünkü tek kalan son
   karo aşağıda tam satıra yayılıyor — üç sütunda bu kural ilk satırda boş hücre bırakırdı. */
.q-pcard2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(200px, calc(50% - 5px)), 1fr)); gap: 10px; margin-top: 10px; }
.q-pcard2-grid > .q-pcfact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.q-pcard2-grid > .q-pcard2-section { margin-top: 0; min-width: 0; }
.q-pcard2-grid > .q-pcard2-section .q-pcard2-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==== "ŞU AN AKTİF" panosu (2026-07-31) — ev ekranının sağ sütunu ====
   Satırlar KART DEĞİL, liste: kutucuk-üstüne-kutucuk yığını sütunu ağırlaştırıyordu. Zemin yalnız
   hover'da beliriyor (Discord/Slack yan-liste deseni). Seste olan satır solda ince aksan şeridiyle
   ayrılıyor — o satır tıklanabilir bir EYLEM barındırıyor, diğerleri sadece bilgi. */
/* #kanal etiketi — @mention ile aynı hap görünümü, farklı ton (kişi mor/aksan, kanal nötr-vurgu).
   Tıklanabilir olduğu imleçten de belli olsun diye pointer. */
/* Yanıt alıntısında minik görsel önizlemesi (satır yüksekliğini bozmayacak boyut). */
/* Alıntı satırı tıklanınca hedefe atlar → tıklanabilir olduğu belli olsun. */
.q-reply-ref.clickable { cursor: pointer; border-radius: 5px; }
.q-reply-ref.clickable:hover { background: var(--q-hover); }
.q-reply-ref.clickable:hover .q-reply-ref-txt { color: var(--q-strong); }
.q-reply-thumb { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; vertical-align: -4px; }
.q-chanref { color: var(--q-accent); background: var(--q-state-primary, rgba(127,119,221,.14)); border-radius: 4px; padding: 0 3px; cursor: pointer; font-weight: 500; }
.q-chanref:hover { background: var(--q-accent); color: #fff; }

/* MİNİ PROFİL KARTI — @etiketin üzerine gelince. Tam kartın (q-pp) küçük kardeşi: yalnız kimlik
   + o anki durum; ayrıntı için tıklanır. Üst katmana alınmaz (popover) çünkü fare takibi
   gerekiyor ve mesaj listesi artık yığın bağlamı yaratmıyor. */
.q-minipp { position: fixed; z-index: 1250; width: 232px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 12px; padding: 11px 12px; box-shadow: var(--q-elev-3); animation: q-menu-in .06s var(--q-ease); }   /* yarıya indirildi */
.q-minipp-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.q-minipp-name { font-size: 14px; font-weight: 600; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-minipp-sub { font-size: 11.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-minipp-act { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--q-online); margin-top: 8px; }
.q-minipp-status { font-size: 12px; color: var(--q-text); margin-top: 8px; overflow-wrap: break-word; }
.q-minipp-hint { font-size: 11px; color: var(--q-faint); margin-top: 9px; border-top: 1px solid var(--q-divider); padding-top: 7px; }
.q-active { padding: 10px 8px 14px; }
.q-active-h { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--q-faint); padding: 2px 6px 8px; }
.q-active-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--q-input-bg); color: var(--q-muted); font-size: 11px; font-weight: 600; letter-spacing: 0; }
.q-active-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; transition: background var(--q-dur) var(--q-ease); }
.q-active-row:hover { background: var(--q-hover); }
.q-active-row.voice { box-shadow: inset 2px 0 0 var(--q-accent); }
.q-active-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-active-name { font-size: 13.5px; font-weight: 500; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-active-sub { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--q-muted); min-width: 0; }
.q-active-sub.game { color: var(--q-online); }
.q-active-sub.voice { color: var(--q-accent); }
.q-active-subtxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-active-join { flex: none; border: 1px solid var(--q-divider); background: var(--q-input-bg); color: var(--q-strong); font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 14px; cursor: pointer; }
.q-active-join:hover { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.q-active-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 18px; opacity: .85; }
.q-active-empty-t { font-size: 14px; font-weight: 500; color: var(--q-strong); }
.q-active-empty-d { font-size: 12.5px; color: var(--q-muted); line-height: 1.65; }
/* (2026-07-31) .q-selfcard-flat kuralları SİLİNDİ: o sınıfı basan tek yer ev sütunundaki öz-profil
   kartıydı, artık orada "Şu an aktif" panosu var. 320px genişlik kuralı da kalktı — liste dar
   sütunda zaten rahat okunuyor (kart bölümleri geniş sütun istiyordu, satırlar istemiyor). */
/* Hoş geldin alt linkleri: Gizlilik · Çocuk Güvenliği · Sürüm Notları (tema takipli) */
.q-welcome-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 12.5px; }
.q-welcome-links a { color: var(--q-muted); cursor: pointer; text-decoration: none; }
.q-welcome-links a:hover { color: var(--q-accent); text-decoration: underline; }
.q-welcome-links span { color: var(--q-faint); }
/* #13: hoş geldin ipucu satırları hover'da "kütük gibi" zıplıyordu — transition YOKTU. Yumuşak geçiş + hafif zemin. */
.q-empty-hint { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--q-strong); background: var(--q-side-bg); padding: 9px 15px; border-radius: 11px; transition: box-shadow var(--q-dur) var(--q-ease), transform var(--q-dur) var(--q-ease), background var(--q-dur) var(--q-ease); }

/* ---- server tab caret (sunucu menüsü sekmede) + channel delete ---- */
.q-tab-caret { display: inline-flex; align-items: center; margin-left: -2px; color: var(--q-muted); border-radius: 5px; }
.q-tab-caret:hover { color: var(--q-strong); background: var(--q-hover); }
.q-iconupload { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--q-divider); border-radius: 9px; font-size: 13px; color: var(--q-text); cursor: pointer; }
/* kategori ikonu (12×12) — başlıkta adın solunda */
.q-cat-ico { width: 12px; height: 12px; border-radius: 3px; object-fit: cover; flex: none; }
.q-iconupload:hover { background: var(--q-hover); }
.q-cathdr { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--q-faint); margin: 14px 6px 4px; font-weight: 600; text-transform: uppercase; cursor: pointer; user-select: none; }
.q-cathdr:hover { color: var(--q-muted); }
.q-chrow .q-chdel { opacity: 0; color: var(--q-muted); }
.q-chrow:hover .q-chdel { opacity: 0.65; }
.q-chrow .q-chdel:hover { opacity: 1; color: var(--q-danger); }

/* ---- admin ---- */
/* #2: tamamen tam ekran overlay (app kabuğunu kaplar; X → "/"). Tema korunur (.q-root içinde). */
.q-admin { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; padding: 32px 40px; background: var(--q-ambient); }
/* #1: sekmeli panel varyantı — .q-settings (sol nav + gövde) tüm sayfayı kaplar */
.q-admin.tabbed { padding: 0; overflow: hidden; }
.q-admin.tabbed .q-settings { height: 100%; }
/* POPUP MODU (2026-07-30, kullanıcı isteği: "yönetim panelinde de popupa küçült/büyült olsun").
   Panel routed bir SAYFA (position:fixed inset:0) olduğundan diyalog gibi MudBlazor seçeneğiyle
   değil, kabın kendi inset'iyle küçülür. Kabukta üstten pay şerit yüksekliği kadar artar. */
.q-admin.popup {
    inset: 28px clamp(16px, 5vw, 90px);
    border-radius: 16px; border: 1px solid var(--q-divider);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3);
    overflow: hidden;
}
html.q-wco .q-admin.popup { inset: calc(var(--q-wco-h, 52px) + 10px) clamp(16px, 5vw, 90px) 28px; }
/* Popup modunda arkayı karart — MudBlazor'ın diyalog overlay'iyle aynı koyuluk (kullanıcı isteği:
   "ayarlarda kararıyor, panelde kararmıyor"). Panelin z-index'i 1000 → perde bir altında. */
/* DOSYA BIRAKMA GÖSTERGESİ (2026-07-30) — sürüklenen dosya sohbetin üstündeyken kesikli çerçeve.
   Doküman düzeyinde `html.q-dropping` sınıfıyla; sohbet alanı görsel hedefi işaret eder.
   pointer-events: none ŞART — perde `drop` olayını yutarsa dosya hiç düşmez. */
html.q-dropping .q-center::after {
    content: ""; position: absolute; inset: 8px; z-index: 40; pointer-events: none;
    border: 2px dashed var(--q-accent); border-radius: 14px;
    background: color-mix(in srgb, var(--q-accent) 8%, transparent);
}
html.q-dropping .q-center { position: relative; }

/* ALT BAŞLIKLAR (2026-07-30) — Discord ayarlar deseni: kategori altında girintili, ince sol raylı
   liste; tıklanınca içerik o bölüme kayar. Aktif olan aksan rengiyle işaretlenir. */
.q-settings-subs { display: flex; flex-direction: column; margin: 2px 0 6px 30px; border-left: 1px solid var(--q-divider); }
.q-settings-subitem {
    padding: 5px 10px; font-size: 13px; color: var(--q-muted); cursor: pointer;
    border-left: 2px solid transparent; margin-left: -1px; border-radius: 0 6px 6px 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.q-settings-subitem:hover { color: var(--q-strong); background: var(--q-hover); }
.q-settings-subitem.on { color: var(--q-accent); border-left-color: var(--q-accent); font-weight: 500; }
/* Çapa: yüksekliksiz işaret (akışı bozmaz). Yapışkan başlık altında kalmasın diye kaydırma
   hesabı JS'te yapılır — burada scroll-margin ile ikinci bir güvence. */
.q-settings-sec { height: 0; scroll-margin-top: 16px; }
.q-settings-anch { scroll-margin-top: 16px; }
/* Bölüm ara başlığı (Discord'daki "Şifre ve Güvenlik" gibi) */
.q-settings-h3 {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--q-muted); margin: 26px 0 10px; padding-top: 14px; border-top: 1px solid var(--q-divider);
}
/* Kullanıcı satırında e-posta doğrulama durumu (2026-07-30) — e-postanın hemen sağında. */
.q-adm-vic { font-size: 13px !important; vertical-align: -2px; margin-left: 4px; flex: none; }
.q-adm-vic.ok { color: var(--q-online); }
.q-adm-vic.no { color: var(--q-amber); }
.q-adm-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,.55); animation: q-adm-scrim-in .2s ease both; }
@keyframes q-adm-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .q-adm-scrim { animation: none; } }
/* TAM pencere modunda ✕ ve ⛶ native pencere kontrollerinin altında kalıyordu (panel hiç
   kapatılamıyordu) → onların soluna kaydır. Popup modunda kart zaten şeridin altında. */
html.q-wco .q-admin:not(.popup) .q-settings-close { right: calc(var(--q-wco-r, 148px) + 12px); top: 8px; }
html.q-wco .q-admin:not(.popup) .q-settings-expand { right: calc(var(--q-wco-r, 148px) + 56px); top: 8px; }
/* Mobilde popup modu anlamsız (ekran zaten kart kadar) — düğme gizli, kap tam ekran. */
@media (max-width: 560px) {
    .q-admin.popup { inset: 0; border-radius: 0; border: none; }
    .q-admin .q-settings-expand { display: none !important; }
}
.q-admin-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.q-stat { background: var(--q-side-bg); border-radius: 10px; padding: 12px 14px; }
.q-stat-label { font-size: 12px; color: var(--q-muted); }
.q-stat-val { font-size: 24px; font-weight: 500; color: var(--q-strong); }
/* #3: gelen arama kartı — EKRAN ORTASINDA (üstten %18), zil sesiyle birlikte titreşir (#6) */
.q-callring { position: fixed; top: 18%; left: 50%; z-index: 1400; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--q-panel-bg); border: 0.5px solid var(--q-divider); border-radius: 16px; box-shadow: var(--q-elev-4, 0 14px 38px rgba(0,0,0,0.42)); animation: q-ring-shake 2s ease-in-out infinite; }
.q-callring-av { width: 52px; height: 52px; font-size: 18px; flex: none; }
.q-callring-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 240px; }
.q-callring-txt b { font-size: 15px; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-callring-txt span { font-size: 12.5px; color: var(--q-muted); }
.q-callring-btn { width: 44px; height: 44px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; flex: none; }
.q-callring-btn.ok { background: var(--q-online); }
.q-callring-btn.no { background: var(--q-danger); }
.q-callring-btn:hover { filter: brightness(1.1); }
@keyframes q-ring-shake { 0%, 86%, 100% { transform: translateX(-50%) rotate(0); } 88% { transform: translateX(-50%) rotate(-1.2deg); } 92% { transform: translateX(-50%) rotate(1.2deg); } 96% { transform: translateX(-50%) rotate(-0.8deg); } }

/* #1: profil kartı aksiyon butonları tek satır kalsın (dar popover'da 'ARKADAŞ EKLE' sarıp devleşiyordu) */
/* #15: profil kartı eylem satırı — mesaj metinli genişleyen, diğerleri sabit kare ikon */
.q-pcard2-actions .mud-button-root { white-space: nowrap; }
.q-pca-icon { flex: none; width: 40px; height: 40px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg); color: var(--q-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.q-pca-icon:hover:not(:disabled) { color: var(--q-strong); background: var(--q-hover); }
.q-pca-icon:disabled { opacity: 0.4; cursor: not-allowed; }
/* Birincil eylem (Mesaj) — aynı ikon kutusu, vurgulu renk. */
.q-pca-icon.primary { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.q-pca-icon.primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--q-accent); color: #fff; }

/* #10: kapasite dolu — bekleme sırası tam ekran kapağı (bilinçli koyu, preload ailesi) */
.q-capqueue { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #101116; color: #e6e6ea; text-align: center; padding: 24px; }
.q-capqueue-title { font-size: 22px; font-weight: 700; margin-top: 8px; }
.q-capqueue-hint { font-size: 13px; color: #9a9aa3; max-width: 340px; }

/* #8: Steam ile giriş butonu — Steam'in koyu laciverti */
.q-login-btn.steam { background: #171a21; color: #e6eaf0; margin-top: 10px; border: 1px solid rgba(255,255,255,0.12); }
.q-login-btn.steam:hover { background: #232734; }
/* Gizlilik politikası (/privacy) — girişsiz, sabit koyu tema (dış portallar bot ile bakar).
   GOTCHA: uygulama body'si overflow:hidden — tam-sayfa statik sayfa KENDİ scroll konteynerini getirir.
   Flex+overflow alt padding'i yutuyordu → blok konteyner + kartta margin:auto kalıbı. */
/* HUKUKİ/GİRİŞSİZ SAYFALAR (/privacy, /child-safety, /download, /error).
   TEMA DEĞİŞKENLERİNE ÇEVRİLDİ (2026-07-30, kullanıcı isteği: "eski temada kalmış"): eskiden
   sabit renkler yazıyordu (#131417/#1b1c20) ve accent'i ESKİ KAHVE MARKAYDI (#A9744C/#C08A5C) —
   uygulama neon/ocean markaya geçtiğinde bu sayfalar geride kalmıştı. Sayfalar theme-ocean
   sınıfını taşır (auth ekranlarıyla aynı desen: EmptyLayout + theme-ocean, SABİT RENK YAZMA);
   böylece marka bir daha değişirse burası kendiliğinden takip eder. */
.q-legal { height: 100vh; height: 100dvh; overflow-y: auto; background: var(--q-chat-bg); color: var(--q-text); padding: 40px 16px; font-size: 14.5px; line-height: 1.65; scrollbar-width: thin; scrollbar-color: var(--q-scroll, rgba(255,255,255,0.16)) transparent; }
.q-legal::-webkit-scrollbar { width: 8px; }
.q-legal::-webkit-scrollbar-track { background: transparent; }
.q-legal::-webkit-scrollbar-thumb { background: var(--q-scroll, rgba(255,255,255,0.14)); border-radius: 8px; }
.q-legal::-webkit-scrollbar-thumb:hover { background: var(--q-scroll-hover, rgba(255,255,255,0.24)); }
.q-legal-card { max-width: 760px; margin: 0 auto 48px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 14px; padding: 36px 40px 28px; }
.q-legal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.q-legal-brand { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--q-accent); }
.q-legal h1 { font-size: 26px; font-weight: 700; color: var(--q-strong); margin: 2px 0 0; }
.q-legal h2 { font-size: 17px; font-weight: 600; color: var(--q-strong); margin: 26px 0 8px; }
.q-legal-date { font-size: 12px; color: var(--q-muted); margin: 6px 0 18px; }
.q-legal p { margin: 8px 0; }
.q-legal ul { margin: 8px 0; padding-left: 22px; }
.q-legal li { margin: 6px 0; }
.q-legal a { color: var(--q-link, var(--q-accent)); text-decoration: none; }
.q-legal a:hover { text-decoration: underline; }
.q-legal-back { display: inline-block; margin-top: 26px; font-size: 13px; }
/* #1: gizlilik sayfası TR/EN geçişi — varsayılan EN; .tr class'ı Türkçe içeriği gösterir.
   Başlıktaki <span>'lar inline, gövde blokları block olarak açılır. */
.q-legal-lang { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 10px; }
.q-legal-lbtn { font: inherit; font-size: 12px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--q-divider); background: transparent; color: var(--q-muted); cursor: pointer; }
.q-legal-lbtn:hover { color: var(--q-text); border-color: var(--q-border, var(--q-divider)); }
.q-legal-lbtn.on { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.q-legal .lang-tr, .q-legal .lang-de, .q-legal .lang-ru, .q-legal .lang-fa { display: none; }
.q-legal.tr div.lang-tr { display: block; }
.q-legal.tr h1 .lang-tr { display: inline; }
.q-legal.tr span.lang-tr { display: inline; } /* /download gibi span tabanlı ikili metinler */
.q-legal.tr .lang-en { display: none; }
/* Almanca (yalnız data-langs'ında de olan sayfalar — /download) */
.q-legal.de div.lang-de { display: block; }
.q-legal.de h1 .lang-de { display: inline; }
.q-legal.de span.lang-de { display: inline; }
.q-legal.de .lang-en { display: none; }
/* Rusça / Farsça (2026-09-11) — yalnız data-langs'ında olan sayfalar; hukuki sayfalarda goglisLegal
   seçimi İngilizceye kıstırır, bu kurallar orada hiç devreye girmez. */
.q-legal.ru div.lang-ru, .q-legal.fa div.lang-fa { display: block; }
.q-legal.ru h1 .lang-ru, .q-legal.fa h1 .lang-fa { display: inline; }
.q-legal.ru span.lang-ru, .q-legal.fa span.lang-fa { display: inline; }
.q-legal.ru .lang-en, .q-legal.fa .lang-en { display: none; }

/* Epic logosu beyaz "knockout" — açık temalarda görünmez olur → invert (beyaz→koyu, şeffaflık korunur).
   Login/privacy sabit koyu ve tema class'sız olduğundan etkilenmez. MudDialog'lar .q-root DIŞINDA
   portal'da yaşar → body'deki tema yansıması (goglisTheme #9) üzerinden de eşleşmeli, yoksa
   sağ-tık profil popup'ında light modda beyaz kalırdı. */
.q-root[class*="light"] .q-brand-epic,
body[class*="light"] .q-brand-epic { filter: invert(1); }

/* BETA rozeti — marka adının sağ üstüne biner (üst şerit + login başlığı). */
.q-beta { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid color-mix(in srgb, var(--q-accent) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--q-accent) 14%, transparent); color: var(--q-accent); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; line-height: 1.5; vertical-align: super; text-transform: uppercase; }
/* iOS UYGULAMASINDA BETA YOK (2026-09-29, App Review 2.2 "ön sürüm gibi görünüyor"): sınıfı App.razor'daki
   ilk-boyama betiği yalnız bizim iOS kabuğunda basar, yani etiket orada HİÇ çizilmez (yanıp sönmez).
   "Beta üyesi" rozeti de aynı gerekçeyle: emojinin kendisi bir şey söylemese de ipucu "Beta" diyor. */
html.q-iosapp .q-beta, html.q-iosapp .q-badge[data-rozet="badge.beta"] { display: none !important; }

/* OAuth platform girişleri (yalnız ClientId/Secret yapılandırılmışsa render edilir) — marka tonları. */
.q-login-btn.ext { margin-top: 10px; border: 1px solid rgba(255,255,255,0.12); }
.q-login-btn.epic { background: #2a2a2a; color: #f3f3f3; }
.q-login-btn.epic:hover { background: #3a3a3a; }
.q-login-btn.battlenet { background: #0e5aa7; color: #eaf3fc; }
.q-login-btn.battlenet:hover { background: #1268c3; }
.q-login-btn.riot { background: #d13639; color: #fff2f2; }
.q-login-btn.riot:hover { background: #e04a4d; }

/* #6: ekran paylaşan katılımcının kırmızı YAYINDA rozeti (kanal listesi ses satırı) */
.q-live-badge { flex: none; background: var(--q-danger); color: #fff; font-size: 8.5px; font-weight: 800; letter-spacing: .5px; padding: 1px 5px; border-radius: 4px; line-height: 1.6; border: 0; font-family: inherit; }
/* #0: kamerası açık — mavi VİDEODA rozeti */
.q-live-badge.video { background: #3b7fc4; }
/* #1 (2026-08-07): rozetin yanındaki KATIL/AYRIL hap butonu — yayına katılmalı izleme */
.q-live-join { flex: none; border: 1px solid var(--q-accent); background: transparent; color: var(--q-accent); border-radius: 999px; font-size: 8.5px; font-weight: 800; letter-spacing: .4px; padding: 1px 6px; line-height: 1.6; cursor: pointer; font-family: inherit; }
.q-live-join:hover { background: var(--q-accent); color: #fff; }
/* C4: geçici oda ⏳ rozeti (kanal adının yanında; boşalınca kapanır anlamı) */
.q-temp-badge { flex: none; font-size: 11px; opacity: .7; line-height: 1; }
/* #2: yavaş mod rozeti (chathead) — kanalın hız sınırı herkese görünür */
.q-slow-badge { flex: none; background: color-mix(in srgb, var(--q-accent) 16%, transparent); color: var(--q-accent); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; line-height: 1.4; white-space: nowrap; }

/* Dock video kalite seçici (metin butonu) */
.q-vctl.q-vq { font-size: 10.5px; font-weight: 800; letter-spacing: .3px; width: auto; min-width: 42px; padding: 0 8px; }

/* Admin → Kapasite sekmesi */
.q-cap-cl { font-size: 12px; color: var(--q-muted); margin-bottom: 4px; }
.q-cap-srv { border: 1px solid var(--q-divider); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.q-cap-srv-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.q-cap-use { justify-content: flex-end !important; min-width: 180px; font-size: 12px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
.q-cap-bar { width: 100%; height: 6px; background: var(--q-divider); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.q-cap-bar > div { height: 100%; background: var(--q-accent); border-radius: 3px; transition: width .3s; }
.q-cap-live { border: 1px solid var(--q-divider); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; }
.q-cap-live-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; }
.q-cap-tags { display: flex; gap: 12px; font-size: 12px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
.q-cap-spark { width: 100%; height: 44px; display: block; opacity: .9; }
/* #3 (2026-07-20): Genel Bakış tarihsel grafikler — zaman ekseni etiketli büyük çizim. */
.q-hist-chart { width: 100%; height: 120px; display: block; opacity: .95; touch-action: manipulation; }
.q-hist-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--q-faint); padding-top: 3px; }
/* #1 (2026-07-21): dokunma/hover baloncuğu + aralık butonları + özel tarih satırı. */
/* Tema-uyumlu baloncuk (2026-07-21): sabit koyu zemin light modda sırıtıyordu — --q-input-bg
   iki temada da doğru zemini verir; gölge light'ta hafifletilir. */
.q-hist-tip { position: absolute; top: 34px; transform: translateX(-50%); z-index: 5; pointer-events: none;
    display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 7px 11px; border-radius: 9px;
    background: var(--q-input-bg); border: 1px solid var(--q-divider); box-shadow: 0 4px 14px rgba(0,0,0,.35);
    font-size: 12px; color: var(--q-strong); white-space: nowrap; }
.theme-light .q-hist-tip { box-shadow: 0 4px 14px rgba(0,0,0,.14); }
.q-hist-tip time { font-size: 10.5px; color: var(--q-muted); }
.q-hist-rbtn { padding: 6px 11px; font-size: 12.5px; }
.q-hist-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.q-hist-custom input[type="date"] { background: var(--q-input-bg); color: var(--q-text); border: 1px solid var(--q-divider);
    border-radius: 8px; padding: 6px 9px; font-size: 13px; color-scheme: dark; }
.theme-light .q-hist-custom input[type="date"] { color-scheme: light; }
/* #1: "+ Kategori oluştur" satırı — sönük, hover'da belirginleşir */
.q-cat-add { opacity: 0.55; cursor: pointer; }
.q-cat-add:hover { opacity: 1; color: var(--q-accent); }

/* Duyurular — zilde CİDDİ ton: kırmızı nokta (görülmemiş) + kırmızı şeritli kart */
.q-ann-dot { position: absolute; top: 1px; left: 1px; width: 9px; height: 9px; border-radius: 50%; background: var(--q-danger, #ed4245); border: 2px solid var(--q-side-bg); animation: q-ann-pulse 1.6s ease-in-out infinite; }
@keyframes q-ann-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.7; } }
.q-ann-card { margin: 6px 6px 4px; padding: 8px 10px; border-left: 3px solid var(--q-danger, #ed4245); border-radius: 8px; background: rgba(237, 66, 69, 0.10); }
.q-ann-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; color: var(--q-danger, #ed4245); }
.q-ann-head span { margin-left: auto; font-weight: 500; color: var(--q-muted); }
.q-ann-body { margin-top: 4px; font-size: 12.5px; color: var(--q-strong); }
/* "Okudum" — basınca kart bu cihazda zilden düşer. */
.q-ann-read { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 4px 10px; border: 1px solid var(--q-divider);
    border-radius: 7px; background: var(--q-input-bg); color: var(--q-strong); font-size: 12px; font-weight: 600; cursor: pointer; }
.q-ann-read:hover { border-color: var(--q-accent); color: var(--q-accent); }
/* Duyuru markdown gövdesi (zil kartı + admin listesi): paragraf boşlukları sohbetteki gibi sıkı. */
.q-ann-body p, .q-ann-md p { margin: 0 0 4px; }
.q-ann-body p:last-child, .q-ann-md p:last-child { margin-bottom: 0; }
.q-ann-body code, .q-ann-md code { background: var(--q-input-bg); border-radius: 4px; padding: 1px 4px; font-size: 11.5px; }

/* Mini markdown editörü (duyuru formu): B/I/U/S/kod butonları. */
.q-md-toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.q-md-toolbar button { width: 30px; height: 26px; border: 1px solid var(--q-divider); border-radius: 6px; background: var(--q-input-bg); color: var(--q-strong); font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.q-md-toolbar button:hover { background: var(--q-hover); border-color: var(--q-accent); }

/* Yonetim paneli sunucu/bolge kartlari (medya sekmesi redesign). */
/* ==== YÖNETİM PANELİ — GENEL BAKIŞ + KAPASİTE (2026-10-18 yeniden düzen) ====
   KPI kartları, "dikkat gerektirenler" satırı, ortak ölçekli geçmiş grafikleri, kapasite kartları.
   Renkler tema değişkenlerinden; seri renkleri .s1..s4 (grafik çizgisi, gösterge ve baloncuk aynı sınıfı
   kullanır, böylece bir seri her yerde aynı renkte görünür). .q-ov-* öneki oyun overlay'ine ait — burada .q-dash-*. */
.q-dash-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 22px 0 10px; }
.q-dash-head > b { font-size: 14px; font-weight: 700; color: var(--q-strong); }
.q-dash-hint { font-size: 12px; color: var(--q-muted); }
.q-dash-note { font-size: 12px; color: var(--q-muted); line-height: 1.5; margin: 0 2px 12px; }
.q-dash-live { width: 8px; height: 8px; border-radius: 50%; background: var(--q-online); animation: q-dash-pulse 2s infinite; }
@keyframes q-dash-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--q-online) 55%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .q-dash-live { animation: none; } }

.q-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 10px; }
.q-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 13px 14px 12px;
    border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-side-bg); overflow: hidden; }
.q-kpi-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--q-muted); font-weight: 600; min-width: 0; }
.q-kpi-ico { flex: none; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--q-accent) 15%, transparent); color: var(--q-accent); }
.q-kpi-ico .mud-icon-root { font-size: 16px; }
.q-kpi-ico.ok { background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); }
.q-kpi-val { font-size: 26px; font-weight: 650; color: var(--q-strong); line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 2px; }
.q-kpi-val small { font-size: 13px; font-weight: 500; color: var(--q-muted); margin-left: 2px; }
.q-kpi-sub { font-size: 11.5px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
.q-kpi-sub.bad { color: var(--q-danger-soft); font-weight: 600; }
.q-kpi-spark { width: 100%; height: 30px; display: block; margin-top: 4px; }
.q-kpi-spark .fill { fill: url(#q-spark-g); }
.q-kpi-spark .line { fill: none; stroke: var(--q-accent); stroke-width: 1.8; }
.q-kpi-bar { height: 5px; border-radius: 4px; background: var(--q-divider); overflow: hidden; margin: 3px 0 1px; }
.q-kpi-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--q-online); transition: width .4s; }
.q-kpi-bar.warm > span { background: var(--q-amber); }
.q-kpi-bar.hot > span { background: var(--q-danger); }
.q-kpis.small .q-kpi-val { font-size: 21px; }
.q-kpi-link { cursor: pointer; }
.q-kpi-link:hover { border-color: color-mix(in srgb, var(--q-accent) 55%, transparent); }

.q-dash-clear { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border: 1px dashed var(--q-divider); border-radius: 12px; font-size: 13px; color: var(--q-muted); }
.q-dash-clear .mud-icon-root { color: var(--q-online); font-size: 18px; }
.q-dash-attn { display: flex; flex-wrap: wrap; gap: 8px; }
.q-dash-attn-item { display: inline-flex; align-items: center; gap: 8px; padding: 9px 8px 9px 12px; border-radius: 10px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--q-amber) 45%, transparent); background: color-mix(in srgb, var(--q-amber) 10%, transparent);
    color: var(--q-text); font: inherit; font-size: 13px; }
.q-dash-attn-item > .mud-icon-root:first-child { color: var(--q-amber); font-size: 18px; }
.q-dash-attn-item b { color: var(--q-strong); font-variant-numeric: tabular-nums; }
.q-dash-attn-item .chev { font-size: 18px; color: var(--q-muted); }
.q-dash-attn-item:hover { background: color-mix(in srgb, var(--q-amber) 17%, transparent); }
.q-dash-attn-item.bad { border-color: color-mix(in srgb, var(--q-danger) 50%, transparent); background: color-mix(in srgb, var(--q-danger) 10%, transparent); }
.q-dash-attn-item.bad > .mud-icon-root:first-child { color: var(--q-danger-soft); }

.q-dash-histhead { margin-top: 28px; }
.q-dash-histhead > b { margin-right: auto; }
.q-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); }
.q-seg > button { border: 0; background: transparent; color: var(--q-muted); font: inherit; font-size: 12.5px; padding: 5px 10px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.q-seg > button:hover { color: var(--q-strong); }
.q-seg > button.on { background: var(--q-side-bg); color: var(--q-strong); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.q-seg.sm > button { font-size: 12px; padding: 4px 9px; }

.q-chart { border: 1px solid var(--q-divider); border-radius: 12px; padding: 14px 16px 10px; margin-bottom: 12px; background: var(--q-side-bg); }
.q-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.q-chart-title { font-size: 14px; font-weight: 650; color: var(--q-strong); }
.q-chart-sub { font-size: 12px; color: var(--q-muted); margin-top: 2px; }
.q-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--q-muted); }
.q-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.q-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.q-sw.s1 { background: var(--q-accent); }
.q-sw.s2 { background: var(--q-online); }
.q-sw.s3 { background: #5b8bd9; }
.q-sw.s4 { background: #b36bd1; }
.q-sw.dash { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--q-danger-soft); background: none; }
.q-chart-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 12px 0 10px; }
.q-chart-stats > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.q-chart-stats span { font-size: 11px; color: var(--q-muted); text-transform: uppercase; letter-spacing: .02em; }
.q-chart-stats b { font-size: 17px; font-weight: 650; color: var(--q-strong); font-variant-numeric: tabular-nums; }
.q-chart-stats time { font-size: 11px; color: var(--q-faint); }
/* Y etiketleri SVG DIŞINDA (preserveAspectRatio="none" metni ezer); baloncuk .q-chart-area'ya göre
   konumlanır ki sol paydaki etiket sütunu yüzdeyi kaydırmasın. */
.q-chart-plot { position: relative; padding-left: 34px; }
.q-chart-y { position: absolute; left: 0; top: 0; bottom: 0; width: 28px; }
.q-chart-y > span { position: absolute; right: 0; transform: translateY(-50%); font-size: 10.5px; color: var(--q-faint); font-variant-numeric: tabular-nums; line-height: 1; }
.q-chart-area { position: relative; }
.q-chart-area .q-hist-chart { height: 150px; opacity: 1; }
.q-hist-chart .grid { stroke: var(--q-divider); stroke-width: 1; }
.q-hist-chart .area { opacity: .14; }
.q-hist-chart .area.s1 { fill: var(--q-accent); }
.q-hist-chart .area.s3 { fill: #5b8bd9; }
.q-hist-chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; }
.q-hist-chart .ln.s1 { stroke: var(--q-accent); }
.q-hist-chart .ln.s2 { stroke: var(--q-online); }
.q-hist-chart .ln.s3 { stroke: #5b8bd9; }
.q-hist-chart .ln.s4 { stroke: #b36bd1; }
.q-hist-chart .guide { stroke: var(--q-strong); stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.q-hist-chart .budget { stroke: var(--q-danger-soft); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .85; }
.q-chart-x { display: flex; justify-content: space-between; padding: 5px 0 0 34px; font-size: 10.5px; color: var(--q-faint); font-variant-numeric: tabular-nums; }
.q-chart-area .q-hist-tip { top: 18px; }
.q-hist-tip > span { display: inline-flex; align-items: center; gap: 6px; }

/* KAPASİTE: konu kartları (ayar satırları) + sunucu başına tek kart */
.q-cap-intro { margin-top: -4px; }
.q-capcard { border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-side-bg); padding: 2px 16px 12px; margin-top: 12px; }
.q-capcard-head { display: flex; align-items: center; gap: 9px; padding: 11px 0 9px; border-bottom: 1px solid var(--q-divider); }
.q-capcard-head > .mud-icon-root { color: var(--q-accent); font-size: 19px; }
.q-capcard-head > b { font-size: 14px; color: var(--q-strong); }
.q-setrow { display: flex; align-items: center; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap; padding: 12px 0; }
.q-setrow + .q-setrow { border-top: 1px solid var(--q-divider); }
.q-setrow.col { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
/* nowrap ŞART (ölçüldü): sütun + wrap kutusunda Chrome ızgaranın yüksekliğini EN DAR genişliğe göre (tek
   sütun, 6 satır ≈ 429 px) hesaplıyor, sonra 4 sütuna sığınca fazlayı satırlara dağıtıyordu (2 × 209 px). */
/* Sütun yönünde flex-basis YÜKSEKLİK olur: metin bloğunun 320 px'i dikey boşluk açıyordu (ölçüldü). */
.q-setrow.col .q-setrow-txt { flex: none; }
.q-setrow-txt { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; min-width: 0; }
.q-setrow-txt > b { font-size: 13.5px; color: var(--q-strong); font-weight: 600; }
.q-setrow-txt > span { font-size: 12px; color: var(--q-muted); line-height: 1.45; }
.q-setrow-ctl { display: flex; align-items: center; gap: 10px; flex: none; }
.q-settings-select.q-num { width: 96px; max-width: 96px; }
.q-unit { font-size: 12.5px; color: var(--q-muted); }
.q-costgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.q-costgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--q-muted); }
.q-costgrid .q-settings-select { max-width: none; }

.q-capsrv { border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-side-bg); padding: 14px 16px; margin-bottom: 12px; }
.q-capsrv.off { opacity: .6; }
.q-capsrv-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--q-divider); }
.q-capsrv-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.q-capsrv-id > b { font-size: 14px; color: var(--q-strong); }
.q-capsrv-id > span { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-capsrv-state { flex: none; display: flex; gap: 6px; }
.q-capsrv-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; padding-top: 12px; }
.q-capsrv-cfg { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.q-capsrv-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.q-capsrv-lbl { font-size: 11px; font-weight: 700; color: var(--q-muted); text-transform: uppercase; letter-spacing: .03em; min-width: 96px; }
.q-capsrv-warn { font-size: 12px; color: var(--q-danger-soft); font-weight: 600; }
.q-capsrv-hint { font-size: 12px; color: var(--q-muted); line-height: 1.45; }
.q-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.q-limit { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; border-radius: 10px; background: var(--q-input-bg); }
.q-limit-lbl { font-size: 12px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-limit-use { display: flex; align-items: center; gap: 8px; }
.q-limit-use .q-kpi-bar { flex: 1; margin: 0; }
.q-limit-use em { font-style: normal; font-size: 11.5px; color: var(--q-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-limit .q-settings-select { max-width: none; background: var(--q-side-bg); }
.q-capsrv-cfg .q-form-actions { margin-top: 0; }
.q-capsrv-live { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--q-input-bg); min-width: 0; align-self: start; }
.q-capsrv-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.q-capsrv-nums > div { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.q-capsrv-nums b { font-size: 18px; font-weight: 650; color: var(--q-strong); font-variant-numeric: tabular-nums; }
.q-capsrv-nums span { font-size: 10.5px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.q-capsrv-trend { font-size: 10.5px; color: var(--q-faint); }
@media (max-width: 760px) {
    .q-capsrv-grid { grid-template-columns: 1fr; }
    .q-capsrv-head { flex-wrap: wrap; }
    .q-setrow-ctl { flex-wrap: wrap; }
}

/* Kurulum rehberi: kod bloğunda birden çok düğme (Kopyala + kur.sh'yi indir) */
.q-guide-btns { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.q-guide-btns .q-guide-copy { position: static; }

.q-srv-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-input-bg); margin-bottom: 8px; }
.q-srv-card.off { opacity: .55; }
/* Blok varyant: kart icinde form (Kapasite SFU kartlari) — ust satir ikon+ad. */
.q-srv-card.block { display: block; }
.q-srv-ico { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--q-accent) 15%, transparent); color: var(--q-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.q-srv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.q-srv-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-srv-url { font-family: 'Cascadia Mono', Consolas, monospace; font-size: 11.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-srv-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.q-srv-load { font-size: 11.5px; color: var(--q-muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.q-srv-loadbar { display: inline-block; width: 84px; height: 5px; border-radius: 4px; background: var(--q-divider); overflow: hidden; vertical-align: middle; }
.q-srv-loadbar > span { display: block; height: 100%; background: var(--q-accent); border-radius: 4px; }
.q-srv-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.q-role-chip { font-size: 11px; padding: 2.5px 10px; border-radius: 999px; border: 1px solid var(--q-divider); background: transparent; color: var(--q-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1.5; }
.q-role-chip:hover { border-color: var(--q-accent); }
.q-role-chip.on { background: color-mix(in srgb, var(--q-accent) 15%, transparent); border-color: var(--q-accent); color: var(--q-accent); font-weight: 600; }
.q-role-chip.static { cursor: default; }
.q-role-chip.static:hover { border-color: var(--q-divider); }
.q-role-chip.static.on:hover { border-color: var(--q-accent); }

/* Panel formu: cerceveli kutu + baslik + saga yasli eylem butonlari. */
.q-form-panel { border: 1px solid var(--q-divider); border-radius: 12px; padding: 14px; background: var(--q-input-bg); }
.q-form-panel > h4 { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--q-strong); }
.q-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* #mobil admin nav: masaustunde gizli hamburger; dar ekranda nav drawer'a doner (asagidaki media). */
.q-adm-burger { display: none; }

/* Kurulum rehberi diyalogu (LiveKit/MinIO): numarali adimlar + kopyalanabilir kod bloklari. */
.q-guide { display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 8px; }
/* Rehber platform sekmeleri (Docker Compose / Kubernetes). */
.q-guide-tabs { display: flex; gap: 8px; }
.q-guide-tabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--q-divider); border-radius: 10px; background: var(--q-input-bg); color: var(--q-muted); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.q-guide-tabs button:hover { border-color: var(--q-accent); }
.q-guide-tabs button.on { background: color-mix(in srgb, var(--q-accent) 15%, transparent); border-color: var(--q-accent); color: var(--q-accent); }
.q-guide-intro { font-size: 13px; color: var(--q-muted); line-height: 1.55; border-left: 3px solid var(--q-accent); padding: 2px 0 2px 12px; }
.q-guide-step { display: flex; flex-direction: column; gap: 6px; }
.q-guide-h { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--q-strong); }
.q-guide-no { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--q-accent) 16%, transparent); color: var(--q-accent); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.q-guide-body { font-size: 13px; color: var(--q-text); line-height: 1.55; padding-left: 31px; }
.q-guide-links { display: flex; gap: 14px; flex-wrap: wrap; padding-left: 31px; }
.q-guide-links a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--q-accent); text-decoration: none; }
.q-guide-links a:hover { text-decoration: underline; }
.q-guide-codewrap { position: relative; margin-left: 31px; }
.q-guide-code { background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 10px; padding: 12px 14px; font-family: 'Cascadia Mono', Consolas, monospace; font-size: 12px; line-height: 1.55; overflow-x: auto; white-space: pre; color: var(--q-strong); margin: 0; }
.q-guide-copy { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 4px 10px; border-radius: 7px; border: 1px solid var(--q-divider); background: var(--q-panel-bg); color: var(--q-muted); cursor: pointer; }
.q-guide-copy:hover { color: var(--q-accent); border-color: var(--q-accent); }

/* #5/#6: erişim editörü (roller/kişiler kutuları) + kalıtım bilgi notu.
   Modern satırlar: özel yuvarlak işaret + avatar + hover; kişiler kutusu ARAMALI. */
.q-acc-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.q-acc-cols { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
/* Kutular dialog genişliğini EŞİT paylaşır (eski sabit max-width 280px dar dialogda yamuk dururdu). */
.q-acc-box { flex: 1 1 210px; min-width: 0; height: 288px; display: flex; flex-direction: column; background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 12px; padding: 10px 8px 8px; }
.q-acc-h { flex: none; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--q-muted); margin: 0 4px 6px; }
.q-acc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--q-accent); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: 0; }
.q-acc-hint { font-size: 12px; color: var(--q-muted); margin-top: 6px; }
/* Kutu boyu SABİT (aramada/az öğede küçülmez) — yalnız listenin içi kayar. */
.q-acc-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; align-content: flex-start; }
.q-acc-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; color: var(--q-strong); cursor: pointer; user-select: none; transition: background .1s ease; }
.q-acc-row:hover { background: color-mix(in srgb, var(--q-accent) 10%, transparent); }
.q-acc-row.on { background: color-mix(in srgb, var(--q-accent) 16%, transparent); }
.q-acc-check { flex: none; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; border: 1.6px solid var(--q-faint); border-radius: 6px; color: #fff; transition: background .1s ease, border-color .1s ease; }
.q-acc-row.on .q-acc-check { background: var(--q-accent); border-color: var(--q-accent); }
.q-acc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.q-acc-av { flex: none; width: 21px; height: 21px; border-radius: 50%; object-fit: cover; }
.q-acc-avtxt { display: inline-flex; align-items: center; justify-content: center; background: var(--q-accent); color: #fff; font-size: 10.5px; font-weight: 700; }
.q-acc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-acc-empty { padding: 10px 8px; font-size: 12.5px; color: var(--q-faint); }
.q-acc-search { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 4px 8px; padding: 5px 9px; background: var(--q-chat-bg); border: 1px solid var(--q-divider); border-radius: 8px; color: var(--q-muted); }
.q-acc-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--q-text); font-family: inherit; font-size: 13px; }
.q-acc-search button { display: inline-flex; border: 0; background: none; color: var(--q-muted); cursor: pointer; padding: 0; }
.q-acc-search:focus-within { border-color: var(--q-accent); }
.q-acc-note { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--q-muted); background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 9px; padding: 8px 11px; margin-bottom: 8px; max-width: 560px; }

/* video tile altında izleyici isimleri (#1/#2) */
/* #1 (2026-08-07, saha): izleyici listesi İSMİN ÜSTÜNDE ayrı satır — ikisi de bottom:8'deyken üst üste biniyordu */
.q-vidviewers { position: absolute; left: 8px; bottom: 36px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,0.55); color: #e8e8ec; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #1: ses kullanıcısı sağ-tık menüsünde kişi bazlı ses şeridi */
.q-menu-vol { display: flex; align-items: center; gap: 8px; padding: 8px 10px 6px; min-width: 200px; }
.q-menu-vol input[type=range] { flex: 1; accent-color: var(--q-accent); min-width: 110px; }
.q-menu-vol-val { font-size: 11px; color: var(--q-muted); width: 36px; text-align: right; flex: none; }

/* #1: webhook — APP rozeti (mesaj başlığı + webhook listesi) ve oluşturma formu */
.q-app-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 5px; background: var(--q-accent); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; line-height: 1.5; flex: none; }
.q-wh-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* Durum chip'leri (yeşil onay / kırmızı uyarı) */
.q-chip-ok { background: color-mix(in srgb, var(--q-online) 18%, transparent); color: #3ad17e; }
.q-chip-danger { background: rgba(237,66,69,0.15); color: var(--q-danger-soft); }
/* Sunucu kurma yetkisi chip'i: ver (soluk +) / geri al (✕'li yeşil) — tıklanabilir */
.q-chip-revoke { cursor: pointer; display: inline-flex; align-items: center; }
.q-chip-revoke:hover { background: rgba(237,66,69,0.16) !important; color: var(--q-danger-soft) !important; }
.q-chip-grant { cursor: pointer; background: var(--q-hover); color: var(--q-muted); }
.q-chip-grant:hover { background: var(--q-state-primary, rgba(169,116,76,.14)); color: var(--q-accent); }

/* #2/#3 LiveKit havuzu (bölge başlığı + ekleme formu) */
.q-admin-lkregion { display: flex; align-items: center; gap: 7px; margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--q-muted); }
.q-admin-lkregion .cnt { background: var(--q-state-primary, rgba(169,116,76,.14)); color: var(--q-accent); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.q-admin-lkform { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 10px 12px; align-items: start; margin-top: 14px; padding: 14px; background: var(--q-side-bg); border: 0.5px solid var(--q-divider); border-radius: 12px; }
.q-admin-lkform .mud-input-control { margin: 0; }
.q-admin-lkform > .mud-button-root { align-self: center; justify-self: end; min-width: 120px; }
/* Admin satırı: kayıt platformu ikonu (e-posta/kimliğin solunda, metinle aynı hizada). */
/* GERİ BİLDİRİM TEŞHİS ŞERİDİ (2026-09-18): kartın altında tek satır — düğme + tarayıcıdan
   toplanan bağlam. Bağlam TEK SATIRDA kesilir (ellipsis) ve tamamı title'da durur: kart
   listesi okunabilir kalsın, ayrıntı isteyen üstüne gelsin. */
.q-adm-prov, .q-adm-dev { display: inline-flex; align-items: center; vertical-align: -2px; margin-right: 5px; opacity: .85; }
/* CİHAZ ROZETİ (2026-09-18) görsel olarak sağlayıcı çipiyle aynı, ama KENDİ sınıfı var:
   kayıtlı tuzak #12 — bir durum işareti için başka bir bileşenin sınıfını ödünç almak,
   o bileşenin kuralı değiştiği gün sessizce bozulur. */
.q-admin-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; background: var(--q-side-bg); border-radius: 10px; margin-bottom: 8px; }
.q-admin-row .nm { font-size: 14px; font-weight: 500; color: var(--q-strong); }
.q-admin-row .em { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; }
.q-chip { font-size: 11px; padding: 3px 8px; border-radius: 8px; white-space: nowrap; }

/* ---- message composer input + markdown ---- */
.q-msgbox { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--q-text); font-size: 14px; font-family: inherit; resize: none; overflow-y: hidden; max-height: 150px; line-height: 1.45; padding: 5px 0; box-sizing: border-box; height: 31px; }
/* Büyüyen kutu cilası: çubuk yalnız 150px tavana dayanınca (fit aç/kapar) ve İNCE görünür. */
/* BEKLEYEN DOSYA KARTLARI (2026-07-31, Discord modeli) — composer'in ustunde, ayni yatay
   hizada bir raf: kucuk onizleme + ad + ✕. Veri tarayicida bekledigi icin kartlar aninda gelir. */
.q-stagebar { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 16px 0; padding: 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 12px; }
/* BEKLEYEN DOSYA KARTI "HAZIR" GORUNUR (2026-08-18, kullanici: "inputta gorunen dosyalar
   canli renkte olsun, gri olunca sanki yuklenecek gibi bekleme hissi oluşturuyor").
   Eskiden kart komple sonuk cizilyordu: ad ve ikon --q-muted, cerceve --q-divider, kucuk resmin
   altinda gri zemin. Uc sonuk sinyal ust uste binince kart "yukleniyor" gibi okunuyordu, oysa
   dosya coktan hazir ve yalniz GONDER'i bekliyor. Artik kart vurgu rengine calan cercevesi,
   net yazisi ve renkli ikonuyla etkin duruyor. */
.q-stagecard { position: relative; width: 148px; background: var(--q-chat-bg); border: 1px solid color-mix(in srgb, var(--q-accent) 45%, var(--q-divider)); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 6px rgba(0,0,0,.16); }
.q-stagethumb { width: 100%; height: 88px; object-fit: cover; border-radius: 7px; background: transparent; }
.q-stageico { display: flex; align-items: center; justify-content: center; color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 12%, transparent); }
.q-stagename { font-size: 11.5px; color: var(--q-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Kart üzerindeki "tek görüntülük" düğmesi (yalnız DM + görsel). Kapalıyken sessiz, açıkken
   vurgu renginde dolu — hangi görselin bir kez açılacağı karta bakınca anlaşılsın. */
.q-stageeph { position: absolute; top: -7px; right: 20px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--q-divider); border-radius: 50%; background: var(--q-side-bg); color: var(--q-muted); cursor: pointer; padding: 0; }
.q-stageeph:hover { color: var(--q-text); }
.q-stageeph.on { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.q-stageeph:disabled { opacity: .5; cursor: default; }
.q-stagex { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--q-divider); border-radius: 50%; background: var(--q-side-bg); color: var(--q-muted); cursor: pointer; padding: 0; }
.q-stagex:hover { color: var(--q-danger); border-color: var(--q-danger); }
.q-stageload { display: flex; align-items: center; padding: 0 6px; }

/* Composer emoji aynasi (bkz. goglis.js goglisComposer.mirror) - sarmalayici textarea'nin
   esneme gorevini devralir; ayna mutlak, tiklama gecirgen ve textarea'nin USTUNDE. */
.q-msgwrap { position: relative; flex: 1; min-width: 0; display: flex; }
.q-msgwrap > .q-msgbox { flex: 1; }
/* KALAN KARAKTER SAYACI (2026-08-12): yalniz son 100 karakterde cizilir, dolunca kirmiziya
   doner. `pointer-events:none` SART - kutunun ustunde duruyor, tiklamayi yutup imleci
   kacirmamali. Aynanin (`q-msgmirror`) ustunde kalsin diye z-index verildi. */
.q-msgcount {
    position: absolute; right: 6px; bottom: 2px; z-index: 2; pointer-events: none;
    font-size: 11px; font-variant-numeric: tabular-nums; color: var(--q-faint); opacity: .85;
}
.q-msgcount.full { color: var(--q-danger); opacity: 1; font-weight: 600; }
.q-msgmirror { position: absolute; inset: 0; display: none; pointer-events: none; overflow: hidden; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: border-box; color: var(--q-text); }
.q-msgwrap.gg-on > .q-msgmirror { display: block; }
/* Yazi SEFFAF ama imlec gorunur - sinif yalniz JS eslesme bulunca eklenir (fail-safe). */
.q-msgwrap.gg-on > .q-msgbox { color: transparent; caret-color: var(--q-text); }
.q-msgwrap.gg-on > .q-msgbox::selection { color: transparent; }
.gg-in { position: relative; display: inline-block; }
.gg-in > .c { visibility: hidden; }
.gg-in > .gg-emoji { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1.3em; height: 1.3em; }
.q-msgbox { scrollbar-width: thin; scrollbar-color: var(--q-divider) transparent; }
.q-msgbox::-webkit-scrollbar { width: 6px; }
.q-msgbox::-webkit-scrollbar-thumb { background: var(--q-divider); border-radius: 3px; }
.q-msgbox::-webkit-scrollbar-track { background: transparent; }
/* #mobil: uzun placeholder ("#kanal kanalına mesaj yaz…") dar ekranda sarmasın — tek satır + üç nokta. */
.q-msgbox::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-msgbox::placeholder { color: var(--q-faint); }
/* SOHBET YAZI BOYUTU (2026-07-31, kullanıcı isteği: "font size ayarı getir"). Görünüm ÖLÇEĞİ
   (zoom) her şeyi büyütür — ikonlar, paneller dahil; bu ayar YALNIZ okunan metni etkiler
   (Discord'un "Chat Font Scale"i ile aynı ayrım). Değişken <html>'de yaşar: goglisFontSize. */
.q-md { font-size: var(--q-msg-size, 14px); line-height: 1.5; color: var(--q-text); overflow-wrap: anywhere; }
.q-md > :first-child { margin-top: 0; }
.q-md > :last-child { margin-bottom: 0; }
.q-md p { margin: 0 0 2px; }
.q-md strong { color: var(--q-strong); font-weight: 600; }
.q-md a { color: var(--q-link, #7aa6ff); text-decoration: none; }
.q-md a:hover { text-decoration: underline; }
.q-md code { background: var(--q-code-bg); color: var(--q-code-text); padding: 1px 5px; border-radius: 4px; font-family: 'Space Mono', monospace; font-size: 12px; }
.q-md pre { background: var(--q-code-bg); border: 0.5px solid var(--q-divider); border-radius: 6px; padding: 8px 10px; margin: 4px 0; overflow: auto; }
.q-md pre code { background: none; padding: 0; color: var(--q-text); }
.q-md ul, .q-md ol { margin: 4px 0; padding-left: 22px; }
.q-md blockquote { border-left: 3px solid var(--q-divider); margin: 4px 0; padding-left: 8px; color: var(--q-muted); }
.q-md h1, .q-md h2, .q-md h3 { font-size: 15px; font-weight: 600; color: var(--q-strong); margin: 6px 0 2px; }
.q-md img { max-width: 360px; max-height: 280px; border-radius: 8px; display: block; margin-top: 4px; cursor: zoom-in; }

/* #5: görsel önizleme — UYGULAMANIN İÇİNDE AÇILIR PENCERE (zoom + pan + indir). body'ye eklenir
   (root zoom'dan bağımsız, yani vw/vh gerçek ekran birimi).
   TAM EKRAN KALDIRILDI (2026-09-28 akşam, Fatih: "tam ekrana almasın, uygulama ekranında popup
   şeklinde olsun"). Aynı gün öğleden sonra kutu masaüstü kabuğunda kendini GERÇEK tam ekrana
   alıyordu; gerekçe pencere düğmelerinin (küçült/büyüt/kapat) araçların üstüne binmesiydi. Açılır
   pencere bunu tam ekransız çözer: kart üst şeridin ALTINDAN başlar, araçlar kartın İÇİNDE sağ
   üstte. Ölçüler yönetim paneli popup'ıyla (`.q-admin.popup`) aynı ki uygulamada tek bir "açılır
   pencere" dili olsun.
   KAPAT NEDEN ÇALIŞMIYORDU (2026-09-28 öğlen dersi, hâlâ geçerli): kabukta üst şerit
   `-webkit-app-region: drag` ve bu bölge GEOMETRİKTİR, üstüne çizilen katman otomatik muaf olmaz.
   Perde açıkça no-drag; yoksa şerit hizasındaki bir tıklama pencere sürüklemesi başlatırdı. */
.q-lightbox {
    --q-lb-px: clamp(16px, 5vw, 90px);
    --q-lb-pb: calc(28px + env(safe-area-inset-bottom, 0px));
    --q-lb-pt: calc(28px + env(safe-area-inset-top, 0px));
    position: fixed; inset: 0; z-index: 4000; display: none; align-items: center; justify-content: center;
    padding: var(--q-lb-pt) var(--q-lb-px) var(--q-lb-pb);
    background: rgba(0,0,0,0.6);
}
html.q-wco .q-lightbox { --q-lb-pt: calc(var(--q-wco-h, 52px) + 10px); -webkit-app-region: no-drag; }
.q-lightbox.open { display: flex; }
.q-lb-card {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center;
    min-width: 180px; min-height: 120px;
    border-radius: 16px; border: 1px solid var(--q-divider, rgba(255,255,255,0.06));
    background: var(--q-panel-bg, #1c1d20);
    box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3);
}
.q-lb-img {
    display: block;
    /* -2px: kartin 1px kenarligi resmin OLCUSUNE eklenir; payi dusulmezse kart kullanilabilir
       alani tam 2px asar ve ortalama onu ust bosluga kaydirir (olculdu: kabukta ust 62 -> 61). */
    max-width: calc(100vw - 2 * var(--q-lb-px) - 2px);
    max-height: calc(100vh - var(--q-lb-pt) - var(--q-lb-pb) - 2px);
    max-height: calc(100dvh - var(--q-lb-pt) - var(--q-lb-pb) - 2px);
    user-select: none; touch-action: none; transition: transform 0.08s ease-out;
    /* Kullanıcı boyut seçince JS genişlik+yükseklik yazar (oran korunur). Pencere küçülürken CSS sınırı
       bir boyutu kırparsa resim yine de BÜKÜLMESİN. */
    object-fit: contain;
}
/* KÜÇÜK RESİM: araç şeridi (~154x34) resmin büyük kısmını örterdi (ölçüldü: 120x80'lik resmin
   üst yarısı). JS doğal boyuta bakıp `kucuk` ekler, kart üstte şeride pay açar. */
.q-lb-card.kucuk { padding: 54px 18px 18px; }
/* Araçlar resmin ÜSTÜNDE durur: açık renkli bir resimde de görünsünler diye koyu cam zemin. */
.q-lb-tools { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 1; }
.q-lb-btn { width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(0,0,0,0.55); color: #fff; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: inherit; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.q-lb-btn:hover { background: rgba(0,0,0,0.78); }
/* YENİDEN BOYUTLANDIRMA (2026-10-25, Fatih: "resim popup'ı resize edilebilsin, ama resme göre"): köşe tutamakları,
   oran KİLİTLİ (JS genişliği seçer, yükseklik resmin oranından gelir — pencere hep resmin biçiminde). Sağ üst köşe
   araç şeridinin yeri, orada tutamak yok. Görünür işaret yalnız sağ altta (alışılmış yer); öbür iki köşe görünmez
   ama imleci değiştirir. Sağ alt işarete çift tık: ilk boyuta dön. */
.q-lb-rz { position: absolute; width: 24px; height: 24px; z-index: 2; touch-action: none; }
.q-lb-rz[data-k="sa"] { right: 0; bottom: 0; cursor: nwse-resize; }
.q-lb-rz[data-k="so"] { left: 0; bottom: 0; cursor: nesw-resize; }
.q-lb-rz[data-k="su"] { left: 0; top: 0; cursor: nwse-resize; }
.q-lb-rz[data-k="sa"]::after {
    content: ""; position: absolute; right: 6px; bottom: 6px; width: 9px; height: 9px;
    border-right: 2px solid rgba(255,255,255,.92); border-bottom: 2px solid rgba(255,255,255,.92); border-bottom-right-radius: 3px;
    filter: drop-shadow(0 0 1.5px rgba(0,0,0,.8)); opacity: .55; transition: opacity .15s;
}
.q-lb-card:hover .q-lb-rz[data-k="sa"]::after, .q-lightbox.rz-nwse .q-lb-rz[data-k="sa"]::after { opacity: 1; }
/* Sürüklerken imleç her yerde aynı kalsın, resim/metin seçilmesin. */
.q-lightbox.rz-nwse, .q-lightbox.rz-nwse * { cursor: nwse-resize !important; user-select: none; }
.q-lightbox.rz-nesw, .q-lightbox.rz-nesw * { cursor: nesw-resize !important; user-select: none; }
/* Dokunmatik: üstüne gelme yok → işaret hep belirgin, tutamak parmağa göre büyük. */
@media (hover: none) {
    .q-lb-rz { width: 34px; height: 34px; }
    .q-lb-rz[data-k="sa"]::after { opacity: .9; right: 8px; bottom: 8px; width: 11px; height: 11px; }
}

/* ---- dosya ekleme (#17) ---- */
.q-attach { display: inline-flex; align-items: center; cursor: pointer; color: var(--q-muted); }
.q-attach:hover { color: var(--q-strong); }

/* SABITLENEN MESAJ SERIDI (2026-07-30, kullanici istegi: "sabitleyince chat'in ustune fixed
   sekilde hakketten sabitlesin"). Mesaj listesinin KARDESI olarak akar - position:fixed ile
   ustune bindirmek yerine yer kaplar; boylece kaydirma alanini ortmez ve z-index savasi cikmaz. */
/* "Su ana don" (gecmis penceresi) — pinbar ile ayni raf dili, aksan vurgulu. */
.q-histbar { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 6px 16px 0; padding: 8px 10px; background: color-mix(in srgb, var(--q-accent) 14%, var(--q-input-bg)); border: 1px solid color-mix(in srgb, var(--q-accent) 35%, transparent); border-radius: 10px; color: var(--q-strong); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.q-histbar:hover { background: color-mix(in srgb, var(--q-accent) 22%, var(--q-input-bg)); }

/* Serit tiklanınca hedef mesaj kisa sure vurgulanir. */
.q-msg.q-flash { animation: q-flash 1.8s ease; }
@keyframes q-flash {
    0%, 55% { background: color-mix(in srgb, var(--q-accent) 24%, transparent); }
    100% { background: transparent; }
}

/* ---- message hover tools + inline edit ---- */
.q-msg { position: relative; border-radius: 6px; }
.q-msg:hover { background: var(--q-hover); }
/* #12: hover araç çubuğu mesaja/ikonlara çok yanaşıktı — daha yukarı + daha ferah iç boşluk. */
.q-msg-tools { position: absolute; top: -15px; right: 10px; display: flex; gap: 3px; background: var(--q-side-bg); border: 1px solid var(--q-border); border-radius: 10px; padding: 4px 6px; opacity: 0; }
.q-msg:hover .q-msg-tools { opacity: 1; }
/* TEPKİ SEÇİCİ — BAŞTAN TASARIM (2026-07-31, kullanıcı: "tek çare baştan tasarlamak").
   Eski model: seçici, HER mesajın hover'la görünen araç çubuğunun İÇİNDE bir QMenu idi.
   Dört turluk bug ailesi hep bu bağdan doğdu (hover kayınca kaybolma, hayalet çubuk, panelin
   mesajların altında kalması, açılışsız yorumun kuralı yutması). Yeni model: TEK seçici, mesaj
   ağacının tamamen DIŞINDA (Home kökünde) + tam-ekran backdrop. Backdrop bütün imleç olaylarını
   yuttuğu için arkada hover fiziksel olarak olmaz; panelin hiçbir mesaj atası olmadığı için
   stacking-context/hover/opacity tuzaklarina giremez. q-menuopen/[data-menuhost] makinesi mesajlar
   için gereksizleşti ve kaldırıldı (goglisMenu.sync composer menüleri için genel yaşar). */
.q-msg-tools:focus-within { opacity: 1; }
.q-reactpick-bd { position: fixed; inset: 0; z-index: 1200; }
.q-reactpick { position: fixed; z-index: 1201; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 11px; padding: 6px; box-shadow: 0 14px 38px rgba(0,0,0,0.42); }
/* pointer-events (2026-07-30, kullanici: "iconumu secemiyorum bu yuzden"): opacity:0 bir elemani
   GORUNMEZ yapar ama TIKLANABILIR birakir - hayalet arac cubugu emoji panelinin ustune binip
   tiklamalari yutuyordu, kullanici emoji secemiyordu. Gorunmez olan tiklanamaz da olmali.
   Ayrica mesajin kendi hover zemini de sussun: panel acikken imlec panele giderken yol
   uzerindeki mesajlar yanip soner, ekran kirli gorunurdu. */

.q-msg-tools .t { color: var(--q-muted); cursor: pointer; display: inline-flex; padding: 4px; border-radius: 7px; }
.q-msg-tools .t:hover { background: var(--q-hover); }
.q-msg-tools .t:hover { color: var(--q-strong); }
.q-msg-tools .t.del:hover { color: var(--q-danger); }
.q-msg-tools .t.rep:hover { color: var(--q-danger); }
.q-msg-tools .t.on { color: var(--q-amber); }

/* ---- bildirim sekmeleri (#19) ---- */
.q-inbox-tabs { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--q-divider); margin-bottom: 4px; }
.q-inbox-tab { flex: 1; text-align: center; font-size: 12px; padding: 6px 4px; border-radius: 7px; cursor: pointer; color: var(--q-muted); white-space: nowrap; }
.q-inbox-tab:hover { background: var(--q-hover); color: var(--q-text); }
.q-inbox-tab.on { background: var(--q-selected); color: var(--q-strong); font-weight: 600; }
.q-inbox-empty { font-size: 12px; color: var(--q-faint); padding: 12px 10px; text-align: center; }
.q-inbox-list { max-height: 340px; overflow-y: auto; }
.q-editbox { width: 100%; background: var(--q-input-bg); border: none; outline: none; border-radius: 8px; padding: 8px 10px; color: var(--q-text); font-size: 14px; font-family: inherit; margin-top: 2px; }
.q-edit-hint { font-size: 11px; color: var(--q-faint); margin-top: 3px; }
/* DÜZENLEME KUTUSU ARTIK TEXTAREA (2026-08-24, kullanıcı: "şu anki input kötü görünüyor,
   oranında textarea olmalı; 5 satır, fazlası dikey scroll"). rows=5 sabit — beşinci satırdan
   sonrasını tarayıcı kendisi kaydırır, ayrı bir büyüme makinesi gerekmiyor.
   `box-sizing: border-box` ŞART: dolgu 8/10px ve genişlik %100; content-box'ta kutu satırdan
   taşardı. */
textarea.q-editbox { display: block; box-sizing: border-box; line-height: 1.45; resize: vertical; }
/* GÜNCELLE / VAZGEÇ (2026-08-24): "Enter = kaydet · Esc = iptal" ipucu tek başına yeterli
   değildi (kullanıcı: "herkes anlayamaz"). İpucu satırı düğmelerin ALTINDA yaşamaya devam eder. */
.q-edit-actions { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
.q-edit-btn { border: 1px solid var(--q-divider); background: transparent; color: var(--q-text);
    border-radius: 8px; padding: 6px 15px; font: 600 12.5px/1 inherit; cursor: pointer;
    transition: background var(--q-dur) var(--q-ease), filter var(--q-dur) var(--q-ease); }
.q-edit-btn:hover { background: var(--q-hover); }
.q-edit-btn.primary { background: var(--q-accent); border-color: transparent; color: #fff; }
.q-edit-btn.primary:hover { filter: brightness(1.07); }
/* MD ARAÇ ÇUBUĞU (2026-08-24) — Forum'dakiyle AYNI görsel dil (.q-fmd-bar/.q-fmd-b zaten
   genel), yalnız yerleşim farkı: composer'ın üstünde onunla aynı yatay hizada durur, dar
   ekranda ikinci satıra sarar. Düzenleme kutusunun üstündeki kopya soldan hizalıdır. */
.q-mdbar { padding: 2px 16px 2px; flex-wrap: wrap; }
.q-mdbar.q-editbar { padding: 2px 0 3px; }

/* ---- DM list ---- */
.q-dmrow { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; color: var(--q-muted); font-size: 14px; cursor: pointer; }
.q-dmrow:hover { background: var(--q-hover); color: var(--q-text); }
.q-dmrow.sel { background: var(--q-selected); color: var(--q-strong); }
.q-dmrow .q-dmpin { opacity: 0; color: var(--q-muted); display: inline-flex; flex: none; border-radius: 5px; }
.q-dmrow:hover .q-dmpin { opacity: 0.6; }
.q-dmrow .q-dmpin:hover { opacity: 1; color: var(--q-accent); }
.q-dmrow .q-dmpin.on { opacity: 1; color: var(--q-accent); }
/* #17b: DM listesinde "arkadaş değil" belirteci — üstü çizili kişi ikonu (hep hafif görünür,
   üzerine gelince kırmızılaşır + title "Arkadaş Değilsiniz"). Arkadaşsa ikon hiç çizilmez. */
.q-dmrow .q-dmrow-nf { opacity: .65; color: var(--q-muted); display: inline-flex; flex: none; cursor: default; }
.q-dmrow .q-dmrow-nf:hover { opacity: 1; color: var(--q-danger); }
/* KAPAT (X) — pin gibi hover'da belirir; kırmızıya döner. */
.q-dmrow .q-dmclose { opacity: 0; color: var(--q-muted); display: inline-flex; flex: none; border-radius: 5px; cursor: pointer; }
.q-dmrow:hover .q-dmclose { opacity: 0.6; }
.q-dmrow .q-dmclose:hover { opacity: 1; color: var(--q-danger); }
/* Dokunmatikte hover yok — pin + kapat HEP hafif görünür (review bulgusu: mobilde erişilemezdi). */
@media (hover: none) { .q-dmrow .q-dmpin, .q-dmrow .q-dmclose { opacity: 0.55; } }
.q-dmadd { display: inline-flex; cursor: pointer; color: var(--q-faint); border-radius: 5px; padding: 1px; }
.q-dmadd:hover { color: var(--q-strong); background: var(--q-hover); }

/* ---- arkadaşlar (#30) ---- */
.q-friends-btn { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; color: var(--q-text); font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: 2px; }
.q-friends-btn:hover { background: var(--q-hover); }
.q-friends-btn.on { background: var(--q-selected); color: var(--q-strong); }
/* #1: Arkadaşlar merkez içerikte (inline panel) */
.q-friends-page { flex: 1; overflow-y: auto; display: flex; justify-content: center; padding: 26px 24px; }
.q-friends-page-inner { width: 100%; max-width: 720px; }
.q-friends-page-inner .q-friends-body { max-height: none; overflow: visible; }
.q-friends-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--q-danger); color: #fff; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.q-friend-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; }
.q-friend-row:hover { background: var(--q-hover); }

/* ---- tab overflow measurer (hidden) ---- */
.q-tabs-measure { position: absolute; top: 0; left: -9999px; display: flex; align-items: flex-end; gap: 4px; visibility: hidden; pointer-events: none; white-space: nowrap; }

/* ---- voice ---- */
.q-vctl { width: 46px; height: 46px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: var(--q-input-bg); color: var(--q-strong); cursor: pointer; }
/* Izgara dugmesindeki "3x3" etiketi: ikonun altinda minik yazi (2026-08-11). Dugme dairesel
   oldugu icin dikey yigin + kucuk punto; boyut degismesin diye satir yuksekligi kilitli. */
.q-vctl:has(.q-vctl-sub) { flex-direction: column; gap: 1px; }
.q-vctl-sub { font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: .2px; color: var(--q-muted); }
.q-vctl:disabled { opacity: 0.4; cursor: default; } /* #3: uzak-sekme modunda medya kontrolleri pasif */
.q-vctl.off { background: var(--q-danger); color: #fff; }
.q-vctl.leave { background: var(--q-danger); color: #fff; }
.q-vctl.cam { background: var(--q-online); color: #fff; } /* #1: kamera açıkken yeşil */
/* HOPARLÖR AÇIK (2026-09-18): `on` sınıfı 2026-09-08'de işaretleniyordu ama KURALI HİÇ YOKTU —
   yani dock'taki hoparlör düğmesi açıkken de kapalıyken de aynı görünüyordu (ölü sınıf).
   `cam`in yeşili "yayındasın" demek; hoparlör bir yayın değil YÖNLENDİRME, o yüzden marka
   vurgusu kullanılır. */
.q-vctl.on { background: var(--q-accent); color: #fff; }
/* Herkesi sustur AKTIF: turuncu susturmanin karo rozetiyle ayni renk ailesi (2026-08-12). */
.q-vctl.orange { background: rgba(230,140,30,.95); color: #1b1206; }
/* DM BASLIGINDAKI ARAMA KUMANDALARI (2026-08-12): kapatma dugmesinin solunda kucuk bir grup.
   Dar ekranda baslik tasmasin diye ekran-paylas 560px altinda gizlenir — mobilde getDisplayMedia
   zaten yok, yani orada buton kosulla da cizilmiyor; bu kural tabletlerdeki ara genislikler icin. */
/* SISTEM SATIRI (2026-08-12): cevapsiz arama gibi OLAY kayitlari. Avatar/baslik/rozet yok —
   Discord'daki arama satirinin esi. Mesaj satirlariyla ayni sol hizada dursun diye avatar
   genisligi kadar (38px + bosluk) girinti verilir; boylece sohbet kolonu "kayik" gorunmez. */
.q-sysmsg { display: flex; align-items: baseline; gap: 8px; padding: 3px 6px 3px 52px; font-size: 13px; color: var(--q-muted); margin-top: 10px; }
.q-sysmsg-t { min-width: 0; }
.q-sysmsg-t .gg-emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.q-sysmsg-time { font-size: 11px; color: var(--q-faint); flex: none; }
/* EL KALDIRAN KARO (2026-08-12): rozet sol USTTE — sag ust zoom/pin/sustur dugmelerinin
   yeri, turuncu susturma rozeti de solda ama ALTTA degil USTTE oldugundan cakismasin diye
   el biraz asagi kaydirilir kural gerekirse. Cerceve amber: konusan (yesil) ve odaklanan
   (accent) durumlarindan ayirt edilebilsin. */
.q-vidtile.hand { border-color: #e5a13a; }
/* EKRAN SESI SUSTURMA — paylasan kisinin karosunda, kirmizi "durdur"un YANINDA (2026-08-12).
   `.own` ALT-ORTADA duruyor (bottom:10px; left:50%; translateX(-50%)), dikey ortali DEGIL —
   bu yuzden ses dugmesi ayni alt hizada ve merkezden 40px saga kaydirilir (durdur 48px genis,
   yarisi 24 + 16px bosluk). `transform` hover'da da YENIDEN yazilmali: `.own:hover` kendi
   translateX(-50%)'ini geri getirip dugmeyi ortaya atardi. */
.q-vidstop.own.audio { left: 50%; right: auto; bottom: 10px; top: auto; width: 40px; height: 40px; background: rgba(0,0,0,.55); transform: translateX(40px); }
.q-vidstop.own.audio:hover { background: rgba(0,0,0,.78); transform: translateX(40px) scale(1.06); }
.q-vidstop.own.audio.off { background: var(--q-danger); }
/* Kendi avatar karosunda KAMERAYI AC — yesil, "durdur"un kirmizisiyla karismasin (2026-08-12). */
.q-vidstop.own.camon { background: var(--q-online); }
.q-vidstop.own.camon:hover { background: color-mix(in srgb, var(--q-online) 85%, #fff); }
/* Ses HIC yoksa (pencere paylasimi / tarayici vermedi): dugme durur ama PASIF — gorunmez bir
   dugme sebebi anlatmaz, pasif olan tooltip'le anlatir. */
.q-vidstop.own.audio.none { opacity: .45; cursor: default; }
.q-vidstop.own.audio.none:hover { background: rgba(0,0,0,.55); transform: translateX(40px); }
/* El kuyrugundaki sira numarasi (2026-08-12): "1 - fatih". */
.q-handq-n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-right: 6px; padding: 0 4px; border-radius: 6px; background: var(--q-accent); color: #fff; font-size: 11px; font-weight: 800; }
.q-vidhand {
    position: absolute; left: 6px; top: 6px; z-index: 6; pointer-events: none;
    width: 26px; height: 26px; border-radius: 50%; background: #e5a13a;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.q-vidhand .gg-emoji { width: 17px; height: 17px; }
/* EL KALKINCA UCU YAN YANA (2026-08-12, kullanici: "el kaldirinca sabitle butonunun ustune
   biniyor, el kalkinca 3u de yan yana olsun").
   Sol ust kosede uc oge var ve ikisi ayni noktadaydi: el (6px) ile sabitle (6px) ust uste
   biniyordu, sustur ise 36px'teydi. El VARKEN digerleri birer slot saga kayar; el yokken
   yerlesim aynen eskisi gibi kalir (kural yalniz `.hand` altinda kosuyor).
   Slot genisligi 30px = 26px dugme + 4px bosluk. */
.q-vidtile.hand .q-vidpin { left: 36px; }
.q-vidtile.hand .q-vidmute { left: 66px; }

/* ---- EL KALKIKKEN GOGLIS'LER SACILIR (2026-08-12, kullanici: widget'ta A varyanti + 16
   parcacik + "goglisler azicik daha belli olsun") ----
   TASARIM: cerceve YERINDE kalir, salyangozlar kosELERDE dogup ICERI dogru suzulur.
   YON ICERIDIR CUNKU `.q-vidtile` `overflow:hidden` — disari ucan parcacik karonun
   kenarinda KIRPILIYOR ve efekt gorunmez oluyordu (ilk denemede olculdu). Iceri
   suzulmek hem tam gorunur hem de karoyu/komsulari hic oynatmaz.
   DONGU TAMAMEN CSS: her parcacigin kendi suresi ve gecikmesi var, `infinite` ile doner.
   JS zamanlayici ve DOM uretimi YOK — 9 karo x 16 parcacik ayni anda donse bile is yalnizca
   transform+opacity, ikisi de kompozitorde kosar (layout/paint tetiklemez).
   DEGERLER SABIT (sunucuda rastgele uretilseydi her render'da animasyon bastan baslardi;
   el kalkikken Home presence degisimlerinde sik ciziliyor). */
.q-hfx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.q-hfx > i {
    position: absolute; width: 14px; height: 14px; opacity: 0;
    will-change: transform, opacity;
    animation-name: q-hfx-fly; animation-timing-function: cubic-bezier(.15,.7,.3,1);
    animation-iteration-count: infinite;
    /* SARI SALYANGOZ (2026-08-12, kullanici: "goglislerde sari renkte olsun") — cerceveyle
       ayni amber ailesinde dursun diye.
       NEDEN FILTRE, YENI CIZIM DEGIL: maskot salyangoz sprite'ta marka mavisi #1263E6'da
       KILITLI (2026-07-30 emoji renk turu karari) ve o renk sprite'a KALICI basili, yani
       `fill`/`currentColor` ile disaridan degistirilemez. Kendi salyangozumuzu cizmek
       gercek Goglis sanatindan kopmak olurdu; hue-rotate ise CIZIMI aynen korur, yalnizca
       rengi cevirir. Mavi ~217deg -> amber ~36deg, yani +179deg. Koyu kontur/mürekkep
       neredeyse doygunluksuz oldugu icin donusten etkilenmez. Filtre YALNIZ bu parcaciklara
       uygulanir; sohbetteki, secicideki ve reaction'daki salyangoz mavi kalir. */
    filter: hue-rotate(179deg) saturate(1.08) brightness(1.06);
}
.q-hfx > i .gg-emoji { width: 100%; height: 100%; display: block; }
@keyframes q-hfx-fly {
    0%   { opacity: 0; transform: translate(0,0) scale(.25) rotate(0deg); }
    12%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); }
}
/* Cerceve de ayni ritimde nefes alir (widget'taki "breathe"). */
.q-hfx > i:nth-child(1) { left: 0%; top: 0%; --dx: 23.1px; --dy: 28.9px; --rot: -64deg; animation-duration: 2.19s; animation-delay: 0.88s; }
.q-hfx > i:nth-child(2) { left: 100%; top: 0%; --dx: -24.4px; --dy: 13.1px; --rot: -9deg; animation-duration: 1.68s; animation-delay: 0.22s; }
.q-hfx > i:nth-child(3) { left: 0%; top: 100%; --dx: 42.1px; --dy: -20.1px; --rot: -41deg; animation-duration: 2.29s; animation-delay: 2.27s; }
.q-hfx > i:nth-child(4) { left: 100%; top: 100%; --dx: -35.0px; --dy: -42.7px; --rot: -68deg; animation-duration: 2.54s; animation-delay: 0.70s; }
.q-hfx > i:nth-child(5) { left: 0%; top: 0%; --dx: 19.0px; --dy: 18.8px; --rot: 47deg; animation-duration: 1.80s; animation-delay: 1.40s; }
.q-hfx > i:nth-child(6) { left: 100%; top: 0%; --dx: -35.8px; --dy: 33.9px; --rot: -65deg; animation-duration: 1.67s; animation-delay: 0.49s; }
.q-hfx > i:nth-child(7) { left: 0%; top: 100%; --dx: 38.4px; --dy: -28.9px; --rot: 12deg; animation-duration: 2.10s; animation-delay: 0.72s; }
.q-hfx > i:nth-child(8) { left: 100%; top: 100%; --dx: -50.0px; --dy: -29.1px; --rot: 11deg; animation-duration: 2.18s; animation-delay: 2.10s; }
.q-hfx > i:nth-child(9) { left: 0%; top: 0%; --dx: 35.3px; --dy: 47.4px; --rot: -57deg; animation-duration: 2.06s; animation-delay: 1.82s; }
.q-hfx > i:nth-child(10) { left: 100%; top: 0%; --dx: -26.5px; --dy: 14.4px; --rot: 25deg; animation-duration: 2.44s; animation-delay: 1.38s; }
.q-hfx > i:nth-child(11) { left: 0%; top: 100%; --dx: 39.4px; --dy: -43.5px; --rot: 14deg; animation-duration: 2.24s; animation-delay: 1.09s; }
.q-hfx > i:nth-child(12) { left: 100%; top: 100%; --dx: -59.6px; --dy: -36.4px; --rot: 24deg; animation-duration: 1.67s; animation-delay: 1.68s; }
.q-hfx > i:nth-child(13) { left: 0%; top: 0%; --dx: 54.3px; --dy: 41.0px; --rot: -32deg; animation-duration: 2.02s; animation-delay: 1.60s; }
.q-hfx > i:nth-child(14) { left: 100%; top: 0%; --dx: -22.7px; --dy: 14.5px; --rot: -57deg; animation-duration: 1.66s; animation-delay: 1.84s; }
.q-hfx > i:nth-child(15) { left: 0%; top: 100%; --dx: 21.2px; --dy: -19.9px; --rot: 55deg; animation-duration: 1.69s; animation-delay: 1.08s; }
.q-hfx > i:nth-child(16) { left: 100%; top: 100%; --dx: -47.8px; --dy: -38.3px; --rot: 54deg; animation-duration: 1.91s; animation-delay: 1.00s; }
@keyframes q-hand-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,161,58,0); } 50% { box-shadow: 0 0 0 4px rgba(229,161,58,.20); } }
.q-vidtile.hand { animation: q-hand-breathe 2.4s ease-in-out infinite; }
/* Hareket duyarliligi: sonsuz donen hareket rahatsiz edici olabilir. Cerceve SARI KALIR,
   yani bilgi kaybolmaz — yalnizca hareket durur. */
@media (prefers-reduced-motion: reduce) {
    .q-hfx { display: none; }
    .q-vidtile.hand { animation: none; }
}

@keyframes q-hand-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.q-vidhand { animation: q-hand-pop .28s ease-out; }
.q-callctl { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.q-callctl .q-vctl.sm { width: 30px; height: 30px; }
/* Sınıfla, :nth-child(3) ile DEĞİL (2026-09-16): ses menüsü (div.q-menu sarmalayıcılı) araya girince
   sayım kayıyordu. Hangi düğmenin sınıfı taşıdığı Home.razor'da yazılı. */
@media (max-width: 560px) { .q-callctl .q-cc-narrowhide { display: none; } }
/* Kişi ses seviyeleri menüsü (CallVolumeMenu): her satır ad + kaydırıcı. */
.q-callvol-row + .q-callvol-row { border-top: 1px solid var(--q-divider); }
.q-callvol-name { padding: 6px 10px 0; font-size: 13px; font-weight: 600; color: var(--q-text); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-callvol-empty { padding: 2px 10px 8px; font-size: 12px; color: var(--q-muted); max-width: 240px; }


/* ---- Davet kartı (Discord-vari embed) ---- */
.q-invcard { max-width: 340px; margin-top: 6px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 13px; overflow: hidden; }
.q-invcard-banner { height: 92px; background-size: cover; background-position: center; }
.q-invcard-banner-fallback { display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); }
.q-invcard-body { padding: 12px 14px 14px; }
.q-invcard-ico { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; }
.q-invcard-ico-txt { display: flex; align-items: center; justify-content: center; background: var(--q-accent); color: #fff; font-weight: 700; font-size: 16px; }
.q-invcard-name { font-size: 15px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-invcard-stats { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--q-muted); margin-top: 3px; }
.q-invcard-on { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.q-invcard-on { background: var(--q-online); }
.q-invcard-join { width: 100%; padding: 9px 0; border: 0; border-radius: 9px; background: var(--q-online); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.q-invcard-join:hover { background: color-mix(in srgb, var(--q-online) 85%, #000); }

/* ---- Anketler (Discord-vari) ---- */
/* C6 LFG "Takım Arkadaşı Aranıyor" kartı */
.q-lfg { max-width: 420px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 13px; padding: 12px 14px; margin-top: 2px; }
.q-lfg.full { border-color: rgba(74,169,96,.55); background: linear-gradient(180deg, rgba(74,169,96,.10), transparent); }
.q-lfg-head { display: flex; align-items: center; gap: 10px; }
.q-lfg-game { font-size: 15px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-lfg-sub { font-size: 12px; color: var(--q-muted); }
.q-lfg-fulltag { flex: none; background: #4aa960; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 5px; }
.q-lfg-note { font-size: 12.5px; color: var(--q-text); margin-top: 8px; background: var(--q-input-bg); border-radius: 8px; padding: 6px 9px; }
.q-lfg-slots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.q-lfg-slot { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--q-accent); color: #fff; font-size: 12px; font-weight: 700; }
.q-lfg-slot img { width: 100%; height: 100%; object-fit: cover; }
.q-lfg-slot.empty { background: transparent; border: 1.5px dashed var(--q-divider); color: var(--q-muted); }
.q-lfg-ini { line-height: 1; }
.q-lfg-foot { margin-top: 11px; }
.q-lfg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 9px; border: 0; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--q-accent); color: #fff; transition: filter .15s; }
.q-lfg-btn:hover { filter: brightness(1.08); }
.q-lfg-btn.leave { background: var(--q-input-bg); color: var(--q-text); }
.q-lfg-btn.go { background: #4aa960; }
.q-lfg-btn[disabled] { background: var(--q-input-bg); color: var(--q-muted); cursor: default; filter: none; }
/* Süre sayacı çipi (canlı geri sayım, goglisTimers) + süresi dolan kartın soluk hâli. */
.q-lfg-timer { font-variant-numeric: tabular-nums; color: var(--q-muted); white-space: nowrap; }
.q-lfg-timer.over { color: var(--q-danger-soft); font-weight: 600; }
.q-lfg.expired { opacity: .62; filter: saturate(.7); }
.q-lfg.expired .q-lfg-slots, .q-lfg.expired .q-lfg-note { opacity: .9; }
/* E-POSTA DOĞRULAMA BANDI (2026-07-30): boydan boya, üst şeridin ÜSTÜNDE.
   .q-root grid/flex kolonu olduğundan bant satır olarak akar — üst şerit aşağı kayar, hiçbir şeyin
   üstünü kapatmaz (position:fixed kullanılsa dock/menü z-index'leriyle uğraşmak gerekirdi).
   Uyarı tonu accent DEĞİL amber: "hata" değil "eksik iş" sinyali. */
.q-verifybar {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 8px 14px; font-size: 13px; line-height: 1.35;
    background: #6b4a12; color: #ffe9b8; border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.q-verifybar-txt { flex: 1; min-width: 0; }
.q-verifybar-btn {
    flex: none; padding: 5px 13px; border-radius: 7px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 600;
    background: #ffd479; color: #3a2705; border: 0; transition: filter .15s;
    display: inline-flex; align-items: center; gap: 6px; min-height: 26px;
}
.q-verifybar-btn:hover:not([disabled]) { filter: brightness(1.08); }
.q-verifybar-btn[disabled] { opacity: .65; cursor: default; }
/* VPN/PROXY BİLGİ BANDI (2026-08-04) — q-verifybar'ın kardeşi, aynı akış (.q-root flex kolonu),
   ama MAVİ: amber "eksik iş" demek, bu ise yalnız bilgi. Kapatma düğmesi var çünkü tespit bir
   SEZGİ; yanlış pozitifte kullanıcıyı bandın altında bırakmayız. */
.q-vpnbar {
    display: flex; align-items: center; gap: 10px; flex: none;
    padding: 8px 14px; font-size: 13px; line-height: 1.35;
    background: #123a5e; color: #cfe6ff; border-bottom: 1px solid rgba(0, 0, 0, .25);
}
.q-vpnbar-txt { flex: 1; min-width: 0; }
.q-vpnbar-x {
    flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; cursor: pointer;
    background: transparent; color: inherit; font-size: 13px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; transition: background .15s;
}
.q-vpnbar-x:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 620px) {
    .q-vpnbar { font-size: 12px; padding: 7px 10px; }
}

/* Dar ekran: metin sarsın, buton alta düşmesin (tek satırda sıkışmaktan iyidir). */
@media (max-width: 620px) {
    .q-verifybar { flex-wrap: wrap; gap: 6px; font-size: 12px; }
    .q-verifybar-txt { flex: 1 1 100%; }
}

/* #6 SKELETON (2026-07-30): yükleme sırasında "boş" göstermek yanlış bilgiydi ("Henüz mesaj yok" →
   sonra mesajlar patlıyordu). Yalnız transform/opacity animasyonu (layout tetiklemez).
   .q-sk-wrap 160ms GECİKMEYLE açılır: yerelde/hızlı bağlantıda iskelet HİÇ görünmez, yavaş
   bağlantıda devreye girer. prefers-reduced-motion'da parıltı durur, iskelet durur (kaybolmaz). */
/* DİKKAT — taban durum GÖRÜNÜR, gecikme animasyonun `both` fill'inden gelir.
   `opacity:0` + `forwards` yazımı da aynı görüntüyü verir AMA animasyonlar hiç koşmazsa
   (kullanıcı/eklenti stil dosyası `animation:none`, ya da arka plan sekmesinde donmuş saat)
   iskelet KALICI görünmez kalır → sohbet paneli bomboş görünür. Böyle yazılınca en kötü
   senaryo "iskelet hemen görünür" (kısa parlama) olur; bozulma güvenli tarafa düşer. */
.q-sk-wrap { animation: q-sk-in .14s ease-out 160ms both; }
@keyframes q-sk-in { from { opacity: 0; } to { opacity: 1; } }
.q-sk { background: var(--q-input-bg); border-radius: 6px; position: relative; overflow: hidden; }
.q-sk::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
    animation: q-sk-sweep 1.3s ease-in-out infinite;
}
@keyframes q-sk-sweep { to { transform: translateX(100%); } }
/* GÖRSEL İSKELETİ (2026-08-06, kullanıcı: "yüklenen yerde skeleton olsun"): görsel inene dek
   kutusunda parıltı. IMG pseudo-element TAŞIMAZ → parıltı background animasyonuyla; goglis.js
   yüklenince .q-imgok basar, animasyon durur. YALNIZ opak (cover/foto) görseller listede —
   şeffaf PNG'lerde (çıkartma) zemin kalıcı sızardı. Yük olayı kaçarsa bile zarar yok: opak
   görsel zemini zaten tamamen örter. */
img.q-av:not(.q-imgok), img.q-mini:not(.q-imgok), img.q-pcard2-av:not(.q-imgok),
.q-gifpick-grid img:not(.q-imgok), img.q-gifmsg:not(.q-imgok), img.q-embed-img:not(.q-imgok),
/* NOT: q-stagethumb bu listeden CIKARILDI (2026-08-18) — bekleyen dosyanin kucuk resmi
   CIHAZDAN gelir (blob), aginda inecek bir sey yoktur; parildayan gri iskelet orada yalnizca
   "bir seyler yukleniyor" yanilgisi uretiyordu. */
img.q-reply-thumb:not(.q-imgok) {
    background: linear-gradient(100deg, var(--q-input-bg) 40%, var(--q-hover) 50%, var(--q-input-bg) 60%) 0 0 / 200% 100%;
    animation: q-imgsk 1.3s ease-in-out infinite;
}
@keyframes q-imgsk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { img:not(.q-imgok) { animation: none; } }
@media (prefers-reduced-motion: reduce) {
    .q-sk-wrap { animation-duration: .01s; }
    .q-sk::after { animation: none; }
}
.q-sk-msg { display: flex; gap: 12px; padding: 9px 18px; }
.q-sk-av { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.q-sk-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding-top: 4px; }
.q-sk-line { height: 10px; }
.q-sk-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; }
.q-sk-dot { width: 26px; height: 26px; border-radius: 50%; flex: none; }

/* #7 Mesaj içi ROL BUTONLARI — rolün rengi --q-rbc ile satır içi gelir (rol rengi kullanıcı verisi;
   sunucu ^#rrggbb doğrular, bkz. UpdateServerRoleAsync). "on" = bu rol bende var (✓). */
.q-rolebtns { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.q-rolebtn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; background: var(--q-input-bg); color: var(--q-strong); border: 1px solid var(--q-divider); transition: background .15s, border-color .15s, filter .15s; }
.q-rolebtn:hover { border-color: var(--q-rbc, var(--q-accent)); filter: brightness(1.06); }
.q-rolebtn .q-rb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--q-rbc, var(--q-accent)); flex: none; }
.q-rolebtn.on { background: color-mix(in srgb, var(--q-rbc, var(--q-accent)) 20%, transparent); border-color: var(--q-rbc, var(--q-accent)); }
.q-rolebtn.stale { opacity: .5; cursor: default; text-decoration: line-through; }
.q-rolebtn.stale:hover { filter: none; border-color: var(--q-divider); }
/* Kart kurma diyaloğu: rol seçim satırları + buton etiketi girişi. */
.q-rb-pick { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; }
.q-rb-pickrow { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 8px; }
.q-rb-pickrow.on { background: var(--q-input-bg); }
.q-rb-pickrow .q-rb-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.q-rb-label { max-width: 170px; margin-left: auto; }
.q-rb-hint { margin-top: 12px; font-size: 12px; color: var(--q-muted); line-height: 1.45; }
.q-poll { max-width: 460px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 13px; padding: 12px 14px; margin-top: 2px; }
.q-poll-q { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; color: var(--q-strong); margin-bottom: 10px; }
.q-poll-opt { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 5px 0; padding: 8px 11px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg); color: var(--q-strong); font-size: 13.5px; cursor: pointer; overflow: hidden; font-family: inherit; text-align: left; }
.q-poll-opt:hover:not(.ended) { border-color: var(--q-accent); }
.q-poll-opt.mine { border-color: var(--q-accent); }
.q-poll-opt.ended { cursor: default; opacity: 0.85; }
.q-poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--q-accent) 20%, transparent); transition: width 0.35s ease; pointer-events: none; }
.q-poll-optlabel { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.q-poll-opt.mine .q-poll-optlabel { color: var(--q-accent); font-weight: 600; }
.q-poll-cnt { position: relative; font-size: 12px; font-weight: 700; color: var(--q-muted); flex: none; }
.q-poll-foot { margin-top: 8px; font-size: 11.5px; color: var(--q-muted); }
.q-poll-create .q-poll-optrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.q-poll-multi { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: var(--q-strong); cursor: pointer; }

/* Grup DM sağ paneli: sesli arama butonu + aramadayım bandı */
.q-group-call { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 8px); margin: 4px 4px 10px; padding: 9px 0; border: 0; border-radius: 10px; background: var(--q-online); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.q-group-call:hover { background: color-mix(in srgb, var(--q-online) 85%, #000); }
.q-group-incall { display: flex; align-items: center; gap: 8px; margin: 4px 4px 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, var(--q-online) 12%, transparent); color: var(--q-online); font-size: 12.5px; font-weight: 600; }

/* Birebir DM sağ paneli: arkadaşın profil kartı (aksi halde boş duran kanallar kolonu) */
/* (2026-07-31, kullanıcı: "sanki oraya yapıştırılmış gibi") Kart artık sütunun İÇİNDEN çıkıyor:
   kendi zemini yok (sütunun zeminini kullanır), kenar boşluğu/köşe yuvarlaması yok → kapak
   görseli kolonun kenarlarına dayanır. Eskiden --q-panel-bg ile sütundan bir ton koyuydu ve
   dikdörtgen bir blok gibi duruyordu. Avatar halkası da sütun zeminiyle aynı renge çevrildi,
   yoksa halka "eski kart zemini" rengiyle kalır ve yama gibi görünürdü. */
/* #22: DM yan panel eylem satırı — Ara (kare ikon) + Profil (genişleyen) */



/* ---- DM ARAMASI DUZENI (2026-08-12) ----
   q-dmc-on = bir DM aramasindayim. Sohbet varsayilan ACIK ama KUCUK: mesaj listesi ~%10
   (--q-dmchat-h ayracla degisir), sahne kalan her seyi alir ve karolar ortalanir.
   q-dmc-nochat = sohbet kapali: mesajlar/composer gizli, sahne tam ekran, karolar buyuk
   (iki sutun = "mantiksal 2x2") ve dikey+yatay ortali. */
html.q-dmc-on:not(.q-dmc-nochat) .q-chat.q-dmcallchat .q-messages {
    /* %30 sohbet / %70 sahne (2026-08-12 — ilk istek 90/10'du, ayni gun 70/30'a cevrildi).
       SHRINK SIFIR (ayni gun saha hatasi: "cizgiye basinca yukari atiyor, mouse farkli yerde
       kaliyor"). `flex: 0 1` idi: buyuk ekran karosu sahnenin flex-basis'ini (auto=icerik)
       sisirince toplam tasiyor, flex kucultme payini BASIS'e orantili dagitiyor ve mesaj
       listesi yazdigimiz yukseklikten DAHA KISA ciziliyordu. Sonuc: basista ani ziplama
       (basis %30'dan px'e donunce pay yeniden dagitiliyor) + suruklerken imlecin ayractan
       kopmasi (1px fare = 1px basis ama ~0.6px gercek yukseklik). Shrink 0 = yazilan deger
       OTORITE; sahne zaten flex:1 + min-height:0, kalani o emer. */
    flex: 0 0 var(--q-dmchat-h, 30%);
    min-height: 56px;
}
html.q-dmc-on .q-chat.q-dmcallchat .q-videostage {
    flex: 1 1 auto; max-height: none; min-height: 0;
    /* SAFE center: tasan sarmali flex'te duz `center` icerigi kaydirma alaninin DISINA iter
       ve ust karolara ulasilamaz (taban kuralin 2026-08-10 dersi — burada da gecerli). */
    align-content: safe center; justify-content: center;
}
html.q-dmc-on.q-dmc-nochat .q-chat.q-dmcallchat .q-messages,
html.q-dmc-on.q-dmc-nochat .q-chat.q-dmcallchat .q-composer,

/* Sohbet kapaliyken karolar BUYUK, iki sutun: genis odada 2x2 dizilir (DM zaten en cok 5 kisi). */
html.q-dmc-on.q-dmc-nochat .q-videostage.call .q-vidtile { width: min(44%, 640px); }
/* Ayrac cizgisi — yalniz DM aramasi + sohbet ACIKKEN cizilir (markup kosullu). */
/* Kanal ayracı: sahne tavana uyar, taşan karolar sahnenin İÇİNDE kayar (2026-08-18). */
.q-chat:not(.q-dmcallchat) .q-videostage { max-height: var(--q-stageh, none); overflow-y: auto; }
/* Video odasında sohbet GÖRÜNÜRKEN de tavan geçerli — sohbet-gizli modunun `max-height:none`
   kuralı (0,4,1) genel kuralı eziyordu (ölçüldü); aynı özgüllükte, kaynakça sonra = kazanır. */
html.q-vroom-on.q-vroom-chat .q-chat .q-videostage { max-height: var(--q-stageh, calc(85dvh / var(--q-zoom, 1))); overflow-y: auto; }
/* Sohbet gizliyken altta sohbet yok — ayraç anlamsız, çizilmez. */
html.q-vroom-on:not(.q-vroom-chat) .q-dmsep { display: none; }

.q-dmsep {
    height: 9px; flex: none; cursor: row-resize; position: relative;
    background: transparent; touch-action: none;
}
.q-dmsep::after {
    content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px;
    background: var(--q-divider);
}
.q-dmsep:hover::after, .q-dmsep:active::after { background: var(--q-accent); height: 2px; top: 3.5px; }

/* ---- VIDEO ODASI YERLESIMI (2026-08-12) ----
   q-vroom-on = bir video odasina bagliyim (Home JS'e yazar). Varsayilan: SOHBET GIZLI,
   sahne ortali; uye/kanal listeleri ACIK. Uc tercih de localStorage'da kalici (goglisVRoom).
   display:none KULLANILIYOR, unload degil: paneller kapaliyken de Blazor agacinda canli
   kalir — acildiklarinda hicbir sey yeniden yuklenmez. */
html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-messages,
html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-composer { display: none; }
/* Sohbet gizliyken sahne kalan alani DOLDURUR ve karolar dikey+yatay ORTALANIR
   (kullanici: "tam dikey ve yatay ortali contentte gormek isteyebilir"). */
html.q-vroom-on:not(.q-vroom-chat) .q-chat .q-videostage {
    flex: 1 1 auto; max-height: none;
    align-content: center; justify-content: center;
}
/* Panel gizleme — yalniz sunucu modunun uc kolonu. */
html.q-vroom-on.q-vroom-nomem .q-main.q-srv > .q-online { display: none; }
html.q-vroom-on.q-vroom-noch .q-main.q-srv > .q-channels { display: none; }

/* Baslik ucundaki toggle'lar: uye dugmesi uyelerin OLDUGU tarafta durur (varsayilan SOL),
   kanal dugmesi kanallarin tarafinda (SAG). Kolon takasinda (q-sideswap) dugmeler de takas
   olur — flex `order` ile: diger baslik cocuklari 0'da kalir, -1 en basa, 100 en sona gider. */
.q-vt { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent;
        color: var(--q-muted); display: inline-flex; align-items: center; justify-content: center;
        cursor: pointer; flex: none; }
.q-vt:hover { background: var(--q-hover); color: var(--q-text); }
.q-vt.off { color: var(--q-faint); }
.q-vt-mem { order: -1; margin-right: 4px; }
.q-vt-ch { order: 100; margin-left: 4px; }
html.q-sideswap .q-vt-mem { order: 100; margin: 0 0 0 4px; }
html.q-sideswap .q-vt-ch { order: -1; margin: 0 4px 0 0; }
/* Uye kolonu toggle'i KOLONUN OLDUGU UCTA durur (2026-08-15, kullanici: "sagda
   tikliyorum sol kapaniyor, ne alaka"): Arena'da uyeler solda -> dugme sol ucta,
   Klasik'te (sideswap) sagda -> sag ucta. vr-mem/vr-ch ile ayni desen. */
.q-memtoggle { order: -1; margin-right: 4px; }
html.q-sideswap .q-memtoggle { order: 100; margin: 0 0 0 4px; }

/* SOHBET IPUCU — SPOT ISIGI (2026-08-12, kullanici: "ekran koyulassin, o ikona odaklasin ve
   ok gostersin"). Ilk surum yalniz baloncuktu; kullanici sahada denedi ve yeterince dikkat
   cekmedigini soyledi. Simdi: tam ekran karartma (z-1300) + dugme sarmali z-1302'ye cikar
   (perde herkesi karartir, yalniz dugme + ok + baloncuk aydinlik kalir) + halka isiltisi.
   Perde GORUNUR ve tiklanabilir (tikla = kapat) + 6 sn'de kendini kapatir — "asili gorunmez
   perde" hata sinifina BILEREK girmiyor. */
.q-vr-coach { position: fixed; inset: 0; z-index: 1300; background: rgba(0,0,0,.62); cursor: pointer;
              animation: q-coach-in .25s ease-out; }
@keyframes q-coach-in { from { opacity: 0; } to { opacity: 1; } }
.q-vr-wrap { position: relative; display: inline-flex; }
.q-vr-spot { z-index: 1302; }
.q-vr-spot .q-vctl { background: var(--q-hover); color: var(--q-accent);
                     box-shadow: 0 0 0 3px var(--q-accent), 0 0 24px 8px rgba(229,161,58,.45);
                     animation: q-spot-ring 1.2s ease-in-out infinite; }
@keyframes q-spot-ring { 0%,100% { box-shadow: 0 0 0 3px var(--q-accent), 0 0 24px 8px rgba(229,161,58,.45); }
                         50% { box-shadow: 0 0 0 6px var(--q-accent), 0 0 34px 12px rgba(229,161,58,.6); } }
/* Baloncuk dugmenin ALTINDA ortali; ustundeki ucgen OK dugmeyi isaret eder. */
.q-vt-tip { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
            z-index: 1302; white-space: nowrap; background: var(--q-side-bg);
            border: 1px solid var(--q-accent); color: var(--q-text); font-size: 13px; font-weight: 600;
            padding: 8px 13px; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.q-vt-tip::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
                    border: 8px solid transparent; border-bottom-color: var(--q-accent); }
@media (prefers-reduced-motion: reduce) { .q-vr-spot .q-vctl { animation: none; } }

/* Ping rozeti (ses dock'u + DM bandı) — tıklanır; yeşil/amber/kırmızı gecikmeye göre */
.q-ping { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; cursor: pointer; background: color-mix(in srgb, var(--q-online) 15%, transparent); color: var(--q-online); white-space: nowrap; flex: none; }
.q-ping.warn { background: rgba(216,160,60,0.15); color: #d8a03c; }
.q-ping.bad { background: rgba(237,66,69,0.15); color: var(--q-danger-soft); }
.q-ping-info { padding: 6px 12px 8px; font-size: 12.5px; color: var(--q-strong); max-width: 260px; }
.q-ping-srv { font-weight: 600; }
.q-ping-ms { margin-top: 6px; color: var(--q-muted); font-size: 12px; }
.q-ping-ms b { color: var(--q-accent); }

/* ---- #1 görüntülü konuşma: video sahnesi ---- */
/* ORTALI sahne (2026-07-13): kaç video olursa olsun yatayda ortalanir; tile'a tıkla = büyüt/küçült */
/* align-content: SAFE center — taşan sarmalı flex satırlarında düz `center` içeriği kaydırma
   alanının DIŞINA itiyor ve üstteki karolara hiç ulaşılamıyor (klasik flex tuzağı). Karo boyutu
   artık tutamaçla büyüyebildiği için bu durum kolayca oluşuyor. `safe` sığdığı sürece ortalar,
   taşınca başa hizalar. (2026-08-10, 9. tur adayı.) */
.q-videostage { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: safe center; gap: 10px; padding: 10px 12px 6px; background: #101116; overflow: auto; max-height: calc(85vh / var(--q-zoom, 1)); max-height: calc(85dvh / var(--q-zoom, 1)); }

/* ── MOBİL TAM EKRAN SAHNE (#3, 2026-08-20: "Android'deki video ekranı iPhone'da da olsun").
   Mevcut sahne 'mfull' ile tam ekrana terfi eder — Android native sahneyle aynı dil: koyu zemin,
   yuvarlatılmış karolar, üstte başlık+kapat, altta yuvarlak kumandalar. Karo ölçüleri: 1-2 kişi
   TAM GENİŞLİK alt alta, 3+ (cols2) ikili ızgara; ekran paylaşımı hep tam satır. *@ */
.q-videostage.mfull { position: fixed; inset: 0; z-index: 1290; margin: 0; border-radius: 0; background: #0F1216;
    padding: calc(58px + env(safe-area-inset-top, 0px)) 10px calc(104px + env(safe-area-inset-bottom, 0px));
    max-height: none; display: grid; grid-template-columns: 1fr; gap: 8px; align-content: center; align-items: stretch; overflow-y: auto; }
.q-videostage.mfull.cols2 { grid-template-columns: 1fr 1fr; }
.q-videostage.mfull .q-vidtile { width: 100%; aspect-ratio: auto; min-height: 240px; height: 100%; border-radius: 16px; background: #161A20; border: 1px solid rgba(255,255,255,.12); }
.q-videostage.mfull.cols2 .q-vidtile { min-height: 200px; }
.q-videostage.mfull .q-vidtile.screen { grid-column: 1 / -1; min-height: 220px; }
/* İçerik sahneden azsa karolar dikeyde eşit büyür: 1 kişi ≈ tam sahne, 2 kişi yarı yarıya. */
.q-videostage.mfull { grid-auto-rows: minmax(240px, 1fr); }
.q-videostage.mfull.cols2 { grid-auto-rows: minmax(200px, 1fr); }
.q-mstage-head { position: fixed; top: 0; left: 0; right: 0; z-index: 1291; display: flex; align-items: center; gap: 9px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; background: #0F1216; color: #fff; }
.q-mstage-t { font-size: 16px; font-weight: 600; }
.q-mstage-dot { width: 8px; height: 8px; border-radius: 50%; background: #34C77B; flex: 0 0 auto; }
.q-mstage-x { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.09); color: #C6CBD4; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.q-mstage-ctl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1291; display: flex; justify-content: center; gap: 16px;
    padding: 12px 0 calc(18px + env(safe-area-inset-bottom, 0px)); background: #0F1216; }
.q-mstage-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: #2A2F38; color: #fff; cursor: pointer; }
.q-mstage-btn.warn { background: #fff; color: #E5484D; }
/* Hoparlör AÇIK: telefon arama arayüzlerinin ortak dili — düğme dolu/aydınlık olur.
   `warn` KULLANILMAZ: o beyaz zemin + KIRMIZI ikon, yani "dikkat" demek; ahize ise
   normal durumdur, uyarı değil. */
.q-mstage-btn.on { background: #fff; color: #1F1B1A; }
.q-mstage-btn.leave { background: #E5484D; color: #fff; }
.q-mstage-btn:disabled { opacity: .45; }
.q-mstage-pill { position: fixed; right: 12px; bottom: 84px; z-index: 1250; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: #161A20; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
/* SUNUCU VIDEO KANALINDA DA SAHNE ICERIGE YAPISIR (2026-08-12, kullanici ekran goruntusuyle:
   "video kanalina giris yapinca videoya gore olceklendirmedi; DM'de bu sorunu halletmistik").
   ONCEKI HAL: bu kural `height: var(--q-vstage, 320px)` ile SABIT yukseklik veriyordu. Deger
   tutamactan geliyordu; tutamac ayni gun kaldirilinca degiskeni yazan KIMSE kalmadi ve sahne
   kalici olarak 320px'e kilitlendi — iki karolu bir odada karolarin altinda kapatilamayan
   bos bir siyah alan kaliyordu.
   SIMDI `height: auto`: yukseklik iceriktan gelir (DM'deki `.q-videostage.call` ile ayni
   davranis). Karo BOYUTU etkilenmez — o hala `--q-vstage`ten (varsayilan 320) ve sutun
   sayisindan turuyor, yani "konusan buyuk / digerleri kucuk" hiyerarsisi korunur; degisen tek
   sey KABIN bos yer kaplamamasi. Sigmayan karolar taban kuraldaki `overflow:auto` ile kayar,
   tavan yine %85. */
.q-videostage[style*="--q-vgrid"] { height: auto; max-height: calc(85dvh / var(--q-zoom, 1)); align-content: safe start; }
/* SAHNE TUTAMACI KALDIRILDI (2026-08-12): yukseklik artik icerikten geliyor, elle
   boyutlandirma yok. `.q-dmresize` / `.q-chresize` (kolon tutamaclari) DURUYOR. */

/* MENU ACIKKEN ARKADAKI SURUKLEME TUTAMACLARI OLU (2026-08-12, kullanici: "ses ayarlari
   yaparken elim arkadaki genisletme daraltmaya dokunuyor, dokunmamasi lazim").
   Fare kaydiraca giderken tutamacin uzerinden geciyor: hem `title` baloncugu aciliyor hem de
   yanlislikla surukleme baslayabiliyor. Perdenin z-index'ine GUVENMIYORUZ — tutamaclar farkli
   yigin baglamlarinda yasiyor ve biri perdenin ustune cikabiliyor. `pointer-events: none`
   elemani hit-test'ten TAMAMEN cikarir, yani stacking ne olursa olsun sonuc ayni.
   `q-menuopen` isaretini goglisMenu.sync zaten koyuyor (acik panel sayisina gore). */
html.q-menuopen .q-dmresize,
html.q-menuopen .q-dmsep,
html.q-menuopen .q-chresize { pointer-events: none; }
/* #14 DM görüntülü aramada Discord-vari bölünme: video sahnesi ÜST yarı, mesajlar ALT yarı (YALNIZ DM+video; server voice kanalları etkilenmez, 85dvh davranışı korunur). */
/* TUTAMAC DM ARAMASINDA DA CALISIR (2026-08-12, kullanici: "o araddan tutup asagiya
   genisletemiyorum, dm aramasindayken oluyor ... ekran paylasimi acinca oluyor").
   ONCEKI HAL: sahne `flex: 1 1 0` ile mesajlarla 50/50 bolusuyordu, dolayisiyla tutamacin
   yazdigi `--q-vstage` hicbir seyi surmuyordu ve tutamac `display:none` ile GIZLENMISTI —
   yani sorun "tutamac calismiyor" degil "bu duzende tutamac YOK"tu.
   SIMDI: sahne yuksekligini `--q-vstage`ten alir (sunucu ses kanallarindaki davranisin AYNISI),
   mesajlar kalani doldurur. Boylece tek bir davranis kalir, iki ayri duzen degil.
   Alt/ust sinir: mesajlar sifira ezilmesin, sahne de kaybolmasin. */
/* EKRAN PAYLASIMI ACILINCA SAHNE KENDILIGINDEN BUYUR (2026-08-12, kullanici: "ekran
   paylastigimda otomatik ayarlamiyor, elimde ayarliyorum, bunu otomatik yapmasi gerekiyor").
   KOK NEDEN: `.q-dmsplit` (kamera/ekran acilinca devreye girer) sahneye SABIT bir flex-basis
   veriyordu (--q-vstage). Iki avatar karosuna gore ayarlanmis kucuk bir deger, ekran karosu
   geldiginde de aynen kaliyor ve genis 16:9 karo kirpiliyordu; kullanici her seferinde elle
   tutamaci cekmek zorunda kaliyordu.
   SIMDI: yukseklik ICERIKTEN gelir (`flex: 0 1 auto`), yani ekran karosu eklenince sahne
   kendiliginden uzar. Kullanicinin surukleyerek verdigi deger ALT SINIR olarak yasar
   (--q-vstage-min), ust sinir %70 — kalan yer sohbete kalir. */
.q-dmsplit .q-videostage {
    flex: 0 1 auto;
    /* `min-height` KALKTI: onu yalniz tutamac yaziyordu (--q-vstage-min), tutamac da kalkti.
       Yukseklik tamamen icerikten gelir; tavan asagida. */
    max-height: 70dvh;
    align-content: start;
}
.q-dmsplit .q-messages { flex: 1 1 0; min-height: 0; }
/* Karo genişliği TUTAMAĞA bağlı (2026-08-10, kullanıcı: "sürükleyerek boyutlandır videolarda
   çalışmıyor"). Tutamaç --q-vstage'i yazıyordu ama YALNIZ ekran paylaşımı (.screen) ve odaklanmış
   (.big) karolar onu okuyordu; normal KAMERA karolarının genişliği sabit 300px'ti, dolayısıyla
   video odasında sürüklemek gözle hiçbir şey değiştirmiyordu. 0.9375 katsayısı varsayılanı korur:
   320px × 0.9375 = 300px (eski görünüm birebir aynı), sürükleyince artık karolar da büyür/küçülür. */
.q-vidtile { position: relative; aspect-ratio: 16 / 9; background: #17181f; border-radius: 12px; overflow: hidden; border: 2px solid transparent; width: min(100%, calc(var(--q-vstage, 320px) * 0.9375)); flex: 0 0 auto; cursor: zoom-in; }
.q-vidtile.big { width: min(100%, calc(var(--q-vstage, 320px) * 1.7778)); cursor: zoom-out; }
/* Konuşan çerçevesi İÇE çizilir (2026-08-18): border zaten 2px sabit ama yeşili inset
   gölgeyle basmak kutu ölçüsünü hiçbir durumda etkilemez ve daha belirgin durur. */
.q-vidtile.speaking { border-color: var(--q-online); box-shadow: inset 0 0 0 2px var(--q-online); }
/* KONUŞAN BÜYÜR (2026-08-11, kullanıcı isteği) — yalnız VİDEO KANALINDA (`vroom`); iki kişilik
   DM aramasında büyüme karşı tarafı alt satıra iterdi. Sıra değişimi CSS `order` ile yapılıyor
   (bkz. Home.CamOrder) — DOM'da karo taşınmadığı için <video> duraklamaz.
   GECİKME YÖNE BAĞLI: taban kuraldaki 1.1sn gecikme KÜÇÜLME yönünde çalışır (sınıf kalkınca taban
   kural devralır), `.speaking`teki 0s ise BÜYÜMEYİ anında yapar. Kullanıcının istediği "konuşması
   bitince gecikmeli küçülsün" davranışı böylece tek satır CSS'le olur: ne zamanlayıcı, ne devre
   trafiği. Genişlik animasyonu her karede flex düzenini yeniden hesaplattığı için komşu karolar da
   sıçramadan kayar. */
/* GECIKME ARTIK YALNIZ "KONUSMASI BITTI, KUCUL" YOLUNDA (2026-08-12, kullanici: "bir videoyu
   veya ekran paylasimini buyultup kucultmek cok gecikmeli, o animasyonu kaldir ya da cok hizli
   acilip kapansin, orda bi delay var").
   ONCEKI HAL: 1.1sn gecikme TABAN kuraldaydi, yani KULLANICININ TIKLADIGI buyutme/kucultme de
   1.1 saniye bekliyordu — tiklayip "bozuk mu" diye dusunulecek kadar uzun. Oysa o gecikmenin
   tek amaci konusan kisi susunca karonun ANINDA kuculmemesiydi (sohbette karolar zipliyordu).
   SIMDI: taban gecikmesiz ve daha kisa (.18s) — kullanici eylemi ANINDA. Konusma kaynakli
   kuculme gecikmesi ise yalnizca VIDEO ODASINDAKI, buyutulmemis, ekran olmayan karolara
   veriliyor; yani orijinal davranis korunuyor ama tiklamaya bulasmiyor. */
/* GECIKME TAMAMEN KALKTI (2026-08-12, kullanici: "video veya ekran penceresi kuculme hala
   gene cok delayli, delayi tamamen kaldir").
   ONCEKI TUR gecikmeyi taban kuraldan alip yalniz "konusmasi bitti, kucul" yoluna tasimisti.
   Ama KUCULME o yolun ta kendisi: buyutulmus karodan cikinca karo `:not(.big)` oluyor ve
   ayni kural devraliyordu — yani kullanici tiklamasi yine 1,1 saniye bekliyordu.
   Iki davranisi ayni CSS ozelligi (width) uzerinden ayirmak mumkun degil; kullanici da
   gecikmenin tamamen gitmesini istedi. Sonuc: konusan kisi susunca karo da ANINDA kuculur.
   Bu bilincli bir takas — geri istenirse gecikme `.speaking`in KALKTIGI ani yakalayan ayri
   bir sinifla (JS) verilmeli, CSS'te secilebilir bir yolu yok. */
/* KONUŞAN BÜYÜMESİ KALDIRILDI (2026-08-18, kullanıcı: "konuşurken büyüme/susunca küçülme
   olayını kaldır, video aşağı kayıyor; 2x2 dediğimde her türlü yan yana durmalı").
   Genişleyen karo satırı taşırıp alttaki karoyu bir alt satıra itiyordu — "video aşağı kayıyor"
   dediği tam buydu. Konuşan artık YALNIZ çerçeveyle belli olur; yerleşim sabit kalır. */
.q-vidtile { transition: border-color .18s ease; }
/* Kamerasız (avatar) karolar HER ZAMAN sonda: `order` verilmeyen flex çocuğu 0 olur ve kamera
   karolarının (1..9) ÖNÜNE geçerdi. Ekran paylaşımı karosu bilerek 0'da kalır = en başta. */
.q-vidtile.av { order: 900; }

/* ---- IZGARA BOYUTU (2026-08-11, kullanıcı isteği: 2x2 / 4x4 / 6x6 / 8x8) ----
   Karo genişliği SÜTUN SAYISINDAN türetilir: sahnenin kullanılabilir genişliği eksi boşluklar,
   sütuna bölünür. Böylece "4x4" gerçekten 4 sütun çizer — sabit piksel vermek pencere
   daralınca 3 sütuna düşerdi ve seçim yalan olurdu.
   `--q-vgrid` C#'tan gelir (yalnız sayı); ölçüyü CSS yapar ki kolon sürükleme/pencere boyutu
   değişiminde yeniden hesap gerekmesin. Değişken yoksa (DM araması) eski davranış sürer. */
.q-videostage[style*="--q-vgrid"] .q-vidtile:not(.screen):not(.big) {
    width: calc((100% - (var(--q-vgrid) - 1) * 10px) / var(--q-vgrid));
}
/* Konuşan büyümesi ızgara modunda da KALKTI (2026-08-18): +10px bile satırı taşırıp
   2x2'yi alt alta düşürüyordu — seçilen ızgara her koşulda korunur. */
/* MOBİL TAM EKRAN SAHNE (#3): üstteki ızgara genişlik hesabı mfull'da geçersiz — CSS grid
   kolonu genişliği zaten belirler, karo kolonunu doldurur. Aynı özgüllükte oldukları için bu
   kural KAYNAKTA ALTTA durmak zorunda (yukarı taşınırsa ızgara kuralı kazanır, karo daralır). */
.q-videostage.mfull .q-vidtile:not(.screen):not(.big) { width: 100%; }

/* ---- SABİTLEME (2026-08-11) — YALNIZ BENİM görünümümü etkiler ---- */
.q-vidpin { position: absolute; top: 6px; left: 6px; z-index: 4; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.q-vidtile:hover .q-vidpin, .q-vidpin.on { display: inline-flex; }
.q-vidpin.on { background: var(--q-accent); }
/* Tek kisiyi sustur — karonun sag ustunde, yalniz yetkilide ve hover'da (2026-08-11). */
.q-vidmute { position: absolute; top: 6px; left: 36px; z-index: 4; width: 26px; height: 26px; display: none; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
/* SUSTUR ile SABITLE YAN YANA (2026-08-11 kullanici istegi): ikisi de sol ustte,
   sabitle 6px, sustur 36px — 26px genislik + 4px bosluk. */
.q-vidtile:hover .q-vidmute { display: inline-flex; }
.q-vidmute:hover { background: var(--q-danger); }
.q-vidtile:fullscreen .q-vidmute { display: none !important; }
/* Tepki secicisindeki Goglis emojileri butonu doldursun. */
.q-vreact-b .gg-emoji { width: 22px; height: 22px; vertical-align: -3px; }
.q-vreact-g .gg-emoji { width: 34px; height: 34px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.q-vidtile.pinned { border-color: var(--q-accent); }
/* Sabitlenen karo, konuşan çerçevesiyle çakışmasın: konuşma yeşili öncelikli kalsın. */
.q-vidtile.pinned.speaking { border-color: var(--q-online); }

/* TAM EKRANDA GEREKSİZ BUTONLAR GİZLENİR (2026-08-11, kullanıcı: "büyültme küçültme ikonu bir
   videoyu tam ekran yapınca gözükmesin, orada basmak anlam ifade etmiyor"). Sahne-içi büyütme
   ve sıra sabitleme, ızgara kavramlarıdır; tam ekranda ızgara yoktur. Tam ekrandan ÇIKMA
   düğmesi (.q-vidfull) elbette kalır. */
.q-vidtile:fullscreen .q-vidzoom, .q-vidtile:fullscreen .q-vidpin { display: none !important; }

/* ---- YARDIM MERKEZİ (2026-08-11) ---- Ayarlar diyaloğuyla aynı iki kolonlu kabuk. */
.q-help-wrap { display: flex; height: 100%; min-height: 0; position: relative; }
.q-help-nav { flex: 0 0 214px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; background: var(--q-side-bg); overflow-y: auto; }
.q-help-navtitle { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 800; padding: 2px 8px 10px; color: var(--q-text); }
.q-help-search { width: 100%; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--q-text); background: var(--q-input-bg); border: 1px solid var(--q-divider); }
.q-help-search:focus { outline: none; border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-state-primary); }
/* `justify-content: flex-start` AÇIKÇA YAZILIR (2026-08-11, kullanıcı: "yardım menüsü ortalı,
   sola yaslı olması lazım"). Genel bir buton kuralı `center` basıyor ve satırlar ortalanınca
   her birinin ikonu farklı yerden başlıyordu (ölçüldü: ikon soldan 53 / 20 / 56 / 62 px) —
   liste tırtıklı görünüyordu. `text-align: left` tek başına yetmez: hizayı belirleyen flex
   ekseni. `.q-help-navi span { flex: 1 }` de metnin satırı doldurmasını garantiler. */
.q-help-navi { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--q-muted); font: 600 13px/1.3 inherit; text-align: left; cursor: pointer; transition: background var(--q-dur, .16s) var(--q-ease, ease), color var(--q-dur, .16s) var(--q-ease, ease); }
.q-help-navi span { flex: 1; min-width: 0; }
.q-help-navi:hover { background: var(--q-hover); color: var(--q-text); }
.q-help-navi.on { background: var(--q-state-primary); color: var(--q-text); }
.q-help-navi .gg-icon { flex: none; }
.q-help-empty { padding: 14px 10px; font-size: 12.5px; color: var(--q-muted); }
.q-help-body { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 26px 34px 46px; }
.q-help-h1 { margin: 0 0 6px; font-size: 22px; font-weight: 800; color: var(--q-text); }
.q-help-lead { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--q-muted); }
.q-help-h2 { margin: 24px 0 8px; font-size: 15px; font-weight: 800; color: var(--q-text); }
.q-help-p { margin: 0 0 11px; font-size: 13.5px; line-height: 1.72; color: var(--q-text); }
.q-help-steps { margin: 4px 0 12px; padding-left: 20px; }
.q-help-steps li { margin-bottom: 7px; font-size: 13.5px; line-height: 1.65; color: var(--q-text); }
.q-help-callout { display: flex; align-items: flex-start; gap: 9px; margin: 14px 0; padding: 11px 13px; border-radius: 10px; font-size: 13px; line-height: 1.6; }
.q-help-callout.tip { background: var(--q-state-primary); border: 1px solid color-mix(in srgb, var(--q-accent) 40%, transparent); color: var(--q-text); }
.q-help-callout.tip .mud-icon-root { color: var(--q-accent); flex: none; margin-top: 1px; }
.q-help-callout.warn { background: rgba(224,155,26,.13); border: 1px solid rgba(224,155,26,.42); color: var(--q-text); }
.q-help-callout.warn .mud-icon-root { color: #E09B1A; flex: none; margin-top: 1px; }
.q-help-art { display: block; width: 100%; max-width: 520px; height: auto; margin: 4px 0 20px; border-radius: 10px; border: 1px solid var(--q-divider); }
.q-help-art .qha-t { font: 800 11px 'Goglis Sans', system-ui, sans-serif; fill: var(--q-text); }
.q-help-art .qha-n { font: 700 9.5px 'Goglis Sans', system-ui, sans-serif; fill: var(--q-text); }
.q-help-art .qha-s { font: 600 8.5px 'Goglis Sans', system-ui, sans-serif; fill: var(--q-muted); }
.q-help-art .qha-b { font: 700 8.5px 'Goglis Sans', system-ui, sans-serif; fill: #fff; }
/* Bağlamsal ? düğmesi (kanal/sunucu kurma, roller...) — ilgili yardım bölümünü açar. */
.q-helpbtn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--q-muted); cursor: pointer; vertical-align: middle; transition: background var(--q-dur, .16s) var(--q-ease, ease), color var(--q-dur, .16s) var(--q-ease, ease); }
.q-helpbtn:hover { background: var(--q-hover); color: var(--q-accent); }
/* MOBIL: SOLDAN KAYAN CEKMECE (2026-08-12, kullanici: "yardim sayfasini mobil uyumlu yap,
   yonetim panelindeki / profil ayarlarindaki gibi olsun menusu"). Eski cozum nav'i USTTE
   yatay seride ceviriyordu — 12 bolum + arama o seride sigmiyordu (arama tamamen GIZLIYDI).
   Simdi admin/ayarlarla AYNI desen: hamburger acar, secim/backdrop kapatir; ARAMA da
   cekmecede yasamaya devam eder (yatay seridin aksine kaybedilmez). Masaustu degismez. */
@media (max-width: 720px) {
    .q-help-nav { position: fixed; z-index: 2005; left: 0; top: 0; bottom: 0; width: 252px;
        transform: translateX(-102%); transition: transform .22s ease;
        box-shadow: 4px 0 24px rgba(0,0,0,.35); }
    .q-help-wrap.hlp-nav-open .q-help-nav { transform: none; }
    .q-help-wrap .q-adm-bd { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.45); }
    .q-help-wrap .q-adm-burger { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
        padding: 8px 12px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg);
        color: var(--q-strong); font-size: 13.5px; font-weight: 600; cursor: pointer; }
    .q-help-body { padding: 18px 16px 40px; }
}

/* Cihazdan gelen (bayat) mesaj bandı — sohbet listesinin üstünde ince şerit (2026-08-11) */
.q-stalebar { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 10px; font-size: 11.5px; font-weight: 600; color: var(--q-muted); background: var(--q-input-bg); border-bottom: 1px solid var(--q-divider); }

/* Davet diyaloğu — özel kanal uyarı bandı (2026-08-11) */
.q-inv-warn { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; padding: 9px 11px; border-radius: 9px; font-size: 12.5px; line-height: 1.5; color: var(--q-text); background: rgba(224,155,26,.13); border: 1px solid rgba(224,155,26,.42); }
.q-inv-warn .mud-icon-root { color: #E09B1A; flex: none; margin-top: 1px; }

/* VİDEO KANALI TEPKİLERİ (2026-08-11) — seçici satırı + uçan emoji */
.q-vreact-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px; }
.q-vreact-b { width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 21px; line-height: 1; transition: background var(--q-dur, .16s) var(--q-ease, ease), transform var(--q-dur, .16s) var(--q-ease, ease); }
.q-vreact-b:hover { background: var(--q-hover); transform: scale(1.16); }
/* Uçan tepki: sahnenin ALTINDAN doğar, yukarı süzülür, yolda hafifçe sağa/sola kayar.
   pointer-events YOK — tepki yağmuru altında karolara tıklanabilmeli. */
/* Uçan tepkilerin yaşadığı katman (2026-09-02). Blazor bu div'in İÇİNE hiçbir şey
   basmaz; JS yalnız burada düğüm yaratır/siler. Sahnenin kendisi @key'li karo listesi
   olduğu için oraya yabancı düğüm eklemek diff'i bozuyordu. inset:0 → tepkilerin
   bottom/left değerleri sahnedekiyle AYNI kutuya çözülür, görsel değişiklik yok. */
.q-vstage-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 30; }
.q-vreact-fly { position: absolute; bottom: 6px; transform: translateX(-50%); pointer-events: none; z-index: 30; display: flex; flex-direction: column; align-items: center; gap: 2px; animation: q-vreact-up 2.6s cubic-bezier(.25,.6,.35,1) forwards; will-change: transform, opacity; }
.q-vreact-g { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.45)); }
.q-vreact-n { font-size: 10.5px; font-weight: 700; color: #fff; background: rgba(0,0,0,.5); padding: 1px 7px; border-radius: 999px; white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
@keyframes q-vreact-up {
    0% { transform: translate(-50%, 10px) scale(.5); opacity: 0; }
    12% { transform: translate(-50%, 0) scale(1.12); opacity: 1; }
    22% { transform: translate(-50%, -14px) scale(1); opacity: 1; }
    75% { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--drift, 0px)), -230px) scale(.86); opacity: 0; }
}
/* Animasyonsuz modda tepki hiç uçmaz — ama görünmeden de kaybolmasın: kısa bir sönme yeter. */
@media (prefers-reduced-motion: reduce) {
    .q-vreact-fly { animation: q-vreact-fade 2s linear forwards; }
    @keyframes q-vreact-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}

/* İLK VİDEO KANALI GİRİŞİ — KAMERA TERCİHİ DİYALOĞU (2026-08-11) */
.q-camask { text-align: center; padding: 4px 2px 2px; }
.q-camask-ic { width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 18px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); box-shadow: 0 10px 26px var(--q-logo-glow, rgba(53,166,255,.40)); }
.q-camask-lead { margin: 0 0 6px; font-size: 14.5px; font-weight: 600; line-height: 1.45; color: var(--q-text); }
.q-camask-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--q-muted); }
.q-camask-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.q-camask-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 10px; border-radius: 12px; cursor: pointer; text-align: center; color: var(--q-text); background: var(--q-input-bg); border: 2px solid var(--q-divider); transition: border-color var(--q-dur, .16s) var(--q-ease, ease), background var(--q-dur, .16s) var(--q-ease, ease); }
.q-camask-opt:hover { border-color: color-mix(in srgb, var(--q-accent) 55%, transparent); }
.q-camask-opt.on { border-color: var(--q-accent); background: var(--q-state-primary, rgba(34,166,255,.12)); }
.q-camask-t { font-size: 13px; font-weight: 700; }
.q-camask-d { font-size: 11.5px; line-height: 1.4; color: var(--q-muted); }
.q-camask-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--q-muted); }
@media (max-width: 420px) { .q-camask-opts { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .q-vidtile { transition: border-color .18s ease; } }
/* Büyüt/küçült köşe butonu — HER ZAMAN görünür (keşfi tıklamaya bağlı değil). */
/* SAĞ ALTA ALINDI (2026-09-19, Fatih ekran görüntüsüyle: "bu büyültme ikonunu sağ alta al").
   Üst kenar yayının İÇERİĞİNİN olduğu yer: oyunda skor/harita, sunumda başlık hep yukarıda
   duruyor ve düğme tam onların üstüne biniyordu. Alt sağ köşe boş — isim şeridi solda,
   izleyici listesi de onun üstünde. Tam ekran düğmesi ⛶'in İKİZİ olduğu için birlikte indi;
   ayrı kalsalardı biri altta biri üstte, ilişkileri kaybolurdu. */
/* SAGA YASLI OLAN TAM EKRAN DUGMESI, BUYULTME ONUN SOLUNDA (2026-09-19, Fatih ekran
   goruntusuyle: "o ikon tam oturmamis saga, diger ikonun gizli olmasindan kaynakli, yer
   degiselim"). Ikisi 2026-09-19'da sag alta inerken buyultme disa (6px), tam ekran ice
   (42px) konmustu; ama TAM EKRANDA buyultme GIZLENIYOR (asagidaki iki kural) — geriye
   kalan tam ekran dugmesi o zaman 36px iceride, bosluga bakarak asili kaliyordu. Artik
   HER ZAMAN GORUNEN dugme (tam ekran / cikis) disda: gizlenen komsusu kaybolunca hiza
   bozulmuyor. DERS: iki dugmeyi yan yana dizerken, KOSULLU GIZLENEN olani ice al. */
/* ELLE PiP YER TUTUCUSU (2026-09-21): karolar yuzen pencereye tasinirken sahne alani
   bos kalmasin; tek satirlik kart + geri getirme dugmesi. */
.q-pipholder {
    display: flex; align-items: center; gap: 10px;
    margin: 6px 0 10px; padding: 10px 14px;
    background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 12px;
    color: var(--q-muted); font-size: 13.5px;
}
.q-pipholder-b {
    margin-left: auto; border: 0; border-radius: 8px; cursor: pointer;
    background: var(--q-strong); color: var(--q-chat-bg);
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 12px;
}
.q-pipholder-b:hover { opacity: .88; }
/* PiP'E GERI AL (2026-09-20, Fatih: "pip modunu kapatinca tekrar gecebilmek icin buton koy
   buyutme butonunun yanina"): yuzen kutu ✕ ile kapatilinca o yayin `pipAtildi` isaretlenir ve
   bir daha kendiliginden acilmaz — geri donmenin TEK yolu sesten cikip girmekti. Dugme zoom'un
   solunda, ayni sira/olcu. Yalniz kutu KAPALIYKEN cizilir (acikken anlamsiz). */
.q-vidpip { position: absolute; bottom: 6px; right: 78px; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer; opacity: .85; }
.q-vidpip:hover { background: rgba(0,0,0,0.68); opacity: 1; }
.q-vidtile:fullscreen .q-vidpip { display: none !important; }
.q-vidzoom { position: absolute; bottom: 6px; right: 42px; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(0,0,0,0.48); color: #fff; cursor: pointer; opacity: 0.85; }
.q-vidzoom:hover { background: rgba(0,0,0,0.68); opacity: 1; }
/* GERÇEK TAM EKRAN düğmesi (2026-07-30) — sahne-içi büyütmenin (⛶) hemen SAĞINDA, köşede. */
.q-vidfull { position: absolute; bottom: 6px; right: 6px; z-index: 3; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(0,0,0,0.48); color: #fff; cursor: pointer; opacity: 0.85; }
.q-vidfull:hover { background: rgba(0,0,0,0.68); opacity: 1; }

/* ── EKRAN PAYLASIMI MINI OYNATICI / PiP (2026-09-19) ────────────────────────────────────
   Yuzen, SURUKLENEBILIR kutu. Icindeki `.q-vidslot`, video sahnesindekiyle AYNI slot
   (goglis-voice.js `placeVideos` ayni elemani tasir) — bu yuzden ic yerlesim kurallari
   burada EZILIR: genel kural `.q-vidslot { position:absolute; inset:0 }` diyor, PiP'te ise
   slot baslik cubugunun ALTINDA, akista bir flex cocugu olmali.
   Z-INDEX 1200: sohbetin/panellerin ustunde ama mobil alt cubugun (1260), menulerin (1275)
   ve diyaloglarin (1400+) ALTINDA — PiP gezinmeyi asla kilitlemesin. */
.q-scrpip {
    position: fixed; z-index: 1200; display: flex; flex-direction: column;
    border-radius: 12px; overflow: hidden; background: #000;
    border: 1px solid var(--q-glass-border, rgba(255,255,255,0.09));
    box-shadow: 0 10px 34px rgba(0,0,0,0.42), 0 2px 8px rgba(0,0,0,0.3);
    /* SERBEST BOYUT (2026-09-19, Fatih: "pipte resize olabilsin"). Tarayicinin kendi
       tutamagi kullanilir — ayri bir kose tutamagi cizip pointer matematigi yazmak, `resize`in
       zaten dogru yaptigi isi tekrar etmek olurdu. `overflow: hidden` ZATEN vardi ve `resize`in
       calismasi icin SART (overflow: visible'da tarayici tutamagi hic cizmez). Yukseklik artik
       `aspect-ratio`dan turemiyor, JS acikca yaziyor; yoksa oran kutuyu kullanicinin
       verdigi sekle donmeye birakmazdi. */
    resize: both; min-width: 180px; min-height: 130px; max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);   /* JS'teki PIP_KENAR=12 ile ayni pay */
}
.q-scrpip-bar {
    flex: 0 0 28px; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 9px;
    background: rgba(18,19,22,0.92); color: #e9ebee; cursor: grab;
    touch-action: none;                 /* surukleme sirasinda sayfa kaydirmasin */
    user-select: none;
}
.q-scrpip.dragging .q-scrpip-bar { cursor: grabbing; }
.q-scrpip-t { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-scrpip-b {
    flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center;
    justify-content: center; border: 0; border-radius: 6px; background: transparent;
    color: #b9bec6; font-size: 12px; line-height: 1; cursor: pointer;
}
.q-scrpip-b:hover { background: rgba(255,255,255,0.12); color: #fff; }
.q-scrpip .q-vidslot, .q-scrpip-ozel {
    position: relative; inset: auto; flex: 1 1 auto;
    width: 100%; height: auto; min-height: 0; background: #000;
}
/* Birlikte izle oynaticisi PiP'te: YouTube iframe'i kutuyu doldursun. */
.q-scrpip-ozel > iframe, .q-scrpip-ozel > div { width: 100%; height: 100%; border: 0; display: block; }
/* Ekran paylasimi KIRPILMAZ: karonun tamami gorunsun (sahnedeki `contain` ile ayni karar). */
.q-scrpip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* TOPLU IZGARA (PiP v2, 2026-09-20): kutuda birden fazla yayin — ekranlar + kameralar. Sutun sayisi
   yayin sayisindan (data-n): 1 → tek, 2-4 → iki, 5+ → uc. Satirlar esit; her slot kutuyu doldurur,
   video `contain` ile kirpilmadan sigar. */
.q-scrpip-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 2px; background: #000;
    grid-template-columns: 1fr; grid-auto-rows: minmax(0, 1fr); }

/* MEET USULU KARO PiP (2026-09-20, Fatih: "karolarla birlikte, Google Meet'teki gibi"):
   yuzen kutu artik yalniz videolari degil SAHNENIN KARO IZGARASINI tasir — kamerasi kapali
   kisi avatar/bas harf karosu alir. Karo Blazor'in DISINDA yasar (JS cizer), o yuzden konusma
   halkasi ve mikrofon durumu seviye dongusunden sinif olarak gelir (bkz. pipHalkaTazele). */
.q-pipkaro {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--q-tile-bg, #16181c);
    box-shadow: inset 0 0 0 2px transparent;
    transition: box-shadow .12s ease;
}
.q-pipkaro.konusuyor { box-shadow: inset 0 0 0 2px #1D9E75; }
.q-pipkaro .q-vidslot { width: 100%; height: 100%; }
.q-pipkaro-av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(34px, 38%, 72px);
    aspect-ratio: 1;
    border-radius: 50%;
    color: #fff;
    font-weight: 600;
    font-size: clamp(14px, 18cqw, 28px);
    overflow: hidden;
    user-select: none;
}
.q-pipkaro-av img { width: 100%; height: 100%; object-fit: cover; }
.q-pipkaro-ad {
    position: absolute;
    left: 6px;
    bottom: 5px;
    max-width: calc(100% - 12px);
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.q-pipkaro.sessiz .q-pipkaro-ad::after {
    content: " 
F507";
    opacity: .85;
}

.q-scrpip-grid[data-n="2"], .q-scrpip-grid[data-n="3"], .q-scrpip-grid[data-n="4"] { grid-template-columns: 1fr 1fr; }
.q-scrpip-grid[data-n="5"], .q-scrpip-grid[data-n="6"], .q-scrpip-grid[data-n="7"], .q-scrpip-grid[data-n="8"],
.q-scrpip-grid[data-n="9"] { grid-template-columns: 1fr 1fr 1fr; }
.q-scrpip-grid .q-vidslot { position: relative; inset: auto; width: 100%; height: 100%; min-height: 0; flex: none; }

/* TAM EKRANDA: karo tüm ekranı kaplar; `cover` kırpıyordu → `contain` ile görüntünün TAMAMI görünür
   (ekran paylaşımında kenardaki içerik kesilmesin). Sabit en-boy oranı ve genişlik sınırı kalkar. */
.q-vidtile:fullscreen { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: none; border-radius: 0; background: #000; cursor: default; }
.q-vidtile:fullscreen .q-vidslot video, .q-vidtile:fullscreen .q-vidslot video.screen { object-fit: contain; }
.q-vidtile:fullscreen .q-vidname { font-size: 14px; }
/* #2 (2026-07-25): KATILMALI yayın — izlemeyi bırak düğmesi (tile sol üstü) */
/* ── YAYINCININ KENDİ KAROSU: SİYAH KUTU (2026-09-19) ──────────────────────────────────
   Önizleme ağa çıkmaz, o yüzden buradaki kazanç BANT değil GPU: video elemanı `display:none`
   olunca tarayıcı o yüzeyi hiç boyamaz. Elemanı DOM'dan SÖKMÜYORUZ — yayın akışı ona bağlı
   değil ama `placeVideos` slotu bulamazsa elemanı havuza taşır ve geri dönüşte oynatmayı
   yeniden kurmak gerekirdi; gizlemek hem ucuz hem geri dönüşü anlık. */
.q-vidtile.screen.selfoff .q-vidslot { display: none; }
.q-vidtile.screen.selfoff { background: #000; }
.q-selfscr {
    position: absolute; inset: 0; z-index: 4; cursor: pointer; background: #000;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    /* ALT ŞERİDE YER BIRAK (ölçümle görüldü): yayıncının "paylaşımı durdur" ve "ekran sesi"
       düğmeleri karonun ALT ORTASINDA duruyor. Dikey tam ortalı metin, küçük karolarda tam
       onların üstüne geliyordu; metni yukarı iten bu pay çakışmayı kapatır. */
    padding-bottom: 52px;
}
.q-selfscr-t { color: #fff; font-size: 14px; font-weight: 650; letter-spacing: .01em; }
.q-selfscr-s { color: rgba(255,255,255,.62); font-size: 11.5px; }
.q-selfscr-a {
    margin-top: 2px; border: 0; background: transparent; cursor: pointer;
    color: rgba(255,255,255,.72); font-size: 11.5px; text-decoration: underline; text-underline-offset: 2px;
}
.q-selfscr-a:hover { color: #fff; }
/* SİYAH KUTU DÜĞMELERİ ÖRTMESİN (ekran görüntüsüyle yakalandı): kutu z-index 4, yayıncının
   kendi düğmeleri (paylaşımı durdur / ekran sesini sustur) ve isim şeridi 3'tü — yani kutu
   onların üstüne biniyor ve "durdur"a basmak isteyen kişi kutuya basmış oluyordu. Yayını
   durdurmak, önizlemeye bakmaktan ÖNCE gelir. */
.q-vidtile.screen.selfoff .q-vidstop,
.q-vidtile.screen.selfoff .q-vidzoom,
.q-vidtile.screen.selfoff .q-vidfull,
.q-vidtile.screen.selfoff .q-vidname { z-index: 5; }

/* ── DM'DE EKRAN ÖNİZLEMESİ + KATIL (2026-09-18) ────────────────────────────────────────
   Yayın akar ama karo BULANIK ve sessiz; üstünde KATIL. Bulanıklık SLOT'a uygulanır, karonun
   kendisine DEĞİL: karo bulanıklaşsaydı isim şeridi ve düğmeler de okunmaz olurdu. `scale`
   şart — blur kenarlarda saydam bir çerçeve bırakır, ölçek onu kırpar. */
.q-vidtile.screen.preview { cursor: pointer; }
.q-vidtile.screen.preview .q-vidslot { filter: blur(9px) saturate(.95) brightness(.72); transform: scale(1.04); }
/* HAFİF tutuldu (16px -> 9px, parlaklık .55 -> .72): istek "hafif blurlu" idi ve ölçümle
   görüldü ki 16px'te karo tek renk bir yüzeye dönüşüyor, yayının AKTIĞI bile anlaşılmıyordu.
   9px metni okunmaz yapmaya yetiyor ama hareket ve renk geçiyor — amaç gizlemek değil,
   "burada bir yayın var" demek. */
.q-scrjoin {
    position: absolute; inset: 0; z-index: 4; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
}
.q-scrjoin-b {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 17px; border-radius: 11px;
    background: var(--q-accent); color: #fff; font-size: 13.5px; font-weight: 650;
    box-shadow: 0 6px 18px rgba(0,0,0,.42); transition: transform .12s, filter .12s;
}
.q-scrjoin:hover .q-scrjoin-b { transform: translateY(-1px); filter: brightness(1.08); }
.q-scrjoin-t { font-size: 12px; color: #e8ecf1; opacity: .88; text-shadow: 0 1px 3px rgba(0,0,0,.65); }
/* Karodaki EKRAN SESİ düğmesi — "ayrıl"ın (sol üst) hemen yanında, aynı ölçüde. Sağ-tık
   menüsünü kendi konumunda açar (goglisVoice.ctxAt), ayrı bir popup yoktur. */
.q-vidvol {
    position: absolute; top: 6px; left: 42px; z-index: 3; display: inline-flex; align-items: center;
    justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px;
    background: rgba(0,0,0,.48); color: #fff; cursor: pointer; opacity: .85;
}
.q-vidvol:hover { opacity: 1; background: rgba(0,0,0,.66); }

.q-vidstop { position: absolute; top: 6px; left: 6px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(0,0,0,0.48); color: #fff; cursor: pointer; opacity: 0.85; }
.q-vidstop:hover { background: rgba(220,64,64,0.85); opacity: 1; }
/* #2 (2026-08-07, saha): yayıncının KENDİ karosundaki kapat — ORTA ALTTA ve KIRMIZI (köşedeki ikon fark edilmiyordu) */
.q-vidstop.own { top: auto; left: 50%; bottom: 10px; transform: translateX(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(214,52,52,0.88); color: #fff; opacity: 0.92; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.q-vidstop.own:hover { background: rgba(232,40,40,1); opacity: 1; transform: translateX(-50%) scale(1.06); }
/* #2: izlenmeyen yayınlar için "İzle" kartları */
.q-watchprompts { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px 12px; background: #101116; justify-content: center; }
.q-watchprompt { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px 7px 12px; border-radius: 10px; border: 1px solid var(--q-divider); background: var(--q-input-bg); color: var(--q-text); cursor: pointer; font-size: 13.5px; }
.q-watchprompt:hover { background: var(--q-selected); border-color: var(--q-accent); }
.q-wp-txt { font-weight: 600; }
.q-wp-go { font-weight: 700; color: #fff; background: var(--q-accent, #A9744C); padding: 2px 11px; border-radius: 20px; font-size: 12.5px; }
.q-vidslot, .q-vidslot video { position: absolute; inset: 0; width: 100%; height: 100%; }
.q-vidslot video { object-fit: cover; }
.q-vidslot video.mirror { transform: scaleX(-1); } /* kendi görüntün ayna */
/* DONMUŞ KARE (2026-09-19) — sekme gizliyken ya da odak çok uzun süredir yokken akış
   DURDURULUR (`setEnabled(false)`, abonelikten çıkmadan) ve yerine son karenin bulanık bir
   kopyası konur. <img> tercih edildi, canvas değil: Blazor karoyu yeniden çizdiğinde slot da
   yeniden doğuyor ve içindeki canvas kayboluyordu; dataURL saklandığı için `placeVideos`
   resmi yeniden basabiliyor — akış durmuş olduğundan yeniden yakalamak mümkün değil. */
.q-vidslot img.q-scrfreeze {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
    filter: blur(9px) saturate(.95) brightness(.72); transform: scale(1.04);
    pointer-events: none; z-index: 1;
}
/* Ekran paylaşımı: tile GÖRÜNTÜNÜN GERÇEK ORANINI alır (--ar, JS loadedmetadata'dan) —
   tutamaçla küçültünce zoom-out gibi ORANTILI küçülür; bant da kırpma da olmaz.
   Genişlik satırı aşarsa 100%'e kilitlenir, yükseklik oranla iner. */
/* EKRAN KAROSU VARSAYILAN OLARAK DIGER KAROLARLA AYNI BOYUTTA (2026-08-12, kullanici:
   "acildiginda goruntude buyuk gorunuyor, hayir profil ekranlarimin boyutunda olmasi lazim").
   ONCEKI HAL: `flex-basis:100%` ile HER ZAMAN tek basina tam satir kapliyor ve genisligi
   --q-vstage*1.7778 (yani normal karonun ~1.9 kati) oluyordu; iki kisilik bir DM aramasinda
   ekran devasa, karsidakinin avatari altta minik kaliyordu.
   SIMDI: normal karo genisligiyle (0.9375) sirada durur — 16/9 oldugu icin yuksekligi de kamera
   karosuyla ayni cikar. */
/* DM ARAMASI DA VIDEO ODASIYLA AYNI IZGARAYI KULLANIR (2026-08-12, kullanici: "video
   aramadaki izgara sistemi gibi olmali, surukleyerek boyutlandir degil").
   GERI ALINAN DENEME: bir onceki turda DM'de karo genisligini --q-vstage'e baglamistim ki
   tutamac karolari da kucultsun. Sonuc kotu cikti: karolar sutun hesabindan koptu, iki kisilik
   bir aramada ALT ALTA ve devasa dizildiler (kullanici ekran goruntusuyle gosterdi).
   Dogru model izgara: sutun sayisi (--q-vgrid) genisligi belirler, karolar YAN YANA gelir,
   sigmayan icerik `overflow:auto` ile KAYAR. Tutamac yalniz sahnenin yuksekligini degistirir,
   karo boyutuna karismaz — hiyerarsi bozulmaz. */
.q-vidtile.screen {
    background: #000; --ar: 1.7778; aspect-ratio: var(--ar); height: auto;
    width: min(100%, calc(var(--q-vstage, 320px) * 0.9375));
    flex: 0 0 auto;
}
/* IZGARADA EKRAN KAROSU DA AYNI SUTUN GENISLIGINDE (2026-08-12, kullanici: "boyle bir duzensizlik
   olmayacak, ayni boyutta olacaklar"). Bir onceki turda ekran karosunu --q-vstage'e baglamistim
   ama diger karolar SUTUN hesabindan geliyordu; iki farkli formul yan yana durunca boylar
   tutmuyordu. Ayni formule baglaninca hizalanirlar. `.big` haric — orada kullanici bilerek
   buyutmustur ve karo tek basina tam satir kaplar. */
.q-videostage[style*="--q-vgrid"] .q-vidtile.screen:not(.big) {
    width: calc((100% - (var(--q-vgrid) - 1) * 10px) / var(--q-vgrid));
}
/* Buyutunce TEK BASINA TAM SATIR (kullanici: "buyuk acilincada ... o bir buyuk tek satir olsun").
   flex-basis:100% satiri kendine ayirir, yanina baska karo gelmez. */
.q-vidtile.screen.big { flex-basis: 100%; width: 100%; max-width: 100%; margin: 0 auto; }
.q-vidslot video.screen { object-fit: cover; } /* oran birebir eşleştiği için kırpma fiilen sıfır */
/* DM ARAMA SAHNESI (2026-07-30): kamerasiz katilimci kutusu — buyuk avatar + isim.
   Discord'un arama ekraninin karsiligi; eskiden sohbetin ustunde ince bir serit vardi. */
/* min-height 220 -> 120 (2026-08-12, kullanici: "tutamaci kisamiyorum, profil resimlerine kadar
   kisabilmeliyim"). 220px sabit taban, tutamaci asagi cekmenin ONUNDEKI gercek engeldi: sahne
   yuksekligi --q-vstage'ten gelse bile bu satir onu 220'nin altina indirmiyordu (olculdu: vstage
   140 verildiginde bile sahne 220 kaliyordu). 120, 84px'lik avatar + isim etiketi + dolgunun
   sigdigi en kucuk deger; daha asagisi karoyu kirpardi. */
/* SAHNE ICERIGE YAPISIR, TUTAMAC ALT SINIRDIR (2026-08-12, kullanici: "otomatik ortali degil,
   ustteki video height kadar olsun; ben istersem surukleyerek asagiya indiririm").
   ONCEKI HAL: yukseklik SABIT --q-vstage'ti (varsayilan 320) ve iki avatar karosu ~170px
   oldugundan altta kapatilamayan bir bosluk kaliyordu; karolar da dikeyde ortalaniyordu.
   SIMDI: yukseklik icerikten gelir (bosluk yok) ve elle boyutlandirma YOK — tutamac
   2026-08-12'de kaldirildi (kullanici: "zaten otomatik duzgun calisiyor"). Ekran paylasimi
   acilinca sahne kendiliginden uzar, kapaninca toparlanir. */
.q-videostage.call {
    height: auto;
    align-content: start;   /* karolar dikeyde ORTALANMAZ, uste yaslanir */
}
/* Bekleyen arama ekrani da ayni gorunumu kullanir (portreli), yalniz tiklanamaz. */
.q-videostage.call.waiting { cursor: default; }
/* DM ARAMA KUMANDA SERIDI (2026-09-28, Fatih: mikrofon/kamera/ekran/kapat basliktan sahnenin
   altina). Sahneyle AYNI zemin: seridin sahnenin alt kenari gibi durmasi icin. `flex: none` =
   sahne kalan yeri alir, serit hic ezilmez (sohbet acikken de, bolunmus duzende de).
   Dugmeler dock'un q-vctl dili: 46px yuvarlak, kapali mikrofon kirmizi, acik kamera/ekran yesil.
   Kapat biraz genis bir hap — en sagda, yanlislikla basilmasin diye digerlerinden ayri durur.
   YUKSEKLIK DAR TUTULDU (60px): serit sahneden yer aliyor ve kisa pencerede (olculdu: 746px
   yukseklikte, sohbet %30) 46px'lik dugmeler + 20px dolgu sahneyi 10px tasiriyordu. */
.q-dmctl { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px;
           padding: 6px 12px 10px; background: #101116; }
.q-dmctl .q-vctl { width: 44px; height: 44px; }
.q-dmctl .q-vctl.q-dmctl-end { width: 60px; border-radius: 22px; margin-left: 6px; }
.q-vidtile.av { cursor: default; display: flex; align-items: center; justify-content: center; background: var(--q-side-bg); }
.q-vidav { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--q-accent); color: #fff; font-size: 30px; font-weight: 700; box-shadow: 0 0 0 3px transparent; transition: box-shadow .12s ease; }
.q-vidav img { width: 100%; height: 100%; object-fit: cover; }
.q-vidtile.av.speaking .q-vidav { box-shadow: 0 0 0 3px var(--q-online); }

/* ÇALIYOR KAROSU (2026-08-12, kullanıcı: "kabul edene kadar borderi beyaz şekilde yanıp
   sönecek, kabul edince yeşil konuşmaya dönecek").
   BEYAZ bilerek: yeşil KONUŞMAYA ayrılmış, kırmızı hataya. Beyaz "bekliyor" demek ve iki
   durumla da karışmaz. Kişi kabul edince bu karo tamamen kaybolur (gerçek karo `_voice`tan
   gelir), yani "beyazdan yeşile dönme" görsel olarak kendiliğinden olur.
   Yalnızca RENK animasyonlanır — boyut/konum sabit, karo listede zıplamaz. */
@keyframes q-tile-ring {
    0%, 100% { border-color: rgba(255,255,255,.85); }
    50%      { border-color: rgba(255,255,255,.15); }
}
/* Sağ-tık sarmalayıcısı yerleşimde YOK sayılır — karo doğrudan sahnenin flex çocuğu kalır. */
.q-ctxpass { display: contents; }
.q-vidtile.av.ringing { border: 2px solid rgba(255,255,255,.85); animation: q-tile-ring 1.1s ease-in-out infinite; }
.q-vidtile.av.ringing .q-vidav { opacity: .75; }
/* KISIYE OZEL SUSTURULMUS karo (2026-08-12): kisi hala BEKLENIYOR ama zili calmiyor.
   Karo kalir (kimi bekledigimiz gorunsun), yanip sonme durur ve cerceve sonuk olur —
   "caliyor" ile "sessizce bekleniyor" ayni ekranda yan yana ayirt edilebilsin. */
.q-vidtile.av.ringing.hushed { animation: none; border-color: rgba(255,255,255,.28); }
.q-vidtile.av.ringing.hushed .q-vidringing { opacity: .7; }
/* KATILIYOR (2026-09-18): zil karosuyla aynı ölçü, ama YANIP SÖNMEZ — kişi kabul etti,
   bağlanıyor. Kenarlık sakin; 'hâlâ çalıyor' izlenimi vermemeli. */
.q-vidtile.av.joining { border: 2px solid rgba(255,255,255,.35); }
.q-vidtile.av.joining .q-vidav { opacity: .75; }
.q-vidtile.av.joining .q-vidringing { opacity: .8; }
.q-vidringing {
    position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 600;
    color: #fff; background: rgba(0,0,0,.5); padding: 2px 8px; border-radius: 20px;
}
@media (prefers-reduced-motion: reduce) { .q-vidtile.av.ringing { animation: none; } }

/* ARAMA ŞERİDİ — sahnenin üstünde tek satır. (a) arayanda "Çaldırmayı durdur",
   (b) aranan tarafta "Aramaya katıl" (sessiz aramada çağrıyı görmenin yolu bu). */
.q-callbar {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    padding: 8px 14px; background: var(--q-side-bg);
    border-bottom: 1px solid var(--q-divider); font-size: 13px; color: var(--q-text);
}
.q-callbar.join { background: color-mix(in srgb, var(--q-online, #23a55a) 14%, var(--q-side-bg)); }
.q-callbar-t { font-weight: 500; }
.q-callbar-b {
    border: 1px solid var(--q-border); background: transparent; color: var(--q-text);
    font: 600 12.5px/1 inherit; padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.q-callbar-b:hover { background: var(--q-hover); }
.q-callbar-b.go { background: var(--q-online, #23a55a); border-color: transparent; color: #08240f; }
.q-vidname { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 7px; max-width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-vidmic { position: absolute; right: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,0.55); color: var(--q-danger-soft); display: flex; align-items: center; justify-content: center; }


/* ---- unread ---- */
.q-unread { width: 8px; height: 8px; border-radius: 50%; background: var(--q-danger); margin-left: auto; flex: none; }
.q-chrow.unread { color: var(--q-strong); font-weight: 600; }
.q-chrow.unread span { font-weight: 600; }
.q-chrow.muted { opacity: 0.45; }

/* ---- zengin profil kartı (#Y5) ---- */
/* #4/#7: dialog'a sabit genişlik ver + içerik dolgusunu sıfırla + kartı %100 yap.
   Böylece banner dialog'u tam doldurur (ne sağda beyaz boşluk ne de içeriğe çöküp daralma). */
.mud-dialog:has(.q-pcard2) { width: 460px; max-width: 94vw; }
.mud-dialog:has(.q-pcard2) .mud-dialog-content { padding: 0; }
.q-pcard2 { width: 100%; margin: 0; }
/* Üye profil popover'ı — tıklananın yanında açılan kart (Discord-vari). Menü backdrop'unun (1200) üstünde. */
.q-pp { position: fixed; z-index: 1201; width: 348px; max-height: min(600px, calc(100vh / var(--q-zoom, 1) - 16px)); max-height: min(600px, calc(100dvh / var(--q-zoom, 1) - 16px)); overflow-y: auto; background: var(--q-panel-bg); border: 0.5px solid var(--q-divider); border-radius: 14px; box-shadow: var(--q-elev-4, 0 14px 38px rgba(0,0,0,0.42)); }
.q-pp .q-pcard2-body { padding-bottom: 16px; } /* dialog'daki alt buton şeridi burada yok — nefes payı */
.q-pcard2-banner { height: 100px; border-radius: 4px 4px 0 0; opacity: 0.85; }
/* DÜZENLENEBİLİR KAPAK/AVATAR (2026-08-21): kart kendi görünümünü korur, üzerine yalnız küçük
   bir kamera rozeti biner; tıklama alanı `<label>` olduğu için gizli InputFile'ı tetikler. */
.q-pc-edit { display: block; position: relative; cursor: pointer; }
.q-pc-avedit { display: block; position: relative; cursor: pointer; line-height: 0; }
.q-pc-editbadge { position: absolute; right: 8px; bottom: 8px; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); color: #fff; }
/* Avatar rozeti SAĞ ÜSTTE: sağ alt köşe çevrimiçi noktasının yeri, üst üste biniyorlardı. */
.q-pc-editbadge.av { right: -2px; top: -2px; bottom: auto; width: 22px; height: 22px; border: 2px solid var(--q-panel-bg, var(--q-side-bg)); }
/* (2026-07-31, kullanici: "kart temalara uygun degil") Ozel banner yoksa avatar paleti yerine
   TEMANIN aksan cifti — kart hangi temadaysa ona ait gorunur (cyberpunk pembe→cyan, steampunk
   pirinc, tatli pastel...). Panel rengine karistirilir ki yumusak dursun. */
.q-pcard2-banner-theme { background: linear-gradient(120deg,
    color-mix(in srgb, var(--q-accent) 72%, var(--q-panel-bg)),
    color-mix(in srgb, var(--q-accent-2, var(--q-accent)) 64%, var(--q-panel-bg))) !important; }
.q-pcard2-avwrap { position: relative; width: 96px; height: 96px; margin: -48px 0 0 20px; }
.q-pcard2-av { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 38px; font-weight: 600; border: 6px solid var(--q-panel-bg); }
.q-pcard2-avwrap .q-dot { border-color: var(--q-panel-bg); }
.q-pcard2-body { padding: 10px 20px 4px; }
/* ===== PROFİL KARTI — B DÜZENİ: YAN RAY (2026-07-31, kullanıcı seçimi) =====
   Sorun: kart doldukça AŞAĞI uzuyordu (10 bölümde 900px'i geçiyor, ekrana sığmıyordu).
   Çözüm: geniş görünümde (diyalog) kimlik kendi RAYINA çekilir, bölümler sağdaki panelde İKİ
   kolona dağılır ve panel kendi içinde kaydırılır → kartın boyu artık bölüm sayısına bağlı değil.
   Popover (.q-pp) ve dar ekran BİLEREK dokunulmadan bırakıldı: orada kart zaten kısa olmalı. */
.q-pcard2-ident { padding: 0 20px 6px; }
/* Mini karttaki "Profili görüntüle" — tam karta geçiş. Kart dar olduğu için tam genişlik.
   margin-top 12px (2026-08-05 kullanıcı isteği): seviye çubuğuyla dip dibeydi (4px). */
.q-pcard2-openfull { display: block; width: 100%; margin: 12px 0 2px; padding: 8px 10px; border: 1px solid var(--q-divider);
                     border-radius: 9px; background: var(--q-input-bg); color: var(--q-strong); font-size: 12.5px;
                     font-weight: 600; cursor: pointer; }
.q-pcard2-openfull:hover { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
@media (min-width: 861px) {
    /* min-height (2026-07-31): içerik azken kart 240px'e kadar iniyor ve ⋯ menüsü kartın
       ALTINA taşıyordu; ray da yamuk duruyordu. Alt sınır menünün sığdığı yükseklik. */
    .mud-dialog .q-pcard2 { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: stretch; min-height: 400px; }
    .mud-dialog .q-pcard2-rail { background: var(--q-input-bg); display: flex; flex-direction: column; min-width: 0; }
    .mud-dialog .q-pcard2-rail .q-pcard2-banner { border-radius: 4px 0 0 0; }
    .mud-dialog .q-pcard2-rail .q-pcard2-avwrap { width: 88px; height: 88px; margin: -44px 0 0 20px; }
    .mud-dialog .q-pcard2-rail .q-pcard2-av { width: 88px; height: 88px; }
    /* Panel: kendi kaydırması olan TEK SÜTUN (2026-10-24). 2026-07-31'deki çok kolonlu akış ("arkadaş
       olmadıklarında 2'li kolonlar boş kalıyor" düzeltmesi) kutuları üstte iki sütuna topluyor, seyrek
       profilde panelin alt yarısı bomboş kalıyordu (ekran görüntüsüyle geldi). Boş hücre sorunu artık
       ızgaranın kendisinde çözülü: kısa bilgiler aynı boyda KAROLAR (auto-fill; ızgarada tam satır kaplayan
       bölüm yok), listeler onun altında tam satır, not panelin dibinde. */
    .mud-dialog .q-pcard2-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px;
                                 overflow-y: auto; max-height: min(68vh, 580px); }
    .mud-dialog .q-pcard2-body .q-pcard2-section { margin: 0; }
    .mud-dialog .q-pcard2-body > .q-pcard2-grid { margin-top: 0; }
    .mud-dialog:has(.q-pcard2) { width: 780px !important; max-width: 780px !important; }
    /* (2026-07-31 düzeltme) Ray rengi diyaloğun TA DİBİNE kadar insin: kart, alt buton şeridinin
       (KAPAT) üstünde bitiyor ve altında koyu bir şerit kalıyordu — kart "yamalı" duruyordu.
       Rengi kartın kendisine değil DİYALOĞA veriyoruz (ızgara sınırıyla aynı 264px'te kesilen
       iki tonlu zemin), böylece buton şeridi de aynı iki tonu sürdürür. */
    .mud-dialog:has(.q-pcard2) { background: linear-gradient(to right, var(--q-input-bg) 0 264px, var(--q-panel-bg) 264px) !important; }
    .mud-dialog .q-pcard2-rail { background: transparent; }
}
.q-pcard2-name { font-size: 22px; font-weight: 700; color: var(--q-strong); }
.q-pcard2-actions { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; }
/* SEVİYELER SOL RAYDA (2026-08-04 kullanıcı isteği). Ray 264px (seviyeler eklenince 232'den genişletildi),
   bu yüzden satır sıkışmasın diye başlık ve çubuk ALT ALTA değil, sayı çubuğun ALTINA alınır.
   Böylece "148/1420" gibi uzun bir değer çubuğu ezmez. `q-pcard2-ident` ile aynı yatay padding
   kullanılır ki isim/butonlarla aynı hizada dursunlar. */
/* YATAY PADDING YOK: bu blok .q-pcard2-ident'in İÇİNDE ve o zaten 20px veriyor. Kendi 20px'ini
   de eklersek içerik 40px'e kayar ve isim/avatarla hizası bozulur (ölçüldü: 40 vs 20). */
.q-pcard2-raillvl { padding: 14px 0 4px; display: flex; flex-direction: column; gap: 12px; }
/* KABUK PARÇASI YUVASI (2026-08-21 akşam): kimlik bloğunun altı, seviyelerin üstü. Yatay padding
   YOK — .q-pcard2-ident zaten 20px veriyor (raillvl ile aynı gerekçe).
   TAM GENİŞLİK: `.q-menu` ve `.q-menu-act` `inline-flex` DOĞAR, yani içindeki düğme yazı kadar
   daralır. (Eski `.q-mopr-acts .q-menu > span:first-child` kuralı hiç tutmuyordu: aktivatör
   sarmalayıcısı `span` değil `div.q-menu-act` — "tam genişlik olsun" isteğinin kök nedeni buydu.) */
.q-pcard2-slot { padding: 12px 0 2px; }
.q-pcard2-slot > .q-menu { display: block; }
.q-pcard2-slot > .q-menu > .q-menu-act { display: block; }
/* SOLA YASLI (2026-08-04 kullanıcı: "ortalı duruyor, profil logosu gibi sola yaslı olsun"):
   .q-pcard2-section normalde bir KUTU (arka plan + 12px yatay padding) ve bu, başlık metnini
   isim/avatardan 12px içeri kaydırıyordu. Rayda kutu görünümü kaldırılır — seviyeler kimlik
   sütununun parçası gibi okunur ve sol kenarları avatar/isimle BİREBİR hizalanır.
   box-shadow: none ŞART (2026-08-05): tema elevation kuralı TÜM .q-pcard2-section'lara inset
   hairline basıyor (goglis.css "Elevation + ince hairline"); yalnız bg/padding sıfırlamak,
   paddingsiz içeriğe yapışan sınır çizgili hayalet bir kutu bırakıyordu (ekran görüntüsüyle geldi). */
.q-pcard2-raillvl .q-pcard2-section { margin: 0; background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
.q-pcard2-more { margin-left: auto; }
.q-pcard2-morebtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--q-input-bg); color: var(--q-muted); cursor: pointer; }
.q-pcard2-morebtn:hover { color: var(--q-strong); }
.q-pcard2-section { background: var(--q-side-bg); border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.q-pcard2-h { font-size: 11px; font-weight: 700; color: var(--q-muted); text-transform: uppercase; margin-bottom: 5px; }
/* Bölüm başlığındaki düzenle kalemi (2026-08-21 akşam; şimdilik yalnız Bağlantılar).
   `.q-pcard2-h` BLOK ve pek çok yerde kullanılıyor — onu flex'e çevirmek yerine kalem
   satır-içi hizalanır, böylece diğer başlıkların hiçbiri etkilenmez. */
.q-pc-editlnk { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
    margin-left: 6px; vertical-align: -5px; padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--q-muted); cursor: pointer; }
.q-pc-editlnk:hover, .q-pc-editlnk:active { background: var(--q-hover); color: var(--q-strong); }

/* SAHTE TAM EKRAN (2026-08-21 akşam): `requestFullscreen` yoksa/reddedince karo CSS ile tam
   alana terfi eder — bkz. goglis-voice.js toggleFullscreen. Niteliğe (`data-fs`) bağlıdır,
   sınıfa DEĞİL: `class` Blazor'ın render ağacında ve bir sonraki diff JS'in eklediğini siler. */
html.q-fsfake .q-vidtile[data-fs] {
    position: fixed !important; inset: 0 !important; z-index: 1400 !important;
    width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
    min-height: 0 !important; margin: 0 !important; border-radius: 0 !important;
    aspect-ratio: auto !important; background: #000 !important; border: 0 !important;
}
html.q-fsfake .q-vidtile[data-fs] video { width: 100%; height: 100%; object-fit: contain; }
/* Native `:fullscreen` dalindaki gizlemelerin aynisi — iki yol ayni gorunsun (odak/sabitle
   tam ekranda anlamsiz; `q-vidfull` kalir, cikis dugmesi odur). */
html.q-fsfake .q-vidtile[data-fs] .q-vidzoom,
html.q-fsfake .q-vidtile[data-fs] .q-vidpin,
html.q-fsfake .q-vidtile[data-fs] .q-vidmute { display: none !important; }
html.q-fsfake .q-vidtile[data-fs] .q-vidname { font-size: 14px; }
.q-pcard2-val { font-size: 14px; color: var(--q-text); }
/* #5: ortak sunucular tıklanabilir çip listesi */
.q-pcard2-mutuals { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.q-pcard2-mutual { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--q-text); transition: background-color var(--q-dur, .16s) var(--q-ease, ease); }
.q-pcard2-mutual:hover { background: var(--q-hover); }
.q-pcard2-mutual.static { cursor: default; }
.q-pcard2-mutual.static:hover { background: transparent; }
.q-pcard2-status { font-size: 14px; color: var(--q-strong); }
.q-pcard2-note { width: 100%; background: transparent; border: none; outline: none; color: var(--q-text); font-size: 14px; font-family: inherit; }
.q-pcard2-note::placeholder { color: var(--q-faint); }

/* ---- bildirim rozeti ---- */
.q-notif-badge { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--q-danger); color: #fff; font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center; }

/* ---- eski mesajları yükle ---- */
.q-loadolder { text-align: center; padding: 4px 0 8px; }

/* ---- DM sesli arama barı ---- */
/* AD ÇAKIŞMASI DÜZELTİLDİ (2026-08-18, canlı regresyon: "arama görseli bozuldu, karolar
   minicik"). Bu kural Faz 5'ten beri ARAMA KUMANDA BANDININ (.q-dmcall, Home:345) stilidir.
   2026-08-15'te DM düzeni işinde AYNI AD sohbet kolonuna da işaret olarak verilince
   (q-chat q-dmcall) bandın align-items:center + gap + padding + zemini KOLONUN kendisine
   uygulandı → tüm çocuklar shrink-wrap olup ortalandı, arama sahnesi 210px'e büzüldü,
   avatar karoları 88x50'ye ezildi. Kolonun işareti artık q-dmcallchat; bu kural yalnız bandı
   biçimler. Ders: durum işareti verirken var olan bileşen sınıfını yeniden KULLANMA. */
.q-dmcall { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--q-side-bg); border-bottom: 1px solid color-mix(in srgb, var(--q-accent) 25%, transparent); }
.q-dmcall .q-vctl { width: 30px; height: 30px; }

/* ---- mention autocomplete + vurgu ---- */
.q-mention-pop { position: absolute; bottom: 58px; left: 16px; width: 320px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 11px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,0.4); max-height: 244px; overflow-y: auto; z-index: 50; }
.q-mention-i { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 14px; color: var(--q-strong); }
.q-mention-i:hover { background: var(--q-hover); }
.q-mention { color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 16%, transparent); border-radius: 4px; padding: 0 3px; font-weight: 500; }

/* ---- MudMenu aktivatör düzeltmesi ---- */
/* MudBlazor ActivatorContent sarmalayıcısı varsayılan 'display:contents' (0x0 kutu) →
   gerçek tıklama isabet etmiyor + popover yanlış konumlanıyor. Gerçek kutu ver. */
.mud-menu-activator { display: inline-flex !important; align-items: center; cursor: pointer; }

/* ---- QMenu (özel güvenilir açılır menü) ---- */
.q-menu { position: relative; display: inline-flex; }
.q-menu-act { display: inline-flex; align-items: center; cursor: pointer; }
.q-menu-backdrop { position: fixed; inset: 0; z-index: 1200; }
.q-menu-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1201; min-width: 186px; background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 11px; padding: 6px; box-shadow: 0 14px 38px rgba(0,0,0,0.42); }
.q-menu-panel.r { left: auto; right: 0; }
.q-menu-panel.up { top: auto; bottom: calc(100% + 6px); }
/* Akıllı (fixed) yerleştirme: JS konumlayana kadar gizli (flash yok), viewport'a göre çapalanır. */
.q-menu-panel.fx { position: fixed; top: 0; left: 0; right: auto; bottom: auto; visibility: hidden; }
/* #8: yana açılan alt menü (submenu) — hover'da görünür; hover köprüsü kopmasın diye bitişik (left:100%). */
.q-submenu { position: relative; }
.q-submenu-label { flex: 1; }
.q-submenu-arrow { margin-left: auto; font-size: 16px !important; color: var(--q-muted); }
/* #1 YENİ KURAL: hover flyout YOK — tıkla-aç. Masaüstünde panel FIXED (kaydırmalı ana
   menünün overflow'u KIRPAMAZ) + pop animasyonu; konumu goglisMenu.placeSub verir
   (başlığın sağı; sığmazsa solu). Mobilde akordeon (media bloğu static'e çevirir). */
.q-submenu-panel { display: none; position: fixed; top: 0; left: 0; min-width: 190px; max-height: 340px; overflow: auto; z-index: 1302; visibility: hidden; }
.q-submenu.open > .q-submenu-panel { display: block; animation: q-pop .055s ease; }   /* yarıya indirildi */
.q-submenu.open > .q-submenu-act { background: var(--q-hover); }
@keyframes q-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
/* Açıkken ok: masaüstünde ◀ (panel YANA açık — "geri" hissi), mobilde ▼ (akordeon aşağı). */
.q-submenu-arrow.q-sub-mob { display: none !important; }
/* #1: max-height dvh çifti — mobil adres çubuğu 82vh'ı taşırıp menünün altını kesiyordu. */
.q-ctx-panel { position: fixed; z-index: 1300; max-height: 82vh; max-height: 82dvh; overflow-y: auto; min-width: 210px; }
/* ÜST KATMAN (top layer) SİGORTASI — 2026-07-31.
   Sağ-tık menüsü, hangi mesajın/satırın içinde doğduğuna bakılmaksızın her şeyin üstünde olmalı.
   z-index bunu GARANTİ ETMEZ: bir ata yığın bağlamı yaratırsa (animasyon, transform, filter,
   contain, opacity<1) panelin z-index'i o atanın içine hapsolur — bu tam olarak yaşanan bug'dı.
   Popover API paneli TARAYICININ üst katmanına alır; orası ata zincirinden bağımsızdır, yani
   gelecekte biri mesaj satırına transform/filter eklese bile menü altta kalamaz.
   Öznitelik MARKUP'TA DEĞİL, JS'ten takılır (goglisMenu.top): desteklemeyen tarayıcıda
   `[popover]` UA kuralı elemanı display:none yapıp menüyü GÖRÜNMEZ bırakırdı — fail-safe.
   Aşağıdaki iki kural yalnız UA varsayılanlarını (inset:0 + margin:auto + fit-content) nötrler. */
.q-ctx-panel[popover] { inset: auto; margin: 0; }
.q-menu-backdrop[popover] { inset: 0; width: auto; height: auto; margin: 0; border: 0; padding: 0; background: transparent; }
/* Akıllı (fx) QMenu panelleri de üst katmana çıkar (2026-10-19, bkz. QMenu.OnAfterRenderAsync). Konumu `.fx`
   (top/left/right/bottom) ve mobil alt sayfa kuralı zaten yazıyor; burada yalnız UA'nın margin:auto'su ve
   CanvasText rengi nötrlenir — öğe olmayan içerik (kaydırıcı, radyo etiketi) eskisi gibi atasından renk alsın. */
.q-menu-panel.fx[popover] { margin: 0; color: inherit; }
/* #1: Smart (fixed) QMenu panelleri de sığmazsa KAYDIRILIR (sınırı yoktu, alt taşabiliyordu). */
.q-menu-panel.fx { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; }

/* ---- Ayarlar (tam ekran, Discord-vari #Y3/#Y4) ---- */
/* #9: dialog yüzeyini temaya oturt (aksi halde MudBlazor'ın beyaz paper'ı görünüp "düz/modern değil" duruyordu). */
.q-settings { position: relative; display: flex; height: 100%; min-height: 520px; background: var(--q-chat-bg); color: var(--q-text); }
/* Fullscreen ayar/sunucu dialog'unun MudBlazor yüzeyini temala + dolguyu sıfırla (kenarda beyaz kalmasın). */
.mud-dialog:has(.q-settings) { background: var(--q-chat-bg); }
.mud-dialog:has(.q-settings) .mud-dialog-content { padding: 0; overflow: hidden; }
/* #4: dialog zeminleri TEMA yüzeyini kullansın (MudBlazor gri 'surface' cyberpunk vb. temalarda sırıtıyordu). */
.mud-dialog { background: var(--q-panel-bg); }
.mud-dialog:has(.q-createsrv) { background: var(--q-chat-bg); }
.q-settings-nav { width: 218px; flex: none; background: var(--q-panel-bg); padding: 20px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.q-settings-navtitle { font-size: 11px; font-weight: 700; color: var(--q-faint); text-transform: uppercase; padding: 4px 10px 8px; }
.q-settings-navitem { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 14px; color: var(--q-muted); cursor: pointer; }
.q-settings-navitem:hover { background: var(--q-hover); color: var(--q-text); }
.q-settings-navitem.on { background: var(--q-selected); color: var(--q-strong); font-weight: 500; }
.q-settings-navitem.danger { color: var(--q-danger); }
/* #8: scroll GENEL düzeltme — body dialogun sağ kenarına kadar uzanır → scrollbar EN SAĞDA. */
.q-settings-body { flex: 1; padding: 30px 40px; overflow-y: auto; position: relative; }
/* TAM GENİŞLİK PANELLER (BULUT 2026-10-18, Fatih: "yönetim paneli olsun diğer paneller olsun
   responsive olmalı; köşede boşluklar var; programın genişliğine göre ayarlasın kendini, boşluk
   olmasın"). Eskiden içerik 720 px'te kesiliyordu → geniş pencerede sağda kocaman boş alan.
   Artık içerik pencereyi doldurur. Geniş ekranda gövde bir IZGARA: form alanları ve anahtar
   satırları genişlik yettikçe YAN YANA dizilir (tasarım atlasındaki iki/üç sütun); başlıklar,
   listeler, tablolar ve açıklamalar tam satır kalır. Kullanıcı ayarları, sunucu/kanal/kategori
   ayarları ve yönetim paneli aynı gövdeyi paylaştığı için hepsi birden düzelir. */
.q-settings-body > * { max-width: none; }
@media (min-width: 1000px) {
    .q-settings-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); column-gap: 32px; align-content: start; align-items: start;
        /* SATIRLAR İÇERİK BOYUNDA (2026-10-24, Girişler tablosunun ortasına binen "Yükleniyor"): gövdenin
           yüksekliği SABİT (esnek kabın çocuğu) ve kendi kaydırması olan bir çocuk (`overflow-x:auto` tablo)
           ızgarada "0'a kadar küçülebilir" sayılır → `auto` satırı yalnız kalan boşluk kadar büyüdü (ölçüldü:
           tablo 906 px, satırı 601 px) ve sonraki satır tablonun ORTASINDAN başladı. `max-content` satırı
           çocuğun gerçek boyuna sabitler; kaydırmasız çocuklarda sonuç zaten aynıydı. */
        grid-auto-rows: max-content; }
    .q-settings-body > * { grid-column: 1 / -1; min-width: 0; }
    .q-settings-body > .q-settings-field, .q-settings-body > .q-dset { grid-column: auto; }
    /* Tam satıra yayılan tekil düğme/rozet kocaman bir çubuğa dönmesin. */
    .q-settings-body > button, .q-settings-body > a, .q-settings-body > .mud-button-root,
    .q-settings-body > .mud-chip, .q-settings-body > span { justify-self: start; }
}
/* #7: üyeler satırı — dar pencerede rol chip'leri rozetlerin üzerine binmesin; alt satıra sarsın */
.q-settings-body .q-friend-row { flex-wrap: wrap; row-gap: 6px; }
/* #4: kapat butonu tam-ekran .q-settings'e göre (720px gövdeye değil) → daima ekranın EN SAĞINDA (responsive). */
.q-settings-close { position: absolute; top: 18px; right: 20px; z-index: 20; background: var(--q-input-bg); border: 1px solid var(--q-divider); color: var(--q-muted); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.q-settings-close:hover { background: var(--q-hover); color: var(--q-strong); }
/* #titlebar (2026-07-26 → 2026-07-30): kabukta TAM EKRAN diyaloğun ✕'i native pencere kontrollerinin
   ALTINDA kalıyordu — onların SOLUNA kaydırılır + aynı düşey hizaya gelir (top:8 = 36px düğmeyi 52px
   şeritte ortalar). Ölçülen insete 12px nefes payı eklenir. `html.q-dlgfull` MudBlazor'ın kendi
   sınıfına ek GÜVENCE: seçenek ezme (SetOptionsAsync) sırasında sınıf bir an düşse de kayma kalıcı. */
html.q-wco .mud-dialog-fullscreen .q-settings-close,
html.q-wco.q-dlgfull .q-settings-close { right: calc(var(--q-wco-r, 148px) + 12px); top: 8px; }
/* #10: ✓ Kaydet (X'in solunda, accent) — önizlemeyi kalıcı yapar */
.q-settings-save { position: absolute; top: 18px; right: 64px; z-index: 20; background: var(--q-accent); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--q-elev-1); }
.q-settings-save:hover { filter: brightness(1.08); }
/* (2026-07-30) "Geri al" — ✕ artık geri almadığı için geri dönüş AÇIK bir düğme. Kaydet/Kapat
   yuvarlaklarının solunda, metinli hap: yıkıcı olmayan ama fark edilir. */
.q-settings-undo { position: absolute; top: 18px; right: 152px; z-index: 20; display: flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px 0 10px; background: var(--q-input-bg); border: 1px solid var(--q-divider); color: var(--q-muted); border-radius: 18px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; }
.q-settings-undo:hover { background: var(--q-hover); color: var(--q-strong); border-color: var(--q-border); }
.q-settings-undo .mud-icon-root { font-size: 18px; }
html.q-wco .mud-dialog-fullscreen .q-settings-undo,
html.q-wco.q-dlgfull .q-settings-undo { right: calc(var(--q-wco-r, 148px) + 144px); top: 8px; }
@media (max-width: 620px) { .q-settings-undo span { display: none; } .q-settings-undo { padding: 0; width: 36px; justify-content: center; border-radius: 50%; right: 152px; } }
html.q-wco .mud-dialog-fullscreen .q-settings-save,
html.q-wco.q-dlgfull .q-settings-save { right: calc(var(--q-wco-r, 148px) + 56px); top: 8px; }
.q-settings-h { font-size: 20px; font-weight: 600; color: var(--q-strong); margin: 0 0 18px; }
.q-settings-card { background: var(--q-panel-bg); border-radius: 10px; padding: 16px; margin-bottom: 20px; }
.q-settings-avrow { display: flex; align-items: center; gap: 16px; }
/* #10: profil fotoğrafı düzenleme (avatar üstünde kamera rozeti) */
.q-avedit { position: relative; cursor: pointer; display: inline-flex; flex: none; }
.q-avedit-badge { position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%; background: var(--q-accent); color: #fff; display: flex; align-items: center; justify-content: center; border: 3px solid var(--q-panel-bg); }
.q-avedit:hover .q-avedit-badge { filter: brightness(1.12); }
.q-avedit-remove { font-size: 12px; color: var(--q-accent); cursor: pointer; margin-top: 4px; }
.q-avedit-remove:hover { text-decoration: underline; }
.q-settings-field { margin-bottom: 18px; }
.q-settings-field > label { display: block; font-size: 12px; font-weight: 700; color: var(--q-muted); text-transform: uppercase; margin-bottom: 8px; }
/* Hesap kimligi satiri — ayarlar profil kartinda e-posta (2026-08-11). Goglis'te ayri bir
   kullanici adi alani yok; hesabi benzersiz kilan ve girisde kullanilan sey e-postadir. */
.q-set-ident { display: flex; align-items: center; gap: 5px; margin: 2px 0 3px; font-size: 12.5px; color: var(--q-muted); min-width: 0; }
.q-set-ident span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-settings-select { width: 100%; max-width: 420px; background: var(--q-input-bg); color: var(--q-text); border: 1px solid var(--q-divider); border-radius: 8px; padding: 10px 12px; font-size: 14px; }
/* Kanal tipi açıklama kutusu (2026-08-11) — üç tipte de aynı yerde durur. min-height: metin
   uzunlukları farklı; sabit yükseklik olmadan radyo grubu her seçimde zıplıyordu. */
.q-chkind-hint { min-height: 54px; margin-top: -2px; padding: 9px 11px; border-radius: 9px; background: var(--q-input-bg); border: 1px solid var(--q-divider); font-size: 12px; line-height: 1.5; color: var(--q-muted); }
/* #11: sunucu rolleri kartı */
.q-role-card { background: var(--q-panel-bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; max-width: 560px; box-shadow: var(--q-elev-1); }
.q-role-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
/* "kaydedilmedi" rozeti (2026-08-24): Roller sekmesi artık TASLAK çalışıyor — henüz DB'ye
   yazılmamış rol bir bakışta ayırt edilmeli. Amber = "hata değil, eksik iş" (doğrulama
   bandıyla aynı dil). */
.q-role-pending { flex: none; padding: 3px 8px; border-radius: 999px; font: 700 10.5px/1 inherit;
    text-transform: uppercase; letter-spacing: .3px; cursor: default;
    color: #E8A33D; background: color-mix(in srgb, #E8A33D 18%, transparent); }
.q-role-color { width: 34px; height: 30px; border: none; background: none; padding: 0; border-radius: 6px; cursor: pointer; flex: none; }
.q-role-name { flex: 1; background: var(--q-input-bg); color: var(--q-strong); border: 1px solid var(--q-divider); border-radius: 7px; padding: 7px 10px; font-size: 14px; font-weight: 500; }
.q-role-perms { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.q-role-perm { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--q-text); cursor: pointer; }
.q-role-badge { font-size: 10px; font-weight: 600; color: #fff; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
/* #5: çoklu rol toggle chip'leri (üyeler sekmesi) — tıkla: ekle/kaldır */
.q-status-btn, .q-theme-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--q-divider); background: var(--q-input-bg); color: var(--q-text); font-size: 14px; cursor: pointer; }
.q-status-btn.on, .q-theme-btn.on { border-color: var(--q-accent); color: var(--q-strong); background: var(--q-selected); }
/* #10: marka rengi — çıplak hex yerine etiketli örnek (swatch). */
.q-brandswatch { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--q-divider); background: var(--q-input-bg); color: var(--q-text); font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.q-brandswatch-dot { width: 16px; height: 16px; border-radius: 5px; background: #A9744C; box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset, 0 0 8px rgba(169,116,76,.5); }
/* #3 vurgu rengi seçici */
.q-accent-input { width: 48px; height: 36px; padding: 2px; border: 1px solid var(--q-divider); border-radius: 8px; background: var(--q-input-bg); cursor: pointer; }
.q-accent-input::-webkit-color-swatch { border: none; border-radius: 5px; }
.q-accent-input::-webkit-color-swatch-wrapper { padding: 0; }
/* #1 mikrofon test VU metresi */
.q-mictest { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.q-meter { flex: 1; min-width: 150px; height: 10px; border-radius: 6px; background: var(--q-input-bg); border: 1px solid var(--q-divider); overflow: hidden; }
.q-meter-fill { width: 0%; height: 100%; background: linear-gradient(90deg, #23a55a, var(--q-accent)); transition: width .06s linear; }
/* #3: sağ-tık sarmalayıcı inline akışta layout bozmasın (mesaj başlığındaki ad). */
.q-ctx-inline { display: contents; }
/* #10 Kompakt mesaj modu — daha yoğun, avatar küçük, satır aralığı dar. */
body.msg-compact .q-msg { padding-top: 1px; padding-bottom: 1px; }
body.msg-compact .q-msg .q-av { width: 20px !important; height: 20px !important; font-size: 10px !important; }
body.msg-compact .q-msg-head { gap: 6px; }
body.msg-compact .q-md { line-height: 1.35; }
body.msg-compact .q-msg-body { margin-left: 0; }
/* #4/#7 Sunucu oluştur — şablon seçici + profesyonel giriş */
/* SUNUCU OLUSTUR — YENIDEN TASARLANDI (2026-08-11, kullanici: "daha kullanici ve bilgi dolu
   olabilir ... anlasilmasi zor gibi"). Iki kolon: solda sablon, sagda o sablonun KURACAGI yapi.
   Dar ekranda alt alta iner (mobil sart — dialog telefonlarda da aciliyor). */
.q-createsrv {
    padding: 2px 2px 4px;   /* GENISLIK KAPAGI YOK: dialog 960px, icerik onu doldurur */
    /* KONTEYNER SORGUSU (viewport medya sorgusu DEGIL): tarayici testinde bulundu — dar bir
       kapta (kucuk masaustu penceresi, tarayici zoom'u, dar dialog) viewport hala genis
       oldugundan medya sorgusu ATESLENMIYOR ve 212px'lik sabit sablon kolonu onizlemeyi 48px'e
       eziyordu. Onemli olan viewport degil DIALOGUN KENDI genisligi. */
    container-type: inline-size;
}
.q-createsrv-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.q-createsrv-headtxt { flex: 1; min-width: 0; }
.q-createsrv-badge {
    width: 38px; height: 38px; border-radius: 11px; flex: none;
    background: rgba(169,116,76,0.18); color: var(--q-accent);
    display: flex; align-items: center; justify-content: center;
}
.q-createsrv-badge .mud-icon-root { font-size: 20px; }
.q-createsrv-title { font-size: 18px; font-weight: 600; color: var(--q-strong); margin: 0; }
.q-createsrv-sub { font-size: 13.5px; color: var(--q-muted); line-height: 1.5; margin: 2px 0 0; }
.q-createsrv-label { font-size: 11.5px; letter-spacing: .04em; color: var(--q-faint); text-transform: uppercase; }

.q-createsrv-cols { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 18px; }
.q-createsrv-tpls { display: flex; flex-direction: column; gap: 4px; }
.q-createsrv-tpls .q-createsrv-label { margin: 0 0 4px 3px; }

.q-tpl-row {
    position: relative;
    width: 100%; min-height: 58px; text-align: left; display: flex; align-items: center; gap: 10px;
    padding: 9px 34px 9px 11px; border-radius: 8px; border: 1px solid transparent;
    background: transparent; color: var(--q-text); cursor: pointer;
    transition: background .12s, border-color .12s;
}
.q-tpl-row:hover { background: var(--q-hover); }
.q-tpl-row.on { border-color: var(--q-accent); background: rgba(169,116,76,0.14); }
.q-tpl-ico { display: flex; color: var(--q-muted); flex: none; }
.q-tpl-ico .mud-icon-root { font-size: 19px; }
.q-tpl-row.on .q-tpl-ico { color: var(--q-accent); }
.q-tpl-txt { min-width: 0; flex: 1; }
.q-tpl-name { display: block; font-size: 13.5px; font-weight: 500; }
.q-tpl-row.on .q-tpl-name { color: var(--q-strong); }
.q-tpl-desc { display: block; font-size: 12px; color: var(--q-faint); line-height: 1.35; }
.q-tpl-check {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--q-accent);
}

.q-createsrv-prev { min-width: 0; }
.q-createsrv-prevhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.q-createsrv-count { font-size: 12px; color: var(--q-muted); white-space: nowrap; }
.q-createsrv-tree {
    background: var(--q-side-bg); border-radius: 10px; padding: 11px 14px 13px;
    font-size: 13.5px; line-height: 1.85; min-height: 168px;
}
/* Gercek kanal listesindeki kategori basligi da buyuk harf cizilir; onizleme ondan
   ayrilirsa "kurulunca boyle gorunecek" vaadi bozulur. */
.q-createsrv-cat { font-size: 11px; letter-spacing: .05em; color: var(--q-faint); margin-top: 5px; text-transform: uppercase; }
.q-createsrv-cat:first-child { margin-top: 0; }
.q-createsrv-ch { display: flex; align-items: center; gap: 7px; padding-left: 4px; color: var(--q-text); }
.q-createsrv-ch .gg-icon { color: var(--q-muted); flex: none; }
.q-createsrv-ch .gg-icon.vid { color: #5DCAA5; }
.q-createsrv-tag {
    font-size: 11px; color: #5DCAA5; border: 1px solid rgba(93,202,165,.4);
    border-radius: 5px; padding: 0 5px; line-height: 1.5;
}
.q-createsrv-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.q-createsrv-role {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px;
    background: var(--q-side-bg); border: 1px solid var(--q-border);
    border-radius: 7px; padding: 3px 8px; color: var(--q-text);
}
.q-createsrv-role b { font-weight: 500; }
.q-createsrv-role span { color: var(--q-faint); }
.q-createsrv-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--q-faint); }
.q-createsrv-dot.ok { background: #639922; }
.q-createsrv-dot.mid { background: #EF9F27; }
.q-createsrv-dot.bad { background: #E24B4A; }
.q-createsrv-dot.idle { background: var(--q-faint); }

.q-createsrv-form { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; margin-top: 16px; }
.q-createsrv-form .q-createsrv-label { display: block; margin-bottom: 5px; }
.q-createsrv-namebox, .q-createsrv-regionbox {
    display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px;
    background: var(--q-input-bg); border: 1px solid var(--q-border); border-radius: 8px;
}
.q-createsrv-namebox:focus-within { border-color: var(--q-accent); }
.q-createsrv-namebox.bad { border-color: var(--q-danger); }
.q-createsrv-ava {
    width: 24px; height: 24px; border-radius: 7px; flex: none;
    background: var(--q-accent); color: #20130a; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
}
.q-createsrv-input {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
    color: var(--q-strong); font-size: 14px; font-family: inherit;
}
.q-createsrv-region {
    flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
    color: var(--q-strong); font-size: 14px; font-family: inherit; cursor: pointer;
}
.q-createsrv-region option { background: var(--q-panel-bg); color: var(--q-text); }

.q-createsrv-hint {
    display: flex; align-items: center; gap: 6px; margin-top: 14px;
    font-size: 12.5px; color: var(--q-faint);
}
.q-createsrv-err { font-size: 12.5px; color: var(--q-danger); margin-top: 5px; }

/* MOBIL: iki kolon alt alta, sablon listesi once. Onizleme agaci kisalir ama KALIR —
   "ne kurulacak" bilgisi tam da telefonda daha degerli (ekran kucuk, geri donmek zor). */
@container (max-width: 560px) {
    .q-createsrv-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .q-createsrv-form { grid-template-columns: minmax(0, 1fr); }
    .q-createsrv-tree { min-height: 0; }
    .q-createsrv-title { font-size: 15px; }
}
/* Ayni kurallar viewport icin de: konteyner sorgusu desteklenmeyen bir tarayici kalirsa
   telefonda yine alt alta iner (iki kural ayni beyanlari yazar, cakisma olmaz). */
@media (max-width: 620px) {
    .q-createsrv-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .q-createsrv-form { grid-template-columns: minmax(0, 1fr); }
    .q-createsrv-tree { min-height: 0; }
    .q-createsrv-title { font-size: 15px; }
}
/* KOMPAKT MOD (2026-07-31, kullanıcı: "sunucu oluştur ekranı küçük ekranlarda sığmıyor").
   Kısa pencerede (dizüstü 768px yükseklik, tarayıcı çubukları düşünce ~600px kalıyor) tanıtım
   bloğu + 4 şablon kartı + ad alanı + butonlar alt alta sığmıyordu; dikey alanı yükseklik
   sorgusuyla kısıyoruz — genişlik değil YÜKSEKLİK belirleyici olduğu için `max-height` sorgusu.
   Ayrıca çok dar ekranda şablonlar tek sütuna düşer. */
@media (max-height: 760px) {
    .q-createsrv-badge { width: 42px; height: 42px; border-radius: 12px; margin-bottom: 6px; }
    .q-createsrv-badge .mud-icon-root { font-size: 22px; }
    .q-createsrv-title { font-size: 17px; margin-bottom: 3px; }
    .q-createsrv-sub { font-size: 12.5px; line-height: 1.4; }
    .q-createsrv-label { margin-bottom: 5px; }
    .q-tpl-ico { width: 28px; height: 28px; border-radius: 8px; }
    .q-tpl-ico .mud-icon-root { font-size: 17px; }
    .q-tpl-name { font-size: 13px; }
    .q-tpl-desc { font-size: 11.5px; line-height: 1.3; }
    .q-createsrv-hint { margin-top: 6px; font-size: 11.5px; }
}
@media (max-height: 620px) {
    /* Çok kısa: tanıtım metni tamamen kalkar, kartlar tek satırlık özet olur. */
    .q-createsrv-sub { display: none; }
    .q-tpl-desc { display: none; }
    .q-tpl-ico { margin: 0; }
}
/* #6 Arkadaşlar — geniş, modern */
.q-friends-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.q-friends-headbadge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--q-accent), #9b91ec); color: #fff; }
.q-friends-headbadge .mud-icon-root { font-size: 24px; }
.q-friends-title { font-size: 18px; font-weight: 700; color: var(--q-strong); }
.q-friends-sub { font-size: 12px; color: var(--q-muted); }
.q-friends-body { flex: 1; overflow-y: auto; max-height: 46vh; padding-right: 4px; }
.q-friend-row-lg { padding: 9px 8px; border-radius: 10px; }
.q-friend-row-lg:hover { background: var(--q-hover, rgba(169,116,76,.08)); }
.q-friend-name { font-size: 15px; color: var(--q-strong); font-weight: 500; }
.q-friend-status { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-friends-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px 20px; color: var(--q-muted); font-size: 14px; text-align: center; }
.q-friends-add { display: flex; flex-direction: column; gap: 12px; padding-top: 10px; }
/* #8 denetim günlüğü */
.q-audit { display: flex; flex-direction: column; }
.q-audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--q-divider); }
.q-audit-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--q-accent) 12%, transparent); color: var(--q-accent); flex-shrink: 0; }
.q-audit-text { font-size: 14px; color: var(--q-text); line-height: 1.4; }
.q-audit-target { color: var(--q-strong); }
.q-audit-time { font-size: 11px; color: var(--q-muted); margin-top: 2px; }
/* #2 efekt seçici */
/* #2: efekt öğesinde etiket + ':' komut kısayolu alt alta */
/* #3/#4 çıkartma seçici */
.q-stickers { width: 300px; max-height: 320px; overflow-y: auto; padding: 4px; }
.q-stickers-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--q-faint); padding: 8px 6px 4px; }
.q-stickers-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.q-sticker-btn { border: none; background: transparent; border-radius: 8px; cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; height: 52px; }
.q-sticker-btn:hover { background: var(--q-hover); }
.q-sticker-btn.emoji { font-size: 30px; }
.q-sticker-btn.img img { max-width: 44px; max-height: 44px; object-fit: contain; }
/* #2 mesajdaki efekt chip'i (tıkla → tekrar oynat) */
/* mesajdaki çıkartma */
.q-sticker-msg { margin-top: 2px; }
.q-sticker-img { max-width: 140px; max-height: 140px; object-fit: contain; border-radius: 8px; }
/* sunucu ayarları çıkartma yönetimi */
.q-sticker-upload { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.q-sticker-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; max-width: 620px; }
.q-sticker-manage { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border: 1px solid var(--q-divider); border-radius: 10px; background: var(--q-input-bg); }
.q-sticker-manage img { max-width: 56px; max-height: 56px; object-fit: contain; }
.q-sticker-manage-name { font-size: 11px; color: var(--q-muted); max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #5 rol ikonu input'u */
/* #2/#3 sunucu başlığı (kanalların üstünde) */
.q-srvheader { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; border-bottom: 1px solid var(--q-divider); flex: none; }
.q-srvheader-name { font-weight: 600; color: var(--q-strong); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #15: kapak görselli sunucu başlığı — Discord-vari banner, ad alt gradyan üzerinde */
.q-srvheader.banner { position: relative; height: 118px; padding: 0; align-items: flex-end; background-size: cover; background-position: center; border-bottom: 1px solid var(--q-divider); }
.q-srvheader.banner::after { content: ""; position: absolute; inset: auto 0 0 0; height: 56px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.62)); pointer-events: none; }
.q-srvheader-name.onbanner { position: relative; z-index: 1; color: #fff; padding: 0 12px 9px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
/* #15: ayarlardaki kapak editörü — 2:1 (300x150) oranlı önizleme */
.q-srvbanner-edit { max-width: 340px; height: 150px; background-color: var(--q-input-bg); border: 1px dashed var(--q-divider); }
/* #4 profil kapağı (cover) editörü */
.q-coveredit { position: relative; display: block; height: 110px; border-radius: 10px; margin-bottom: 14px; background-size: cover; background-position: center; cursor: pointer; }
.q-coveredit-badge { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; }
.q-coveredit-remove { position: absolute; right: 48px; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.45); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* ---- Emoji picker ---- */
.q-emoji { width: 324px; }
.q-emoji-cats { display: flex; gap: 2px; padding: 2px 2px 6px; border-bottom: 1px solid var(--q-divider); margin-bottom: 6px; flex-wrap: wrap; }
.q-emoji-cat { font-size: 18px; padding: 3px 6px; border-radius: 7px; cursor: pointer; opacity: 0.55; line-height: 1; }
.q-emoji-cat:hover, .q-emoji-cat.on { background: var(--q-hover); opacity: 1; }
/* #11: kısa ekranda picker viewport'u aşıp kırpılıyordu — yükseklik viewport'a duyarlı (kısa ekranda küçülür).
   overscroll-behavior: contain → grid sonuna gelince sohbet arkada kaymasın. */
/* (2026-07-30, kullanıcı isteği) Satır başına 6 emoji: 8'li fazla küçük, 4'lü fazla büyüktü.
   Hücre ~57px, emoji ~34px. Satır başına az emoji = daha çok kaydırma → yükseklik tavanı
   yükseltildi (viewport'a duyarlı kalır, kısa ekranda yine küçülür). */
.q-emoji-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain; }
/* PERF (2026-07-31, ölçüldü): seçicide bir kategori ~300 hücre ve her hücredeki <use>,
   sembolün gölge ağacını (10-20 düğüm) KOPYALAR → panel açıkken stil hesabı uçuyordu
   (ölçüm sırasında tarayıcı dondu). `content-visibility:auto` görünmeyen hücreleri
   render/layout dışı bırakır, kaydırınca anında gelir; `contain-intrinsic-size` yer
   tutucu yükseklik verir ki kaydırma çubuğu zıplamasın. */
.q-emoji-i { font-size: 20px; display: flex; align-items: center; justify-content: center; padding: 5px 0; border-radius: 8px; cursor: pointer; content-visibility: auto; contain-intrinsic-size: 44px 44px; }
.q-emoji-i:hover { background: var(--q-hover); }
/* Yalnız IZGARA hücresi büyür: aynı `.cell` sınıfı sekme simgelerinde ve composer'ın '::'
   öneri satırlarında da kullanılıyor — global büyütmek onları da şişirirdi. */
.q-emoji-grid .gg-emoji { width: 34px; height: 34px; }
.q-menu-head { padding: 7px 10px 5px; font-size: 12px; color: var(--q-muted); font-weight: 600; }
.q-menu-sep { height: 1px; background: var(--q-divider); margin: 5px 4px; }
.q-menu-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: 14px; color: var(--q-strong); cursor: pointer; white-space: nowrap; }
.q-menu-item:hover { background: var(--q-hover); }
/* #6: tehlikeli aksiyonlar (Sunucudan at / Engelle / Sil) kırmızı */
.q-menu-item.danger, .q-menu-item.danger .q-menu-ico { color: var(--q-danger); }
.q-menu-item.danger:hover { background: color-mix(in srgb, var(--q-danger) 14%, transparent); }
/* #13: yetkili olduğumu belli eden öğeler (Sunucu ayarları) vurgu renginde */
.q-menu-item.accent, .q-menu-item.accent .q-menu-ico { color: var(--q-accent); }
.q-menu-item.disabled { opacity: 0.55; cursor: default; }
.q-menu-item.disabled:hover { background: transparent; }
.q-menu-ico { font-size: 18px !important; width: 18px; height: 18px; }

/* ---- Glassmorphism (#13): Apple-camsı katmanlar ----
   ÖNEMLİ: backdrop-filter KULLANILMIYOR. Krom panellere backdrop-filter koymak
   yeni stacking-context yaratıp floating popover'ları (menü/emoji) arkada bırakıyor
   (Chrome). Bunun yerine ambient gradient zemin + yarı-saydam rgba paneller + ince
   kenarlık ile camsı/katmanlı görünüm: rgba arka plan stacking-context yaratmaz. */
.q-root { background: var(--q-ambient); }
.q-topbar { background: var(--q-glass-strong); border-bottom: 1px solid var(--q-glass-border); }
.q-online { background: var(--q-glass); border-right: 1px solid var(--q-glass-border); }
.q-channels { background: var(--q-glass); border-left: 1px solid var(--q-glass-border); }
.q-userpanel { background: var(--q-glass-strong); border-top: 1px solid var(--q-glass-border); }
/* sohbet alanı: ambient zemin hafifçe görünsün */
.q-center { background: transparent; }
.q-chathead { background: var(--q-glass-strong); }
.q-composer { background: var(--q-glass-strong); border: 1px solid var(--q-glass-border); }
/* açılır menüler / emoji / mention: neredeyse opak (okunabilirlik) + ince kenar */
.q-menu-panel, .q-mention-pop {
    background: var(--q-glass-menu);
    border: 1px solid var(--q-glass-border);
}

/* ============================================================================
   MATERIAL CİLA (kademeli) — mevcut Discord-vari yapı + glass korunur; üstüne
   Material Design'ın karakteristiği eklenir: elevation (gölge), state-layer
   (hover/pressed), motion (easing/süre), yükselen buton/çip/kart. Marka moru
   #A9744C sabit. Tümü additive: düzen/akış değişmez, yalnız derinlik+hareket.
   ============================================================================ */
/* :root → dialog portalları da Material token'ları görür (#9). Tema-bağımsız base. */
:root {
    /* Material elevation seviyeleri (koyu yüzeyler için ayarlı gölge) */
    --q-elev-1: 0 1px 2px rgba(0,0,0,.28), 0 1px 3px 1px rgba(0,0,0,.14);
    --q-elev-2: 0 1px 2px rgba(0,0,0,.28), 0 2px 6px 2px rgba(0,0,0,.14);
    --q-elev-3: 0 4px 8px 3px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.28);
    --q-elev-4: 0 6px 10px 4px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.28);
    /* Hareket: Apple-vari yumuşak ease-out (nazik "soft landing") + biraz daha uzun süre.
       Yalnız zamanlama/eğri — düzen/konumlanma ETKİLENMEZ. */
    --q-ease: cubic-bezier(.25,.8,.25,1);
    --q-dur: 140ms;   /* #12: 200ms geç hissettiriyordu (kullanıcı: 'kasıyor hissi') — 140ms hâlâ yumuşak ama anında */
    --q-ease-spring: cubic-bezier(.34,1.56,.64,1); /* bas-bırak "pop" — yalnız transient press-scale'de */
    /* Material state-layer (primary tint — seçili/aktif için) */
    --q-state-primary: color-mix(in srgb, var(--q-accent) 14%, transparent);
    --q-state-primary-strong: color-mix(in srgb, var(--q-accent) 22%, transparent);
}
/* Açık temada Material gölge daha yumuşaktır (koyu-tema gölgesi açıkta sert görünür) */
.theme-light, .theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light {
    --q-elev-1: 0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
    --q-elev-2: 0 1px 2px rgba(0,0,0,.10), 0 2px 6px 2px rgba(0,0,0,.06);
    --q-elev-3: 0 4px 8px 3px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.11);
    --q-elev-4: 0 6px 10px 4px rgba(0,0,0,.08), 0 2px 3px rgba(0,0,0,.11);
    --q-state-primary: color-mix(in srgb, var(--q-accent) 12%, transparent);
    --q-link: #0b5cc7; /* açık zeminde #7aa6ff kontrastı yetersiz */
}

/* --- Elevation + ince hairline kenar (Fluent/Geist: gölge + 1px kenar = net modern derinlik).
       inset box-shadow → LAYOUT KAYMAZ; menü/popover'ın kenarı --q-border'a güçlendirilir. --- */
.q-menu-panel, .q-mention-pop, .q-ctx-panel { box-shadow: var(--q-elev-3); border-color: var(--q-border); }
.q-msg-tools { box-shadow: var(--q-elev-2); }
.q-composer { box-shadow: var(--q-elev-1), inset 0 0 0 1px var(--q-border); }
.q-stat, .q-admin-row, .q-settings-card, .q-pcard2-section, .q-empty-hint { box-shadow: var(--q-elev-1), inset 0 0 0 1px var(--q-border); }
/* Üye profil popover'ı da net kenar */
.q-pp { border-color: var(--q-border); }
/* top bar: sadece kenarlık yerine hafif Material yükseklik */
.q-topbar { box-shadow: var(--q-elev-1); position: relative; z-index: 5; }

/* --- Motion: tüm etkileşimli öğelere yumuşak geçiş (Material easing) --- */
.q-chrow, .q-dmrow, .q-member, .q-vuser, .q-menu-item, .q-inbox-tab, .q-tab,
.q-friends-btn, .q-emoji-i, .q-emoji-cat, .q-settings-navitem, .q-react,
.q-status-btn, .q-theme-btn, .q-login-btn, .q-pcard2-morebtn, .q-settings-close,
.q-vctl, .q-dmpin, .q-dmadd, .q-tab-caret, .q-mention-i, .q-friend-row {
    transition: background-color var(--q-dur) var(--q-ease),
                color var(--q-dur) var(--q-ease),
                box-shadow var(--q-dur) var(--q-ease),
                border-color var(--q-dur) var(--q-ease),
                transform var(--q-dur) var(--q-ease);
}

/* --- State layer: pressed (Material'da tıklama anında daha güçlü katman) --- */
.q-chrow:active, .q-dmrow:active, .q-member:active, .q-vuser:active,
.q-menu-item:active, .q-inbox-tab:active, .q-friends-btn:active,
.q-emoji-i:active, .q-settings-navitem:active, .q-mention-i:active,
.q-friend-row:active { background: var(--q-selected); }

/* seçili durum: Material primary state-layer (mor tint) — daha "Material You" */
.q-chrow.sel, .q-dmrow.sel, .q-inbox-tab.on, .q-settings-navitem.on {
    background: var(--q-state-primary);
}

/* --- Material dolu butonlar: elevation + hover-lift + pressed-düşüş --- */
.q-login-btn { box-shadow: var(--q-elev-2); }
.q-login-btn:hover { box-shadow: var(--q-elev-3); }
.q-login-btn:active { box-shadow: var(--q-elev-1); transform: translateY(1px); }

/* --- Material chip (reaction): hover state-layer + hafif lift --- */
.q-react:hover { background: var(--q-selected); box-shadow: var(--q-elev-1); }
.q-react.on { background: var(--q-state-primary); }

/* --- Yuvarlak kontrol butonları (mic/deafen/çık): Material FAB hissi --- */
.q-vctl { box-shadow: var(--q-elev-1); }
.q-vctl:hover { box-shadow: var(--q-elev-2); }
.q-vctl:active { transform: translateY(1px); box-shadow: var(--q-elev-1); }

/* --- Ayar/durum/tema seçim butonları: hover-lift --- */
.q-status-btn:hover, .q-theme-btn:hover, .q-pcard2-morebtn:hover { box-shadow: var(--q-elev-1); }

/* --- Welcome badge zaten gölgeli; login kartına da Material elevation --- */
.q-login-card { box-shadow: var(--q-elev-4); }

/* --- Karşılama ipuçları hover: Material yüzey yükselmesi --- */
.q-empty-hint:hover { box-shadow: var(--q-elev-2); transform: translateY(-1px); }

/* --- Marka logosu: hafif Material gölge (mor yüzey) --- */
.q-logo { box-shadow: var(--q-elev-1); }

/* --- Material odak durumu: girişler odakta accent gösterir --- */
.q-composer { transition: box-shadow var(--q-dur) var(--q-ease); }
.q-composer:focus-within { box-shadow: var(--q-elev-2), inset 0 0 0 1.5px var(--q-accent); }
.q-settings-select { transition: border-color var(--q-dur) var(--q-ease), box-shadow var(--q-dur) var(--q-ease); }
.q-settings-select:focus { outline: none; border-color: var(--q-accent); box-shadow: 0 0 0 3px var(--q-state-primary); }
.q-editbox { transition: box-shadow var(--q-dur) var(--q-ease); }
.q-editbox:focus { box-shadow: inset 0 0 0 1.5px var(--q-accent); }

/* --- Modern kaydırma çubuğu: ince, yuvarlak, overlay-vari; TÜM uygulamada TUTARLI (macOS/Fluent esini).
   Global (*) → dialog/dropdown/textarea gibi eskiden VARSAYILAN çirkin çubuğu olan alanlar da kapsanır.
   Overlay görünüm: şeffaf 3px kenar + background-clip (12px çubuk → ~6px görünür yuvarlak thumb).
   Renk tema token'ı — koyu: beyaz alpha, açık: siyah alpha; hover'da koyulaşır.
   :root önce (koyu varsayılan) → .theme-light SONRA ezer (aynı özgüllük, kaynak sırası). --- */
/* TOKEN ACCENT'TEN (2026-08-12, kullanici: "scroll renkleri temaya gore olsun; sunucu uye ve
   kanal listesindekiler"). Onceden sabit gri-beyaz/siyah alpha idi — teknik olarak "tutarli"
   ama hicbir temanin KIMLIGINI tasimiyordu. Not: custom property icindeki var() KULLANIM
   yerinde cozulur, :root'ta degil — yani tanim :root'ta dursa da .q-root altindaki her oge
   KENDI temasinin accent'ini gorur; fallback kahve yalniz tema-disi baglamlara (html) kalir.
   Acik temalarda opaklik daha yuksek: acik zeminde %45 accent fazla siliktir (olcum degil
   tipografi kurali; az gelirse yuzde artirilir). */
:root { --q-scroll: color-mix(in srgb, var(--q-accent, #A9744C) 45%, transparent); --q-scroll-hover: color-mix(in srgb, var(--q-accent, #A9744C) 72%, transparent); }
.theme-light, .theme-ocean-light, .theme-grape-light, .theme-forest-light,
.theme-sunset-light, .theme-rose-light, .theme-midnight-light { --q-scroll: color-mix(in srgb, var(--q-accent, #A9744C) 58%, transparent); --q-scroll-hover: color-mix(in srgb, var(--q-accent, #A9744C) 80%, transparent); }
* { scrollbar-width: thin; scrollbar-color: var(--q-scroll) transparent; }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--q-scroll); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--q-scroll-hover); background-clip: padding-box; }
*::-webkit-scrollbar-corner { background: transparent; }
/* Yukarı/aşağı ok düğmeleri gizlensin (Windows Chrome varsayılan gösterir) — temiz modern görünüm. */
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* --- Material klavye odak halkası (yalnız klavye — fare tıklamasında görünmez) --- */
.q-chrow:focus-visible, .q-dmrow:focus-visible, .q-menu-item:focus-visible,
.q-inbox-tab:focus-visible, .q-settings-navitem:focus-visible, .q-friends-btn:focus-visible,
.q-status-btn:focus-visible, .q-theme-btn:focus-visible, .q-login-btn:focus-visible,
.q-vctl:focus-visible, .q-emoji-i:focus-visible, .q-react:focus-visible {
    outline: 2px solid var(--q-accent); outline-offset: 2px;
}

/* Hareketi azalt tercihi olan kullanıcıya saygı (Material a11y) */
@media (prefers-reduced-motion: reduce) {
    .q-chrow, .q-dmrow, .q-member, .q-vuser, .q-menu-item, .q-inbox-tab, .q-tab,
    .q-friends-btn, .q-emoji-i, .q-emoji-cat, .q-settings-navitem, .q-react,
    .q-status-btn, .q-theme-btn, .q-login-btn, .q-pcard2-morebtn, .q-settings-close,
    .q-vctl, .q-dmpin, .q-dmadd, .q-tab-caret, .q-mention-i, .q-friend-row,
    .q-empty-hint { transition: none; }
    .q-login-btn:active, .q-vctl:active, .q-empty-hint:hover { transform: none; }
}

/* ============================================================================
   ZARİF CİLA (2026-07-25, istek #11) — GÜVENLİ SÜRÜM (2026-07-25 revizyon):
   İlk sürüm (kolon/menü/avatar transform'ları) menüleri kaydırıp profil tıklamasını
   bozdu (transform bir POSITIONED popup'a "containing block" oluşturuyor → JS ile
   konumlanan menü şaşıyor; z-index/scale tıklamayı etkiliyordu). O yüzden yalnız
   POSITIONED/INTERAKTIF OLMAYAN öğelerde, SADECE OPACITY fade bıraktık — hiçbir
   transform, hiçbir menü/popup/avatar/kolon animasyonu YOK. reduced-motion'da durur.
   ============================================================================ */
@keyframes q-el-fadein { from { opacity: 0; } to { opacity: 1; } }
/* Apple-vari: mesaj nazikçe YÜKSELEREK belirir. translateY YALNIZ 'from'da → bitişte transform:none
   (containing-block YOK → sabit-konumlu menü/lightbox etkilenmez); transform layout'u değiştirmez → scroll matematiği bozulmaz. */
/* (2026-07-30, kullanıcı bug'ı "tepki ekleye tıkladım boşluk oldu ekranda") TRANSFORM KALDIRILDI.
   Mesaj satırı `translateY` ile içeri süzülüyordu; transform'lu bir eleman, İÇİNDEKİ
   `position:fixed` panellerin KONUM REFERANSINI (containing block) viewport'tan kendine çeker.
   Tepki emoji seçici `.q-msg` içinde açıldığı için panel viewport yerine mesaja göre
   konumlanıyor, ekranın dışına taşıyor ve kaydırma alanını şişiriyordu (yatay kaydırma çubuğu +
   boşluk). Giriş artık YALNIZ opaklık — aynı yumuşaklık, tuzak yok. */
/* (2026-07-31, kullanıcı bug'ı "sağ tıklamada buglu") DOLGU MODU `both` KALDIRILDI — ölçülmüş kök neden.
   `animation-fill-mode: both`, animasyon BİTTİKTEN sonra da efekti "dolduruyor" sayılır: Chrome
   elemanı KALICI olarak yığın bağlamı (stacking context) yapar. Böylece her mesaj satırı kendi
   yığın bağlamıydı ve İÇİNDE açılan `position:fixed` panellerin (sağ-tık menüsü, tepki seçici,
   bahsetme popup'ı) z-index'i mesajın içine hapsoluyordu: menü, z-index 1300 olmasına rağmen üst
   şeridin ve SONRAKİ mesajların ALTINDA kalıyordu. Tarayıcıda üç yönlü doğrulandı: animasyonu
   kaldır → menü en üstte, geri koy → yine altta. Ek kazanç: 40+ mesajlık kanalda o kadar kalıcı
   kompozisyon katmanı da düşer.
   `both` zaten GEREKSİZDİ: gecikme yok (→ backwards anlamsız) ve `to` değeri elemanın normal
   opaklığıyla (1) aynı (→ forwards anlamsız). Görsel olarak HİÇBİR fark yok. */
@keyframes q-el-rise { from { opacity: 0; } to { opacity: 1; } }
.q-msg { animation: q-el-rise .34s var(--q-ease); }
.q-day-sep { animation: q-el-fadein .4s var(--q-ease); }
@media (prefers-reduced-motion: reduce) { .q-msg, .q-day-sep { animation: none !important; } }

/* --- Tactile press: seçili YAPRAK butonlar basılınca hafifçe küçülür, bırakınca yaylı "pop" ile döner.
   transform yalnız :active'de (GEÇİCİ) + bu öğeler açılır-menü/popover KABI DEĞİL → konumlanma riski YOK.
   (Kompozisyon ikonları/sekmeler/avatarlar/menüler BİLEREK dışarıda — onlar sabit-konumlu çocuk barındırır.) */
.q-react, .q-vctl, .q-status-btn, .q-theme-btn, .q-login-btn,
.q-friends-btn, .q-dmpin, .q-dmadd, .q-settings-close, .q-pcard2-morebtn {
    transition: background-color var(--q-dur) var(--q-ease),
                color var(--q-dur) var(--q-ease),
                box-shadow var(--q-dur) var(--q-ease),
                border-color var(--q-dur) var(--q-ease),
                transform 260ms var(--q-ease-spring);
}
.q-react:active, .q-vctl:active, .q-status-btn:active,
.q-theme-btn:active, .q-login-btn:active, .q-friends-btn:active,
.q-dmpin:active, .q-dmadd:active, .q-settings-close:active, .q-pcard2-morebtn:active {
    transform: scale(.9);
    transition-duration: 70ms;   /* basış hızlı, bırakış yaylı (260ms) */
}
@media (prefers-reduced-motion: reduce) {
    .q-react:active, .q-vctl:active, .q-status-btn:active,
    .q-theme-btn:active, .q-login-btn:active, .q-friends-btn:active,
    .q-dmpin:active, .q-dmadd:active, .q-settings-close:active, .q-pcard2-morebtn:active { transform: none; }
}

/* ============ Menü/popover açılış animasyonu + tatlı hover (additive, GÜVENLİ) ============
   Paneller nazik ölçek + kayma + solma ile belirir. transform YALNIZ keyframe'de; 'to'da transform
   YOK → animasyon bitince transform:none (containing-block YOK → sabit-konumlu alt menü/popover
   konumlanması BOZULMAZ; .q-submenu-panel'in mevcut q-pop güvencesiyle BİREBİR aynı ilke).
   will-change KULLANILMAZ (kalıcı containing-block yaratırdı). transform-origin: panel çapasından büyür.
   .fx (Smart) menüler başta visibility:hidden → animasyon placeSmart yeniden-tetikler (goglis.js). */
@keyframes q-menu-in    { from { opacity: 0; transform: translateY(-8px) scale(.965); } to { opacity: 1; } }
@keyframes q-menu-in-up { from { opacity: 0; transform: translateY(8px)  scale(.965); } to { opacity: 1; } }
.q-menu-panel, .q-ctx-panel, .q-mention-pop {
    /* Süre YARIYA indirildi (2026-08-08, kullanıcı isteği): .13s -> .065s. Önceki tur .2s -> .13s
       yapmıştı; menüler artık pratikte anında açılıyor ama hareket tamamen kaybolmuyor. */
    animation: q-menu-in .065s var(--q-ease);
    transform-origin: top center;
}
.q-menu-panel.up    { animation-name: q-menu-in-up; transform-origin: bottom center; }
.q-menu-panel.r     { transform-origin: top right; }
.q-menu-panel.up.r  { transform-origin: bottom right; }
.q-mention-pop      { animation-name: q-menu-in-up; transform-origin: bottom left; }
.q-ctx-panel        { transform-origin: top left; }

/* PROFIL KARTI KENDI ZAMANLAMASINI KULLANIR (2026-08-11, kullanici: "sag alttaki profilime
   basinca gelen menu animasyonu guzel degil, daha naif ve guzel yap; alttan yukari degil de
   yukaridan asagi geliyor").
   IKI SORUN VARDI:
   (a) YON: kart hem uye listesinden (asagi acilir) hem sol alttaki profil dugmesinden (yukari
       acilir) aciliyor, ama animasyon HER ZAMAN yukaridan dusuyordu (translateY(-8px) +
       transform-origin: top left) — yani asagidan acilan kart tersine hareket ediyordu. Yon
       artik gercek geometriden turer: goglisMenu.faceAnchor capayi kartin ortasiyla
       karsilastirip `.up` sinifini koyar.
   (b) HIS: 65ms menuler icin dogru (kullanici oyle istedi) ama profil KARTI bir menu degil,
       daha buyuk bir yuzey; o hizda "acilmadi, birden belirdi" gibi duruyordu. Kendi suresi
       (.22s) ve yumusak ivmesi var; hareket 10px + hafif olcek, sicrama/overshoot YOK.
       Sadece transform + opacity animasyonlanir (compositor'da kalir, layout tetiklemez). */
@keyframes q-pp-in    { from { opacity: 0; transform: translateY(-10px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes q-pp-in-up { from { opacity: 0; transform: translateY(10px)  scale(.975); } to { opacity: 1; transform: none; } }
.q-pp {
    animation: q-pp-in .22s cubic-bezier(.22, .68, .36, 1);
    transform-origin: top left;
}
.q-pp.up { animation-name: q-pp-in-up; transform-origin: bottom left; }

/* YUMUSAK MENU (opt-in: QMenu PanelExtraClass="q-menu-soft").
   65ms kucuk menuler icin dogru — kullanicinin kendi karari — ama profil paneli gibi BUYUK
   yuzeylerde (400px+) o hizda "acilmadi, birden belirdi" gibi duruyor. Bu varyant yalnizca
   secilen menulere verilir; digerlerinin hizi AYNEN korunur. Sadece transform+opacity. */
.q-menu-panel.q-menu-soft    { animation: q-pp-in .2s cubic-bezier(.22, .68, .36, 1); }
.q-menu-panel.q-menu-soft.up { animation-name: q-pp-in-up; }
@media (prefers-reduced-motion: reduce) {
    .q-menu-panel, .q-ctx-panel, .q-mention-pop, .q-pp { animation: none; }
}

/* Tatlı hover: composer ifade/araç ikonları artık hover'da yumuşak yuvarlak zemin (önce yalnız renkti). */
.q-expr-ic { transition: color var(--q-dur) var(--q-ease), background var(--q-dur) var(--q-ease); }
.q-expr-ic:hover { background: var(--q-hover); color: var(--q-strong); }

/* ================= LIQUID GLASS CİLASI (Apple iOS26 esini) — tek blok, kolay geri-alınır =================
   "Cila/wax" hissi = üç katman: specular rim (üst kenar ışığı yakalar) + gloss sheen + katmanlı gölge.
   backdrop-filter KULLANILMAZ (bkz. ~1646: krom panele koymak stacking-context yaratıp popover'ı arkada
   bırakıyor). inset box-shadow + gradient stacking-context/containing-block YARATMAZ → menü/alt-menü/
   popover konumlanması GÜVENDE (transform da yok). */
:root { --q-gloss: rgba(255,255,255,0.06); }
.theme-dark { --q-gloss: rgba(255,255,255,0.075); }
.theme-light, .theme-ocean-light, .theme-grape-light, .theme-forest-light,
.theme-sunset-light, .theme-rose-light, .theme-midnight-light { --q-gloss: rgba(255,255,255,0.55); }

/* Floating cam paneller — üst specular rim (elevation + hairline korunur, sadece box-shadow zenginleşir) */
.q-menu-panel, .q-ctx-panel, .q-mention-pop { box-shadow: var(--q-elev-3), inset 0 1px 0 var(--q-gloss); }
.q-pp        { box-shadow: var(--q-elev-4), inset 0 1px 0 var(--q-gloss); }
.q-composer  { box-shadow: var(--q-elev-1), inset 0 0 0 1px var(--q-border), inset 0 1px 0 var(--q-gloss); }
.q-stat, .q-admin-row, .q-settings-card, .q-pcard2-section, .q-empty-hint {
    box-shadow: var(--q-elev-1), inset 0 0 0 1px var(--q-border), inset 0 1px 0 var(--q-gloss);
}
.q-userpanel { box-shadow: inset 0 1px 0 var(--q-gloss); }

/* Cam-pill butonlar — gloss sheen (üstten aşağı beyaz parıltı) + specular üst rim + katmanlı gölge = "waxed" düğme.
   Yalnız DOLGULU/aksan butonlar; text/outlined butonlar dokunulmaz. background-image dolgu-rengini EZMEZ (üstüne biner). */
.q-login-btn, .q-chip-ok, .q-chip-grant, .mud-button-filled {
    background-image: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 48%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.20), 0 2px 6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.24);
}
.q-login-btn:active, .q-chip-ok:active, .q-chip-grant:active, .mud-button-filled:active {
    box-shadow: 0 1px 1px rgba(0,0,0,0.18), inset 0 1px 2px rgba(0,0,0,0.16);
}

/* ============================================================================
   RESPONSIVE (#8) — masaüstü düzeni korunur; yalnız dar ekranlarda uyarlanır.
   Kurallar media-query içinde, geniş ekran hiç etkilenmez.
   ============================================================================ */

/* Tablet: çevrimiçi (üyeler) paneli ikincil → gizle, sohbete yer aç. */
@media (max-width: 1000px) {
    .q-online { display: none; }
}

/* Dar tablet / büyük telefon: kanallar paneli daralır, üst bar/sohbet sıkışır. */
@media (max-width: 760px) {
    .q-channels { width: 200px; }
    .q-messages { padding: 8px 10px; gap: 0; }
    .q-msg:not(.cont) { margin-top: 10px; }
    .q-composer { margin: 6px 10px 10px; }
    .q-topbar { padding: 0 6px; gap: 3px; }
    .q-brandname { display: none; }         /* logo kalır, marka adı gizlenir */
    .q-msg { gap: 8px; }
    .q-tab { padding: 7px 8px; }
    /* MOBİL: TEK sekme (aktif sunucu) ADIYLA + yanında "..." (diğerleri). Uzun ad taşmasın diye
       kırpılır; taşma hesabı zaten min-1 garantili (OnTabsFit) → 1 isimli sekme + "..." çıkar. */
    .q-topbar .q-tab-name { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-topbar .q-tabs { overflow-x: clip; }
}

/* Telefon: paneller iyice daralır; ayarlar/profil dialogları uyarlanır. */
@media (max-width: 560px) {
    .q-channels { width: 168px; }
    .q-chathead { padding: 0 8px; gap: 6px; }
    .q-chtopic { display: none; }           /* dar başlıkta konu satırı gizle */
    /* Tam ekran ayar/sunucu dialogu: sol nav'ı ÜSTTE yatay şeride çevir (mobil deseni). */
    .q-settings { flex-direction: column; min-height: 0; }
    .q-settings-nav { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; }
    .q-settings-navtitle { display: none; }
    .q-settings-navitem { white-space: nowrap; }
    .q-settings-body { padding: 20px 16px; max-width: none; }
    /* SOLDAN KAYAN NAV: yönetim paneli + nav-drawer sınıflı ayar dialogları (profil düzenle) —
       yatay şerit yerine drawer. z-index MudDialog'un üstünde kalacak kadar yüksek. */
    .q-admin .q-settings, .q-settings.nav-drawer { flex-direction: row; }
    .q-admin .q-settings-nav, .q-settings.nav-drawer .q-settings-nav { position: fixed; z-index: 2005; left: 0; top: 0; bottom: 0; width: 240px;
        flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 20px 10px; gap: 2px;
        transform: translateX(-102%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(0,0,0,.35); }
    .q-admin .q-settings.adm-nav-open .q-settings-nav, .q-settings.nav-drawer.adm-nav-open .q-settings-nav { transform: none; }
    .q-admin .q-settings-navtitle, .q-settings.nav-drawer .q-settings-navtitle { display: block; }
    .q-admin .q-settings-navitem, .q-settings.nav-drawer .q-settings-navitem { white-space: normal; }
    .q-admin .q-adm-bd, .q-settings.nav-drawer .q-adm-bd { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.45); }
    .q-admin .q-adm-burger, .q-settings.nav-drawer .q-adm-burger { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
        padding: 8px 12px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg);
        color: var(--q-strong); font-size: 13.5px; font-weight: 600; cursor: pointer; }
    .q-role-perms { grid-template-columns: 1fr; }  /* rol izinleri tek sütun */
    /* YÖNETİM PANELİ GÖVDESİ — mobil profesyonel uyum: çok-kolon grid'ler daralır, başlık sarar. */
    .q-admin-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; } /* 3→2 kolon (istatistik kutuları) */
    .q-admin-lkform { grid-template-columns: 1fr; }                     /* medya/depo/bölge formu tek sütun */
    .q-stat-val { font-size: 21px; }                                    /* dev sayı dar kutuda taşmasın */
    .q-hist-rbtn { padding: 6px 9px; font-size: 12px; }                 /* aralık butonları sığsın */
    /* MudDialog'ları neredeyse tam genişlik yap (küçük diyaloglar). */
    .mud-dialog { width: 94vw !important; max-width: 94vw !important; margin: 0 auto; }
    .q-pcard2 { width: auto; }
    /* #151 mobil: BÜYÜK dialoglar (sunucu ayarları + profil kartı) TAM EKRAN — yuvarlak köşe/
       kenar boşluğundan arkadaki kanal sızmasın (kullanıcı: 'tam ekrana yaymamışsın'). Ayarlar
       zaten FullScreen; profil kartı Small'dı → tam ekrana çekilir + yüzey temalanır. */
    .mud-dialog:has(.q-settings), .mud-dialog:has(.q-pcard2) {
        width: 100vw !important; max-width: 100vw !important;
        height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important;
        margin: 0 !important; border-radius: 0 !important;
    }
    .mud-dialog:has(.q-pcard2) { background: var(--q-chat-bg); }
    .mud-dialog:has(.q-pcard2) .mud-dialog-content { padding: 0; height: 100%; overflow-y: auto; }
    .mud-dialog:has(.q-pcard2) .q-pcard2 { width: 100% !important; }
    /* YÖNETİM PANELİ ŞERİDİN ALTINDA, ALT MENÜNÜN ÜSTÜNDE (2026-08-21 akşam, kullanıcı: "mobilde
       yönetim paneline girince header'ın altında görünüyor").
       KÖK NEDEN: `.q-admin` z-index 1000 ile doğuyor. Masaüstünde bu üst şeridi (z 5) örtmeye
       yetiyor, ama mobilde şerit 1276'ya çıkarıldığından (başlık menüsü stacking düzeltmesi)
       panelin KENDİ başlık satırı — hamburger + ✕ — şeridin ARKASINDA kalıyordu; alt menü (1260)
       de panelin üstüne biniyordu. Örtmek yerine iki çubuğun ARASINA oturur: panelin kendi
       kumandaları görünür olur ve iki çubuk da kullanılabilir kalır (alt menüye/üst şerite
       dokunmak paneli kapatıp oraya gider — MainLayout.CloseMobileOverlays).
       Nav çekmecesi ve perdesi de aynı banda kapatılır (z 2005/2000 ile şeridin üstündeler);
       yoksa panel şeridin altında dururken çekmecesi onu örter ve hiza tutmaz. */
    /* TAM EKRAN (2026-08-24, kullanıcı: "mobilde yönetim paneli ayarlar gibi tam ekranda
       olmalı"). Yukarıdaki 2026-08-21 turunda panel iki çubuğun ARASINA oturtulmuştu; o turun
       kök nedeni Z-INDEX'ti (panel 1000, üst şerit 1276) ve çözüm olarak bant daraltılmıştı.
       Doğru çözüm bandı daraltmak değil, panelin KENDİSİNİ iki çubuğun da üstüne çıkarmak:
       1300 > üst şerit 1276 > alt menü 1260 > video sahnesi 1290/1291 > topluluk popup'ı 1292.
       Böylece panelin kendi başlık satırı (hamburger + ✕) görünür kalır ve ayarlar dialoguyla
       aynı "tam ekran" hissi oluşur.
       ÇIKIŞ YOLU: panelin kendi ✕'i (`Nav.NavigateTo("/")`) — iki çubuk da örtüldüğü için tek
       kapı odur; ayarlar dialogundaki sözleşmenin aynısı.
       MudDialog'lar (z 1400+) panelin ÜSTÜNDE kalmaya devam eder: panelden açılan onay/uyarı
       diyalogları çalışır. */
    .q-admin, .q-admin.popup {
        inset: 0; z-index: 1300;
        border-radius: 0; border: none;
    }
    /* ÇENTİK PAYI: panel artık durum çubuğunun altına uzanıyor — kendi kumandaları oraya
       girmesin (mobil panellerdeki `env(safe-area-inset-*)` deseninin aynısı). */
    .q-admin .q-settings-close { top: calc(14px + env(safe-area-inset-top, 0px)); }
    .q-admin .q-settings-expand { top: calc(14px + env(safe-area-inset-top, 0px)); }
    .q-admin .q-settings-body { padding-top: calc(20px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
    /* Nav çekmecesi ve perdesi de tam boya döner (panel artık tüm ekranı kaplıyor). */
    .q-admin .q-settings-nav { top: 0; bottom: 0; padding-top: calc(20px + env(safe-area-inset-top, 0px)); }
    .q-admin .q-adm-bd { inset: 0; }
    /* Erişim editörü (kategori/kanal yetkilendirme) — mobil cila:
       mod butonları eşit-bölmeli segment şeridi; kutular alt alta TAM genişlik;
       satırlar parmak boyu (≥40px), işaret/avatar büyür. */
    .q-acc-modes { gap: 6px; flex-wrap: nowrap; }
    .q-acc-modes .q-theme-btn { flex: 1 1 0; min-width: 0; justify-content: center; padding: 9px 4px; font-size: 12.5px; gap: 5px; }
    .q-acc-modes .q-theme-btn .mud-icon-root { font-size: 17px; }
    .q-acc-cols { gap: 10px; }
    /* Mobilde kutu İÇERİĞE sarılır (az öğede koca boşluk kalmasın) — tavan 216px, taşan kayar. */
    .q-acc-box { flex-basis: 100%; height: auto; max-height: 216px; }
    .q-acc-row { padding: 9px 10px; font-size: 14px; }
    .q-acc-check { width: 20px; height: 20px; }
    .q-acc-av { width: 24px; height: 24px; }
    .q-acc-search { padding: 8px 10px; }
    .q-acc-search input { font-size: 14px; }
}

/* Çok dar: kanal paneli de gizlenebilir yerine — logoya basınca DM/ev, kanallar dar kalır.
   (Tam mobil drawer ileride; şimdilik kullanılabilir dar düzen.) */
@media (max-width: 420px) {
    .q-channels { width: 148px; }
    .q-msg-name { font-size: 14px; }
    .q-composer { min-height: 42px; } /* SABİT height DEĞİL — textarea büyüyünce kap da büyümeli */
}

/* ============================================================================
   #2 MOBİL DÖNÜŞÜM (≤700px): responsive mod — ayrı UX değil, aynı DOM.
   Yan kolonlar (üyeler/DM listesi solda, kanallar+ses paneli sağda) kayan
   DRAWER olur; sohbet tam genişlik. Aç/kapa: topbar'daki .q-mbtn butonları →
   goglisMobile (goglis.js) body'ye m-left/m-right class'ı basar. Dosyanın
   SONUNDA: yukarıdaki 760/560/420 daraltma kurallarını cascade'de ezer.
   ============================================================================ */
.q-mbtn { display: none; }
.q-mbd { display: none; }
.q-mdrawer-top { display: none; }
.q-mobar { display: none; }   /* mobil alt menü — yalnız dar ekranda (aşağıdaki media bloğu) */
.q-mocalls { display: none; } /* Aramalar ekranı — yalnız dar ekranda (aşağıdaki media bloğu) */
/* MOBİLE ÖZEL ÜST ŞERİT PARÇALARI (2026-08-21): sekme adı başlığı, `+` (topluluğa katıl) ve
   ayarlar dişlisi. Masaüstünde bunların hepsinin karşılığı zaten var (sekmeler, `+` sekmesi,
   kullanıcı panelindeki ayarlar) — orada çizilmezler. */
.q-motitle, .q-mo-only { display: none !important; }
.q-mojoin, .q-moinbox { display: none; }
.q-row-more { display: none; } /* #4: yalnız mobilde görünür */

/* #1: <360px CSS genişlik (iPhone SE 375 referansının altı; ör. 320px mini cihazlar)
   DESTEKLENMEZ — saf-CSS tam ekran uyarı, her şeyi örter.
   #2: TEK dil — goglis.js overlay'e tr/de class'ı basar; class yoksa İngilizce görünür. */
.q-unsupported { display: none; }
@media (max-width: 359.9px) {
    .q-unsupported {
        display: flex; align-items: center; justify-content: center; text-align: center;
        position: fixed; inset: 0; z-index: 2000000;
        background: linear-gradient(160deg, #0A1230 0%, #130F38 60%, #0C1A3E 100%); color: #8696BF; padding: 30px;
        font-family: 'Goglis Sans', system-ui, sans-serif;
    }
    /* BULUT (2026-10-18, atlas): gece gökyüzü zemini, monokllü salyangoz, Fredoka başlık. */
    .q-unsupported-in { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 300px; }
    .q-unsupported-emo { display: block; width: 84px; height: 84px; }
    .q-unsupported h1 { font-family: var(--q-display, 'Goglis Display'), 'Goglis Sans', system-ui, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3; color: #E8EFFF; margin: 0; }
    .q-unsupported p { font-size: 13px; line-height: 1.55; margin: 6px 0 0; }
    .q-unsupported strong { color: #BAC7E8; }
    .q-unsupported .l { display: none; }
    .q-unsupported:not(.tr):not(.de):not(.ru):not(.fa) .l-en { display: block; }
    .q-unsupported.tr .l-tr { display: block; }
    .q-unsupported.de .l-de { display: block; }
    .q-unsupported.ru .l-ru { display: block; }
    .q-unsupported.fa .l-fa { display: block; }
}

@media (max-width: 700px), (max-height: 520px) {
    /* MOBİL TANIMI (#yatay): dar ekran VEYA alçak ekran (yatay telefon — ör. 844x390 iPhone 12
       yatayda genişlik 700'ü aşınca masaüstüne düşüyor, .q-online 1000px kuralıyla gizli ve
       hamburger yok = üyelere ERİŞİM YOKTU). Yükseklik ekseni bunu kapatır. JS karşılığı goglisMQ. */
    /* `<button>` olarak da doğru görünsün (2026-08-22: kanal düğmesi span'den button'a geçti —
       iOS'ta tıklanabilirlik garantisi): tarayıcı varsayılan kenarlık/zemin/dolgusu sıfırlanır. */
    .q-mbtn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; color: var(--q-muted); cursor: pointer; flex: none; border: 0; background: transparent; padding: 0; font: inherit; }
    .q-mbtn:active { background: var(--q-hover); }

    /* #3: Kolonlar → TAM EKRAN panel (yarım drawer + karanlık boşluk beğenilmedi).
       Kapatma: içindeki ✕ çubuğu (q-mdrawer-top), Escape ya da kanal/kişi seçimi.
       Zemin OPAK (--q-side-bg).
       ÜST ŞERİDİN ALTINDAN BAŞLAR (2026-08-21 akşam, kullanıcı: "isim soyisim status header'ın
       altında kalmış; sağ ve sol açılan menüler header'ın altında olmayacak"): eskiden `inset:0`
       ile şeridi de örtüyordu, dolayısıyla çekmecenin kendi başlık satırı (avatar+ad+durum) tam
       şeridin arkasına düşüyor ve okunmuyordu. Üç gömülü panel (profil/katıl/gelen kutusu) zaten
       şeridin altından başlıyordu — çekmeceler de aynı hizaya geldi. */
    .q-online, .q-channels {
        position: fixed; inset: var(--q-topbar-h) 0 0 0; z-index: 1250;
        /* !important: masaüstü sürükle-boyutlandırma tercihi kanallara İNLİNE width yazıyor
           (goglisChanResize) — mobil tam-ekran genişliğini ezip kapalı drawer'dan ekranda
           şerit bırakıyordu. */
        width: 100vw !important;
        background: var(--q-side-bg);
        transition: transform .22s ease;
    }
    .q-online { display: block !important; transform: translateX(-102%); border-right: none; }
    /* AMFI/FORUM: cekmecede de SUTUN — display:block sutunu oldurup dock+profil panelini
       listenin hemen altina (ekranin ortasina) birakiyordu (2026-08-17 kullanici bulgusu).
       Liste esner, alt panel dibe yapisir. */
    html.q-layout-amfi .q-online { display: flex !important; flex-direction: column; }
    html.q-layout-amfi .q-amfi-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    html.q-layout-amfi .q-amfi-bottom { flex: none; margin-top: auto; }
    .q-channels { transform: translateX(102%); border-left: none; }
    /* AÇIKKEN transform 'none' (translateX(0) DEĞİL): transform'lu ata, içindeki position:fixed
       menü panellerini (QMenu Smart) viewport yerine drawer'a bağlar — menü köşeden taşardı.
       'none' geçişi translateX ile aynı şekilde animate olur (identity). */
    body.m-left .q-online { transform: none; }
    body.m-right .q-channels { transform: none; }

    /* Tam ekran panelin kapat (✕) çubuğu + BAĞLAM BAŞLIĞI (2026-08-11).
       Başlık YALNIZ SUNUCUDA (logo + ad) — DM tarafındaki kendi kimlik satırı 2026-08-22'de
       kaldırıldı (alt menüdeki Profil sekmesinde zaten var); orada çubukta yalnız ✕ kalır ve
       `space-between` onu sağa yaslar. */
    .q-mdrawer-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 2px; flex: none; }
    /* BAŞLIKSIZ ÇUBUK (DM tarafı, 2026-08-22): kimlik satırı kalkınca çubukta yalnız ✕ kaldı ve
       listenin üstünde 46px'lik BOŞ bir bant tutuyordu. Çubuk akıştan çıkarılır → liste en üstten
       başlar, ✕ ilk satırın HİZASINDA sağ üstte yüzer (kanal çekmecesindeki banner-üstü ✕ ile
       aynı desen). `right: 6px` keyfi değil: ✕ 38px kutusunun merkezini DM satırlarındaki 15px'lik
       ✕ sütunuyla aynı dikey eksene oturtur (ölçüldü: ikisi de 386). Sunucu tarafında başlık VAR,
       orada çubuk akışta kalır ve hiçbir şey değişmez. */
    .q-online .q-mdrawer-top.bare { position: absolute; top: 12px; right: 6px; z-index: 6; padding: 0; }
    .q-mdhead { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; padding: 4px 2px; }
    .q-mdhead-ic { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; }
    .q-mdhead-init { background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); }
    .q-mdhead-t { font-size: 15px; font-weight: 800; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Kanal drawer'inda kapak (banner) TAM USTE yapisir; X kapagin uzerinde yuzer.
       DIKKAT: position YAZILMAZ — 1423'teki fixed tam-ekran drawer kuralini ezmisti (mobil coktu). */
    .q-channels .q-mdrawer-top { position: absolute; top: 0; right: 0; z-index: 6; padding: 8px; }
    .q-channels .q-mdrawer-x { background: rgba(0,0,0,.38); color: #fff; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; }
    /* 2) Composer mobilde ALTA oturur (buyuk alt bosluk kalkti; centikli cihazlarda safe-area korunur). */
    .q-composer { margin: 6px 8px 12px; }
    /* `margin-left:auto` ŞART: DM tarafında çubukta artık YALNIZ ✕ var ve tek çocuk kalınca
       `justify-content: space-between` onu BAŞA (sola) yaslıyor — sunucudaki hizayla çelişirdi.
       Başlık varken hiçbir şey değişmez (başlık zaten `flex:1`). */
    .q-mdrawer-x { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; color: var(--q-muted); cursor: pointer; margin-left: auto; }
    .q-mdrawer-x:active { background: var(--q-hover); color: var(--q-strong); }

    /* ---- MOBİL ALT MENÜ: DM · PROFİL · AYARLAR (2026-08-11, kullanıcı çizimi) ----
       Drawer'ların (z 1250) ÜSTÜNDE (1260): tam ekran panel açıkken de menüye erişilebilmeli,
       aksi halde DM listesindeyken Ayarlar'a gitmek için önce paneli kapatmak gerekirdi.
       Composer ve sohbet listesi bar kadar yukarı itilir — yoksa bar son mesajı/yazma kutusunu
       örterdi (safe-area çentikli cihazlarda ayrıca eklenir). */
    .q-mobar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1260;
        height: var(--q-mobar-h);
        background: var(--q-glass-menu, var(--q-side-bg)); backdrop-filter: blur(14px);
        border-top: 1px solid var(--q-divider);
    }
    .q-mobar-b {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        position: relative; border: 0; background: transparent; cursor: pointer;
        color: var(--q-muted); font: 700 10px/1 inherit; padding: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .q-mobar-b:active { background: var(--q-hover); }
    .q-mobar-b.on { color: var(--q-accent); }
    .q-mobar-av { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff; }
    .q-mobar-init { background: var(--q-accent); }
    .q-mobar-badge { position: absolute; top: 5px; left: 50%; margin-left: 4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--q-danger, #e5484d); color: #fff; font-size: 9px; font-weight: 800; line-height: 15px; text-align: center; }
    /* Bar kadar yer aç: sohbet dibi ve composer barın ALTINDA kalmasın. */
    .q-chat, .q-online, .q-channels { padding-bottom: var(--q-mobar-h); }
    .q-composer { margin-bottom: 12px; }

    /* MOBİL PROFİL EKRANI (2026-08-11): orta içeriği kaplayan tam alan panel. Drawer'ların
       (1250) ALTINDA ama sohbetin üstünde — DM listesi açılırsa profilin ÜSTÜNE gelmeli.
       Alt menü (1260) her zaman erişilebilir kalır; panel onun kadar aşağıda biter. */
    .q-moprofile {
        position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0; z-index: 1245;
        display: flex; flex-direction: column; background: var(--q-chat-bg);
    }
    .q-moprofile-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 4px; flex: none; }
    .q-moprofile-t { font-size: 15px; font-weight: 800; color: var(--q-strong); padding-left: 6px; }
    .q-moprofile-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 10px 20px; }
    /* Kart burada "kart" değil sayfa: kendi çerçevesi/gölgesi/genişlik sınırı kalkar. */
    .q-moprofile-body .q-pcard2 { width: 100%; max-width: none; border: 0; border-radius: 14px; box-shadow: none; }

    /* MOBİL ARAMALAR EKRANI (2026-10-24, Bulut rötuş 3 #14): profil ekranıyla aynı katman ve yerleşim. Renkler
       DM'deki arama kartıyla (R4) aynı dil: nane = konuşuldu, pembe = cevapsız, vurgu = giden. */
    .q-mocalls {
        position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0; z-index: 1245;
        display: flex; flex-direction: column; background: var(--q-chat-bg);
    }
    .q-mocalls-tools { flex: none; display: grid; gap: 10px; padding: 12px 14px 6px; }
    .q-mocalls-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 13px;
        background: var(--q-input-bg); border: 1px solid var(--q-border); color: var(--q-muted); }
    .q-mocalls-search:focus-within { border-color: var(--q-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-accent) 22%, transparent); }
    .q-mocalls-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--q-strong);
        font: 600 15px/1.2 'Goglis Sans', system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
    .q-mocalls-search input::placeholder { color: var(--q-faint); }
    .q-mocalls-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
    .q-mocalls-filt { display: flex; gap: 6px; }
    .q-mocalls-filt button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 0; border-radius: 999px;
        background: var(--q-chip); color: var(--q-muted); font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer;
        -webkit-tap-highlight-color: transparent; }
    .q-mocalls-filt button.on { background: var(--q-accent); color: #fff; }
    .q-mocalls-filt i { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--q-pink, #FF84AE);
        color: #fff; font-size: 10.5px; line-height: 18px; text-align: center; }
    .q-mocalls-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 18px; overscroll-behavior: contain; }
    .q-mocalls-sec { font: 600 11px/1 var(--q-display); letter-spacing: .09em; text-transform: uppercase; color: var(--q-faint); padding: 14px 10px 6px; }
    .q-mocalls-live { display: flex; align-items: center; gap: 10px; margin: 8px 4px 2px; padding: 8px 8px 8px 14px; border-radius: 16px;
        background: color-mix(in srgb, var(--q-online) 14%, transparent); border: 1px solid color-mix(in srgb, var(--q-online) 38%, transparent); }
    .q-mocalls-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--q-online); flex: none;
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-online) 22%, transparent); }
    .q-mocalls-live-t { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mocalls-live button { flex: none; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--q-online); color: #fff;
        font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
    .q-mocalls-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; text-align: center; color: var(--q-muted); font-size: 13.5px; }
    .q-mocalls-empty b { font-size: 16px; color: var(--q-strong); }
    .q-mocalls-empty-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 4px;
        color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 14%, transparent); }
    .q-mocalls-empty-ic .mud-icon-root { font-size: 26px; }
    .q-mocall { border-radius: 16px; transition: background-color .2s ease; }
    .q-mocall.open { background: var(--q-hover); }
    .q-mocall-head { display: flex; align-items: center; gap: 2px; }
    .q-mocall-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 9px 8px; border: 0; border-radius: 14px;
        background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .q-mocall-main.static { cursor: default; }
    .q-mocall-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
    .q-mocall-t b { font-size: 15px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mocall-last { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--q-muted); }
    .q-mocall-last > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mocall-last .mud-icon-root { font-size: 14px; flex: none; }
    .q-mocall-last.miss { color: color-mix(in srgb, var(--q-pink) 72%, var(--q-strong)); }
    .q-mocall-last time { color: inherit; }
    .q-mocall-chev { flex: none; font-size: 20px !important; color: var(--q-faint); transition: transform .22s var(--q-ease-soft), color .2s; }
    .q-mocall.open .q-mocall-chev { transform: rotate(180deg); color: var(--q-muted); }
    .q-mocall-call { width: 44px; height: 44px; flex: none; margin-right: 4px; border: 0; border-radius: 50%; display: grid; place-items: center;
        color: #fff; background: linear-gradient(150deg, #4FE0A8, #22C98A); box-shadow: 0 6px 14px rgba(34, 201, 138, .3); cursor: pointer;
        -webkit-tap-highlight-color: transparent; transition: transform .12s ease, filter .12s ease; }
    .q-mocall-call .mud-icon-root { font-size: 20px; }
    .q-mocall-call:active { transform: scale(.94); filter: brightness(.94); }
    /* Akordeon: yükseklik grid satırıyla açılır (0fr → 1fr) — içerik ölçülmeden, yaylı. */
    .q-mocall-hist { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--q-ease-soft); }
    .q-mocall.open .q-mocall-hist { grid-template-rows: 1fr; }
    .q-mocall-hin { min-height: 0; overflow: hidden; }
    .q-mocall-day { padding: 8px 14px 4px 60px; font: 800 10.5px/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--q-faint); }
    .q-mocall-e { display: flex; align-items: center; gap: 9px; padding: 5px 14px 5px 60px; font-size: 13px; color: var(--q-text); }
    .q-mocall-ei { width: 22px; height: 22px; flex: none; border-radius: 50%; display: grid; place-items: center;
        color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 15%, transparent); }
    .q-mocall-ei .mud-icon-root { font-size: 13px; }
    .q-mocall-e.in .q-mocall-ei { color: var(--q-online); background: color-mix(in srgb, var(--q-online) 16%, transparent); }
    .q-mocall-e.miss .q-mocall-ei { color: var(--q-pink, #FF84AE); background: color-mix(in srgb, var(--q-pink, #FF84AE) 18%, transparent); }
    .q-mocall-e .t { flex: 1; min-width: 0; }
    .q-mocall-e.miss .t { color: color-mix(in srgb, var(--q-pink) 72%, var(--q-strong)); }
    .q-mocall-e time { color: var(--q-faint); font-size: 12px; font-variant-numeric: tabular-nums; }
    .q-mocall-acts { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 14px 60px; }
    .q-mocall-acts button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
        background: var(--q-chip-on); color: var(--q-accent-ink); font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
    .q-mocall-acts .mud-icon-root { font-size: 16px; }
    @media (prefers-reduced-motion: reduce) { .q-mocall, .q-mocall-hist, .q-mocall-chev, .q-mocall-call { transition: none; } }
    html.q-instant .q-mocall, html.q-instant .q-mocall-hist, html.q-instant .q-mocall-chev, html.q-instant .q-mocall-call { transition: none; }

    /* MOBİL TOPLULUK EKRANI (2026-08-21): sunucu sekmeleri üst şeritten alt menüye taşındı.
       Profil ekranıyla AYNI kabuk (konum/z-index/başlık) — iki panel aynı yerde yaşar, biri
       açıkken diğeri kapanır; ayrı bir konumlandırma mantığı doğmasın diye .q-moprofile-top
       yeniden kullanılıyor. */
    /* TOPLULUK SEÇİCİ = ORTALI POPUP (2026-08-21, kullanıcı: "content içine değil, popup şeklinde
       ortalı"). Karartılmış tam ekran zemin + ortada kart; kart içeriğe göre büyür, %70 ekranda
       durur ve kendi içinde kayar. Diğer iki panel (profil/katıl) BİLEREK gömülü kaldı — onlar
       birer "ekran", bu ise bir seçim. */
    .q-mocom {
        position: fixed; inset: 0; z-index: 1270;
        display: flex; align-items: center; justify-content: center;
        padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
        background: rgba(0, 0, 0, .5);
    }
    .q-mocom-card {
        width: 100%; max-width: 380px; max-height: 72vh; display: flex; flex-direction: column;
        background: var(--q-glass-menu, var(--q-side-bg)); border: 1px solid var(--q-divider);
        border-radius: 16px; box-shadow: 0 18px 48px rgba(0,0,0,.45); overflow: hidden;
    }
    .q-mocom-card .q-moprofile-top { padding: 10px 8px 4px 4px; }
    .q-mocom-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 10px 12px; }
    .q-mocom-search { display: flex; align-items: center; gap: 7px; margin: 4px 0 10px; padding: 0 10px; height: 38px; border-radius: 10px; background: var(--q-input-bg, var(--q-hover)); color: var(--q-muted); }
    .q-mocom-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--q-strong); font: 500 14px/1 inherit; }
    .q-mocom-grp { display: flex; align-items: center; gap: 6px; margin: 12px 0 4px; padding: 0 4px; color: var(--q-muted); font: 800 11px/1 inherit; text-transform: uppercase; letter-spacing: .4px; }
    .q-mocom-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .q-mocom-row:active { background: var(--q-hover); }
    .q-mocom-row.sel { background: var(--q-hover); }
    .q-mocom-row.ing { margin-left: 14px; }   /* klasör içindekiler girintili */
    .q-mocom-ic { width: 34px; height: 34px; border-radius: 11px; object-fit: cover; flex: none; }
    .q-mocom-init { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 800 13px/1 inherit; }
    .q-mocom-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--q-strong); font: 600 15px/1.2 inherit; }
    .q-mocom-voice { color: var(--q-online); display: inline-flex; flex: none; }
    .q-mocom-badge { flex: none; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 10px; background: var(--q-danger, #e5484d); color: #fff; font: 800 11px/19px inherit; text-align: center; }
    .q-mocom-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--q-strong); }
    .q-mocom-empty { padding: 26px 12px; text-align: center; }
    .q-mocom-empty-t { color: var(--q-strong); font: 700 15px/1.3 inherit; margin-bottom: 5px; }
    .q-mocom-empty-s { color: var(--q-muted); font: 500 13px/1.5 inherit; }
    /* Eylemler listenin ALTINDA (üstte olsaydı her açılışta baş parmağın altına gelir ve
       yanlışlıkla sunucu kurma diyaloğu açılırdı); üç eşit sütun. */
    .q-mocom-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin: 16px 2px 4px; }
    .q-mocom-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 4px; border: 1px solid var(--q-divider); border-radius: 13px; background: transparent; color: var(--q-strong); font: 700 11px/1 inherit; cursor: pointer; }
    .q-mocom-act:active { background: var(--q-hover); }

    /* SUNUCU SEKMELERİ MOBİLDE ÜST ŞERİTTEN KALKTI (2026-08-21, kullanıcı isteği): yerleri
       alt menüdeki Topluluk. Ölçüm kabı (q-tabs-measure) da gereksiz — goglisTabs mobilde zaten
       tek sekmeye sabitliyordu. Ayraçlar da gider: sekmesiz şeritte iki dikey çizgi anlamsız. */
    .q-tabs, .q-tabs-measure, .q-topbar .q-divider-v { display: none !important; }

    /* ÜST ŞERİT BAŞLIĞI (2026-08-21): aktif sekmenin adı; toplulukta sunucu ad+logosu. Marka ile
       ikonlar arasındaki boşluğu O DOLDURUR (flex:1) — ikonların sağa yaslanması bundan gelir,
       .q-topactions'ın margin-left:auto'su yedek kalır. */
    /* ÜST ŞERİT DİKEYDE ORTALI (2026-08-21 kullanıcı isteği): masaüstünde `align-items:flex-end`
       sekmelerin pill'leri şeridin dibine otursun diye vardı; mobilde sekme yok, dolayısıyla
       alta yaslamanın gerekçesi de yok — başlık ve ikonlar şeridin ortasına hizalanır. */
    .q-topbar { align-items: center; }
    .q-topactions { padding-bottom: 0; }
    .q-motitle {
        display: flex !important; align-items: center; gap: 8px; flex: 1; min-width: 0;
        padding: 0 4px 0 6px; color: var(--q-strong); cursor: default;
        -webkit-tap-highlight-color: transparent;
    }
    .q-motitle.srv { cursor: pointer; }
    .q-motitle.srv:active { opacity: .7; }
    .q-motitle-t { font: 700 16px/1.2 inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* Ad/logo = sunucu değiştir, chevron = sunucu menüsü (iki ayrı dokunma alanı). */
    /* flex:0 1 auto — ad kadar yer kaplar ki chevron ADIN YANINDA dursun (flex:1 verilince
       chevron şeridin sağ ucuna itiliyor ve iki ayrı düğme gibi görünüyordu). */
    .q-motitle-go { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 0 1 auto; cursor: pointer; }
    .q-motitle-go:active { opacity: .7; }
    /* GOGLIS LOGOSU MOBİLDE YOK (2026-08-21 kullanıcı isteği): ev/DM işlevi alt menüdeki
       Mesajlar sekmesine geçti, marka da başlığa yer açmak için kalktı. */
    .q-topbar .q-brand { display: none !important; }
    /* Masaüstüne özel üst-şerit parçaları (gelen kutusu) mobilde çizilmez. */
    .q-no-mo { display: none !important; }
    /* Alt menüdeki ad etiketi: JS ile küçülür, yine de sığmazsa üç nokta. */
    .q-mobar-name { max-width: 100%; padding: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* TAM EKRAN DİYALOG GERÇEKTEN TAM EKRAN (2026-08-21): MudBlazor `FullScreen` seçeneğinde bile
       kendi margin/max-width'ini bırakıyor (ölçüldü: 411px ekranda 395px kutu). Mobilde o boşluk
       hem yer kaybı hem "yarım açılmış pencere" görüntüsü. */
    .mud-dialog-container .mud-dialog.mud-dialog-fullscreen {
        margin: 0 !important; width: 100% !important; max-width: 100% !important;
        height: 100% !important; max-height: 100% !important; border-radius: 0 !important;
    }

    /* İfade paneli dar ekrana sığar: 340px sabit genişlik 360px'lik telefonlarda taşıyordu. */
    .q-expr { min-width: 0; width: min(340px, calc(100vw - 20px)); }

    /* MENÜLER MOBİL PANELLERİN ÜSTÜNDE (2026-08-21, kullanıcı: "katıl ekranındayken başlık
       menüsü sayfanın üstüne açılamıyor"). Mobil tam-alan panelleri 1244-1270 aralığında;
       menü paneli 1201'de kalınca altlarında gömülüyordu. Backdrop da yükselmeli, yoksa
       dışarı-tıkla-kapat paneli hedefler ve menü kapanmaz. Sağ-tık menüsü (1300) ve MudBlazor
       diyalogları üstte kalmaya devam eder. Kural YALNIZ mobilde — masaüstü sıralaması
       (profil kartı 1250 vb.) olduğu gibi korunur. */
    /* UYARI BALONLARI ORTALI (2026-08-21, kullanıcı: "sola yaslı gibi duruyor, ortalı olsun").
       Masaüstünde sağ-alt köşe doğru (imleç orada); telefonda köşe kavramı yok, mesaj ekranın
       ortasında beklenir. MudBlazor konumu `PositionClass` ile veriyor — mobilde ezilir. */
    .mud-snackbar-location-bottom-right, .mud-snackbar-location-bottom-left,
    .mud-snackbar-location-bottom-center {
        left: 0 !important; right: 0 !important; align-items: center !important;
        padding-left: 10px; padding-right: 10px;
    }
    .mud-snackbar { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; }

    .q-menu-backdrop { z-index: 1274; }
    .q-menu-panel, .q-menu-panel.fx, .q-submenu-panel { z-index: 1275; }
    /* ASIL KÖK NEDEN (ölçüldü): `.q-topbar` `z-index:5; position:relative` ile KENDİ STACKING
       CONTEXT'ini yaratıyor — içindeki menünün 1275'i yalnız o bağlamda geçerli, dışarıda şerit
       hâlâ 5. seviyede duruyordu ve 1244'lük katıl ekranı menüyü örtüyordu. Şeridin kendisi
       yükseltilir; panellerin hiçbiri zaten şeridin altına girmiyor (hepsi `inset: 52px`). */
    .q-topbar { z-index: 1276; }
    /* Topluluk seçici popup'ı şeridi de karartmalı → şeridin ÜSTÜNDE (video sahnesi 1290/1291
       ile çakışmasın diye 1292). */
    .q-mocom { z-index: 1292; }

    /* SEKME GEÇİŞİ İSKELETİ (2026-08-22): iki çubuğun arasını kaplar. Profil/katıl panellerinin
       (1244-1245) ÜSTÜNDE — geçiş sırasında onlar da bayat içeriktir; çekmecelerin (1250)
       ALTINDA — kullanıcı geçiş sürerken çekmece açtıysa onu örtmemeli. */
    .q-moload {
        position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0;
        z-index: 1246; background: var(--q-chat-bg); overflow: hidden; padding: 14px 12px;
    }
    .q-moload-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
    .q-moload-av { width: 34px; height: 34px; border-radius: 50%; flex: none; }
    .q-moload-tw { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }

    /* Yıldızlı / bahsedilenler paneli — profil kabuğunun aynısı. */
    .q-moinbox {
        position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0; z-index: 1245;
        display: flex; flex-direction: column; background: var(--q-chat-bg);
    }
    .q-moinbox-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 10px 18px; }
    .q-moinbox-row { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 12px; cursor: pointer; }
    .q-moinbox-row:active { background: var(--q-hover); }
    .q-moinbox-meta { font: 600 11px/1.2 inherit; color: var(--q-muted); }
    .q-moinbox-txt { font: 500 14px/1.35 inherit; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-motitle-ic { width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex: none; }
    .q-motitle-init { display: inline-flex; align-items: center; justify-content: center; color: #fff; font: 800 11px/1 inherit; }

    /* Yalnız mobilde çizilen üst şerit ikonları (topluluğa katıl `+`, ayarlar dişlisi). */
    .q-mo-only { display: inline-flex !important; }

    /* KATIL / KUR EKRANI (2026-08-21): content'e gömülü, modal DEĞİL — kapatma düğmesi yok.
       2026-10-27'den beri yalnız hiç topluluğu olmayanın Topluluk sekmesi (dönülecek ekran yok); topluluğu olanda +
       alttan açılan topluluk ekle sayfasını açar (.q-joinsheet, dosyanın sonunda). */
    .q-mojoin {
        position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0; z-index: 1244;
        display: flex !important; align-items: center; justify-content: center; padding: 20px;
        background: var(--q-chat-bg);
    }
    .q-mojoin-in { width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; text-align: center; }
    .q-mojoin-badge { width: 66px; height: 66px; border-radius: 21px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--q-accent) 20%, transparent); color: var(--q-accent); margin-bottom: 14px; }
    .q-mojoin-t { font: 700 19px/1.3 inherit; color: var(--q-strong); }
    .q-mojoin-s { font: 500 13.5px/1.5 inherit; color: var(--q-muted); margin: 6px 0 16px; }
    .q-mojoin-inp {
        width: 100%; height: 44px; padding: 0 13px; border: 1px solid var(--q-divider); border-radius: 11px;
        background: var(--q-input-bg, var(--q-hover)); color: var(--q-strong); font: 500 15px/1 inherit; outline: none;
    }
    .q-mojoin-inp:focus { border-color: var(--q-accent); }
    .q-mojoin-go {
        width: 100%; margin-top: 10px; padding: 13px; border: 0; border-radius: 11px;
        background: var(--q-accent); color: #fff; font: 700 15px/1 inherit; cursor: pointer;
    }
    .q-mojoin-go:disabled { opacity: .45; cursor: default; }
    .q-mojoin-alt { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--q-muted); font-size: 13px; }
    .q-mojoin-lnk { border: 0; background: transparent; color: var(--q-accent); font: 600 13px/1 inherit; cursor: pointer; padding: 4px; }

    /* Drawer arkası karartma — tam ekran panelde görünmez ama seçim-dışı tıklamayı yutar */
    .q-mbd { display: block; position: fixed; inset: 0; z-index: 1240; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    body.m-left .q-mbd, body.m-right .q-mbd { opacity: 1; pointer-events: auto; }

    /* Sürükle-boyutlandır tutamacı mobilde anlamsız */
    .q-chresize { display: none; }

    /* PARMAK ARASI YAKINLAŞTIRMA ARAMA EKRANINDA KAPALI (2026-08-21 akşam, kullanıcı: "mobilde
       DM görüşmesinde iki elle ekranı büyütüyor, bu olmamalı"). Uygulama kabuğu sabit düzenli:
       tarayıcı zoom'u sahneyi ve kumandaları görünür alanın dışına taşıyor, geri döndürmek de
       ikinci bir jest gerektiriyor. `pan-x pan-y` kaydırmayı BIRAKIR, yalnız pinch-zoom'u keser
       (touch-action listesinde `pinch-zoom` yoksa tarayıcı o jesti hiç başlatmaz).
       KAPSAM BİLEREK DAR — viewport meta'sına `user-scalable=no` YAZILMADI: o, uygulamanın
       tamamında yakınlaştırmayı öldürür ve erişilebilirlik açısından kabul edilemez. */
    .q-videostage, .q-dmcallchat { touch-action: pan-x pan-y; }

    /* #5: topbar rütuşu — öğeler DİKEY ORTALI (masaüstündeki flex-end sekme estetiği
       mobilde ikonları alta yapıştırıp dağınık gösteriyordu); ikon boyutları eşitlenir. */
    .q-topbar { padding: 0 4px; gap: 2px; align-items: center; }
    /* SERT merkezleme: sekme estetiğinden kalan yükseklik/margin farkları her çocukta sıfırlanır,
       tüm ikon kutuları 36px'e eşitlenir — üst/alt boşluk simetrik olur. */
    .q-topbar > * { align-self: center !important; margin-top: 0 !important; margin-bottom: 0 !important; }
    .q-topbar .mud-icon-button { width: 36px; height: 36px; padding: 6px; }
    .q-topbar .q-brand { padding: 0 6px 0 0; }
    /* Geri bildirim ikonu mobilde GİZLİ (yer dar; Ayarlar→Geri bildirim'den erişilir). */
    .q-topbar .q-fb-top { display: none !important; }
    .q-brandname { display: none; }
    .q-divider-v { display: none; }
    /* İkonlar SAĞA YASLI (2026-08-21, kullanıcı): sekmeler mobilde kalkınca esneyen tek öğe
       (.q-tabs, flex:1) da gittiği için ikon grubu markanın hemen yanına düşüyordu. Boşluğu
       `margin-left:auto` üstlenir — .q-tabs'a flex vermek gizliyken işe yaramaz. */
    .q-topactions { gap: 0; align-items: center; margin-left: auto; }
    .q-topactions .mud-icon-button { padding: 7px; }
    /* İKON ŞERİDİ SIKILAŞTIRILDI (2026-08-21): başlık eklenince 411px'lik ekranda sunucu adı
       kırpılıyordu ("Erisim ..."). Kısıtlayan şey padding DEĞİL sabit `width: 34px` idi (ölçüldü:
       padding'i düşürmek grubu 201px'te bıraktı) — genişliğin kendisi 30px'e çekildi; dokunma
       hedefi hâlâ parmak boyutunda (Material'ın 48px önerisi zaten bu şeritte hiç uygulanmıyordu). */
    .q-topactions .q-topico { width: 30px; height: 32px; padding: 0; }
    .q-topbar .q-mbtn-right { padding: 4px; }
    /* Başlıktaki sunucu rozeti de bir tık küçülür — ada 4px daha yer kalır. */
    .q-motitle-ic { width: 23px; height: 23px; border-radius: 7px; }
    .q-motitle { gap: 6px; }
    .q-tab { padding: 6px 9px; }
    /* #1: klasör sekmesi QMenu sarmalayıcısı da küçülmesin (kaydırmada ezilmesin) */
    .q-tabs > .q-menu { flex: none; }

    /* Sohbet nefes alanı */
    .q-messages { padding: 8px 8px; gap: 0; }
    .q-msg:not(.cont) { margin-top: 10px; }
    /* Mobil composer: düşey nefes payı (placeholder dikey ortalanır) + alttan daha çok boşluk +
       araçlar ikinci satıra sarabilsin (flex-wrap). */
    .q-composer { margin: 8px 8px 16px; padding: 8px 12px; gap: 8px; align-items: center; flex-wrap: wrap; }
    /* Araç grubu (ifade/efekt/GIF/anket) input'un ALTINA tam-genişlik ikinci satır (order:9 → en sona,
       width:100% → satırı kendine alır; üstte ince ayraç). Gönder + ataç input'la aynı satırda kalır. */
    .q-composer-tools { order: 9; width: 100%; justify-content: flex-start; gap: 14px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--q-glass-border); }
    .q-composer-tools .q-expr-ic, .q-composer-tools .q-expr-icons > .q-expr-ic { padding: 5px; }
    .q-expr-icons { gap: 10px; }
    /* iOS: <16px input odaklanınca sayfayı zoom'lar — engelle.
       375px (iPhone SE): input'un ÖRTÜK min genişliği (~178px) flex daralmasını engelleyip
       composer ikonlarını sağdan taşırıyordu → min-width:0 (flex düzeltmesi). */
    .q-msgbox, .q-composer input, .q-composer textarea { font-size: 16px; min-width: 0; }
    /* Emniyet ağı: gövde hiçbir koşulda yatay kaydırmasın (tek tük taşma scroll üretmesin) */
    body { overflow-x: hidden; }

    /* Geniş popover'lar ekrana sığsın (emoji/ifade paneli, menüler, profil kartı).
       #3: mobilde panel zemini TAM OPAK — camsı zemin arkadaki mesajları gösteriyordu. */
    .q-menu-panel { max-width: calc(100vw - 16px); background: var(--q-side-bg); }
    .q-emoji { width: min(324px, calc(100vw - 40px)); }
    .q-expr { min-width: min(340px, calc(100vw - 24px)); } /* #1: ifade paneli dar ekranda taşmasın */
    .q-ctx-panel { max-width: calc(100vw - 16px); }

    /* #2: profil kartı mobilde MERKEZ MODAL — imleç-yanı konum dar ekranda kenardan taşıp
       dağınık duruyordu. JS'in inline left/top'unu !important ezer; kart içi kayar. */
    .q-pp {
        left: 50% !important; top: 50% !important;
        transform: translate(-50%, -50%);
        width: min(94vw, 360px); max-width: 94vw;
        max-height: 88dvh; overflow-y: auto;
        z-index: 1400; /* tam ekran drawer'ın (1250) da üstünde */
    }

    /* #4: dialoglar (Yeni sunucu vb.) — BAŞLIK SABİT, içerik kayar (dialog'un kendisi
       kaymaz; eski hali başlığı yukarı kaçırıp üstü kesiyordu). */
    .mud-dialog { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; margin: 8px auto !important; max-height: calc(100dvh - 16px) !important; overflow: hidden !important; display: flex; flex-direction: column; }
    .mud-dialog .mud-dialog-title { flex: none; }
    .mud-dialog .mud-dialog-content { flex: 1; min-height: 0; overflow-y: auto; }
    .mud-dialog .mud-dialog-actions { flex: none; }

    /* Dokunmatik: hover yok — dokunulan mesajın araç çubuğu görünür (goglisMobile data-tools basar) */
    /* NİTELİK seçici (2026-08-26): eskiden `.tools-on` SINIFIYDI ama Blazor `.q-msg`'in class'ını
   diff'te baştan yazıp JS'in eklediği sınıfı siliyordu (bkz. goglis.js notu) — araç çubuğu
   yukarı kaydırınca kayboluyordu. Nitelik Blazor'ın ağacında olmadığı için dokunulmaz. */
.q-msg[data-tools] .q-msg-tools { opacity: 1; }
    /* Dokunmatik: araç butonları daha büyük dokunma hedefi (masaüstü 20px → ~34px) */
    .q-msg-tools { gap: 4px; padding: 3px 5px; }
    .q-msg-tools .t { padding: 6px; }
    /* Görsel mesajlar mesaj gövdesini TAŞMASIN — masaüstü 360px sabiti dar ekranda taşıyordu */
    .q-md img { max-width: 100%; }

    /* #4: kanal satırı ⋯ menüsü mobilde HEP görünür (hover yok); kategori ⋯ da açılır */
    .q-chrow .q-chdel { opacity: 0.65; }
    .q-row-more { display: inline-flex; align-items: center; justify-content: center; padding: 4px; margin-left: 2px; color: var(--q-muted); border-radius: 6px; }
    .q-row-more:active { background: var(--q-hover); }
    /* HİZA (2026-10-19, kullanıcı: "kategorinin altındaki kanalların ⋯'si hizalı değil"): başlık ile kanal satırının
       İÇERİK sağ kenarı aynı (ölçüldü: ikisi de 375) ama başlıktaki ⋯ 4px dokunma payıyla sarılı, kanal satırındaki
       değil → simge 3,5px içeride kalıyordu (merkez 363,5 ↔ 367). Pay dokunma alanı içindir, yerleşim için değil:
       aynı kadar negatif kenar boşluğuyla geri alınır (simge de 16px — kanal satırıyla aynı). */
    .q-cathdr .q-row-more { margin-right: -4px; }

    /* #1: alt menü (Roller) mobilde AKORDEON — başlığın altında açılır.
       Base'deki fixed+visibility:hidden (masaüstü JS konumlaması) burada geçersiz:
       static akış + görünür; goglisMenu.placeSub mobilde no-op. */
    .q-submenu-panel { position: static; visibility: visible; margin: 2px 0 4px 14px; min-width: 0; box-shadow: none; border: none; border-left: 2px solid var(--q-divider); border-radius: 0; padding: 2px 0 2px 6px; background: transparent; }
    /* açık ok mobilde ▼ (akordeon), ◀ gizlenir */
    .q-submenu-arrow.q-sub-mob { display: inline-flex !important; }
    .q-submenu-arrow.q-sub-desk { display: none !important; }

    /* #7: alt kullanıcı paneli — sabit 52px yüksekliği koru (auto yapınca kaybolabiliyordu),
       çentikli telefonlarda güvenli alan kadar ek pay. */
    .q-userpanel { height: 52px; }
    .q-voicedock { padding-bottom: 8px; }

    /* Video/ses sahneleri dar ekrana uyar */
    .q-videostage { grid-template-columns: 1fr; }

    /* Gizlilik sayfası kartı telefonda kenarlara yaklaşır */
    .q-legal { padding: 16px 8px; }
    .q-legal-card { padding: 20px 18px 22px; }

    /* #3/#4: şikayet dialogu dar ekranda taşmasın */
    .q-report { min-width: 0; }

    /* #M: mobilde sekme şeridi YOK — yalnız AKTİF sunucu tek sekme + "..." (tam liste menüde).
       Uzun sunucu adı kırpılır; sekme barın kalanını doldurmaz.
       KIRPMA ARTIK YALNIZ ADA (2026-08-18, kullanıcı: "mobilde seçili sunucunun kenarlığı üst ve
       alttan kesilmiş duruyor"). Eskiden `.q-tab` ve içindeki tüm çocuklar `overflow:hidden`
       yapılıyordu; amaç uzun sunucu ADINI üç noktayla kesmekti ama yan etkisi seçim halkasını
       kesmekti: halka mini avatarın 4px DIŞINA taşar, sekme kutusu ise 42px (halka 44px) →
       üstten ve alttan düz kesiliyor, ikon sarmalayıcısı da kare kırptığı için köşelerde
       renkli üçgenler kalıyordu. Ölçüldü: q-tab-icw 36x36 overflow:hidden, q-tab 42px yüksek.
       Ad zaten kendi elemanında kesiliyor; kutuyu kırpmaya gerek yok. */
    .q-tab { flex: none; max-width: 46vw; white-space: nowrap; }
    .q-tab .q-tab-name { overflow: hidden; text-overflow: ellipsis; }
}

/* #yatay: alçak ekranda (yatay telefon) dikey alan kazan — başlık/boşluklar sıkışır */
@media (max-height: 520px) {
    /* Şerit kısalınca mobil panellerin üst çapası da kısalmalı (bkz. --q-topbar-h). */
    :root { --q-topbar-h: 46px; }
    .q-chathead { height: 40px; }
    .q-messages { gap: 0; padding: 6px 8px; }
    .q-msg:not(.cont) { margin-top: 8px; }
    .q-composer { margin: 4px 8px 12px; min-height: 40px; }
    .q-topbar { height: 46px; }
}


/* Tanıtım/indirme sayfası açıkken belge kaydırması serbest (uygulama kabuğu body'yi kilitler). */
html:has(.q-land), html:has(.q-land) body { height: auto; overflow: visible; }

/* --- Zengin baglanti onizlemesi (embed karti) --- */
.q-embed { display: flex; gap: 12px; align-items: flex-start; max-width: 480px; margin-top: 6px; padding: 10px 12px; border-left: 3px solid var(--q-accent); border-radius: 6px; background: var(--q-input-bg); }
.q-embed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.q-embed-site { font-size: 11px; color: var(--q-faint); text-transform: uppercase; letter-spacing: .4px; }
.q-embed-title { font-size: 13.5px; font-weight: 600; color: var(--q-accent); text-decoration: none; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.q-embed-title:hover { text-decoration: underline; }
.q-embed-desc { font-size: 12.5px; color: var(--q-muted); line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.q-embed-img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex: none; }
.q-embed:has(.q-embed-yt) { flex-direction: column; }
.q-embed-yt { position: relative; width: 100%; max-width: 420px; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; background: #000; }
.q-embed-yt iframe { width: 100%; height: 100%; border: 0; }
.q-embed-ytthumb { cursor: pointer; }
.q-embed-ytthumb img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.q-embed-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #fff; background: rgba(0,0,0,.25); transition: background .15s; }
.q-embed-ytthumb:hover .q-embed-play { background: rgba(0,0,0,.45); }

/* --- Kod vurgusu (highlight.js) — kahve temayla uyumlu kompakt tema; dark varsayilan. --- */
.q-md pre { background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.q-md pre code.hljs { background: transparent; padding: 0; }
.q-md .hljs { color: var(--q-strong); }
.q-md .hljs-comment, .q-md .hljs-quote { color: #7d8590; font-style: italic; }
.q-md .hljs-keyword, .q-md .hljs-selector-tag, .q-md .hljs-meta { color: #c678dd; }
.q-md .hljs-string, .q-md .hljs-regexp, .q-md .hljs-addition { color: #98c379; }
.q-md .hljs-number, .q-md .hljs-literal, .q-md .hljs-selector-id { color: #d19a66; }
.q-md .hljs-title, .q-md .hljs-title.function_, .q-md .hljs-section { color: #61afef; }
.q-md .hljs-title.class_, .q-md .hljs-type, .q-md .hljs-built_in { color: #e5c07b; }
.q-md .hljs-attr, .q-md .hljs-attribute, .q-md .hljs-variable, .q-md .hljs-template-variable { color: #d19a66; }
.q-md .hljs-name, .q-md .hljs-tag, .q-md .hljs-deletion { color: #e06c75; }
.q-md .hljs-emphasis { font-style: italic; }
.q-md .hljs-strong { font-weight: 700; }
/* Acik temada koyulastirilmis varyant. */
.q-root[class*="light"] .q-md .hljs-comment, .q-root[class*="light"] .q-md .hljs-quote { color: #6a737d; }
.q-root[class*="light"] .q-md .hljs-keyword, .q-root[class*="light"] .q-md .hljs-selector-tag, .q-root[class*="light"] .q-md .hljs-meta { color: #a626a4; }
.q-root[class*="light"] .q-md .hljs-string, .q-root[class*="light"] .q-md .hljs-regexp, .q-root[class*="light"] .q-md .hljs-addition { color: #50a14f; }
.q-root[class*="light"] .q-md .hljs-number, .q-root[class*="light"] .q-md .hljs-literal, .q-root[class*="light"] .q-md .hljs-attr, .q-root[class*="light"] .q-md .hljs-variable { color: #986801; }
.q-root[class*="light"] .q-md .hljs-title, .q-root[class*="light"] .q-md .hljs-title.function_, .q-root[class*="light"] .q-md .hljs-section { color: #4078f2; }
.q-root[class*="light"] .q-md .hljs-title.class_, .q-root[class*="light"] .q-md .hljs-type, .q-root[class*="light"] .q-md .hljs-built_in { color: #c18401; }
.q-root[class*="light"] .q-md .hljs-name, .q-root[class*="light"] .q-md .hljs-tag, .q-root[class*="light"] .q-md .hljs-deletion { color: #e45649; }


/* --- GIF secici + gif mesaji --- */
.q-gifpick { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.q-gifpick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; overflow-y: auto; max-height: 280px; padding-right: 2px; }
.q-gifpick-grid img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.q-gifpick-grid img:hover { border-color: var(--q-accent); }
.q-gifpick-by { font-size: 10.5px; color: var(--q-faint); text-align: right; }
.q-gifmsg { max-width: 320px; max-height: 240px; border-radius: 10px; margin-top: 2px; }
/* #10: satır içi mp4/mp3 oynatıcı */
.q-msg-video { max-width: 400px; max-height: 300px; width: 100%; border-radius: 10px; margin-top: 3px; background: #000; }
.q-msg-audio { display: flex; flex-direction: column; gap: 4px; max-width: 360px; margin-top: 3px; background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 10px; padding: 8px 10px; }
.q-msg-audio-name { font-size: 12.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-msg-audio audio { width: 100%; height: 34px; }

/* ---- #19: DM tek-görüntülük görsel ---- */
.q-eph { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 500; border: 1px solid var(--q-divider); background: var(--q-input-bg); color: var(--q-muted); }
.q-eph.open { cursor: pointer; color: #fff; border: 0; background: linear-gradient(135deg, var(--q-accent), color-mix(in srgb, var(--q-accent) 72%, #000)); box-shadow: 0 2px 8px rgba(138,90,56,0.35); font-family: inherit; }
.q-eph.open:hover { filter: brightness(1.08); }
.q-eph.done { font-style: italic; opacity: 0.75; }
.q-eph.sent { color: var(--q-muted); }
/* tam ekran tek-görüntülük görüntüleyici */
.q-eph-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,0.92); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; }
.q-eph-full { max-width: 92vw; max-height: 82vh; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.q-eph-hint { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.75); font-size: 13px; }
.q-eph-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.12); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.q-eph-close:hover { background: rgba(255,255,255,0.22); }


/* --- Birlikte izle sahnesi --- */
.q-watch-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--q-muted); padding: 2px 2px 8px; }
.q-watch-frame { max-width: 720px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; margin: 0 auto; }
.q-watch-frame iframe, .q-watch-frame > div { width: 100%; height: 100%; border: 0; }


/* --- Threadler --- */
.q-thread-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 10px; border: 1px solid var(--q-divider); border-radius: 999px; background: var(--q-input-bg); color: var(--q-accent); font-size: 12px; font-weight: 600; cursor: pointer; }
.q-thread-chip:hover { border-color: var(--q-accent); }
.q-thread-back { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--q-divider); border-radius: 8px; background: var(--q-input-bg); color: var(--q-muted); font-size: 12px; cursor: pointer; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.q-thread-back:hover { color: var(--q-accent); border-color: var(--q-accent); }


/* --- Kesfet + kurallar --- */
.q-disc { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding: 2px; }
.q-disc-card { border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-input-bg); overflow: hidden; }
.q-disc-banner { width: 100%; height: 84px; object-fit: cover; display: block; }
.q-disc-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.q-disc-name { font-weight: 600; font-size: 14px; }
.q-disc-meta { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--q-muted); margin-top: 2px; }
.q-disc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--q-faint); display: inline-block; }
.q-disc-dot.on { background: var(--q-online, #3ba55d); }
.q-rules-body { max-height: 55vh; overflow-y: auto; font-size: 13.5px; line-height: 1.6; padding: 2px 4px; }


/* --- Etkinlikler --- */
.q-ev-entry { display: flex; align-items: center; gap: 8px; margin: 4px 8px 8px; padding: 7px 10px; border: 1px dashed var(--q-divider); border-radius: 9px; color: var(--q-muted); font-size: 13px; cursor: pointer; }
.q-ev-entry:hover { color: var(--q-accent); border-color: var(--q-accent); }
.q-ev-badge { margin-left: auto; background: var(--q-accent); color: #fff; border-radius: 999px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; }
.q-events { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; padding: 2px; }
/* Başlık TAM satır, altında tarih + kanal iki eşit sütun — "Kanal yok (serbest)" sığsın
   (3'e bölünce dropdown 1/3 kalıp taşıyordu). min-width:0 select'in taşmasını keser. */
.q-ev-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-ev-form > :first-child { grid-column: 1 / -1; }
/* .q-settings-select'in 420px max-width'i başlık+açıklamayı daraltıp tarih+kanal satırıyla
   hizasız bırakıyordu — etkinlik panelinde kapağı kaldır, hepsi tam+eşit genişlik olsun. */
.q-form-panel .q-settings-select { max-width: none; min-width: 0; width: 100%; box-sizing: border-box; }
.q-ev-card { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--q-divider); border-radius: 12px; background: var(--q-input-bg); padding: 12px; }
.q-ev-date { display: flex; flex-direction: column; align-items: center; min-width: 46px; background: color-mix(in srgb, var(--q-accent) 14%, transparent); border-radius: 10px; padding: 6px 8px; color: var(--q-accent); }
.q-ev-date .d { font-size: 18px; font-weight: 800; line-height: 1.1; }
.q-ev-date .m { font-size: 10.5px; text-transform: uppercase; font-weight: 700; }
.q-ev-title { font-weight: 600; font-size: 14px; }
.q-ev-meta { font-size: 11.5px; color: var(--q-muted); margin-top: 2px; }
.q-ev-desc { font-size: 12.5px; color: var(--q-text); margin-top: 5px; }
@media (max-width: 560px) { .q-ev-form { grid-template-columns: 1fr; } }


/* --- MOBIL uyarlama (Faz 24 ozellikleri): dar ekranda tasan/kirilan yuzeyler --- */
@media (max-width: 900px) {
    /* Ses bandi artik cok butonlu (izle/soundboard/sahne/kamera/ekran/mik/kulaklik/kapat):
       dar ekranda ikinci satira sarsin, metin kisalabilsin. */
    .q-dmcall { flex-wrap: wrap; row-gap: 6px; }
    .q-dmcall > span:not(.q-vctl) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 560px) {
    /* Baglanti onizlemeleri / YouTube: mesaj kolonunu asla tasirma. */
    .q-embed { max-width: 100%; }
    .q-embed-yt { max-width: 100%; }
    .q-embed-img { width: 64px; height: 64px; }
    .q-gifmsg { max-width: 100%; }
    /* Thread breadcrumb'i dar basliga sigsin. */
    .q-thread-back { max-width: 96px; }
    /* Soundboard/GIF panelleri zaten Smart-clamp'li; grid'ler daralinca sigsin. */
    .q-gifpick-grid { grid-template-columns: repeat(2, 1fr); max-height: 240px; }
    /* Kesif/etkinlik kartlari: buton alta dussun, kart tasirmasin. */
    .q-disc-row { flex-wrap: wrap; }
    .q-ev-card { flex-wrap: wrap; }
    /* Admin sunucu kartlari (medya/kapasite): eylemler sarabilsin. */
    .q-srv-card { flex-wrap: wrap; }
    .q-srv-actions { margin-left: auto; }
    /* Rehber: kod kutusu zaten yatay kayar; kopyala butonu kucuk kalsin. */
    .q-guide-copy { padding: 3px 8px; font-size: 10.5px; }
    .q-guide-code { font-size: 11px; }
}


/* Ev gorunumu: Kesfet butonu (baslikta sagda). */
.q-friends-discover { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--q-divider); border-radius: 9px; background: var(--q-input-bg); color: var(--q-strong); font-size: 13px; font-weight: 600; cursor: pointer; align-self: center; }
.q-friends-discover:hover { border-color: var(--q-accent); color: var(--q-accent); }


/* Composer büyürken sohbet alanı KÜÇÜLEBİLMELİ: flex column çocuğunda min-height varsayılanı
   (auto) içerik yüksekliğine kilitliyordu — kap büyüyünce composer ekran dışına taşıyordu. */
.q-messages { min-height: 0; }


/* --- Sunucu istatistikleri --- */
.q-st-hours { display: flex; align-items: flex-end; gap: 3px; height: 58px; padding: 4px 2px 0; }
.q-st-hour { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; justify-content: flex-end; }
.q-st-hour .bar { width: 100%; max-width: 14px; background: var(--q-accent); opacity: .75; border-radius: 3px 3px 0 0; }
.q-st-hour span { font-size: 9px; color: var(--q-faint); }
.q-st-chrow { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.q-st-chrow .nm { min-width: 110px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--q-strong); }
.q-st-chbar { flex: 1; height: 8px; border-radius: 4px; background: var(--q-divider); overflow: hidden; }
.q-st-chbar > div { height: 100%; background: var(--q-accent); border-radius: 4px; }
.q-st-chrow .ct { font-size: 12px; color: var(--q-muted); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }


/* --- 2FA kurulum --- */
.q-tfa-setup { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.q-tfa-qr { width: 168px; height: 168px; background: #fff; border-radius: 12px; padding: 8px; box-sizing: border-box; }
.q-tfa-qr svg { width: 100%; height: 100%; display: block; }
.q-tfa-codes .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; max-width: 480px; }
.q-tfa-codes code { background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 7px; padding: 5px 8px; font-size: 12px; text-align: center; letter-spacing: 1px; }


/* --- Profil rozetleri --- */
.q-badges { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 2px; }
.q-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 7px; background: var(--q-input-bg); border: 1px solid var(--q-divider); font-size: 12px; cursor: default; }
.q-badge:hover { border-color: var(--q-accent); }

/* LOG SİSTEMİ (2026-07-21): admin → Loglar — seviye renkli satırlar + istisna açılır ayrıntısı. */
.q-log-row { display: flex; align-items: baseline; gap: 9px; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; flex-wrap: wrap; }
.q-log-row:nth-child(odd) { background: var(--q-input-bg); }

/* #20: giriş takibi tablosu (yatay kaydırma güvenli). MODERN GÖRÜNÜM (2026-10-24): yönetim panelinin
   istatistik kartlarıyla aynı Bulut yüzeyi; satır biçimleri aşağıda "ZEBRA TAM GENİŞLİK" bloğunda. */
.q-login-table { overflow-x: auto; border: 1px solid var(--q-border); border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); }
/* ÜST KAYDIRMA ŞERİDİ (2026-08-06, kullanıcı: "yatay scroll'a ulaşmak için lazy-load bitene kadar
   inmek gerekiyor"): tablonun ÜSTÜNDE ikinci bir yatay çubuk — goglisHScroll iki yönlü senkronlar.
   İç div tablonun scrollWidth'ine eşitlenir; taşma yoksa çubuk kendiliğinden görünmez. */
.q-tscroll { overflow-x: auto; overflow-y: hidden; margin-bottom: 6px; }
.q-tscroll > div { height: 1px; }
/* IP BAZLI ZİYARETÇİ LİSTESİ (2026-08-06): IP başına toplulaştırılmış kart satırları.
   "8 imza / 8 görüntüleme" deseni UA çeviren botun parmak izidir (tooltip anlatır). */
.q-visip-row { border: 1px solid var(--q-divider); border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; cursor: pointer; }
.q-visip-row:hover { border-color: var(--q-accent); }
.q-visip-row.open { border-color: var(--q-accent); }
.q-visip-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* (2026-08-07) Elle bot IP listesi textarea'sı (select'le aynı yüzey) */
.q-settings-input { background: var(--q-input-bg); color: var(--q-text); border: 1px solid var(--q-divider); border-radius: 8px; padding: 10px 12px; box-sizing: border-box; resize: vertical; }
.q-settings-input:focus { outline: none; border-color: var(--q-accent); }
/* (2026-08-07) IP accordion detayı: ham kayıt satırları (zaman · sayfa · cihaz) */
.q-visip-detail { margin-top: 8px; border-top: 1px solid var(--q-divider); padding-top: 6px; cursor: default; }
.q-visip-drow { display: flex; align-items: center; gap: 12px; padding: 3px 0; font-size: 12px; color: var(--q-text); flex-wrap: wrap; }
.q-visip-drow > time { flex: none; font-family: monospace; color: var(--q-muted); }
.q-visip-ip { font-family: monospace; font-size: 13px; color: var(--q-strong); font-weight: 600; }
.q-visip-meta { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.q-visip-last { font-size: 11.5px; color: var(--q-faint); flex: none; }
.q-visip-count { font-size: 12.5px; color: var(--q-strong); font-variant-numeric: tabular-nums; flex: none; font-weight: 600; }
.q-visip-pages { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.q-visip-page { font-size: 11.5px; font-family: monospace; background: var(--q-input-bg); border-radius: 6px; padding: 2px 8px; color: var(--q-text); }
.q-visip-acc { font-size: 11.5px; background: color-mix(in srgb, var(--q-accent) 14%, transparent); border-radius: 6px; padding: 2px 8px; color: var(--q-strong); }
/* (2026-08-07) IP satırı: OS dağılım chip'i (mavi ton) + bot rozeti (amber) */
.q-visip-os { font-size: 11.5px; background: color-mix(in srgb, #3b7fc4 16%, transparent); border-radius: 6px; padding: 2px 8px; color: var(--q-strong); font-weight: 600; }
.q-visip-bot { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .3px; background: rgba(224,164,44,0.18); color: #d99a1f; border: 1px solid rgba(224,164,44,0.45); border-radius: 999px; padding: 1px 8px; line-height: 1.6; }

/* MAĞAZA PUANLAMA POPUP'I (2026-08-06): mobil kabukta N'inci girişte ortalanmış kart.
   Backdrop'a tıklamak = "daha sonra" (erteleme katlanır). */
.q-ratebd { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1190; display: flex; align-items: center; justify-content: center; }
.q-ratecard { background: var(--q-panel-bg); border-radius: 16px; padding: 24px 20px 18px; max-width: 340px; width: calc(100% - 48px); box-shadow: var(--q-elev-4, 0 10px 30px rgba(0,0,0,.35)); text-align: center; }
.q-rate-emo { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.q-rate-title { font-size: 17px; font-weight: 700; color: var(--q-strong); margin-bottom: 6px; }
.q-rate-body { font-size: 13.5px; color: var(--q-muted); line-height: 1.5; margin-bottom: 16px; }
.q-rate-btns { display: flex; gap: 8px; justify-content: center; }
.q-rate-btns .q-theme-btn { padding: 9px 16px; }
.q-rate-btns .primary { background: var(--q-accent); color: #fff; border-color: transparent; }

/* ZEBRA TAM GENİŞLİK (2026-08-06, kullanıcı: "yana kaydırınca renk uyumsuzluğu var"): satırlar
   BLOK olduğundan genişlikleri konteynerin clientWidth'inde kalıyordu — kaydırma alanının sağ
   kısmında çift-satır zemini bitiyordu. İç sarmalayıcı max-content: en geniş içeriğe açılır,
   satırlar onun genişliğini doldurur → zebra kaydırılan alanın TAMAMINI kaplar. */
.q-login-tin { width: max-content; min-width: 100%; }
/* Son kolon (sağlayıcı) TAM yazılır (2026-08-06): saf CSS max-content ÇALIŞMAZ — her satır
   BAĞIMSIZ bir grid ve blok genişliği konteynere kilitli olduğundan track min'e sıkışıyor
   (harness'ta ölçüldü: 122px'e ezildi). goglisHScroll.fit en geniş .q-login-isp'yi ölçüp
   --q-ispw değişkenini tabloya basar → tüm satırlar AYNI sabit genişliği paylaşır, hizalama
   bozulmaz; JS yoksa eski minmax'e düşer (ellipsis geri gelir — zarif bozulma). */
.q-login-thead, .q-login-trow { display: grid; grid-template-columns: 104px minmax(230px,1.5fr) 156px minmax(200px,1.4fr) var(--q-ispw, minmax(140px,1.2fr)); gap: 16px; align-items: center; padding: 10px 18px; min-width: 900px; }
.q-login-thead { padding-block: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--q-faint);
    border-bottom: 1px solid var(--q-divider); background: color-mix(in srgb, var(--q-strong) 3%, transparent); }
/* Zebra KALKTI (2026-10-24): ince ayraç + üzerine gelince yumuşak vurgu. Vurgu da kaydırılan alanın TAMAMINI kaplar (.q-login-tin). */
.q-login-trow { font-size: 12.5px; color: var(--q-text); border-bottom: 1px solid color-mix(in srgb, var(--q-divider) 70%, transparent); transition: background-color .12s; }
.q-login-trow:last-child { border-bottom: 0; }
.q-login-trow:not(.q-sk-row):hover { background: color-mix(in srgb, var(--q-accent) 6%, transparent); }
.q-login-trow > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Zaman: gün ("Bugün" / "Dün" / "24 Eki") + altında saat. */
.q-lt-when { display: grid; gap: 2px; line-height: 1.25; }
.q-lt-day { color: var(--q-strong); font-weight: 700; }
.q-lt-hm { font-size: 11.5px; color: var(--q-muted); font-variant-numeric: tabular-nums; }
/* Hesap: kişinin uygulamadaki rengiyle harf avatarı + e-posta + giriş yöntemi hapı. */
.q-lt-acct { display: flex; align-items: center; gap: 10px; }
.q-lt-av { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 13px/1 var(--q-display); }
.q-lt-acct-t { min-width: 0; display: grid; gap: 3px; justify-items: start; }
.q-login-email { max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--q-strong); font-weight: 600; }
.q-lt-meth { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.7;
    color: var(--q-muted); background: color-mix(in srgb, var(--q-strong) 7%, transparent); }
.q-lt-meth .mud-icon-root { font-size: 12px; }
.q-lt-meth.pass { color: color-mix(in srgb, var(--q-accent) 72%, var(--q-strong)); background: color-mix(in srgb, var(--q-accent) 13%, transparent); }
.q-lt-meth.sess { color: color-mix(in srgb, var(--q-online) 70%, var(--q-strong)); background: color-mix(in srgb, var(--q-online) 13%, transparent); }
/* IP: tıklayınca kopyalanan, eşit aralıklı yazılı hap; kopya simgesi üzerine gelince belirir. */
.q-lt-ip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 9px; border: 0; border-radius: 8px; cursor: pointer;
    font: 500 12px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--q-strong); background: color-mix(in srgb, var(--q-strong) 6%, transparent); transition: background-color .12s; }
.q-lt-ip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-lt-ip .mud-icon-root { flex: none; font-size: 13px; color: var(--q-muted); opacity: 0; transition: opacity .12s; }
.q-lt-ip:hover { background: color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-lt-ip:hover .mud-icon-root, .q-lt-ip:focus-visible .mud-icon-root { opacity: 1; }
/* Cihaz: tür simgesi + tarayıcı (kalın) / işletim sistemi · tür. */
.q-lt-dev { display: flex; align-items: center; gap: 10px; }
.q-lt-devic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 12%, transparent); }
.q-lt-devic .mud-icon-root { font-size: 16px; }
.q-lt-dev-t { min-width: 0; display: grid; gap: 2px; line-height: 1.25; }
.q-lt-dev-t b { font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; }
.q-lt-dev-t small { font-size: 11.5px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; }
.q-login-isp { color: var(--q-muted); }
.q-lt-cc { display: inline-block; margin-right: 7px; padding: 0 5px; border-radius: 5px; font-size: 10px; font-weight: 800; letter-spacing: .4px; line-height: 1.7;
    color: var(--q-strong); background: color-mix(in srgb, var(--q-strong) 9%, transparent); vertical-align: 1px; }
/* Sağlayıcı hücresi kırpılmaz (satır kuralı ellipsis basıyor — burada geri açılır). */
.q-login-trow > .q-login-isp, .q-login-thead > span:last-child { overflow: visible; text-overflow: clip; }
.q-sk-row .q-lt-when { gap: 6px; }
/* TELEFON (2026-10-24): satırlar KART — başlık satırı ve üst kaydırma şeridi gizli, yatay kaydırma yok.
   Sütun sırası alanlarla verilir: hesap | zaman, cihaz | IP, altta ayraçlı sağlayıcı. */
@media (max-width: 700px) {
    .q-tscroll { display: none; }
    .q-login-table { overflow: visible; border: 0; border-radius: 0; background: transparent; }
    .q-login-tin { width: auto; min-width: 0; display: grid; gap: 10px; }
    .q-login-thead { display: none; }
    .q-login-trow { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "acct when" "dev ip" "isp isp";
        gap: 12px; padding: 13px 14px; border: 1px solid var(--q-border); border-radius: 16px; background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); }
    .q-login-trow:last-child { border-bottom: 1px solid var(--q-border); }
    .q-login-trow > .q-lt-acct { grid-area: acct; }
    .q-login-trow > .q-lt-when { grid-area: when; justify-items: end; text-align: end; }
    .q-login-trow > .q-lt-dev { grid-area: dev; }
    .q-login-trow > .q-lt-ipc { grid-area: ip; justify-self: end; max-width: 46vw; }
    .q-login-trow > .q-login-isp { grid-area: isp; padding-top: 10px; border-top: 1px solid var(--q-divider); white-space: normal; }
    /* Sağlayıcı da ülke de yoksa kartın dibinde "-" şeridi kalmasın — üçüncü satır alanı da düşer, yoksa boş satırın
       ızgara aralığı kartın altında fazladan boşluk bırakıyordu. */
    .q-login-trow > .q-login-isp.none { display: none; }
    .q-login-trow:has(> .q-login-isp.none) { grid-template-areas: "acct when" "dev ip"; }
    .q-lt-ip .mud-icon-root { opacity: .7; }
}
.q-log-lvl { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 1px 7px; border-radius: 6px; background: var(--q-selected); color: var(--q-muted); flex: none; }
.q-log-row.warning .q-log-lvl { background: rgba(240,178,50,.16); color: var(--q-amber); }
.q-log-row.error .q-log-lvl, .q-log-row.critical .q-log-lvl { background: rgba(237,66,69,.16); color: var(--q-danger); }
.q-log-row.critical { outline: 1px solid rgba(237,66,69,.35); }
.q-log-row time { font-size: 11px; color: var(--q-faint); flex: none; }
.q-log-cat { font-size: 11px; color: var(--q-muted); font-family: monospace; flex: none; }
.q-log-msg { color: var(--q-text); min-width: 0; overflow-wrap: anywhere; }
.q-log-ex { width: 100%; font-size: 11.5px; }
.q-log-ex summary { cursor: pointer; color: var(--q-danger); }
.q-log-ex pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 8px; padding: 8px 10px; margin-top: 4px; max-height: 260px; overflow-y: auto; }

/* ===== İMLEÇ TEMALARI (goglis.js goglisCursor; <html>.q-cursor-*; temadan BAĞIMSIZ) =====
   SVG data-URI imleç (Chromium+Firefox+Electron; Safari desteklemezse ', auto' fallback'ine düşer,
   kırılmaz). Her tema: ok (varsayılan) + motif (işaretçi/pointer). Metin girişlerinde I-beam korunur. */
html.q-cursor-goglis { --qc: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2cnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyM3OEQ4RkYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyMyNDc3RTgnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMyAyIEwzIDIzIEw5LjIgMTcuOCBMMTMgMjYgTDE2LjggMjQuMiBMMTMuMSAxNi40IEwyMSAxNi4yIFonIGZpbGw9J3VybCgjZyknIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxLjYnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==") 3 2; --qcp: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J3AnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNBNkVFRkYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyMyRjlCRkYnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMTYgMyBDMTcgMTIgMjAgMTUgMjkgMTYgQzIwIDE3IDE3IDIwIDE2IDI5IEMxNSAyMCAxMiAxNyAzIDE2IEMxMiAxNSAxNSAxMiAxNiAzIFonIGZpbGw9J3VybCgjcCknIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxLjMnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4=") 16 16; }
html.q-cursor-salyangoz { --qc: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNMyAyIEwzIDIzIEw5LjIgMTcuOCBMMTMgMjYgTDE2LjggMjQuMiBMMTMuMSAxNi40IEwyMSAxNi4yIFonIGZpbGw9JyNmZmZmZmYnIHN0cm9rZT0nIzJGOUJGRicgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxjaXJjbGUgY3g9JzIxLjUnIGN5PScyMy41JyByPSc2LjInIGZpbGw9JyM4RkRDRkYnIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxLjUnLz48Y2lyY2xlIGN4PScyMS41JyBjeT0nMjMuNScgcj0nMy40JyBmaWxsPScjMzZBN0YzJy8+PGNpcmNsZSBjeD0nMjEuNScgY3k9JzIzLjUnIHI9JzEuMycgZmlsbD0nI2ZmZmZmZicvPjwvc3ZnPg==") 3 2; --qcp: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNMTQgOS44IGwtLjktNC4yIE0xOS40IDEwLjIgbDItMy42JyBzdHJva2U9JyMyRjlCRkYnIHN0cm9rZS13aWR0aD0nMi4yJyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48ZWxsaXBzZSBjeD0nMTYnIGN5PScxOCcgcng9JzEwLjInIHJ5PSc4LjYnIGZpbGw9JyNmZmZmZmYnIHN0cm9rZT0nIzFBMjY0OCcgc3Ryb2tlLXdpZHRoPScxLjQnLz48Y2lyY2xlIGN4PScxMi40JyBjeT0nMTcuNicgcj0nMy4xJyBmaWxsPScjMTIzNDdBJy8+PGNpcmNsZSBjeD0nMTkuOScgY3k9JzE3LjknIHI9JzIuOCcgZmlsbD0nIzEyMzQ3QScvPjxjaXJjbGUgY3g9JzEzLjMnIGN5PScxNi40JyByPScxLjA1JyBmaWxsPScjZmZmZmZmJy8+PGNpcmNsZSBjeD0nMjAuNycgY3k9JzE2LjgnIHI9Jy45NScgZmlsbD0nI2ZmZmZmZicvPjxwYXRoIGQ9J00xNC42IDIxLjcgcTEuNCAxLjMgMi44IDAnIHN0cm9rZT0nIzEyMzQ3QScgc3Ryb2tlLXdpZHRoPScxLjInIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==") 16 16; }
html.q-cursor-bulut { --qc: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2InIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNmZmZmZmYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNDRkU4RkYnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMyAyIEwzIDIzIEw5LjIgMTcuOCBMMTMgMjYgTDE2LjggMjQuMiBMMTMuMSAxNi40IEwyMSAxNi4yIFonIGZpbGw9J3VybCgjYiknIHN0cm9rZT0nIzJGOUJGRicgc3Ryb2tlLXdpZHRoPScxLjcnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==") 3 2; --qcp: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNOS40IDI0LjUgaDE0IGE1LjIgNS4yIDAgMCAwIC43LTEwLjM1IEE3LjIgNy4yIDAgMCAwIDEwLjYgMTIuNiBBNiA2IDAgMCAwIDkuNCAyNC41IFonIGZpbGw9JyNmZmZmZmYnIHN0cm9rZT0nIzJGOUJGRicgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNMTIuNiAxNS44IGEzLjYgMy42IDAgMCAxIDMuNi0yLjYnIHN0cm9rZT0nI0JGRTNGRicgc3Ryb2tlLXdpZHRoPScxLjYnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg==") 16 16; }
html[class*='q-cursor-goglis'], html[class*='q-cursor-salyangoz'], html[class*='q-cursor-bulut'],
[class*='q-cursor-goglis'] *, [class*='q-cursor-salyangoz'] *, [class*='q-cursor-bulut'] * { cursor: var(--qc), auto; }
[class*='q-cursor-goglis'] a, [class*='q-cursor-salyangoz'] a, [class*='q-cursor-bulut'] a,
[class*='q-cursor-'] button, [class*='q-cursor-'] [role='button'], [class*='q-cursor-'] label, [class*='q-cursor-'] select,
[class*='q-cursor-'] summary, [class*='q-cursor-'] .mud-button-root, [class*='q-cursor-'] .mud-icon-button,
[class*='q-cursor-'] .mud-nav-link, [class*='q-cursor-'] .mud-list-item-clickable,
[class*='q-cursor-'] input[type='checkbox'], [class*='q-cursor-'] input[type='radio'], [class*='q-cursor-'] [onclick] { cursor: var(--qcp), pointer !important; }
[class*='q-cursor-'] input[type='text'], [class*='q-cursor-'] input[type='search'], [class*='q-cursor-'] input[type='email'],
[class*='q-cursor-'] input[type='password'], [class*='q-cursor-'] input[type='url'], [class*='q-cursor-'] input[type='number'],
[class*='q-cursor-'] input[type='tel'], [class*='q-cursor-'] textarea, [class*='q-cursor-'] [contenteditable='true'] { cursor: text !important; }


/* İmleç seçici buton önizlemeleri — gerçek ok imleci (goglis.css). */
.q-curprev { display:inline-block; width:22px; height:22px; background:center/contain no-repeat; vertical-align:middle; margin-right:2px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.q-curprev-goglis { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2cnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyM3OEQ4RkYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyMyNDc3RTgnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMyAyIEwzIDIzIEw5LjIgMTcuOCBMMTMgMjYgTDE2LjggMjQuMiBMMTMuMSAxNi40IEwyMSAxNi4yIFonIGZpbGw9J3VybCgjZyknIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxLjYnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg=="); }
.q-curprev-mot-goglis { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J3AnIHgxPScwJyB5MT0nMCcgeDI9JzEnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNBNkVFRkYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyMyRjlCRkYnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMTYgMyBDMTcgMTIgMjAgMTUgMjkgMTYgQzIwIDE3IDE3IDIwIDE2IDI5IEMxNSAyMCAxMiAxNyAzIDE2IEMxMiAxNSAxNSAxMiAxNiAzIFonIGZpbGw9J3VybCgjcCknIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxLjMnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48L3N2Zz4="); }
.q-curprev-salyangoz { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNMyAyIEwzIDIzIEw5LjIgMTcuOCBMMTMgMjYgTDE2LjggMjQuMiBMMTMuMSAxNi40IEwyMSAxNi4yIFonIGZpbGw9JyNmZmZmZmYnIHN0cm9rZT0nIzJGOUJGRicgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjxjaXJjbGUgY3g9JzIxLjUnIGN5PScyMy41JyByPSc2LjInIGZpbGw9JyM4RkRDRkYnIHN0cm9rZT0nI2ZmZmZmZicgc3Ryb2tlLXdpZHRoPScxLjUnLz48Y2lyY2xlIGN4PScyMS41JyBjeT0nMjMuNScgcj0nMy40JyBmaWxsPScjMzZBN0YzJy8+PGNpcmNsZSBjeD0nMjEuNScgY3k9JzIzLjUnIHI9JzEuMycgZmlsbD0nI2ZmZmZmZicvPjwvc3ZnPg=="); }
.q-curprev-mot-salyangoz { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNMTQgOS44IGwtLjktNC4yIE0xOS40IDEwLjIgbDItMy42JyBzdHJva2U9JyMyRjlCRkYnIHN0cm9rZS13aWR0aD0nMi4yJyBzdHJva2UtbGluZWNhcD0ncm91bmQnLz48ZWxsaXBzZSBjeD0nMTYnIGN5PScxOCcgcng9JzEwLjInIHJ5PSc4LjYnIGZpbGw9JyNmZmZmZmYnIHN0cm9rZT0nIzFBMjY0OCcgc3Ryb2tlLXdpZHRoPScxLjQnLz48Y2lyY2xlIGN4PScxMi40JyBjeT0nMTcuNicgcj0nMy4xJyBmaWxsPScjMTIzNDdBJy8+PGNpcmNsZSBjeD0nMTkuOScgY3k9JzE3LjknIHI9JzIuOCcgZmlsbD0nIzEyMzQ3QScvPjxjaXJjbGUgY3g9JzEzLjMnIGN5PScxNi40JyByPScxLjA1JyBmaWxsPScjZmZmZmZmJy8+PGNpcmNsZSBjeD0nMjAuNycgY3k9JzE2LjgnIHI9Jy45NScgZmlsbD0nI2ZmZmZmZicvPjxwYXRoIGQ9J00xNC42IDIxLjcgcTEuNCAxLjMgMi44IDAnIHN0cm9rZT0nIzEyMzQ3QScgc3Ryb2tlLXdpZHRoPScxLjInIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg=="); }
.q-curprev-bulut { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2InIHgxPScwJyB5MT0nMCcgeDI9JzAnIHkyPScxJz48c3RvcCBvZmZzZXQ9JzAnIHN0b3AtY29sb3I9JyNmZmZmZmYnLz48c3RvcCBvZmZzZXQ9JzEnIHN0b3AtY29sb3I9JyNDRkU4RkYnLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cGF0aCBkPSdNMyAyIEwzIDIzIEw5LjIgMTcuOCBMMTMgMjYgTDE2LjggMjQuMiBMMTMuMSAxNi40IEwyMSAxNi4yIFonIGZpbGw9J3VybCgjYiknIHN0cm9rZT0nIzJGOUJGRicgc3Ryb2tlLXdpZHRoPScxLjcnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg=="); }
.q-curprev-mot-bulut { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48cGF0aCBkPSdNOS40IDI0LjUgaDE0IGE1LjIgNS4yIDAgMCAwIC43LTEwLjM1IEE3LjIgNy4yIDAgMCAwIDEwLjYgMTIuNiBBNiA2IDAgMCAwIDkuNCAyNC41IFonIGZpbGw9JyNmZmZmZmYnIHN0cm9rZT0nIzJGOUJGRicgc3Ryb2tlLXdpZHRoPScxLjgnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnLz48cGF0aCBkPSdNMTIuNiAxNS44IGEzLjYgMy42IDAgMCAxIDMuNi0yLjYnIHN0cm9rZT0nI0JGRTNGRicgc3Ryb2tlLXdpZHRoPScxLjYnIGZpbGw9J25vbmUnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcvPjwvc3ZnPg=="); }
.q-curprev-default { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMicgaGVpZ2h0PSczMicgdmlld0JveD0nMCAwIDMyIDMyJz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9J2FkJyB4MT0nMCcgeTE9JzAnIHgyPScxJyB5Mj0nMSc+PHN0b3Agb2Zmc2V0PScwJyBzdG9wLWNvbG9yPScjYzdjOWQ2Jy8+PHN0b3Agb2Zmc2V0PScxJyBzdG9wLWNvbG9yPScjOGI4ZWEzJy8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZD0nTTMgMiBMMyAyMyBMOS4yIDE3LjggTDEzIDI2IEwxNi44IDI0LjIgTDEzLjEgMTYuNCBMMjEgMTYuMiBaJyBmaWxsPSd1cmwoI2FkKScgc3Ryb2tlPScjZmZmZmZmJyBzdHJva2Utd2lkdGg9JzEuNicgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJy8+PC9zdmc+"); }

/* Ses eşiği metresi + slider ÜST ÜSTE (Discord-vari; aynı 0.003-0.02 ölçeği). Metre arkada dolar,
   beyaz thumb = eşik işareti. Track şeffaf → metre görünür. */
.q-gatebar { position: relative; flex: 1; height: 26px; border-radius: 7px; background: var(--q-input-bg); overflow: hidden; border: 1px solid var(--q-glass-border, rgba(128,128,128,.18)); }
/* Çubuk İKİ DURUMLU (2026-08-08): eşiğin ALTINDA nötr gri (sesin gitmiyor), ÜSTÜNDE marka rengi
   (kapı açık = konuşman yayınlanıyor). Kullanıcı "şu an duyuluyor muyum?" sorusunu bakarak yanıtlar. */
.q-gatebar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, rgba(150,150,150,.35), rgba(170,170,170,.55)); transition: width .04s linear, background .12s linear; pointer-events: none; }
.q-gatebar-fill.open { background: linear-gradient(90deg, color-mix(in srgb, var(--q-accent) 45%, transparent), var(--q-accent)); }
/* Otomatik moddaki eşik işareti (manuelde slider'ın beyaz tutamağı bu işi görür). */
.q-gatebar-auto { position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; transition: left .12s linear; }
.q-gatebar-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; }
.q-gatebar-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 5px; height: 26px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.4); cursor: ew-resize; }
.q-gatebar-range::-moz-range-thumb { width: 5px; height: 26px; background: #fff; border: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.55); cursor: ew-resize; }
.q-gatebar-range::-moz-range-track { background: transparent; border: none; }

/* #2b DM okunmamış mesaj SAYISI rozeti (nokta yerine sayı) — tema rengi. */
.q-dm-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--q-accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; }

/* #11 Ayarlar açılış yükleniyor overlay'i — içerik hazırlanana dek tıklamayı yutar + spinner. */
.q-settings { position: relative; }
.q-settings-loading { position: absolute; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); background: rgba(127,127,127,0.08); }

/* ============ BİLDİRİM (snackbar) GÖRÜNÜMÜ — 2026-07-30 ============
   Kullanıcı: "notify bildirimleri çok basit kalmış, acemice". Sebep: MudBlazor snackbar'ı HİÇ
   biçimlendirilmemişti (grep: goglis.css'te tek kural, o da animasyon kapatma) → Material
   varsayılanı, uygulamanın cam/neon diliyle alakasız düz kutu. Artık uygulamanın kartlarıyla
   aynı dil: cam yüzey + ince kenar + solda SEVERITY RAYI + ikon çipi.
   ÖNEMLİ: MudBlazor severity rengini `.mud-alert-filled-*` sınıfıyla ARKA PLANA basar; onu
   bastırıp rengi yalnız RAY + İKON'a taşıyoruz (metin her temada okunur kalsın — dolu kırmızı
   zeminde beyaz metin ile bilgi/uyarı bildirimleri "hata" gibi görünüyordu). Portal body'ye
   çıktığı için `.q-root` altı kurallar yakalamaz; seçiciler kök seviyede. */
.mud-snackbar {
    --q-sev: var(--q-accent, #22A6FF);
    position: relative; align-items: center; gap: 2px;
    min-width: 300px; max-width: 420px; padding: 12px 14px 12px 16px;
    margin-top: 12px; border-radius: 13px; overflow: hidden;
    background: var(--q-glass-strong, rgba(28,30,36,.92)) !important;
    color: var(--q-strong, #e8ecf1) !important;
    border: 1px solid var(--q-glass-border, rgba(255,255,255,.10));
    -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 1px 3px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.05);
    font-size: 13.5px; line-height: 1.45; font-weight: 400;
}
/* Sol ray = severity. `::before` kullanılır (kenarlık değil) → köşe yarıçapı bozulmaz. */
.mud-snackbar::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--q-sev); border-radius: 3px 0 0 3px;
}
.mud-snackbar .mud-snackbar-content-message { padding: 0; font-weight: 450; display: flex; align-items: center; align-self: center; }
/* Ikon + kapatma da ayni eksende otursun (metin dikey tam ortali — kullanici bug'i 2026-07-31). */
.mud-snackbar .mud-snackbar-icon { align-self: center; }
.mud-snackbar .mud-snackbar-content-action { align-self: center; }
.mud-snackbar .mud-snackbar-icon { color: var(--q-sev); opacity: 1; padding: 0; margin-right: 11px; font-size: 20px; }
/* Kapatma düğmesi: sessiz dursun, hover'da belirsin (metnin dikkatini çalmasın). */
.mud-snackbar .mud-snackbar-content-action > button { color: var(--q-muted, #9aa0aa) !important; opacity: .75; transition: opacity .12s, color .12s; }
.mud-snackbar:hover .mud-snackbar-content-action > button { opacity: 1; color: var(--q-strong, #e8ecf1) !important; }
/* Severity renkleri — MudBlazor'ın dolu zeminini EZ, rengi ray+ikona ver. */
.mud-snackbar.mud-alert-filled-success { --q-sev: var(--q-online, #3BA55D); }
.mud-snackbar.mud-alert-filled-info { --q-sev: var(--q-accent, #22A6FF); }
.mud-snackbar.mud-alert-filled-warning { --q-sev: var(--q-amber, #E8A93B); }
.mud-snackbar.mud-alert-filled-error { --q-sev: var(--q-danger, #ED4245); }
.mud-snackbar.mud-alert-filled-normal, .mud-snackbar.mud-alert-filled-dark { --q-sev: var(--q-muted, #9aa0aa); }
/* İKİ SATIRLI BİLDİRİM (başlık + açıklama) — 2026-09-18. Genel kural mesaj gövdesini
   `display:flex; align-items:center` ile TEK SATIR gibi kurar; bu, iki bloklu içerikte
   başlığı ve açıklamayı yan yana sıkıştırıp okunmaz hale getiriyordu ("uyarının görseli kötü").
   Sınıf snackbar'a `SnackbarOptions.SnackbarTypeClass` ile veriliyor, yani yalnız bu tür
   bildirimleri etkiler; tek satırlıklar eski hizasında kalır. */
.mud-snackbar.q-snack-2line .mud-snackbar-content-message { display: block; align-self: stretch; }
.mud-snackbar.q-snack-2line .mud-snackbar-icon { align-self: flex-start; margin-top: 2px; }
/* Eylem ARTIK MudBlazor'in degil bizim (bkz. Home.SesUyariGoster). Bu kutu icinde yalniz
   KAPAT (x) kaldi -> ust satira hizalanir; eskiden eylem dugmesi de burdaydi ve alta yaslaniyordu. */
.mud-snackbar.q-snack-2line .mud-snackbar-content-action { align-self: flex-start; }
/* Eylem satiri: metnin ALTINDA, saga yasli. Ayri satir olmasi dugmeyi dar sutunda
   sikistirmaz — "AYARLARI / AC" diye iki satira kirilmasinin sebebi buydu. */
.q-snack-row { display: flex; justify-content: flex-end; margin-top: 10px; }
/* KONTRAST CIPI: arka plan en guclu metin rengi, yazi ise yuzey rengi — yani her temada
   otomatik TERSLENIR. Acik temada koyu zemin + beyaz yazi (Fatih'in istedigi), koyu temada
   acik zemin + koyu yazi. Tek bir sabit renk yazmak yanlis olurdu: uygulamada ikiden fazla
   palet var (koyu/acik disinda mor, kahve, pastel...) ve hepsinde okunur kalmasi gerek. */
.q-snack-act {
    display: inline-flex; align-items: center; justify-content: center;
    height: 30px; padding: 0 14px; border: 0; border-radius: 8px;
    background: var(--q-strong, #f2f3f5); color: var(--q-chat-bg, #2d2e33);
    font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .1px;
    text-transform: none;          /* MudBlazor'in BUYUK HARF'i yok */
    white-space: nowrap;           /* "Einstellungen offnen" bile tek satir */
    cursor: pointer; transition: opacity .14s ease, transform .14s ease;
}
.q-snack-act:hover { opacity: .86; }
.q-snack-act:active { transform: translateY(1px); }
.q-snack-act:focus-visible { outline: 2px solid var(--q-brand, #A9744C); outline-offset: 2px; }
.q-snack-t { font-weight: 600; color: var(--q-strong, #e8ecf1); }
.q-snack-d { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--q-muted, #9aa0aa); }

/* Girişte sağdan süzülme (varsayılan MudBlazor geçişi ölçek/opaklıktı — köşede sıçrama gibi
   duruyordu). Yalnız transform+opacity: compositor'da koşar, repaint yok. */
@keyframes q-snack-in { from { opacity: 0; transform: translateX(16px) scale(.98); } to { opacity: 1; transform: none; } }
.mud-snackbar { animation: q-snack-in .2s cubic-bezier(.2,.9,.25,1) both; }
@media (prefers-reduced-motion: reduce) { .mud-snackbar { animation: none; } }
@media (max-width: 560px) { .mud-snackbar { min-width: 0; max-width: calc(100vw - 24px); } }

/* #7 Yukarıdayken "yeni mesaj" butonu — sohbetin alt-ortasında sabit, tıklayınca dibe iner. */
/* `transform: translateX(-50%)` TABAN DONUSUM — JS `left`'i kapsayicinin ORTASINA yaziyor.
   Keyframe'de de aynisi var; ikisi ayrisirsa buton animasyon biter bitmez genisliginin yarisi
   kadar kayar (2026-08-18'de sag hizalamaya gecilirken tam bu olmustu: olculen kayma 15px). */
/* YENİDEN TASARIM (2026-10-24, Fatih: "çok basit duruyor, daha güzel tasarla"): iki hal.
   · Ok-yalnız (kaydırılmış, yeni mesaj yok): 42px buzlu cam yuvarlak, vurgu renkli çizgi ok.
   · Yeni mesaj (.fresh): vurgu renginde hap — beyaz ok rozeti + "Yeni mesajlar" + kaç mesaj geldiği.
   Giriş yaylanarak, çıkış (.out) kısa bir solmayla; HER karede taban translateX(-50%) korunur. */
.q-newmsg-btn { position: fixed; z-index: 500; display: none; align-items: center; gap: 9px; height: 42px; min-width: 42px;
    padding: 0 8px 0 7px; border-radius: 999px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--q-accent) 28%, var(--q-border, rgba(255, 255, 255, .12)));
    background: color-mix(in srgb, var(--q-panel-bg, #0f193c) 82%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    color: var(--q-strong); font: 700 13px/1 var(--q-display, inherit); white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .16);
    transform: translateX(-50%); animation: q-newmsg-in .3s cubic-bezier(.2, .9, .3, 1.3) backwards;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.q-newmsg-btn.on { display: inline-flex; }
.q-newmsg-btn.out { animation: q-newmsg-out .17s ease forwards; pointer-events: none; }
.q-newmsg-btn:hover { transform: translateX(-50%) translateY(-2px); border-color: color-mix(in srgb, var(--q-accent) 60%, transparent);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .32), 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-newmsg-btn:active { transform: translateX(-50%) scale(.94); }
.q-newmsg-btn:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 3px; }
.q-newmsg-ic { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
    color: var(--q-accent); transition: transform .2s ease; }
.q-newmsg-ic svg { width: 20px; height: 20px; display: block; }
.q-newmsg-btn.up .q-newmsg-ic { transform: rotate(180deg); }
/* Ok-yalnız: tam yuvarlak, metin alanları yok. */
.q-newmsg-btn:not(.fresh) { width: 42px; padding: 0; justify-content: center; }
.q-newmsg-btn:not(.fresh) .q-newmsg-t, .q-newmsg-btn:not(.fresh) .q-newmsg-n { display: none; }
/* Yeni mesaj hali: dolu vurgu hapı, ok beyaz bir rozetin içinde hafifçe yaylanır. */
.q-newmsg-btn.fresh { padding: 0 7px 0 5px; border-color: transparent; color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--q-accent) 82%, #fff), var(--q-accent));
    box-shadow: 0 12px 30px color-mix(in srgb, var(--q-accent) 38%, rgba(0, 0, 0, .3)), 0 2px 6px rgba(0, 0, 0, .18); }
.q-newmsg-btn.fresh .q-newmsg-ic { width: 32px; height: 32px; background: rgba(255, 255, 255, .22); color: #fff; }
.q-newmsg-btn.fresh .q-newmsg-ic svg { width: 18px; height: 18px; animation: q-newmsg-bob 1.6s ease-in-out infinite; }
.q-newmsg-n:empty { display: none; }
.q-newmsg-n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--q-accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.q-newmsg-t { padding-right: 3px; }
@keyframes q-newmsg-in { from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.86); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes q-newmsg-out { from { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } to { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); } }
@keyframes q-newmsg-bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .q-newmsg-btn, .q-newmsg-btn.fresh .q-newmsg-ic svg { animation: none; } }

/* ============ #Y2 (2026-07-27): ANİMASYONLARI KAPAT ("kütük gibi açılsın") ============
   Ayarlar → Görünüm'deki anahtar <html>'e q-instant sınıfı basar (goglisAnim). Kapsam, işletim
   sisteminin prefers-reduced-motion kuralının AYNISI + menü/dialog açılışları. DİKKAT: canlı veri
   çubukları (.q-meter-fill/.q-gatebar-fill/.q-poll-fill/.q-xpbar-fill/.q-cap-bar) KENDİ sürelerini
   kullanır (var(--q-dur) DEĞİL) → burada donmazlar; `* { transition:none }` YAZILMAZ. */
html.q-instant { --q-dur: 0.001ms; }
/* Açılış animasyonları: menü/bağlam menüsü/alt menü/bahsetme/profil kartı + mesaj & gün ayracı. */
html.q-instant .q-menu-panel,
html.q-instant .q-ctx-panel,
html.q-instant .q-submenu.open > .q-submenu-panel,
html.q-instant .q-mention-pop,
html.q-instant .q-pp,
html.q-instant .q-msg,
html.q-instant .q-day-sep,
html.q-instant .q-newmsg-btn,
html.q-instant .q-newmsg-btn.fresh .q-newmsg-ic svg,
html.q-instant .q-login-orb,
html.q-instant .q-login-stars,
html.q-instant .q-speaksnail.on, html.q-instant .q-speaksnail.on::before, html.q-instant .q-speaksnail.on::after,
html.q-instant .q-speaksnail.on > .gsnail, html.q-instant .q-speaksnail.on .gsnail * { animation: none !important; }
html.q-instant .q-speaksnail.on { box-shadow: 0 0 0 2px var(--q-online); }
/* MudBlazor body'ye PORTAL eder (dialog/popover/snackbar) — .q-root altı kurallarla yakalanmaz. */
html.q-instant .mud-dialog,
html.q-instant .mud-overlay,
html.q-instant .mud-popover,
html.q-instant .mud-snackbar { animation: none !important; transition: none !important; }
/* Hover/geçiş süreleri (reduced-motion listesinin aynısı) + basış küçülmesi. */
html.q-instant .q-chrow, html.q-instant .q-dmrow, html.q-instant .q-member, html.q-instant .q-vuser,
html.q-instant .q-menu-item, html.q-instant .q-inbox-tab, html.q-instant .q-tab,
html.q-instant .q-friends-btn, html.q-instant .q-emoji-i, html.q-instant .q-emoji-cat,
html.q-instant .q-settings-navitem, html.q-instant .q-react, html.q-instant .q-status-btn,
html.q-instant .q-theme-btn, html.q-instant .q-login-btn, html.q-instant .q-pcard2-morebtn,
html.q-instant .q-settings-close, html.q-instant .q-vctl, html.q-instant .q-dmpin,
html.q-instant .q-dmadd, html.q-instant .q-tab-caret, html.q-instant .q-mention-i,
html.q-instant .q-friend-row, html.q-instant .q-empty-hint,
html.q-instant .q-dmrail, html.q-instant .q-expr-ic { transition: none !important; }
html.q-instant .q-react:active, html.q-instant .q-vctl:active,
html.q-instant .q-status-btn:active, html.q-instant .q-theme-btn:active,
html.q-instant .q-login-btn:active, html.q-instant .q-friends-btn:active,
html.q-instant .q-dmpin:active, html.q-instant .q-dmadd:active,
html.q-instant .q-settings-close:active, html.q-instant .q-pcard2-morebtn:active,
html.q-instant .q-empty-hint:hover { transform: none !important; }

/* ============ #Y1 (2026-07-27): geri bildirim ek görseli ============ */
/* Yükle butonu (gizli InputFile'ı saran label) — kategori ikonu deseniyle aynı his. */
.q-fb-upload { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
    border: 1px dashed var(--q-divider); background: var(--q-input-bg); color: var(--q-muted);
    font-size: 13px; font-weight: 600; cursor: pointer; }
.q-fb-upload:hover { border-color: var(--q-accent); color: var(--q-strong); }
.q-fb-upload.busy { opacity: .6; cursor: progress; }
/* Önizleme: dar dialogda taşmasın (MaxWidth.Small) + üstte kaldır düğmesi. */
.q-fb-preview { position: relative; display: inline-block; max-width: 100%; }
.q-fb-preview img { max-width: 100%; max-height: 150px; border-radius: 9px; display: block;
    border: 1px solid var(--q-divider); }
.q-fb-imgx { position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; display: inline-flex;
    align-items: center; justify-content: center; border: none; border-radius: 50%;
    background: rgba(0,0,0,.62); color: #fff; cursor: pointer; }
.q-fb-imgx:hover { background: var(--q-danger, #ed4245); }
/* Admin panelinde geri bildirim görseli — tıklayınca lightbox. */
.q-fb-adminimg { max-width: 100%; max-height: 200px; border-radius: 8px; margin-top: 8px;
    display: block; cursor: zoom-in; border: 1px solid var(--q-divider); }

/* ===== (2026-07-28) Admin kullanıcı listesi: kayıt tarihi + sunucu rozeti + hover kutusu ===== */
/* "N sunucu" rozeti; kutu bunun ALTINA açılır (wrap position:relative). */
.q-adm-srvwrap { position: relative; flex: none; }
.q-chip.q-adm-srvchip { display: inline-flex; align-items: center; gap: 4px; cursor: default; font-variant-numeric: tabular-nums; }
.q-chip.q-adm-srvchip.zero { opacity: .45; }
/* Hover kutusu: satırın üstünde yüzer; ÇOK SUNUCU varsa kendi içinde kaydırılır (istek). */
.q-adm-srvpop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    min-width: 230px; max-width: 330px;
    background: var(--q-side-bg);  /* #11: menülerle AYNI değişken — --q-menu-bg hiç tanımlı değildi, hep sabit griye düşüyordu */
    border: 1px solid var(--q-divider); border-radius: 10px;
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    padding: 8px 0 6px; cursor: default;
}
/* CIHAZ ROZETI: OS etiketi hover'da VE dokununca (2026-09-20). Kutu kucuk ve tek satirlik —
   sunucu listesinin aksine icerigi sabit, o yuzden kaydirma/baslik yok. Sarmalayici `relative`
   olmali, yoksa mutlak konumlu etiket satirin degil sayfanin kosesine gider. */
.q-adm-dev { position: relative; display: inline-flex; align-items: center; cursor: default; }
.q-adm-devpop {
    position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); z-index: 60;
    white-space: nowrap; font-size: 11.5px; line-height: 1.5;
    background: var(--q-side-bg); color: var(--q-text);
    border: 1px solid var(--q-divider); border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    padding: 4px 9px; pointer-events: none;   /* kutu imleci yakalayip hover'i bozmasin */
}
.q-adm-srvhead { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--q-faint); padding: 0 12px 6px; }
.q-adm-srvlist { max-height: 232px; overflow-y: auto; }        /* ← kaydırma */
.q-adm-srvlist::-webkit-scrollbar { width: 8px; }
.q-adm-srvlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 4px; }
.q-adm-srvrow { display: flex; align-items: center; gap: 7px; padding: 5px 12px; font-size: 12.5px; }
.q-adm-srvrow:hover { background: var(--q-hover); }
.q-adm-srvrow .nm { color: var(--q-strong); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-adm-srvrow .rl { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 20px; background: var(--q-input-bg); color: var(--q-muted); flex: none; }
.q-adm-srvrow .rl.owner { background: color-mix(in srgb, var(--q-amber, #f0b232) 22%, transparent); color: var(--q-amber, #f0b232); }
.q-adm-srvrow .dt { margin-left: auto; font-size: 11px; color: var(--q-faint); flex: none; }
.q-adm-srvempty { padding: 8px 12px 10px; font-size: 12.5px; color: var(--q-muted); display: flex; justify-content: center; }
/* Lazy-load sentinel + liste sonu */
.q-adm-more { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 16px 0; color: var(--q-muted); font-size: 12.5px; }
.q-adm-end { text-align: center; padding: 14px 0 4px; color: var(--q-faint); font-size: 12px; }

/* ===== (2026-07-28) Admin kullanıcı filtreleri + BOT rozeti (YALNIZ yönetim paneli) ===== */
.q-adm-filters { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* Segment düğmesi: Tümü / Gerçek / Bot */
.q-adm-seg { display: inline-flex; border: 1px solid var(--q-divider); border-radius: 9px; overflow: hidden; }
.q-adm-seg button { border: 0; background: transparent; color: var(--q-muted); font-size: 12.5px; font-weight: 600;
    padding: 7px 14px; cursor: pointer; }
.q-adm-seg button + button { border-left: 1px solid var(--q-divider); }
.q-adm-seg button:hover { background: var(--q-hover); color: var(--q-strong); }
.q-adm-seg button.on { background: var(--q-accent); color: #fff; }
/* Tarih aralığı */
.q-adm-dt { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--q-muted); }
.q-adm-dt input { background: var(--q-input-bg); border: 1px solid var(--q-divider); border-radius: 8px;
    color: var(--q-strong); font: inherit; padding: 6px 10px; color-scheme: dark; }
.q-adm-dt input:focus { outline: none; border-color: var(--q-accent); }
.theme-light .q-adm-dt input { color-scheme: light; }
.q-adm-fltclear { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent;
    color: var(--q-danger, #ed4245); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 8px; border-radius: 7px; }
.q-adm-fltclear:hover { background: var(--q-hover); }
.q-adm-fltcount { font-size: 12.5px; color: var(--q-faint); font-variant-numeric: tabular-nums; }

/* ===== (2026-09-11) Admin üyeler: çevrimiçi durumu + "Çevrimiçi" filtresi ===== */
/* Filtre: segmentten AYRI aç/kapa (hesap türü/tarih/aramayla birleşir); sayı = küresel bağlı kişi */
.q-adm-onl { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--q-divider); border-radius: 9px;
    background: transparent; color: var(--q-muted); font: inherit; font-size: 12.5px; font-weight: 600;
    padding: 7px 12px; cursor: pointer; }
.q-adm-onl:hover { background: var(--q-hover); color: var(--q-strong); }
.q-adm-onl .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--q-online); flex: none; }
.q-adm-onl .n { color: var(--q-faint); font-variant-numeric: tabular-nums; }
.q-adm-onl.on { border-color: var(--q-online); color: var(--q-strong);
    background: color-mix(in srgb, var(--q-online) 16%, transparent); }
.q-adm-onl.on .n { color: var(--q-strong); }
/* Görünmez = İÇİ BOŞ halka. YALNIZ yönetim panelinde ayırt edilir; başka her ekranda .off ile aynı gri. */
.q-dot.adm-inv { background: var(--q-side-bg); box-shadow: inset 0 0 0 2px var(--q-faint); }

/* ===== (2026-07-28) YÖNETİM PANELİ — MOBİL UYUM =====
   Sorun (kullanıcı bildirdi): admin listeleri dar ekranda bozuluyordu — kullanıcı satırında ad iki
   parçaya bölünüyor, e-posta kırpılıyor, sunucu rozeti ismin üstüne biniyor, sağdaki anahtar+butonlar
   ekran dışına taşıyordu. Panelde HİÇ mobil kuralı yoktu.
   Çözüm: satır DİKEY yığına döner — üstte avatar+kimlik bloğu, ALTINDA tam satır aksiyonlar. */

@media (max-width: 700px) {
    .q-admin-row { flex-wrap: wrap; align-items: flex-start; padding: 11px 12px; gap: 10px; }
    .q-admin-row .nm { flex-wrap: wrap; }              /* ad + rozetler sarmalansın, taşmasın */
    .q-admin-row .em { white-space: normal; overflow-wrap: anywhere; }  /* e-posta kırpılmasın, sarsın */
    /* Hover kutusu dar ekranda sığsın (masaüstünde sağa hizalıydı, mobilde SOLA) */
    .q-adm-srvpop { right: auto; left: 0; min-width: 0; width: min(300px, calc(100vw - 48px)); }
    /* Filtre çubuğu: segment tam satır, tarihler yan yana eşit paylaşır */
    .q-adm-filters { gap: 9px; }
    .q-adm-seg { flex: 1 1 100%; }
    .q-adm-seg button { flex: 1; padding: 8px 6px; }
    .q-adm-onl { flex: 1 1 100%; justify-content: center; padding: 8px 6px; }
    .q-adm-dt { flex: 1 1 calc(50% - 5px); justify-content: space-between; }
    .q-adm-dt input { flex: 1; min-width: 0; }
    /* Geri bildirim kartı başlığı: uzun konu + yazar/tarih alt alta */
    .q-report-card > div:first-child { flex-wrap: wrap; }
}

/* Çok dar (küçük telefon): avatar da üste alınır, her şey tek sütun */
@media (max-width: 400px) {
    .q-adm-dt { flex: 1 1 100%; }                      /* tarihler alt alta — yan yana sıkışmasın */
    .q-adm-srvpop { width: calc(100vw - 40px); }
}


/* ---- #1 (2026-07-30) MESAJ İSTEKLERİ ----
   Kabul bandı composer'ın YERİNE geçer (mesajlar yukarıda normal okunur — Discord modeli).
   Renkler tema değişkenlerinden; açık/koyu temaların hepsinde okunur. */
.q-msgreq-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 0 16px 16px; padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--q-accent) 10%, var(--q-input-bg));
    border: 1px solid color-mix(in srgb, var(--q-accent) 38%, transparent);
}
.q-msgreq-bar-txt { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.45; color: var(--q-text); }
.q-msgreq-bar-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.q-msgreq-btn {
    padding: 8px 16px; border-radius: 8px; cursor: pointer; font-family: inherit;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    background: transparent; color: var(--q-text); border: 1px solid var(--q-border);
    transition: background .13s, border-color .13s, color .13s;
}
.q-msgreq-btn:hover { background: var(--q-hover); }
.q-msgreq-btn.accept { background: var(--q-accent); border-color: var(--q-accent); color: #fff; }
.q-msgreq-btn.accept:hover { filter: brightness(1.1); }
.q-msgreq-btn.block { color: var(--q-danger); border-color: color-mix(in srgb, var(--q-danger) 42%, transparent); }
.q-msgreq-btn.block:hover { background: color-mix(in srgb, var(--q-danger) 14%, transparent); }
/* Arkadaşlar görünümündeki istek listesi */
.q-msgreq-row { cursor: pointer; }


/* ---- #6 (2026-07-30): Arkadaşlar ALT MENÜSÜ (kenar çubuğu) ----
   Sekmeler içerik alanından buraya taşındı; ana öğenin altında girintili, biraz sönük. */
.q-fr-submenu { margin: 0 0 4px 0; }
/* #8 (kullanıcı isteği): girinti YOK — alt öğeler "Arkadaşlar" ile AYNI hizada başlar.
   Ayrım yalnız renk/ağırlıkla (sönük), konumla değil. */
.q-fr-submenu .q-friends-btn.sub { font-size: 13.5px; font-weight: 500; color: var(--q-muted); }
.q-fr-submenu .q-friends-btn.sub:hover { color: var(--q-text); }
.q-fr-submenu .q-friends-btn.sub.on { color: var(--q-strong); }
/* Daraltılmış rayda (yalnız ikon) girinti anlamsız — ortala. */
body.q-dmrail-min .q-dmrail .q-fr-submenu .q-friends-btn.sub { justify-content: center; }


/* ---- #7 (2026-07-30): giriş sağlayıcıları YAN YANA, yalnız ikon ----
   Eskiden her sağlayıcı 48px yüksek tam-genişlik metinli butondu (3-5 tanesi kartı uzatıyordu).
   Artık tek sıra; metin `title` olarak duruyor. Marka renkleri korunur (Google beyaz zemin
   şartı, Apple siyah) — tema değişkeni KULLANILMAZ, bunlar marka kimliği. */
/* TEK SATIR GARANTİSİ (2026-07-30, kullanıcı bug'ı: Battle.net alt satıra düşüyordu).
   Kart içi genişlik 300px (360 − 2×30 padding). 5 ikon × 52px + 4 × 10px boşluk = TAM 300px,
   üstüne 1px kenarlıklar binince taşıp sarıyordu. Artık: `nowrap` + ikonlar KÜÇÜLEBİLİR
   (`flex: 0 1 46px` + `aspect-ratio`) → 5 ikon 262px'e rahat sığar, 6.'sı (Riot onayı gelirse)
   eklenirse sarmak yerine hep birlikte incelir. `box-sizing` kenarlığı ölçünün İÇİNE alır. */
.q-login-provs { display: flex; justify-content: center; flex-wrap: nowrap; gap: 8px; margin-top: 22px; }
.q-login-prov {
    flex: 0 1 46px; width: 46px; min-width: 0; aspect-ratio: 1; box-sizing: border-box;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055); color: #e8ecf1;
    transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.q-login-prov:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.35); text-decoration: none; }
.q-login-prov svg { width: 22px; height: 22px; flex: none; }
.q-login-prov.google { background: #fff; border-color: #fff; }
.q-login-prov.google:hover { background: #f1f1f1; }
.q-login-prov.apple { background: #000; border-color: #2a2a2a; color: #fff; }
.q-login-prov.apple:hover { background: #1c1c1e; }
.q-login-prov.steam { background: #171a21; border-color: #2b3140; color: #fff; }
.q-login-prov.steam:hover { background: #22273044; background-color: #20252f; }
.q-login-prov.epic { background: #2a2a2a; border-color: #3a3a3a; }
.q-login-prov.battlenet { background: #148eff; border-color: #148eff; }


/* ---- #1/#2 (2026-07-30): kullanıcı panelindeki mic/hoparlör/ayarlar ---- */
.q-userpanel .q-up-ctl { position: relative; display: inline-flex; flex: none; }
.q-userpanel .q-userpanel-btn[disabled] { opacity: .38; cursor: default; pointer-events: none; }
.q-userpanel .q-userpanel-btn.off { color: var(--q-danger); }
/* Caret paneldeki 30px butonun sağ-üstüne otursun (dock'takiyle aynı desen, biraz daha küçük). */
.q-userpanel .q-up-ctl > .q-menu { position: absolute; top: -3px; right: -3px; z-index: 4; }
.q-userpanel .q-up-ctl .q-vctl-caret { width: 14px; height: 14px; }
.q-userpanel .q-up-ctl .q-vctl-caret .mud-icon-root { font-size: 13px !important; }
/* Cihaz menüsü ek satırları */
.q-devmenu-sep { height: 1px; margin: 6px 8px; background: var(--q-divider); }
.q-devmenu-slider { display: flex; align-items: center; gap: 8px; padding: 2px 12px 6px; }
.q-devmenu-slider .mud-slider { flex: 1; min-width: 120px; }
.q-devmenu-val { font-size: 11px; color: var(--q-muted); min-width: 24px; text-align: right; }


/* ---- #1 (2026-07-30): cihaz seçimi radio butonlu alt menü (Discord deseni) ---- */
/* Discord hizası: satır metni SOLA yaslı, kontrol (radio/işaret/dişli) EN SAĞDA.
   Önceki halde ikon metnin solundaydı ve sağ taraf boş kalıyordu (kullanıcı bug'ı). */
.q-devradio, .q-devrow { justify-content: space-between; gap: 10px; }
.q-devradio > span:first-child, .q-devrow > span:first-child { flex: 1; min-width: 0; text-align: left; }
.q-devrow.on { color: var(--q-accent); }
/* Dock menusundeki kucuk ac/kapa anahtari (ruzgar / AGC / yanki). MudSwitch KULLANILMADI:
   bu menu tamamen duz butonlardan olusuyor ve MudBlazor'in kendi yuksekligi/kenar boslugu
   satir ritmini bozuyordu. */
.q-devsw { flex: none; width: 28px; height: 16px; border-radius: 999px; position: relative;
    background: var(--q-selected); transition: background-color var(--q-dur, .16s) var(--q-ease, ease); }
.q-devsw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: var(--q-muted);
    transition: transform var(--q-dur, .16s) var(--q-ease, ease), background-color var(--q-dur, .16s) var(--q-ease, ease); }
.q-devsw.on { background: color-mix(in srgb, var(--q-accent) 42%, transparent); }
.q-devsw.on::after { transform: translateX(12px); background: var(--q-accent); }

/* "BU NE ISE YARAR?" ISARETI (2026-09-22) — ac/kapa satirlarinin etiketinin yaninda durur,
   dokununca aciklama satirin ALTINDA acilir. Etiket ile isaret TEK sarmalayicida
   (.q-devlbl); `.q-devrow > span:first-child { flex:1 }` kurali sarmalayiciya uygulanir,
   boylece isaret metnin hemen ardina yapisir, anahtarin yanina kacmaz. */
.q-devlbl { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.q-devinfo { flex: none; width: 15px; height: 15px; border-radius: 999px;
             display: inline-flex; align-items: center; justify-content: center;
             font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
             border: 1px solid currentColor; opacity: .45; }
.q-devinfo:hover, .q-devinfo:focus-visible, .q-devinfo.acik { opacity: 1; }
.q-devinfo:focus-visible { outline: 2px solid var(--q-accent); outline-offset: 1px; }
/* Dokunmatikte 15px'lik daire parmak icin kucuk: gorunumu buyutmadan vurus alani genisler. */
@media (hover: none) { .q-devinfo { position: relative; }
                       .q-devinfo::after { content: ''; position: absolute; inset: -9px; } }
/* "?" BALONU (2026-09-23): eski `.q-devhint` alt satirinin yerini aldi. Balon dilin kendi
   deseninde (`.q-app-ic[data-tip]` / `.q-tipbub`) ama TEMA DEGISKENLERIYLE, yani acik/koyu temayi
   takip eder — tarayicinin varsayilan tooltip'i kullanilmiyor (`title` niteligi de kaldirildi,
   yoksa iki balon cikardi).
   USTTE ve ETIKET GENISLIGINDE olmasi zorunlu: `.q-menu-panel.fx` `overflow-y:auto` oldugundan
   panelin disina tasan her sey KIRPILIR. Ustte yer bol (cihaz listesi + gurultu alt menusu),
   `width:100%` de `.q-devlbl`e gore olctugu icin yatayda tasma imkansiz.
   Hover VE tiklama birlikte: dokunmatikte hover yoktur, `.acik` sinifi (Razor `_bilgi`) o tarafi
   karsilar; masaustunde fareyle ustune gelmek yeter. */
.q-devlbl { position: relative; }
.q-devtip { position: absolute; bottom: calc(100% + 7px); left: 0; width: 100%;
            background: var(--q-side-bg); color: var(--q-text); border: 1px solid var(--q-divider);
            font-size: 11.5px; font-weight: 500; line-height: 1.4; white-space: normal;
            padding: 7px 9px; border-radius: 9px; box-shadow: 0 10px 26px rgba(0,0,0,.38);
            opacity: 0; pointer-events: none; transform: translateY(3px);
            transition: opacity .12s ease, transform .12s ease; z-index: 3; }
.q-devinfo:hover ~ .q-devtip,
.q-devinfo:focus-visible ~ .q-devtip,
.q-devinfo.acik ~ .q-devtip { opacity: 1; transform: none; }
.q-radio {
    flex: none; width: 15px; height: 15px; border-radius: 50%;
    border: 2px solid var(--q-muted); position: relative; transition: border-color .12s;
}
.q-radio.on { border-color: var(--q-accent); }
.q-radio.on::after {
    content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--q-accent);
}
/* Alt menü başlığı iki satır: üstte etiket, altta seçili değer */
.q-submenu-two { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.q-submenu-two .q-submenu-t { font-size: 13.5px; color: var(--q-text); }
.q-submenu-two .q-submenu-s {
    font-size: 11.5px; line-height: 1.35; color: var(--q-muted);
    /* Discord cihaz adını 2-3 satıra sarar; biz kırpıyorduk ("…(03f0:…") — okunmuyordu. */
    white-space: normal; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
/* Cihaz menüsü panelleri: dar/geniş oynamasın, satırlar aynı hizada başlasın. */
.q-devmenu { min-width: 244px; }
.q-devmenu .q-submenu-act { padding: 7px 8px; border-radius: 7px; }
.q-devmenu .q-devmenu-title { padding: 8px 8px 4px; }
.q-devmenu .q-devmenu-slider { padding: 0 8px 6px; }
/* KAMERA ARKAPLANI seçici (kamera chevron menüsü): 3'lü ızgara küçük önizlemeler.
   Bulanıklık önizlemeleri GERÇEK kamera değil — marka renginde temsili kareler (canlı önizleme
   segmentasyonu menüde çalıştırmak gerekirdi: pahalı ve kamera kapalıyken imkânsız). */
.q-bgpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; padding: 2px 8px 6px; }
.q-bgopt {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 3px;
    border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer;
    font-family: inherit; color: var(--q-text); transition: background .12s, border-color .12s;
}
.q-bgopt:hover { background: var(--q-input-bg); }
.q-bgopt.on { border-color: var(--q-accent); background: var(--q-input-bg); }
.q-bgopt-lbl { font-size: 10.5px; line-height: 1.15; text-align: center; color: var(--q-muted); }
.q-bgopt.on .q-bgopt-lbl { color: var(--q-strong); font-weight: 600; }
.q-bgopt-img, .q-bgopt-blur, .q-bgopt-none {
    width: 100%; aspect-ratio: 16 / 10; border-radius: 5px; object-fit: cover; display: block;
}
.q-bgopt-none { display: flex; align-items: center; justify-content: center; background: var(--q-input-bg); color: var(--q-muted); }
.q-bgopt-blur { background: linear-gradient(135deg, var(--q-accent), var(--q-side-bg)); }
.q-bgopt-blur.light { filter: blur(1.2px); }
.q-bgopt-blur.strong { filter: blur(2.6px); }
.q-devmenu-note { padding: 2px 10px 8px; font-size: 10.5px; line-height: 1.4; color: var(--q-faint); }


/* ---- #3 (2026-07-30): ayar diyalogları POPUP ↔ TAM EKRAN ----
   Diyaloglar artık varsayılan POPUP açılır; QDialogExpandBtn tam ekrana geçirir.
   .q-settings fullscreen VARSAYIMIYLA yazılmıştı (height:100%) — popup'ta MudBlazor kabına
   somut yükseklik vermezsek nav/gövde kaydırması bozulup min-height 520px'te sıkışıyor. */
.mud-dialog:not(.mud-dialog-fullscreen):has(.q-settings) {
    height: min(86vh, 780px); height: min(86dvh, 780px);
    border-radius: 14px; overflow: hidden;
}
.mud-dialog:not(.mud-dialog-fullscreen):has(.q-settings) .mud-dialog-content { height: 100%; }

/* Tam ekran/popup düğmesi — ✕ ve ✓ ile aynı görsel dil, onların soluna. */
/* ORTAK BUTON DİLİ (2026-07-31, kullanıcı: "bu efektli buton sırıtıyor, fontuma uymuyor").
   MudButton her yerde KENDİ tipografisini basar (BÜYÜK HARF, geniş harf aralığı, Roboto ağırlıkları,
   ripple) — Manrope'lu sade arayüzde yamalı duruyordu. Bu iki sınıf uygulamanın kendi dili:
   normal yazım, kendi fontumuz, yumuşak kenar. Yeni yerlerde MudButton yerine bunlar tercih edilir. */
.q-btn-soft, .q-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 15px; border-radius: 9px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 600; letter-spacing: 0;
    transition: background var(--q-dur) var(--q-ease), border-color var(--q-dur) var(--q-ease), filter var(--q-dur) var(--q-ease);
}
.q-btn-soft { background: var(--q-input-bg); border: 1px solid var(--q-divider); color: var(--q-text); }
.q-btn-soft:hover { background: var(--q-hover); border-color: var(--q-border); color: var(--q-strong); }
/* (2026-07-31, kullanıcı: "parola belirle butonu uyumsuz, iki renkten teke geç") Dolgu mavi +
   beyaz yazı iki ayrı renk demekti ve yanındaki nötr butonla aynı ailede durmuyordu. Artık TEK
   renk: accent'in kendisi hem yazıda hem zeminin tonunda. Vurgu korunur (nötr butondan ayrılır),
   ama aynı forma sahip olduğu için yan yana uyumlu. */
.q-btn-primary { background: color-mix(in srgb, var(--q-accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--q-accent) 42%, transparent); color: var(--q-accent); }
.q-btn-primary:hover { background: color-mix(in srgb, var(--q-accent) 26%, transparent); border-color: var(--q-accent); }
.q-btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 15px; border-radius: 9px; cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600; background: transparent; border: 1px solid var(--q-danger); color: var(--q-danger); transition: background var(--q-dur) var(--q-ease); }
.q-btn-danger:hover { background: color-mix(in srgb, var(--q-danger) 12%, transparent); }
.q-btn-soft:disabled, .q-btn-primary:disabled, .q-btn-danger:disabled { opacity: .55; cursor: default; }

.q-settings-expand {
    position: absolute; top: 18px; right: 64px; z-index: 20;
    background: var(--q-input-bg); border: 1px solid var(--q-divider); color: var(--q-muted);
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.q-settings-expand:hover { background: var(--q-hover); color: var(--q-strong); }
/* Kullanıcı ayarlarında ayrıca ✓ (kaydet) var → bir sıra daha sola. */
.q-settings:has(.q-settings-save) .q-settings-expand { right: 108px; }
html.q-wco .mud-dialog-fullscreen .q-settings-expand,
html.q-wco.q-dlgfull .q-settings-expand { right: calc(var(--q-wco-r, 148px) + 56px); top: 8px; }
html.q-wco .mud-dialog-fullscreen .q-settings:has(.q-settings-save) .q-settings-expand,
html.q-wco.q-dlgfull .q-settings:has(.q-settings-save) .q-settings-expand { right: calc(var(--q-wco-r, 148px) + 100px); top: 8px; }

/* POPUP diyaloglar: kabukta pencerenin ÜST ŞERİDİNE hiç girmesin — kullanıcı "düğmeler window
   düğmelerinin hemen altında, hoş değil" dedi. Kabı şerit kadar aşağı iter (dikey ortalama korunur,
   yalnız kullanılabilir alan kısalır) → popup'ın kendi ✕/✓/⛶'ü native düğmelerden AÇIKÇA ayrılır. */
/* (2026-07-31 düzeltme, kullanıcı: "profil kartını dikey olarak ortalaman lazım")
   Yalnız ÜSTE dolgu vermek, ortalanmış flex kabında diyaloğu şerit kadar AŞAĞI kaydırıyordu
   (üstte ~68px boşluk, altta ~10px). Dolgu artık simetrik: diyalog hem native pencere
   düğmelerinin altına girmiyor hem de gerçekten dikey ortada duruyor. */
/* +16px: yalnız şerit kadar boşluk bırakmak yetmiyordu — diyaloğun kendi ✕/⛶ düğmeleri
   native küçült/büyüt düğmelerine DEĞİYOR gibi duruyordu (2026-07-31 kullanıcı bildirimi).
   Simetrik olduğu için dikey ortalama bozulmaz. */
html.q-wco .mud-dialog-container:not(:has(.mud-dialog-fullscreen)) { padding-top: calc(var(--q-wco-h, 52px) + 16px); padding-bottom: calc(var(--q-wco-h, 52px) + 16px); box-sizing: border-box; }
/* (2026-08-01, kullanıcı: "sağ üstteki butonlar native düğmelerin altında, popup modda") Dolgu
   tek başına YETMİYORDU: popup ayar diyaloğunun yüksekliği `min(86vh, 780px)` ve vh zoom'dan
   etkilenmediği için diyalog, kabın dolgulu iç alanından TAŞIYOR; flex ortalama taşan kısmı
   yukarı kaydırıp ✕/✓/⛶'ü native pencere düğmelerinin altına sokuyordu. max-height:100% kabın
   İÇ yüksekliğine (dolgular düşülmüş) kelepçeler — yüzde, vh'ın aksine zoom'dan bağımsız doğru. */
html.q-wco .mud-dialog-container:not(:has(.mud-dialog-fullscreen)) .mud-dialog { max-height: 100%; }
/* Mobilde diyaloglar zaten tam ekran (#151) → düğme anlamsız. */
@media (max-width: 560px) {
    .q-settings-expand { display: none !important; }
    /* (2026-07-31) ⛶ gizlenince "Geri al" onun BOŞALAN yuvasına kayar; eskiden 152px'te
       kalıp diğer düğmelerden bir buton boyu uzakta duruyordu. */
    .q-settings-undo { right: 108px; }
    .mud-dialog:not(.mud-dialog-fullscreen):has(.q-settings) { height: 100%; border-radius: 0; }
}


/* ---- #4 (2026-07-30): İLK GİRİŞ SPOT IŞIĞI TURU ----
   Karartma ayrı bir kaplama DEĞİL: "delik" div'ine dev bir box-shadow verilir, gölge tüm ekranı
   karartır, div'in kendi alanı aydınlık kalır. Tek eleman, maske/SVG yok, GPU dostu. */
.q-tour-layer { position: fixed; inset: 0; z-index: 12000; }
.q-tour-hole {
    position: absolute; border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.72);
    transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
                width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
}
/* Nabız gibi atan halka — gözü hedefe çeker. */
.q-tour-ring {
    position: absolute; border-radius: 12px; pointer-events: none;
    border: 2px solid var(--q-accent); animation: q-tour-pulse 1.7s ease-out infinite;
    transition: left .28s cubic-bezier(.4,0,.2,1), top .28s cubic-bezier(.4,0,.2,1),
                width .28s cubic-bezier(.4,0,.2,1), height .28s cubic-bezier(.4,0,.2,1);
}
@keyframes q-tour-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--q-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
html.q-instant .q-tour-ring { animation: none; }

.q-tour-pop {
    position: absolute; box-sizing: border-box; padding: 16px 18px 14px;
    background: var(--q-side-bg); border: 1px solid var(--q-divider); border-radius: 14px;
    box-shadow: 0 18px 48px rgba(0,0,0,.5); animation: q-pop .16s ease;
}
/* Hedefi gösteren ok — balonun hangi kenarında duracağı yön sınıfıyla seçilir. */
.q-tour-pop::after {
    content: ""; position: absolute; width: 12px; height: 12px; background: var(--q-side-bg);
    border: 1px solid var(--q-divider); transform: rotate(45deg);
}
.q-tour-pop.b::after { top: -7px; left: 50%; margin-left: -6px; border-right: 0; border-bottom: 0; }
.q-tour-pop.t::after { bottom: -7px; left: 50%; margin-left: -6px; border-left: 0; border-top: 0; }
.q-tour-pop.r::after { left: -7px; top: 50%; margin-top: -6px; border-right: 0; border-top: 0; }
.q-tour-pop.l::after { right: -7px; top: 50%; margin-top: -6px; border-left: 0; border-bottom: 0; }

.q-tour-title { font-size: 15.5px; font-weight: 600; color: var(--q-strong); margin-bottom: 5px; }
.q-tour-text { font-size: 13.5px; line-height: 1.55; color: var(--q-muted); min-height: 42px; }
.q-tour-dots { display: flex; gap: 5px; margin-bottom: 11px; }
.q-tour-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--q-divider); transition: width .15s, background .15s; }
.q-tour-dot.on { width: 16px; border-radius: 3px; background: var(--q-accent); }
.q-tour-nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.q-tour-skip { flex: 1; text-align: left; margin: 0; font-size: 13px; }
.q-tour-next {
    padding: 8px 16px; border: 0; border-radius: 8px; cursor: pointer; font-family: inherit;
    background: var(--q-accent); color: #fff; font-size: 13.5px; font-weight: 600;
}
.q-tour-next:hover { filter: brightness(1.08); }
.q-tour-back {
    padding: 8px 14px; border: 1px solid var(--q-border); border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--q-muted); font-size: 13.5px; font-family: inherit;
}
.q-tour-back:hover { background: var(--q-hover); color: var(--q-text); }

    /* ── Landing / tanıtım kabuğu (2026-08-08) ───────────────────────────────────
       TASARIM KARARI: .q-land, .q-legal'dan BAĞIMSIZ yaşar. İlk denemede ikisi
       birlikte veriliyordu; .q-legal'ın metin-belgesi tipografisi (h1 26px, h2 17px,
       p{margin:8px 0}, a{color:accent} — hepsi (0,1,1) özgüllüğünde) landing'in
       (0,1,0) kurallarını EZDİ: başlıklar küçüldü, ortalanan bloklar sola kaydı,
       kart yazıları maviye döndü. Tarayıcıda getComputedStyle ile ÖLÇÜLDÜ (göz
       kararı değil). Özgüllük yarıştırmak yerine miras kesildi.
       goglisLegal.set() ID ile çalışır (#q-legal) → dil mekaniği aynen sürer;
       .lang-* görünürlük kuralları .q-land için aşağıda ayrıca tanımlı. */
    /* SAYFA KENDİ KABINDA DEĞİL, TARAYICIDA KAYAR (2026-08-18, kullanıcı: "en aşağı
       çekmeme rağmen footer görünmüyor"). Sayfa 100dvh'lik bir İÇ kaydırma kabıydı: gövde
       overflow:hidden olduğu için tarayıcının kendi kaydırıcısı hiç doğmuyor, kabın alt kenarı
       görünür alanın altına taşarsa en dipteki alt bilgi de ulaşılamaz oluyordu (ölçüldü: içerik
       4208px, kap 1080px, belge 1080px'te sabit). Tanıtım/indirme sayfaları uygulama kabuğu
       değil, normal belge gibi akmalı: tarayıcı kaydırması hem alt bilgiyi hep ulaşılır kılar
       hem mobil adres çubuğunu kendi halleder. */
    .q-land {
        min-height: 100vh; min-height: 100dvh; overflow: visible;
        /* YATAY KAYDIRMA YOK (2026-08-21): dekoratif aurora küreleri kenardan BİLEREK taşıyor
           (o2 sağdan -110px) ve 1500px altındaki ekranlarda sayfayı yatayda kaydırılabilir
           yapıyordu (ölçüldü: 1280px'te 93px, 1418px'te 24px kayma). `clip` kırpar ama
           `hidden`ın aksine kaydırma kabı yaratmaz — sticky/fixed davranışı bozulmaz. */
        overflow-x: clip;
        scrollbar-width: thin; scrollbar-color: var(--q-scroll, rgba(255,255,255,0.16)) transparent;
        padding: 0; color: var(--q-text, #e8e2de);
        background:
            radial-gradient(1100px 620px at 12% -8%, color-mix(in srgb, var(--q-accent, #33a8f2) 22%, transparent), transparent 60%),
            radial-gradient(900px 560px at 108% 14%, rgba(126,151,172,.16), transparent 62%),
            radial-gradient(1000px 700px at 50% 118%, color-mix(in srgb, var(--q-accent-2, #1c72bd) 18%, transparent), transparent 64%),
            linear-gradient(160deg, #17181c 0%, #101114 52%, #121417 100%);
        font-family: 'Goglis Sans', system-ui, sans-serif;
    }
    /* Zemin efekti kaydırma ile kaymasın (sayfa uzun): absolute → fixed */
    .q-land .q-login-fx { position: fixed; z-index: 0; }
    .q-land a { text-decoration: none; }
    .q-land a:hover { text-decoration: none; }

    /* Üst şerit */
    /* ÜST ŞERİT TAM GENİŞLİK (2026-08-18, kullanıcı: "en üstte tam yayılmamış çizgi var").
       Şerit, 1080px'lik ortalı kapsayıcının İÇİNDEYDİ; alt çizgisi de o kadar uzuyor ve geniş
       ekranda iki yanda boşluk kalıyordu (ölçüldü: 1920px ekranda çizgi 1076px, iki yanda 417px
       boşluk). Şerit artık kapsayıcının dışında ve tam genişlikte; içerik hizasını iç sarmalayıcı
       (.q-land-navin) veriyor, yani görsel hiza aynı kaldı, çizgi kenardan kenara uzuyor. */
    .q-land-nav { display: block; padding: 0; margin: 0; }
    .q-land-navin { max-width: 1080px; margin: 0 auto; padding: 18px 20px 6px;
        display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .q-land-brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: .3px; color: var(--q-strong, #fff); }
    .q-land-navr { display: flex; align-items: center; gap: 8px; }
    .q-land-lang { margin: 0 4px 0 0; }
    .q-land-lang .q-legal-lbtn { padding: 3px 9px; font-size: 11.5px; }

    @media (max-width: 640px) {
        .q-land-nav { flex-wrap: wrap; }
        .q-land-navr { width: 100%; justify-content: space-between; }
    }

/* ── /download tanıtım kartları (2026-08-08) ─────────────────────────────────────
   .q-land iskeletinin üstünde yaşar; platform başına büyük kart + "senin cihazın"
   vurgusu (sunucuda UA'dan bulunur, yanlış tahmin zararsız — hepsi görünür kalır). */

/* .q-land dil mekaniği (.q-legal'daki ikizinin bağımsız kopyası; #q-legal id'si aynı
   kaldığı için goglisLegal.set/auto hiç değişmeden çalışır). */
.q-land .lang-tr, .q-land .lang-de, .q-land .lang-ru, .q-land .lang-fa { display: none; }
.q-land.tr span.lang-tr, .q-land.tr div.lang-tr, .q-land.tr h1 .lang-tr { display: inline; }
.q-land.tr .lang-en { display: none; }
.q-land.de span.lang-de, .q-land.de div.lang-de, .q-land.de h1 .lang-de { display: inline; }
.q-land.de .lang-en { display: none; }
.q-land.ru span.lang-ru, .q-land.ru div.lang-ru, .q-land.ru h1 .lang-ru { display: inline; }
.q-land.ru .lang-en { display: none; }
.q-land.fa span.lang-fa, .q-land.fa div.lang-fa, .q-land.fa h1 .lang-fa { display: inline; }
.q-land.fa .lang-en { display: none; }
.q-land::-webkit-scrollbar { width: 8px; }
.q-land::-webkit-scrollbar-track { background: transparent; }
.q-land::-webkit-scrollbar-thumb { background: var(--q-scroll, rgba(255,255,255,0.14)); border-radius: 8px; }
.q-land::-webkit-scrollbar-thumb:hover { background: var(--q-scroll-hover, rgba(255,255,255,0.24)); }

/* Bağlantı rozeti menüsü: ölçüm bloğu ayracı + zayıf bağlantı ipucu + yeniden bağlanma noktası. */
.q-ping-sep { height: 1px; background: var(--q-divider, rgba(255,255,255,.12)); margin: 8px 0 6px; }
.q-ping-tip { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--q-muted); max-width: 260px; }
.q-ping-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; animation: q-ping-pulse 1s ease-in-out infinite; }
@keyframes q-ping-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.q-ping-ms b.warn { color: #e8b64c; }
.q-ping-ms b.bad { color: #e05b5b; }

/* ── TANITIM SAYFASI: CANLANDIRMA (2026-08-09) ────────────────────────────────────────────
   Kullanıcı: "bizimkinde biraz ölü ruh var". Discord'un ana sayfasıyla yan yana bakınca fark
   netti: onlarda her bölüm DOYGUN RENKLİ dev bir kart, kahramanda karakterler/proplar var,
   tipografi devasa ve ritim sol-sağ değişimli. Bizde baştan sona aynı koyu zemin, tek düz
   ekran görüntüsü, her şey ortada → göz hiçbir yerde uyanmıyordu.
   Bizim Discord'da OLMAYAN kozumuz: 1.652 elle çizilmiş Goglis emojisi. Onların 3B
   karakterlerinin bizdeki karşılığı bu — sprite'tan 10 tanesi ayrı dosyalara çıkarıldı
   (toplam 10 KB) ve prop olarak süzülüyor. */

/* Süzülen emoji propları — kendi sanatımız. transform/opacity dışına çıkmaz (ucuz). */
@keyframes q-land-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

/* Kaydırınca beliren giriş — TABAN DURUM GÖRÜNÜR (JS hiç koşmazsa içerik yine okunur;
   iskelet dersinin aynısı: görünmezlik varsayılan yapılırsa sayfa boş kalabilir). */
.q-rv { animation: q-rv-in .5s var(--q-ease) both; }
@keyframes q-rv-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .q-rv { animation: none; } }

/* Konuşma çubukları — YALNIZ konuşan satırda oynar (sahte hareket değil, anlam taşıyor) */
@keyframes q-mock-bar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* Yayın vitrini */
@keyframes q-mock-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ── PASİF (disabled) OKUNURLUĞU (2026-08-10, kullanıcı: "koyu temalarda pasif butonun texti
   görünmüyor") ────────────────────────────────────────────────────────────────────────────────
   ÖLÇÜLDÜ (koyu okyanus teması, kontrast oranı):
     MudBlazor pasif metin  --mud-palette-text-disabled: rgba(255,255,255,0.2)  → 1.86:1
     MudBlazor pasif aksiyon                                                    → 2.22:1
     .q-send-btn:disabled (renk + opacity .55)                                  → 2.26:1
     ses dock butonları (opacity .38)                                           → ~1.9:1
   3:1'in altı gözde "yok" gibi okunur; 1.86 fiilen görünmez. İki ayrı kaynak vardı:
   (a) MudBlazor'ın koyu palet varsayılanı hiç ezilmemişti (snackbar'da yaşanan durumun aynısı),
   (b) bizim kurallarımız rengi değil SAF OPACITY'yi kısıyordu — opacity metni de zemine karıştırır.
   ÇÖZÜM: pasif metin artık tema değişkeni `--q-muted` (her temada, açık ve koyu, tanımlı ve
   okunur) + opacity tabanları yükseltildi. Mud'un token'ını EZMİYORUZ: token :root'ta yaşıyor ve
   açık/koyu ayrımını MudThemeProvider yapıyor; elemanı doğrudan boyamak her iki modda da doğru. */
.mud-button-root:disabled,
.mud-button-root[disabled],
.mud-button-root.mud-disabled,
.mud-button-root:disabled .mud-button-label,
.mud-button-root.mud-disabled .mud-button-label { color: var(--q-muted) !important; }
/* MudBlazor ikon butonu: rengi ikonun kendisi taşır */
.mud-icon-button:disabled .mud-icon-root,
.mud-icon-button.mud-disabled .mud-icon-root { color: var(--q-muted) !important; }

.q-send-btn:disabled { color: var(--q-muted); opacity: 1; }
.q-vctl:disabled { opacity: .62; }
.q-userpanel .q-userpanel-btn[disabled] { opacity: .6; }
.q-pca-icon:disabled { opacity: .62; }
.q-btn-soft:disabled, .q-btn-primary:disabled, .q-btn-danger:disabled { opacity: .72; }
.q-menu-item.disabled { opacity: .72; }
.q-verifybar-btn[disabled] { opacity: .78; }
.q-login-btn.q-invite-accept:disabled { opacity: .78; }
.q-lfg-btn[disabled] { color: var(--q-text); opacity: .8; }

/* KAYIT SÜRÜYOR düğmesi (2026-08-10 kapanış turu): markup'ta `live` sınıfı vardı ama CSS'te
   hiçbir karşılığı yoktu — kayıt açıkken düğme kapalıyken tamamen aynı görünüyordu; tek ayrım
   ikonun kırmızıya dönmesiydi ve bu, kalabalık bir dock'ta fark edilmiyordu. Kayıt sürerken
   düğme kırmızı bir zemin + hafif nabızla kendini belli eder (hareketi kısıtlı kullanıcılarda
   nabız durur, renk kalır). */
.q-vctl.live { background: color-mix(in srgb, var(--q-danger) 22%, transparent); border-color: color-mix(in srgb, var(--q-danger) 55%, transparent); animation: q-recpulse 2s ease-in-out infinite; }
@keyframes q-recpulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--q-danger) 45%, transparent); } 50% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) { .q-vctl.live { animation: none; } }

/* TURUNCU vs KIRMIZI SUSTURMA (2026-08-11, kullanici: "turuncu mute kirmizi mute yan yana
   olsun ... ben susturdum bunu, buda kendinide susturmus goreyim"). Iki AYRI durum, iki AYRI
   renk, YAN YANA. Turuncu = yetkilinin karari (kisi kaldiramaz), kirmizi = kisinin kendi
   karari. Tek rozete indirgemek bilgi kaybi olurdu. */
.q-vidmics { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; z-index: 3; }
.q-vidmics .q-vidmic { position: static; }
.q-vidmic.forced { background: rgba(230, 140, 30, .95); color: #1b1206; }
/* Karodaki susturma dugmesi ACIKKEN turuncu: "bu kisi su an benim susturmam altinda". */
.q-vidmute.on { background: rgba(230, 140, 30, .95); color: #1b1206; opacity: 1; }
.q-vidtile:hover .q-vidmute.on, .q-vidmute.on { display: inline-flex; }

/* ===== KULLANICI METNİNDE OTOMATİK YÖN — HER DİLDE (2026-09-11, Farsça ile birlikte) =====
   Farsça/Arapça/İbranice yazılan mesajlar ve girişler, arayüz dili ne olursa olsun sağdan
   sola dizilsin: `unicode-bidi: plaintext` her paragrafın temel yönünü İLK GÜÇLÜ HARFTEN alır
   (tarayıcının dir="auto"su gibi) ve başlangıç hizası o yöne göre çözülür. Latin başlayan metin
   bugünkü gibi LTR kalır — Türkçe/İngilizce/Almanca/Rusça mesajlarda görünür hiçbir değişiklik yok.
   `pre`/kod blokları BİLEREK dışarıda: kod her zaman soldan sağa. (unicode-bidi kalıtılmaz, yani
   .q-md'ye verilen değer içindeki pre'ye sızmaz.) */
.q-md, .q-md :is(p, li, blockquote, h1, h2, h3, h4, h5, h6, td, th), input, textarea {
    unicode-bidi: plaintext;
}

/* ===== FARSÇA — METİN SAĞDAN SOLA, YERLEŞİM AYNI (2026-09-11, kullanıcı kararı) =====
   Arayüz AYNALANMAZ: dir="rtl" YOK; kolonlar, menüler, ikonlar ve flex/grid SIRASI bugünkü gibi
   kalır (o sıra `direction`'a bağlıdır, unicode-bidi'ye değil). Yalnız metin taşıyan öğelerin
   paragraf yönü içerikten belirlenir → Farsça satır sağdan sola dizilir, noktalama doğru uca
   düşer; Latin/sayı içerik LTR kalır. Tam ayna yerleşim ayrı bir tur (kullanıcı şimdilik bunu seçti).
   :lang(fa) iki kaynaktan beslenir: uygulamada <html lang="fa"> (goglisLang.applyDoc + App.razor
   satır içi betiği), statik sayfalarda #q-legal kapsayıcısının lang niteliği (goglisLegal.set).
   :where() özgüllüğü 0 — bileşenlerin kendi kurallarıyla yarışmaz (zaten unicode-bidi yazan yok). */
:where(p, div, span, a, button, label, li, dt, dd, h1, h2, h3, h4, h5, h6, td, th, small, strong, em, b, i, figcaption, blockquote, summary, option, legend):lang(fa) {
    unicode-bidi: plaintext;
}
/* Harf aralığı Farsça harflerin BİTİŞMESİNİ bozar (büyük harfli etiketlerdeki letter-spacing). */
:lang(fa) { letter-spacing: normal !important; }

/* ---- DENEYİM ANKETİ (2026-09-12): uzun görüşme bitince yıldız + yorum (ExperienceFeedbackDialog).
   Sınıf öneki `q-survey` BİLEREK seçildi: `q-expr*` ifade panelinin, `q-rate*` mağaza puanlama
   isteminin — üçü farklı özellik, adları karışmasın (tuzak #12). */
.q-survey { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 2px 0; }
.q-survey-kind {
    font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--q-accent); font-weight: 700;
}
.q-survey-q { font-size: 16px; font-weight: 600; color: var(--q-strong); margin: 6px 0 10px; }
/* MudRating'in kendi rengi tema ile uyuşmuyor — dolu yıldız marka rengi, boş yıldız soluk. */
.q-survey-stars .mud-rating-item .mud-icon-root { color: var(--q-faint); }
.q-survey-stars .mud-rating-item.mud-rating-item-active .mud-icon-root,
.q-survey-stars .mud-rating-item:hover .mud-icon-root { color: var(--q-accent); }
.q-survey-hint { font-size: 12.5px; color: var(--q-muted); min-height: 18px; margin-top: 2px; }
.q-survey-note {
    width: 100%; margin-top: 12px; padding: 9px 11px; resize: vertical; min-height: 68px;
    font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--q-strong);
    background: var(--q-input-bg, rgba(0,0,0,.18)); border: 1px solid var(--q-border); border-radius: 8px;
    outline: none; text-align: start;
}
.q-survey-note:focus { border-color: var(--q-accent); }
/* Yönetim paneli geri bildirim satırında deneyim yıldızları (klasik geri bildirimde çizilmez). */
.q-fb-stars { font-size: 13px; letter-spacing: 1px; color: var(--q-accent); white-space: nowrap; }
.q-fb-stars-off { color: var(--q-faint); }

/* DM/ses karosunda KENDİ ping rozetim (2026-09-12, Fatih isteği + ekran görüntüsü).
   Yalnız yerel karoda çizilir — ölçüm tarayıcının kendi bağlantısına ait, başkasınınkini bilmeyiz.
   Renk eşikleri dock'taki PingBadge ile AYNI (60/150 ms) ki iki gösterge çelişmesin. */
.q-vidping {
    /* SAG UST (2026-09-20, Fatih: "ping sag ustte olsun karo bolumunun"): sag ALT kose
       kalabalikti — mikrofon rozeti, izleyen listesi ve kose dugmeleri hep orada; ping bir
       sira yukari itilerek sigdiriliyordu. Ust kose bos. */
    position: absolute; right: 8px; top: 8px; z-index: 3;
    background: rgba(0,0,0,0.55); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 7px; white-space: nowrap; pointer-events: none;
}
.q-vidping.warn { color: #f0b232; }
.q-vidping.bad { color: #f2555a; }
/* (Ping artık ÜSTTE olduğu için mikrofon rozetiyle çakışma kuralı kaldırıldı — 2026-09-20.) */
/* Üye listesinde ülke rozeti (2026-09-12): bayrak emojisi + ISO kodu. Nötr renk — ad satırındaki
   yönetici/ban/bot çipleriyle yarışmasın, yalnız bilgi olarak dursun. */
/* Surum notlari kutusunun dibindeki atif satiri (Twemoji / CC-BY). Sessiz dursun: metnin
   kendisi degil, yanindaki lisans baglantisi tiklanabilir olsun yeter. */
.q-about-attr { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--q-glass-border, rgba(255,255,255,.08));
                font-size: 11px; color: var(--q-muted, #9aa0aa); }
.q-about-attr a { color: var(--q-muted, #9aa0aa); text-decoration: underline; text-underline-offset: 2px; }
.q-about-attr a:hover { color: var(--q-strong, #e8ecf1); }

.q-adm-cc { font-size: 10.5px; letter-spacing: .02em; color: var(--q-muted); white-space: nowrap;
             /* Bayrak fontu YIGININ BASINDA: unicode-range onu yalniz bayrak karakterlerine
                kapatir, kod harfleri (TR) yine govde fontuyla cizilir. */
             /* `inherit` bir font LISTESI icinde gecersizdir (kural komple duserdi);
                govde yigini birebir tekrarlanir. */
             font-family: 'Twemoji Country Flags', 'Goglis Sans', system-ui, sans-serif; }

/* ================= BULUT YÜZEY DİLİ + YAZI + HAREKET (2026-10-18) =================
   Onaylı tasarım atlasının kuralları: başlık/etiket/düğme FREDOKA ('Goglis Display'), yumuşak
   yuvarlatılmış yüzeyler, kısa ve yaylı geçişler. "Canlı ama sakin": hareket yalnız bir OLAY
   olduğunda (konuşma, tepki, okunmamış, yazıyor); okuma alanında sürekli dönen bir şey yok —
   2026-08-29 ölçümünü hatırla: tek bir sonsuz animasyon bile GPU'yu hiç uyutmaz. Dekoratif
   döngüler sınırlı tur oynar. Hepsi prefers-reduced-motion ve Ayarlar → "Arayüz animasyonları"
   (html.q-instant) ile durur. */
:root {
    --q-online: #22C98A; --q-amber: #FFB72E; --q-danger: #FF4F6D; --q-danger-soft: #FF8FA3;
    --q-display: 'Goglis Display', 'Goglis Sans', ui-rounded, system-ui, sans-serif;
    --q-ease-soft: cubic-bezier(.22,.8,.24,1);
}
/* Yazı: tombul başlıklar + Fredoka'lı büyük harf etiketler (tasarımdaki m-label / r-cat). */
.q-brandname, .gp-brand, .q-bye-bye, .q-tpick-title, .q-tour-title, .q-empty-title, .q-capqueue-title,
.q-settings-h, .q-settings-h3, .q-chtitle, .q-srvheader-name, .q-motitle-t, .q-mdhead-t,
.q-lvlup-title, .q-lay-name, .mud-dialog-title, .q-legal h1 { font-family: var(--q-display); font-weight: 600; letter-spacing: .2px; }
.q-cat, .q-cathdr, .q-online-head, .q-settings-navtitle, .q-settings-field > label, .q-menu-head, .q-pcard2-h,
.q-active-h, .q-stickers-cat, .q-createsrv-label, .q-login-thead, .q-adm-srvhead, .q-capsrv-lbl,
.q-acc-h, .q-devmenu-title { font-family: var(--q-display); font-weight: 600; letter-spacing: .9px; }
.mud-button-label, .q-theme-btn, .q-tpick-go, .q-login-btn, .q-thcard { font-family: var(--q-display); font-weight: 600; letter-spacing: .2px; }
.q-brandname { font-size: 17px; }

/* Yüzeyler (masaüstü): mobil kabuğun kendi tam ekran kuralları ezilmesin diye yalnız geniş ekranda. */
@media (min-width: 701px) and (min-height: 521px) {
    .mud-dialog:not(.mud-dialog-fullscreen) { border-radius: 22px; }
    .q-menu-panel, .q-ctx-panel, .q-mention-pop, .q-pp, .q-minipp { border-radius: 16px; }
    .q-composer { border-radius: 18px; }
    .q-theme-btn, .q-settings-select { border-radius: 12px; }
    .q-stat { border-radius: 16px; }
}
/* Tepki çipleri hap biçiminde (her ekranda). */
.q-react { position: relative; border-radius: 999px; }

/* KONUŞMA HALKASI: konuşanın avatarından kabuk halkaları gibi iki dalga, 1,8 sn (eski tek nabzın yerine). */
@keyframes q-speak-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--q-online) 60%, transparent), 0 0 0 0 color-mix(in srgb, var(--q-online) 40%, transparent); }
    55%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--q-online) 0%, transparent), 0 0 0 2.5px color-mix(in srgb, var(--q-online) 26%, transparent); }
    100% { box-shadow: 0 0 0 7px transparent, 0 0 0 8px transparent; }
}
.q-vuav.speaking, .q-speakring { animation-duration: 1.8s; }
.q-vidtile.av.speaking .q-vidav { animation: q-speak-ring-lg 1.8s var(--q-ease-soft) infinite; }
@keyframes q-speak-ring-lg {
    0%   { box-shadow: 0 0 0 3px var(--q-online), 0 0 0 3px color-mix(in srgb, var(--q-online) 55%, transparent); }
    100% { box-shadow: 0 0 0 3px var(--q-online), 0 0 0 20px transparent; }
}

/* TEPKİ PITIRTISI: çipe basınca zıplar (450 ms); kalpler BULUT RÖTUŞ bloğunda (H3, .q-rx-puff). goglis.js data-pop basar
   (SINIF DEĞİL: class Blazor'ın ağacında, bir sonraki diff JS'in eklediğini siler). */
.q-react[data-pop] { animation: q-rx-pop .45s var(--q-ease-spring); }
@keyframes q-rx-pop { 0% { transform: scale(1); } 40% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* SALYANGOZ YAZIYOR: "yazıyor…" göstergesinde minik salyangoz ileri geri süzülür (2,4 sn). Yalnız
   biri yazarken (.on) koşar — gösterge kimse yazmazken de DOM'da (opacity 0) duruyor. */
.q-typing-snail { position: relative; display: inline-block; flex: none; width: 36px; height: 18px; border-radius: 999px; background: var(--q-hover); overflow: hidden; }
.q-typing-snail .gsnail { position: absolute; left: 3px; top: 2px; width: 18px; height: 14px; filter: none; }
.q-typing.on .q-typing-snail .gsnail { animation: q-typesnail 2.4s ease-in-out infinite; }
@keyframes q-typesnail {
    0%, 100% { transform: translateX(0) scaleX(1); }
    46% { transform: translateX(12px) scaleX(1); } 50% { transform: translateX(12px) scaleX(-1); }
    96% { transform: translateX(0) scaleX(-1); }
}

/* OKUNMAMIŞ KALP ATIŞI: rozet iki kez atar, dinlenir; üç tur sonra durur (sürekli yanıp sönmez). */
.q-tab-badge, .q-notif-badge { animation: q-heartbeat 4s ease-in-out 3; }
@keyframes q-heartbeat { 0%, 30%, 100% { transform: scale(1); } 6% { transform: scale(1.22); } 12% { transform: scale(1); } 18% { transform: scale(1.15); } }

/* SÜZÜLEN IŞILTI: yalnız karşılama ekranında, yıldızcıklar yavaşça parlayıp söner (birkaç tur). */
.q-empty-wall::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image:
        radial-gradient(2px 2px at 14% 22%, color-mix(in srgb, var(--q-accent) 70%, #fff) 50%, transparent 52%),
        radial-gradient(1.6px 1.6px at 31% 64%, color-mix(in srgb, var(--q-accent) 60%, #fff) 50%, transparent 52%),
        radial-gradient(2.2px 2.2px at 72% 18%, color-mix(in srgb, var(--q-accent-2, var(--q-accent)) 70%, #fff) 50%, transparent 52%),
        radial-gradient(1.6px 1.6px at 86% 58%, color-mix(in srgb, var(--q-accent) 60%, #fff) 50%, transparent 52%),
        radial-gradient(1.8px 1.8px at 56% 84%, color-mix(in srgb, var(--q-accent-2, var(--q-accent)) 60%, #fff) 50%, transparent 52%);
    opacity: .55; animation: q-twinkle 4.5s ease-in-out 4;
}
@keyframes q-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* MESAJ SÜZÜLMESİ: metin aşağıdan hafifçe yükselir. Satırın KENDİSİNE transform VERİLMEZ (2026-07-30
   dersi: transform'lu .q-msg, içindeki position:fixed tepki seçicisinin konum referansını çalıyordu);
   yalnız metin gövdesi (.q-md) kayar, dolgu modu yok → kalıcı yığın bağlamı da yok. */
.q-msg .q-md { animation: q-md-rise .34s var(--q-ease-soft); }
@keyframes q-md-rise { from { transform: translateY(6px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .q-react[data-pop], .q-typing.on .q-typing-snail .gsnail,
    .q-tab-badge, .q-notif-badge, .q-empty-wall::before, .q-msg .q-md,
    .q-vidtile.av.speaking .q-vidav { animation: none !important; }
}
html.q-instant .q-react[data-pop],
html.q-instant .q-typing.on .q-typing-snail .gsnail, html.q-instant .q-tab-badge, html.q-instant .q-notif-badge,
html.q-instant .q-empty-wall::before, html.q-instant .q-msg .q-md,
html.q-instant .q-vidtile.av.speaking .q-vidav { animation: none !important; }

/* ================= BULUT MOBİL (2026-10-18, onaylı atlas "Mobil") =================
   Diyaloglar ALT SAYFA, menüler EYLEM SAYFASI, mesaja uzun bas → eylem sayfası, sağa kaydır →
   yanıtla, sesteyken ses hapı, bildirim balonları alt menünün üstünde. Dosyanın SONUNDA ve
   !important: önceki mobil blokların dialog/menü konumlarını bilerek ezer. */
.q-mopill { display: none; }
@keyframes q-sheet-up { from { transform: translateY(46px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes q-sheet-bd { from { opacity: 0; } to { opacity: 1; } }
/* Mesaj eylem sayfası (yalnız mobilde açılır ama stil koşulsuz — tek örnek, kök seviyede). */
.q-msheet-bd { position: fixed; inset: 0; z-index: 1290; background: rgba(6,12,34,.42); animation: q-sheet-bd .18s ease; }
.q-msheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1291; max-height: 82dvh; overflow-y: auto;
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0;
    background: var(--q-glass-menu); border-top: 1px solid var(--q-glass-border); box-shadow: 0 -18px 50px rgba(0,0,0,.32);
    animation: q-sheet-up .26s var(--q-ease-soft); }
.q-msheet-grab { width: 42px; height: 5px; border-radius: 3px; margin: 0 auto 10px; background: color-mix(in srgb, var(--q-text) 24%, transparent); }
.q-msheet-rx { display: flex; justify-content: space-between; gap: 6px; padding: 4px 2px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--q-divider); }
.q-msheet-rx button { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--q-hover); color: var(--q-muted); cursor: pointer; transition: transform .18s var(--q-ease-spring); }
.q-msheet-rx button:active { transform: scale(.88); }
.q-msheet-rx .gg-emoji { width: 30px; height: 30px; vertical-align: middle; }
.q-msheet-row { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; padding: 13px 10px; border: 0; border-radius: 14px; background: none;
    font: inherit; font-size: 15.5px; font-weight: 600; color: var(--q-text); text-align: left; cursor: pointer; }
.q-msheet-row:active { background: var(--q-hover); }
.q-msheet-row .mud-icon-root, .q-msheet-row .gg-icon { font-size: 21px; color: var(--q-muted); flex: none; }
.q-msheet-row.danger, .q-msheet-row.danger .mud-icon-root { color: var(--q-danger); }
.q-msheet-tip { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; font-size: 14.5px; color: var(--q-text); }
.q-msheet-tip .gg-emoji { width: 30px; height: 30px; flex: none; }
html.q-instant .q-msheet, html.q-instant .q-msheet-bd { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .q-msheet, .q-msheet-bd { animation: none; } }

@media (max-width: 700px), (max-height: 520px) {
    /* --- Diyalog = alt sayfa (tam ekran ayar/profil diyalogları HARİÇ) --- */
    .mud-dialog-container { align-items: flex-end !important; }
    .mud-dialog:not(.mud-dialog-fullscreen):not(:has(.q-settings)):not(:has(.q-pcard2)) {
        position: relative; width: 100vw !important; max-width: 100vw !important; margin: 0 !important;
        max-height: 94dvh !important; border-radius: 26px 26px 0 0 !important; border-bottom: 0 !important;
        padding-top: 14px; padding-bottom: env(safe-area-inset-bottom);
        animation: q-sheet-up .26s var(--q-ease-soft);
    }
    .mud-dialog:not(.mud-dialog-fullscreen):not(:has(.q-settings)):not(:has(.q-pcard2))::before {
        content: ""; position: absolute; top: 6px; left: 50%; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px;
        background: color-mix(in srgb, var(--q-text) 24%, transparent); pointer-events: none;
    }
    /* --- Menü = eylem sayfası (ifade paneli HARİÇ — composer'a göre kendi yerleşimi var) --- */
    .q-menu-panel:not(.q-menu-expr), .q-ctx-panel {
        position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important;
        bottom: calc(8px + env(safe-area-inset-bottom)) !important; width: auto !important; min-width: 0 !important; max-width: none !important;
        max-height: 72dvh !important; overflow-y: auto; border-radius: 22px !important; padding: 20px 8px 8px !important;
        transform: none; animation: q-sheet-up .24s var(--q-ease-soft) !important;
    }
    .q-menu-panel:not(.q-menu-expr)::before, .q-ctx-panel::before {
        content: ""; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px;
        background: color-mix(in srgb, var(--q-text) 24%, transparent); pointer-events: none;
    }
    .q-menu-backdrop:has(+ .q-menu-panel:not(.q-menu-expr)) { background: var(--q-sheet-scrim, rgba(6,12,34,.36)); animation: q-sheet-bd .18s ease; }
    .q-menu-panel:not(.q-menu-expr) .q-menu-item, .q-ctx-panel .q-menu-item { min-height: 46px; font-size: 15px; }
    /* --- Bildirim balonları alt menünün ÜSTÜNDE --- */
    .mud-snackbar-location-bottom-right, .mud-snackbar-location-bottom-left, .mud-snackbar-location-bottom-center {
        bottom: calc(var(--q-mobar-h) + 10px + env(safe-area-inset-bottom)) !important;
    }
    /* --- Uzun basışta metin seçimi/iOS balonu açılmasın (kopyalama eylem sayfasında) --- */
    .q-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    /* --- Sağa kaydır → yanıtla: satırın solunda beliren yanıt oku --- */
    .q-msg[data-swipe]::before {
        content: ""; position: absolute; left: -38px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
        background: var(--q-hover) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237E8BB0'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E");
        opacity: .5; transition: opacity .12s;
    }
    .q-msg[data-swipe="2"]::before { opacity: 1; background-color: color-mix(in srgb, var(--q-accent) 22%, transparent); }
    .q-msg { position: relative; }
    /* --- Ses hapı (composer'ın hemen üstü) --- */
    .q-mopill { display: flex; align-items: center; gap: 10px; flex: none; margin: 0 10px 6px; padding: 7px 8px 7px 10px; border-radius: 16px;
        background: color-mix(in srgb, var(--q-online) 13%, var(--q-chat-bg)); border: 1px solid color-mix(in srgb, var(--q-online) 30%, transparent); }
    .q-mopill .q-speaksnail { width: 30px; height: 30px; }
    .q-mopill-info { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
    .q-mopill-info b { color: var(--q-online); font-size: 13px; font-weight: 700; }
    .q-mopill-info small { color: var(--q-muted); font-size: 11.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mopill-btn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; background: var(--q-hover); color: var(--q-text); cursor: pointer; }
    .q-mopill-btn.off { color: var(--q-danger); }
    .q-mopill-btn.end { background: var(--q-danger); color: #fff; }
}
html.q-instant .mud-dialog, html.q-instant .q-menu-panel, html.q-instant .q-ctx-panel, html.q-instant .q-menu-backdrop { animation: none !important; }

/* ================= BULUT · HERKESE AÇIK SAYFALAR (2026-10-18) =================
   Tanıtım (.q-ld) onaylı atlas "Tanıtım sayfası"nın birebir karşılığı; giriş/kayıt/parola
   sayfaları (.q-login-bg) "Giriş": gece gökyüzü, süzülen ışıltılar, soluk ızgara, buzlu cam kart.
   Tanıtım gündüz/gece'yi TARAYICIDAN alır (ziyaretçinin uygulama teması yok); giriş sayfaları
   bilinçli olarak hep gece (açılış ekranıyla aynı sahne). */

/* ---------- Tanıtım: tokenlar ---------- */
.q-ld {
    --ld-bg: #EEF6FF; --ld-bg2: #F4F0FF; --ld-bg3: #FFF7EA;
    --ld-solid: #FFFFFF; --ld-surface: rgba(255,255,255,.80); --ld-line: rgba(47,110,200,.14); --ld-line2: rgba(47,110,200,.24);
    --ld-ink: #1A2648; --ld-ink2: #44547A; --ld-muted: #6E7DA0;
    --ld-sky: #2F9BFF; --ld-skydeep: #1C74DB; --ld-skyink: #0F5FC0; --ld-lav: #9183FF; --ld-pink: #FF6F9F; --ld-sun: #FFC23D; --ld-mint: #23C99A;
    --ld-chip: rgba(47,155,255,.16); --ld-cloud: #FFFFFF;
    --ld-shadow: 0 12px 34px rgba(40,90,170,.12), 0 2px 6px rgba(40,90,170,.06);
    color: var(--ld-ink) !important;
    background: linear-gradient(180deg, var(--ld-bg) 0%, var(--ld-bg2) 46%, var(--ld-bg3) 100%) !important;
    font-family: 'Goglis Sans', system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
    .q-ld {
        --ld-bg: #0A1230; --ld-bg2: #130F38; --ld-bg3: #0C1A3E;
        --ld-solid: #16214A; --ld-surface: rgba(22,33,74,.72); --ld-line: rgba(140,180,255,.13); --ld-line2: rgba(140,180,255,.24);
        --ld-ink: #E8EFFF; --ld-ink2: #BAC7E8; --ld-muted: #8696BF;
        --ld-sky: #4CB0FF; --ld-skydeep: #2F8FF0; --ld-skyink: #8FD0FF; --ld-lav: #A193FF; --ld-pink: #FF84AE; --ld-sun: #FFCB55; --ld-mint: #3EDCAE;
        --ld-chip: rgba(76,176,255,.22); --ld-cloud: #1B2858;
        --ld-shadow: 0 14px 40px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.2);
    }
}
.q-ld a { color: inherit; }
/* Gökyüzü ışıltısı (sayfanın üst kısmı) + yıldızcıklar */
.q-ld-sky { position: absolute; left: 0; right: 0; top: 0; height: 980px; overflow: hidden; pointer-events: none; z-index: 0; }
.q-ld-sky::before { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 120%;
    background: radial-gradient(50% 40% at 50% 38%, color-mix(in srgb, var(--ld-sky) 34%, transparent), transparent 70%),
                radial-gradient(30% 30% at 12% 20%, color-mix(in srgb, var(--ld-lav) 30%, transparent), transparent 70%),
                radial-gradient(30% 30% at 88% 26%, color-mix(in srgb, var(--ld-pink) 22%, transparent), transparent 70%); }
.q-ld-tw { position: absolute; inset: 0; opacity: .7; animation: q-twinkle 4.5s ease-in-out infinite;
    background-image: radial-gradient(2px 2px at 8% 14%, var(--ld-sky) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 22% 40%, var(--ld-lav) 50%, transparent 52%),
        radial-gradient(2.2px 2.2px at 37% 9%, var(--ld-sky) 50%, transparent 52%), radial-gradient(1.6px 1.6px at 63% 30%, var(--ld-pink) 50%, transparent 52%),
        radial-gradient(2px 2px at 78% 12%, var(--ld-sky) 50%, transparent 52%), radial-gradient(1.8px 1.8px at 91% 44%, var(--ld-lav) 50%, transparent 52%),
        radial-gradient(1.6px 1.6px at 51% 52%, var(--ld-sky) 50%, transparent 52%), radial-gradient(2px 2px at 14% 62%, var(--ld-pink) 50%, transparent 52%); }
/* Üst menü */
.q-ld .q-ld-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ld-bg) 72%, transparent); border-bottom: 1px solid var(--ld-line);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.q-ld .q-land-navin { max-width: 1180px; padding: 12px 24px; gap: 18px; }
.q-ld-brand { display: flex; align-items: center; gap: 10px; font-family: var(--q-display); font-weight: 600; font-size: 24px; color: var(--ld-ink) !important; letter-spacing: .2px; }
.q-ld-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; --gsn-mark: #fff;
    background: linear-gradient(150deg, #78D8FF 0%, #35A6FF 52%, #2477E8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(36,119,232,.28); }
.q-ld-tile .gsnail { width: 82%; height: auto; margin-top: 4%; filter: drop-shadow(0 2px 3px rgba(10,70,170,.28)); }
.q-ld-tile.sm { width: 28px; height: 28px; border-radius: 9px; }
.q-ld-links { display: flex; gap: 22px; margin-left: 10px; margin-right: auto; font-weight: 800; font-size: 14.5px; }
.q-ld-links a { color: var(--ld-ink2) !important; }
.q-ld-links a:hover { color: var(--ld-skyink) !important; }
/* Dil seçici atlastaki bölmeli denetim (.sg): tek çerçeveli hap, seçili dil yüzey zeminli. */
.q-ld .q-land-lang { display: inline-flex; gap: 4px; padding: 3px; border-radius: 13px; background: color-mix(in srgb, var(--ld-ink) 6%, transparent); border: 1px solid var(--ld-line); }
.q-ld .q-legal-lbtn { padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--ld-muted); font-size: 13px; font-weight: 800; }
.q-ld .q-legal-lbtn:hover { color: var(--ld-ink); }
.q-ld .q-legal-lbtn.on { background: var(--ld-solid); color: var(--ld-skyink); box-shadow: 0 2px 6px rgba(30,80,160,.12); }
/* Üst menüdeki "Giriş yap" atlasta metin düğmesi (.b.g): zeminsiz, gökyüzü mürekkebi. */
.q-ld .q-ld-nav .q-ld-btn.ghost { background: transparent; border-color: transparent; color: var(--ld-skyink) !important; }
/* Düğmeler */
.q-ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: 18px; border: 1.5px solid transparent;
    font-family: var(--q-display); font-weight: 600; font-size: 16px; white-space: nowrap; cursor: pointer; text-decoration: none !important;
    transition: transform .18s var(--q-ease-spring, ease), box-shadow .18s, filter .15s; }
.q-ld-btn.sm { padding: 9px 18px; font-size: 14.5px; border-radius: 13px; }
.q-ld-btn.primary { color: #fff !important; background: linear-gradient(150deg, #6FD0FF, var(--ld-sky) 55%, var(--ld-skydeep)); box-shadow: 0 8px 20px color-mix(in srgb, var(--ld-sky) 34%, transparent); }
.q-ld-btn.ghost { color: var(--ld-ink) !important; background: var(--ld-surface); border-color: var(--ld-line2); }
.q-ld-btn.white { color: var(--ld-skydeep) !important; background: #fff; padding: 15px 28px; box-shadow: 0 10px 26px rgba(0,30,90,.25); }
.q-ld-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.q-ld-btn:active { transform: scale(.96); }
/* Kahraman */
.q-ld-hero { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; gap: 18px; padding: 52px 20px 0; }
.q-ld-chip { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--ld-chip); color: var(--ld-skyink); font-weight: 800; font-size: 13.5px; }
.q-ld-h1 { font-family: var(--q-display); font-weight: 600; font-size: clamp(46px, 8vw, 92px); line-height: .98; letter-spacing: -.5px; margin: 0; color: var(--ld-ink); }
.q-ld-h1 em { font-style: normal; background: linear-gradient(120deg, #6FD0FF, var(--ld-sky) 45%, var(--ld-lav)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-ld-lead { margin: 0 auto; max-width: 600px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ld-ink2); line-height: 1.55; }
.q-ld-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
/* Sahne */
.q-ld-stage { position: relative; z-index: 2; height: 470px; max-width: 1280px; margin: 10px auto 0; }   /* taşan bulutları sayfa kökü kırpar (.q-land overflow-x: clip) */
.q-ld-cloud { position: absolute; color: var(--ld-cloud); opacity: .92; filter: drop-shadow(0 18px 30px rgba(40,90,170,.14)); pointer-events: none; }
.q-ld-cloud svg { display: block; width: 100%; height: auto; }
.q-ld-cloud.c1 { left: -120px; bottom: 0; width: 560px; opacity: .75; }
.q-ld-cloud.c2 { right: -140px; bottom: 20px; width: 600px; opacity: .75; }
.q-ld-cloud.c3 { left: 50%; bottom: 44px; width: 620px; transform: translateX(-50%); }
.q-ld-snail { position: absolute; left: 50%; bottom: 128px; width: 300px; transform: translateX(-50%); filter: drop-shadow(0 24px 34px rgba(30,110,220,.32)); }
.q-ld-snail .gsnail { width: 100%; height: auto; filter: none; }
.q-ld-friend { position: absolute; display: grid; justify-items: center; gap: 8px; animation: q-ld-hover 5s ease-in-out infinite; }
.q-ld-friend .gg-emoji { width: 92px; height: 92px; filter: drop-shadow(0 12px 16px rgba(30,80,160,.2)); }
.q-ld-friend.f1 { left: 9%; top: 20px; animation-delay: -1s; }
.q-ld-friend.f2 { left: 22%; top: 220px; animation-delay: -2.2s; }
.q-ld-friend.f3 { right: 10%; top: 10px; animation-delay: -3.4s; }
.q-ld-friend.f4 { right: 21%; top: 230px; animation-delay: -.5s; }
.q-ld-friend.f5 { left: 4%; top: 300px; animation-delay: -1.7s; }
.q-ld-friend.f6 { right: 5%; top: 290px; animation-delay: -2.9s; }
.q-ld-bub { position: relative; padding: 9px 14px; border-radius: 18px; background: var(--ld-solid); border: 1px solid var(--ld-line); box-shadow: var(--ld-shadow);
    font-weight: 800; font-size: 14px; white-space: nowrap; color: var(--ld-ink); }
.q-ld-bub::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--ld-solid);
    border-right: 1px solid var(--ld-line); border-bottom: 1px solid var(--ld-line); transform: translateX(-50%) rotate(45deg); }
.q-ld-bub small { display: block; font-size: 11px; font-weight: 800; color: var(--ld-skyink); margin-bottom: 1px; }
@keyframes q-ld-hover { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(4deg); } }
/* Bölümler */
.q-ld-sec { position: relative; z-index: 2; padding: 70px 24px; }
.q-ld-wrap { max-width: 1180px; margin: 0 auto; }
.q-ld-eyebrow { display: block; font-family: var(--q-display); font-weight: 600; font-size: 14px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--ld-skyink); }
.q-ld-h2 { font-family: var(--q-display); font-weight: 600; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; margin: 8px 0 0; color: var(--ld-ink); }
.q-ld-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.q-ld-scene { position: relative; display: flex; flex-direction: column; min-height: 420px; padding: 26px; border-radius: 34px; overflow: hidden; border: 1px solid var(--ld-line); }
.q-ld-scene h3 { font-family: var(--q-display); font-weight: 600; font-size: 26px; margin: auto 0 6px; color: var(--ld-ink); }
.q-ld-scene p { margin: 0; color: var(--ld-ink2); font-size: 15px; line-height: 1.5; }
.q-ld-scene.s1 { background: linear-gradient(170deg, color-mix(in srgb, var(--ld-sky) 22%, var(--ld-solid)), var(--ld-solid)); }
.q-ld-scene.s2 { background: linear-gradient(170deg, color-mix(in srgb, var(--ld-lav) 24%, var(--ld-solid)), var(--ld-solid)); }
.q-ld-scene.s3 { background: linear-gradient(170deg, color-mix(in srgb, var(--ld-sun) 26%, var(--ld-solid)), var(--ld-solid)); }
.q-ld-art { position: relative; height: 210px; display: grid; place-items: center; }
.q-ld-tag { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-weight: 800; font-size: 12.5px; }
.q-ld-tag.mint { background: color-mix(in srgb, var(--ld-mint) 18%, transparent); color: var(--ld-mint); }
.q-ld-voice { position: relative; width: 230px; height: 170px; }
.q-ld-av { display: grid; place-items: center; border-radius: 50%; color: #fff; font-family: var(--q-display); font-weight: 600; }
.q-ld-voice .q-ld-av { position: absolute; width: 56px; height: 56px; font-size: 20px; box-shadow: 0 6px 14px rgba(30,80,160,.18); }
.q-ld-av.a1 { background: linear-gradient(150deg, #7DE3C2, #23C99A); }
.q-ld-av.a2 { background: linear-gradient(150deg, #FFB0C8, #F2729C); }
.q-ld-av.a3 { background: linear-gradient(150deg, #C8BDFF, #9183FF); }
.q-ld-av.a4 { background: linear-gradient(150deg, #FFE08A, #F2A93B); }
.q-ld-voice .a1 { left: 84px; top: 0; width: 62px; height: 62px; box-shadow: 0 0 0 3px var(--ld-mint), 0 6px 14px rgba(30,80,160,.18); }
.q-ld-voice .a2 { left: 0; top: 80px; } .q-ld-voice .a3 { right: 0; top: 80px; } .q-ld-voice .a4 { left: 88px; bottom: 0; width: 54px; height: 54px; }
.q-ld-ring { position: absolute; left: 84px; top: 0; width: 62px; height: 62px; border-radius: 50%; border: 2px solid var(--ld-mint); animation: q-ld-ring 2.6s cubic-bezier(.22,.8,.24,1) infinite; }
.q-ld-ring.r2 { animation-delay: 1.3s; }
@keyframes q-ld-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
.q-ld-screen { position: relative; width: 86%; aspect-ratio: 16 / 10; max-height: 100%; border-radius: 18px; box-shadow: var(--ld-shadow); background: linear-gradient(135deg, #9FDBFF, #C8BDFF 55%, #FFD0DE); }
.q-ld-live { position: absolute; left: 10px; top: 10px; padding: 3px 9px; border-radius: 999px; background: #FF5C7A; color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .4px; }
.q-ld-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #2F9BFF; }
.q-ld-rx { position: absolute; right: 4px; bottom: -6px; display: flex; gap: 2px; }
.q-ld-rx .gg-emoji { width: 40px; height: 40px; }
.q-ld-mini { position: absolute; left: 0; top: 10px; width: 78%; display: grid; gap: 6px; padding: 12px; border-radius: 18px; background: var(--ld-solid); border: 1px solid var(--ld-line); box-shadow: var(--ld-shadow); }
.q-ld-mini b { display: flex; align-items: center; gap: 8px; font-family: var(--q-display); font-weight: 600; color: var(--ld-ink); }
.q-ld-sv { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: linear-gradient(150deg, #FFB0C8, #F2729C); color: #fff; font-size: 11px; }
.q-ld-mini .ch { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 10px; color: var(--ld-ink2); font-weight: 700; font-size: 13.5px; }
.q-ld-mini .ch.on { background: var(--ld-chip); color: var(--ld-skyink); }
.q-ld-mini .ch i { font-style: normal; color: var(--ld-sky); font-family: var(--q-display); font-weight: 700; }
.q-ld-roles { position: absolute; right: 0; bottom: 6px; display: grid; gap: 6px; justify-items: end; }
.q-ld-roles .r { padding: 4px 11px; border-radius: 999px; font-weight: 800; font-size: 12px; }
.q-ld-roles .sun { background: color-mix(in srgb, var(--ld-sun) 26%, transparent); color: color-mix(in srgb, var(--ld-sun) 60%, var(--ld-ink)); }
.q-ld-roles .pink { background: color-mix(in srgb, var(--ld-pink) 20%, transparent); color: var(--ld-pink); }
.q-ld-roles .sky { background: var(--ld-chip); color: var(--ld-skyink); }
.q-ld-nerd { position: absolute; right: 10px; top: -6px; }
.q-ld-nerd .gg-emoji { width: 60px; height: 60px; }
/* Emoji şeritleri */
.q-ld-emo { text-align: center; padding-left: 0; padding-right: 0; }
.q-ld-emo .q-ld-h2 { margin-bottom: 26px; }
.q-ld-mqwrap { position: relative; overflow: hidden; padding: 6px 0; margin-top: 14px;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.q-ld-mq { display: flex; gap: 18px; width: max-content; animation: q-ld-mq 70s linear infinite; }
.q-ld-mq.rev { animation-direction: reverse; animation-duration: 80s; }
.q-ld-mq .gg-emoji { width: 76px; height: 76px; flex: none; }
@keyframes q-ld-mq { to { transform: translateX(-50%); } }
.q-ld-emo .q-ld-lead { margin-top: 22px; padding: 0 20px; }
/* Özellikler + telefon */
.q-ld-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 50px; align-items: center; }
.q-ld-list { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-top: 30px; }
.q-ld-li { display: grid; grid-template-columns: 50px 1fr; gap: 14px; align-items: start; }
.q-ld-li .ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--ld-chip); color: var(--ld-sky); }
.q-ld-li b { display: block; font-family: var(--q-display); font-weight: 600; font-size: 18px; color: var(--ld-ink); }
.q-ld-li > div > span { font-size: 14px; color: var(--ld-ink2); line-height: 1.45; }
.q-ld-phone { position: relative; display: grid; place-items: center; height: 600px; }
.q-ld-ph { width: 300px; height: 590px; border-radius: 44px; padding: 14px 12px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
    background: linear-gradient(170deg, #16214A, #0A1230); border: 7px solid #0B1230; box-shadow: 0 40px 80px rgba(20,50,120,.35), inset 0 0 0 1px rgba(140,180,255,.2); color: #E8EFFF; }
.q-ld-phtop { display: flex; align-items: center; gap: 8px; padding: 6px 4px 10px; border-bottom: 1px solid rgba(140,180,255,.13); font-family: var(--q-display); }
.q-ld-phmsgs { flex: 1; display: grid; align-content: start; gap: 14px; padding: 4px 2px; }
.q-ld-phmsgs .m { display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
/* display/color BURADA DA ŞART (2026-10-20, Fatih: "baş harfler bozuk"): avatar da .m içinde bir span; hemen
   alttaki `.q-ld-phmsgs span` (0,1,1) temel `.q-ld-av`'ın (0,1,0) grid'ini ve beyazını eziyordu → harf sol üste
   kayıp soluk maviye dönüyordu. Bu kural (0,2,0) ikisini geri alır. */
.q-ld-phmsgs .q-ld-av { display: grid; color: #fff; width: 34px; height: 34px; font-size: 13px; }
.q-ld-phmsgs b { display: block; font-size: 13.5px; }
.q-ld-phmsgs span { display: block; font-size: 14px; color: #BAC7E8; }
.q-ld-phmsgs .gg-emoji { width: 26px; height: 26px; vertical-align: -6px; }
.q-ld-phmsgs .rx { display: inline-flex; align-items: center; gap: 4px; width: max-content; margin-top: 4px; padding: 1px 9px 1px 5px; border-radius: 999px; background: rgba(76,176,255,.22); font-size: 12px; font-weight: 800; }
.q-ld-phmsgs .rx .gg-emoji { width: 18px; height: 18px; vertical-align: -4px; }
.q-ld-phpill { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 10px; border-radius: 16px; background: rgba(34,201,138,.14); border: 1px solid rgba(34,201,138,.3); }
.q-ld-phpill b { flex: 1; color: #3EDCAE; font-size: 13px; }
.q-ld-phpill .q-speaksnail { width: 28px; height: 28px; }
.q-ld-phpill .end { width: 32px; height: 32px; border-radius: 10px; background: #FF5C7A; }
.q-ld-phcomp { height: 44px; border-radius: 16px; background: #111A3D; border: 1px solid rgba(140,180,255,.16); }
.q-ld-deco { position: absolute; }
.q-ld-deco .gg-emoji { width: 70px; height: 70px; }
.q-ld-deco.d1 { left: 4%; top: 40px; } .q-ld-deco.d2 { right: 4%; top: 300px; }
/* İndir */
.q-ld-dl { text-align: center; padding-top: 30px; }
.q-ld-plat { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.q-ld-plat a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; border-radius: 18px; background: var(--ld-surface); border: 1px solid var(--ld-line);
    box-shadow: var(--ld-shadow); font-weight: 800; font-size: 15px; color: var(--ld-ink) !important; text-align: left; transition: transform .18s; }
.q-ld-plat a:hover { transform: translateY(-2px); }
.q-ld-plat svg { width: 24px; height: 24px; flex: none; }
.q-ld-plat small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ld-muted); }
.q-ld-note { margin: 18px 0 0; font-size: 14.5px; color: var(--ld-ink2); }
.q-ld-note a { color: var(--ld-skyink) !important; font-weight: 800; }
.q-ld-trust { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 24px; font-size: 14px; color: var(--ld-ink2); }
.q-ld-trust b { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; }
.q-ld-trust svg { color: var(--ld-mint); }
/* Kapanış bandı */
.q-ld-final { position: relative; z-index: 2; max-width: 1180px; margin: 30px auto 60px; padding: 70px 40px 60px; border-radius: 44px; text-align: center; display: grid; justify-items: center; gap: 14px;
    overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 50% 0%, #8FDCFF 0%, #2F9BFF 45%, #1C4FA6 100%); }
.q-ld-final h2 { font-family: var(--q-display); font-weight: 600; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; margin: 0; }
.q-ld-final p { margin: 0; font-size: 17px; opacity: .92; }
.q-ld-final .q-ld-cloud { color: #fff; }
.q-ld-final .q-ld-cloud.c4 { left: -40px; bottom: -30px; width: 360px; opacity: .25; }
.q-ld-final .q-ld-cloud.c5 { right: -50px; top: -20px; width: 320px; opacity: .2; }
.q-ld-finalsnail { position: relative; width: 170px; filter: drop-shadow(0 14px 20px rgba(0,30,90,.35)); }
.q-ld-finalsnail .gsnail { width: 100%; height: auto; filter: none; }
/* Alt bilgi */
.q-ld-foot { position: relative; z-index: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px;
    border-top: 1px solid var(--ld-line); font-size: 13.5px; color: var(--ld-muted); font-weight: 700; }
.q-ld-foot > b { font-family: var(--q-display); font-weight: 600; font-size: 17px; color: var(--ld-ink); }
.q-ld-foot nav { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; }
.q-ld-foot nav a { color: var(--ld-muted) !important; }
.q-ld-foot nav a:hover { color: var(--ld-skyink) !important; }
/* Kaydırınca beliren giriş (taban görünür) */
.q-ld-sec.q-rv, .q-ld-final.q-rv { animation: q-ld-rise .6s cubic-bezier(.22,.8,.24,1); }
@keyframes q-ld-rise { from { opacity: .001; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Dar ekran */
@media (max-width: 900px) {
    .q-ld-links { display: none; }
    .q-ld-scenes { grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
    .q-ld-scene { min-height: 300px; border-radius: 26px; padding: 20px; }
    .q-ld-feat { grid-template-columns: 1fr; }
    .q-ld-hidemo { display: none !important; }
}
@media (max-width: 640px) {
    .q-ld .q-land-navin { padding: 10px 14px; gap: 8px; }
    .q-ld .q-land-lang { display: none; }
    /* Dil seçici gizlenince sağ grupta tek düğme kalır; space-between onu logonun yanına yapıştırıyordu (2026-10-26). */
    .q-ld .q-land-navr { justify-content: flex-end; }
    .q-ld-brand { font-size: 19px; } .q-ld-tile { width: 32px; height: 32px; border-radius: 10px; }
    .q-ld-hero { padding: 22px 16px 0; gap: 14px; }
    .q-ld-cta { flex-direction: column; width: 100%; }
    .q-ld-cta .q-ld-btn { width: 100%; }
    .q-ld-stage { height: 330px; }
    .q-ld-snail { width: 180px; bottom: 84px; }
    .q-ld-cloud.c1, .q-ld-cloud.c2 { width: 260px; } .q-ld-cloud.c1 { left: -60px; bottom: 10px; } .q-ld-cloud.c2 { right: -70px; bottom: 30px; }
    .q-ld-cloud.c3 { width: 330px; bottom: 30px; }
    .q-ld-friend .gg-emoji { width: 58px; height: 58px; }
    .q-ld-bub { font-size: 12px; padding: 7px 10px; }
    .q-ld-friend.f1 { left: 14px; top: 10px; } .q-ld-friend.f3 { right: 14px; top: 4px; }
    .q-ld-friend.f2 { left: 22px; top: 190px; } .q-ld-friend.f2 .q-ld-bub, .q-ld-friend.f4 .q-ld-bub { display: none; }
    .q-ld-friend.f4 { right: 24px; top: 196px; } .q-ld-friend.f5, .q-ld-friend.f6 { display: none; }
    .q-ld-sec { padding: 40px 16px; }
    .q-ld-mq .gg-emoji { width: 54px; height: 54px; }
    .q-ld-list { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; }
    .q-ld-plat a { padding: 10px 14px; font-size: 13.5px; }
    .q-ld-final { margin: 16px; padding: 40px 20px; border-radius: 30px; }
    .q-ld-foot { justify-content: center; text-align: center; padding: 20px 16px 30px; }
    .q-ld-foot nav { margin-left: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .q-ld-tw, .q-ld-friend, .q-ld-ring, .q-ld-mq, .q-ld-sec.q-rv, .q-ld-final.q-rv { animation: none !important; }
}

/* ---------- Giriş / kayıt / parola sayfaları ---------- */
/* Atlas "pubBg" birebir: düz gece degradesi + İKİ bulanık küre (sol üst gökyüzü, sağ alt lavanta) +
   44px soluk ızgara (maskesiz) + dört köşeli ışıltılar (SkyFx). Üçüncü küre atlasta yok. */
.q-login-bg { background: linear-gradient(160deg, #0A1230 0%, #130F38 60%, #0C1A3E 100%); }
.q-login-orb { filter: blur(50px); opacity: 1; }
.q-login-orb.o1 { width: 520px; height: 520px; left: -160px; top: -200px; background: rgba(40,130,255,.34); }
.q-login-orb.o2 { width: 460px; height: 460px; right: -160px; top: auto; bottom: -180px; background: rgba(130,100,255,.30); }
.q-login-orb.o3 { display: none; }
/* Yıldız tozu artık kaymıyor, yavaşça parlayıp sönüyor (tasarım: "süzülen ışıltılar"). */
.q-login-stars { opacity: .8; animation: q-twinkle 4.5s ease-in-out infinite;
    background-image: radial-gradient(1.6px 1.6px at 22px 34px, rgba(207,232,255,.9), transparent 55%), radial-gradient(1.2px 1.2px at 128px 92px, rgba(200,189,255,.8), transparent 55%),
        radial-gradient(2px 2px at 214px 156px, rgba(207,232,255,.75), transparent 55%), radial-gradient(1.2px 1.2px at 300px 58px, rgba(207,232,255,.7), transparent 55%),
        radial-gradient(1.5px 1.5px at 82px 208px, rgba(255,208,222,.7), transparent 55%), radial-gradient(1.2px 1.2px at 258px 250px, rgba(207,232,255,.6), transparent 55%); }
.q-login-grid { opacity: .35; -webkit-mask-image: none; mask-image: none;
    background-image: linear-gradient(rgba(140,180,255,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(140,180,255,.13) 1px, transparent 1px); }
.q-login-card { width: 420px; border-radius: 28px; padding: 32px 32px 28px; background: color-mix(in srgb, #16214A 86%, transparent);
    border: 1px solid rgba(140,180,255,.22); box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.q-login-card::before { background: linear-gradient(90deg, transparent, #8FD0FF, transparent); }
.q-login-logo { width: 72px; height: 72px; border-radius: 22px; }
.q-login-title { font-family: var(--q-display); font-weight: 600; font-size: 28px; color: #E8EFFF; }
.q-login-sub { color: #BAC7E8; }
.q-auth-field > label { color: #BAC7E8; font-weight: 700; }
.q-auth-input { height: 46px; border-radius: 13px; background: #111A3D; border: 1.5px solid rgba(140,180,255,.16); color: #E8EFFF; }
.q-auth-input::placeholder { color: #5D6C96; }
.q-auth-input:focus { border-color: #4CB0FF; background: #111A3D; box-shadow: 0 0 0 4px rgba(76,176,255,.16); }
.q-auth-input:-webkit-autofill, .q-auth-input:-webkit-autofill:focus { -webkit-text-fill-color: #E8EFFF; -webkit-box-shadow: 0 0 0 1000px #111A3D inset; caret-color: #E8EFFF; }
.q-auth-eye { height: 46px; color: #8696BF; }
.q-auth-submit { height: 48px; border-radius: 14px; background: linear-gradient(150deg, #6FD0FF, #4CB0FF 55%, #2F8FF0);
    font-family: var(--q-display); font-weight: 600; font-size: 16px; box-shadow: 0 8px 20px rgba(76,176,255,.32); }
.q-auth-msg { border-radius: 14px; padding: 11px 14px; font-weight: 600; }
.q-auth-msg.err { color: #FF8FA3; background: rgba(255,92,122,.12); border: 1px solid rgba(255,92,122,.32); }
.q-auth-msg.ok { color: #6BE3B5; background: rgba(34,201,138,.12); border: 1px solid rgba(34,201,138,.32); }
.q-auth-check { color: #BAC7E8; }
.q-auth-check input { accent-color: #4CB0FF; }
.q-auth-check input:checked { animation: q-chk-pop .3s var(--q-ease-spring); }
@keyframes q-chk-pop { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }
.q-auth-check-msg { color: #FF8FA3; font-weight: 700; }
.q-auth-check[data-err] input { outline-color: #FF5C7A; }
.q-login-card a { color: #8FD0FF; }
@media (max-width: 480px) { .q-login-card { width: 100%; padding: 26px 20px 22px; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .q-login-stars, .q-auth-check input:checked { animation: none; } }
html.q-instant .q-login-stars { animation: none !important; }
/* Dört köşeli ışıltılar (atlas "pubBg" .tw; konumları SkyFx.razor üretir): sırayla parlayıp döner. */
.q-login-tw { position: absolute; color: #CFE8FF; background: currentColor; opacity: .15; pointer-events: none;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: q-login-tw 5s ease-in-out infinite; }
@keyframes q-login-tw { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0); } 50% { opacity: .9; transform: scale(1.1) rotate(45deg); } }
@media (prefers-reduced-motion: reduce) { .q-login-tw { animation: none; opacity: .45; } }
html.q-instant .q-login-tw { animation: none !important; }

/* İndirme sayfası (.q-land — tanıtımın ESKİ iskeletini kullanmaya devam ediyor): giriş sayfalarıyla
   aynı gece gökyüzü, Fredoka başlıklar ve gökyüzü birincil düğmesi (BULUT 2026-10-18). */
.q-land:not(.q-ld) {
    background: radial-gradient(1000px 640px at 10% -10%, rgba(40,130,255,.28), transparent 60%),
                radial-gradient(900px 600px at 105% 20%, rgba(130,100,255,.24), transparent 62%),
                radial-gradient(900px 640px at 50% 118%, rgba(60,200,255,.12), transparent 64%),
                linear-gradient(160deg, #0A1230 0%, #130F38 60%, #0C1A3E 100%) !important;
}
.q-land:not(.q-ld) h1, .q-land:not(.q-ld) h2, .q-land:not(.q-ld) h3, .q-land:not(.q-ld) .q-land-brand { font-family: var(--q-display); font-weight: 600; }

/* ================= BULUT · ATLAS UYUMU — KABUK (2026-10-18) =================
   Fatih: "atlasta ne varsa geçir, uydur". Onaylı Ekran Atlası'nın bileşen biçimleri (m-top, m-tab,
   m-person, ch, m-me, composer, send, msg…) uygulamanın kendi sınıflarına eşlendi. Renkler tema
   değişkenlerinden: --q-chip (nötr hap zemini), --q-chip-on (seçili, aksan tonu), --q-accent-ink
   (aksanın metin tonu: gecede açık, gündüzde koyu). Düzen kilitli — yalnız yüzey/biçim değişti. */
.theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight, .theme-dark {
    --q-chip: color-mix(in srgb, var(--q-strong) 8%, transparent);
    --q-chip-on: color-mix(in srgb, var(--q-accent) 24%, transparent);
    --q-accent-ink: color-mix(in srgb, var(--q-accent) 62%, #ffffff);
    --q-pink: #FF84AE;
}
.theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light, .theme-light {
    --q-chip: color-mix(in srgb, var(--q-accent) 9%, #ffffff);
    --q-chip-on: color-mix(in srgb, var(--q-accent) 16%, transparent);
    --q-accent-ink: color-mix(in srgb, var(--q-accent) 72%, #000000);
    --q-pink: #FF6F9F;
}

/* Biçim kuralları: kabuk/sekme/sütun ZEMİNLERİ ve besteleyici yalnız MASAÜSTÜNDE (mobil kabuğun kendi
   yerleşimi var); satır/rozet/mesaj/kapak biçimleri HER YERDE (mobil çekmeceler de atlas biçiminde). */
@media (min-width: 701px) and (min-height: 521px) {
/* ---- Üst şerit (m-top) ---- */
.q-topbar { background: color-mix(in srgb, var(--q-chat-bg) 72%, transparent); border-bottom: 1px solid var(--q-border); }
.q-beta { padding: 2px 8px; border: 0; border-radius: 999px; background: var(--q-chip-on); color: var(--q-accent-ink); font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: none; }
.q-topico { border-radius: 11px; }
.q-topico:hover { background: var(--q-chip); color: var(--q-accent-ink); }
/* Sunucu sekmeleri: ATLAS = simge + AD hapı (varsayılan artık adlı; ayardan yalnız simgeye dönülür). */
body.q-nav-names .q-tabs { align-items: center; align-self: center; gap: 6px; }
body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab { padding: 5px 12px 5px 5px; border-radius: 999px; border-top: 0; margin-bottom: 0; gap: 8px; font-weight: 700; color: var(--q-text); }
body.q-nav-names :is(.q-tabs, .q-tabs-measure) .q-tab .q-mini { width: 28px; height: 28px; border-radius: 50%; font-size: 11px; font-weight: 800; }
body.q-nav-names .q-tabs .q-tab:hover:not(.sel) { background: var(--q-chip); }
body.q-nav-names .q-tabs .q-tab.sel { background: var(--q-chip-on); color: var(--q-strong); border-top: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-accent) 55%, transparent); }
body.q-nav-names .q-tabs .q-tab .q-tab-name { font-size: 14px; }
body.q-nav-names .q-tab-badge { position: static; margin-left: 2px; min-width: 20px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--q-pink) 18%, transparent); color: var(--q-pink); font-size: 11px; font-weight: 800; border: 0; box-shadow: none; }
body.q-nav-names .q-tab-icw { display: inline-flex; align-items: center; gap: 0; }
.q-tabs .q-tab-voice { color: var(--q-online); }
/* "+" (m-plus) — DOLU vurgu yuvarlağı (2026-10-18, Fatih ekran görüntüsüyle: "tasarım hatası var gibi").
   Atlas kesikli çember çiziyordu; 30 px'te 1,5 px kesikler düzensiz dağılıp yarım kalmış/yükleniyor gibi
   okunuyordu. Asıl hata ise başkaydı: adlı sekme kuralı (`body.q-nav-names … .q-tab`, özgüllük 0,3,1)
   bu düğmeye de ASİMETRİK dolgu (5px sol / 12px sağ), `justify-content:flex-start`, metin rengi ve
   `border-top:0` geçiriyordu → artı çemberin ortasında değil ~3,5 px SAĞINDA duruyordu. Seçici aynı
   özgüllüğe çıkarıldı ve tüm bu özellikler burada açıkça yazıldı. Üzerine gelince döner (atlas). */
.q-tabs .q-tab.q-add,
body.q-nav-names .q-tabs .q-tab.q-add { width: 32px; height: 32px; min-width: 32px; min-height: 0; padding: 0; margin: 0 2px; gap: 0; justify-content: center; align-items: center;
    border: 0; border-radius: 50%; background: color-mix(in srgb, var(--q-accent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-accent) 24%, transparent);
    color: var(--q-accent-ink); transition: transform .3s var(--q-ease-spring), background .2s, box-shadow .2s; }
.q-tabs .q-tab.q-add .mud-icon-root { font-size: 20px; }
.q-tabs .q-tab.q-add:hover,
body.q-nav-names .q-tabs .q-tab.q-add:hover { background: color-mix(in srgb, var(--q-accent) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-accent) 42%, transparent); transform: rotate(90deg); }
/* ---- Sol ray (DM şeridi, r-item) ---- */
.q-dmrail { background: color-mix(in srgb, var(--q-chat-bg) 20%, transparent); border-right: 1px solid var(--q-border); }
/* ---- Üye listesi (m-online / m-person) ---- */
.q-online { background: color-mix(in srgb, var(--q-chat-bg) 34%, transparent); border-right: 1px solid var(--q-border); padding: 14px 10px; }
/* ---- Sohbet başlığı (m-chead) ---- */
.q-chathead { height: auto; min-height: 50px; padding: 10px 18px; border-bottom: 1px solid var(--q-border); }
/* ---- Kanal sütunu (m-channels / ch) ---- */
.q-channels { background: color-mix(in srgb, var(--q-chat-bg) 34%, transparent); border-left: 1px solid var(--q-border); }
/* ---- Sohbet alanı (m-chat / msg) ---- */
.q-center { background: color-mix(in srgb, var(--q-chat-bg) 58%, transparent); }
/* Besteleyici (composer + send). Seçici `.q-composer .q-send-btn`: tabandaki `.q-composer > .q-send-btn { width:30px }`
   (0,2,0) aksi hâlde 38 px'i ezerdi. */
.q-composer { margin: 0 14px 14px; padding: 6px 6px 6px 14px; border-radius: 18px; background: var(--q-chat-bg); border: 1.5px solid var(--q-border); box-shadow: 0 6px 18px rgba(30,80,160,.08); min-height: 52px; align-items: center; }
.q-composer:focus-within { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 16%, transparent); }
.q-composer .q-expr-ic, .q-composer .q-attach { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 11px; }
.q-composer .q-expr-ic:hover, .q-composer .q-attach:hover { background: var(--q-chip); color: var(--q-accent-ink); }
.q-composer .q-send-btn { width: 38px; height: 38px; border-radius: 13px; color: #fff; background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 60%, #fff), var(--q-accent) 55%, color-mix(in srgb, var(--q-accent) 78%, #000));
    box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 40%, transparent); transition: transform .18s var(--q-ease-spring), filter .15s, opacity .15s; }
.q-composer .q-send-btn:hover:not(:disabled) { background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 60%, #fff), var(--q-accent) 55%, color-mix(in srgb, var(--q-accent) 78%, #000)); filter: brightness(1.06); transform: translateY(-1px); }
.q-composer .q-send-btn:disabled { color: #fff; opacity: .45; }
.q-composer .q-send-btn:active:not(:disabled) { transform: scale(.9); }
.q-mdbar { margin: 0 14px 4px; }
.q-composer .q-send-btn:disabled { opacity: .7; }
}
.q-friends-btn { min-height: 40px; border-radius: 13px; font-weight: 700; font-size: 13.5px; color: var(--q-muted); }
.q-friends-btn:hover { background: var(--q-chip); color: var(--q-accent-ink); }
.q-friends-btn.on { background: var(--q-chip-on); color: var(--q-strong); }
.q-online-head { padding: 2px 8px 8px; font-family: var(--q-display); font-size: 15px; font-weight: 600; letter-spacing: .2px; text-transform: none; color: var(--q-strong); }
.q-online .q-cat { font-family: var(--q-display); font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; color: var(--q-faint); margin: 12px 8px 4px; }
.q-member { gap: 10px; padding: 6px 8px; border-radius: 12px; font-size: 13.5px; transition: background .2s; }
.q-member:hover { background: var(--q-chip); }
.q-member .q-av { width: 34px !important; height: 34px !important; font-size: 13px; font-weight: 800; }
.q-member > span:nth-child(2) > span:first-child { font-weight: 700; }
.q-member-act, .q-member-sub { display: block; font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.q-member.off { opacity: .55; }
/* SEVİYE HALKASI (2026-10-24, Bulut rötuş 3): "Lv" hapı yerine avatarın çevresinde ince halka — profil kartındaki
   .q-lvring'in küçüğü, aynı maske tekniği (içi şeffaf, satırın soluklaşması halkaya da işler). Halka yer KAPLAMAZ
   (dolgu kadar negatif kenar): satır hizası ve çevrimiçi noktasının yeri değişmez. */
.q-memring { --p: 0%; position: relative; display: inline-flex; flex: none; border-radius: 50%; padding: 3px; margin: -3px; }
.q-memring[data-lv]::before { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: conic-gradient(#8FD6FF 0, var(--q-accent) var(--p), color-mix(in srgb, var(--q-strong) 14%, transparent) var(--p) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px)); }
/* Katlanan çevrimdışı grubu: başlık bir düğme; kapalıyken ilk dört avatar üst üste. */
.q-memfold { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: calc(100% - 16px); padding: 0; border: 0; background: transparent;
    font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.q-online .q-cat.q-memfold { font-family: var(--q-display); }
.q-memfold:hover { color: var(--q-muted); }
.q-memfold-chev { font-size: 15px !important; transition: transform .2s var(--q-ease-soft); }
.q-memfold.open .q-memfold-chev { transform: rotate(90deg); }
.q-memfold-stack { display: inline-flex; margin-left: auto; padding-right: 2px; }
.q-memfold-stack > * { width: 20px; height: 20px; border-radius: 50%; margin-left: -6px; border: 2px solid var(--q-side-bg); object-fit: cover;
    display: inline-grid; place-items: center; font: 800 8px/1 'Goglis Sans', system-ui, sans-serif; font-style: normal; color: #fff;
    letter-spacing: 0; text-transform: none; opacity: .75; }
.q-memfold-stack > :first-child { margin-left: 0; }
@media (prefers-reduced-motion: reduce) { .q-memfold-chev { transition: none; } }
html.q-instant .q-memfold-chev { transition: none; }
.q-dot { width: 12px; height: 12px; border-width: 2.5px; right: -2px; bottom: -2px; }
.q-chtitle { font-family: var(--q-display); font-weight: 600; font-size: 16.5px; }
.q-chathead .mud-icon-root[style*="color"] { color: var(--q-accent) !important; }
.q-chlist { padding: 8px; }
.q-cathdr { font-family: var(--q-display); font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; color: var(--q-faint); margin: 12px 4px 4px; padding: 0 6px; }
.q-chrow { gap: 8px; padding: 6px 10px; border-radius: 11px; font-weight: 700; color: var(--q-muted); transition: background .2s, color .2s, transform .2s var(--q-ease-soft); }
.q-chrow:hover { background: var(--q-chip); color: var(--q-strong); transform: translateX(2px); }
/* Dokunmatikte `:hover` dokunulan satırda TAKILI kalır — kayma yalnız gerçek imleçte (2026-10-19: takılı
   transform satırı içindeki fixed menü panelinin kapsayıcısı yapıyordu; menü artık üst katmanda ama satırın
   dokunuştan sonra 2px kayık kalması da istenmez). */
@media (hover: none) { .q-chrow:hover { transform: none; } }
.q-chrow.sel { background: var(--q-chip-on); color: var(--q-strong); }
.q-chrow > .mud-icon-root:first-child { color: var(--q-faint); }
.q-chrow.sel > .mud-icon-root:first-child { color: var(--q-accent); }
.q-chrow.unread { color: var(--q-strong); }
.q-unread { width: 7px; height: 7px; border-radius: 50%; background: var(--q-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 20%, transparent); }
.q-ch-badge { background: color-mix(in srgb, var(--q-pink) 18%, transparent); color: var(--q-pink); border-radius: 999px; font-weight: 800; }
.q-voiceusers { padding: 2px 0 6px 26px; }
.q-vuser { gap: 8px; font-size: 13px; color: var(--q-text); font-weight: 700; padding: 3px 6px; border-radius: 9px; }
.q-vuser .q-vuav { width: 24px; height: 24px; font-size: 10px; }
.q-live-badge { background: color-mix(in srgb, var(--q-online) 18%, transparent); color: var(--q-online); border-radius: 999px; font-size: 10px; letter-spacing: .6px; padding: 1px 7px; }
.q-live-badge.video { background: color-mix(in srgb, var(--q-accent) 20%, transparent); color: var(--q-accent-ink); }
/* Topluluk başlığı: kapak yoksa gökyüzü degradesi + salyangoz (atlas), ad kapağın altında */
.q-srvheader.banner { position: relative; height: 96px; overflow: hidden; border-bottom: 1px solid var(--q-border); }
.q-srvheader.banner.def { background: linear-gradient(135deg, #1C4FA6, #2F9BFF 55%, #9FDBFF); }
.q-srvheader.banner.def .q-srvheader-snail { position: absolute; right: -20px; top: -6px; width: 150px; opacity: .9; pointer-events: none; }
.q-srvheader.banner.def .q-srvheader-snail .gsnail { width: 100%; height: auto; filter: drop-shadow(0 6px 10px rgba(10,40,110,.25)); }
.q-srvheader-name.onbanner { position: absolute; left: 14px; bottom: 10px; z-index: 1; font-family: var(--q-display); font-weight: 600; font-size: 16px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.3); }
.q-srvheader:not(.banner) .q-srvheader-name { font-family: var(--q-display); font-weight: 600; font-size: 15.5px; }
/* ---- Ses dock'u (yeşil cam kart) + kullanıcı paneli (yüzen kart, m-me) ---- */
.q-voicedock { margin: 0 8px 4px; padding: 10px 12px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--q-online) 30%, transparent);
    background: color-mix(in srgb, var(--q-online) 12%, var(--q-chat-bg)); }
.q-voicedock-on { color: var(--q-online); font-size: 13px; font-weight: 800; }
.q-voicedock-btns .q-vctl.sm { height: 32px; border-radius: 10px; box-shadow: none; }
.q-voicedock-btns .q-vctl.sm:not(.leave):not(.cam):not(.on):not(.live) { background: var(--q-chat-bg); color: var(--q-text); }
.q-voicedock-btns .q-vctl.sm.leave { background: var(--q-danger); color: #fff; }
.q-userpanel { height: auto; min-height: 52px; margin: 8px; padding: 10px; border-radius: 16px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-chat-bg) 80%, transparent); box-shadow: none; }
.q-userpanel-btn { width: 30px; height: 30px; border-radius: 9px; }
.q-userpanel-btn:hover { background: var(--q-chip); color: var(--q-accent-ink); }
.q-userpanel-me b, .q-userpanel-me .q-up-name { font-size: 13.5px; font-weight: 700; }
/* TEK DOCK (2026-10-24, Bulut rötuş 3): ses kartı + kullanıcı paneli tek kartta. İç parçalar kendi kart görünümünü
   bırakır; sesteyken kartın kenarı yeşile çalar, şerit opaklıkla belirir (transform YOK: içindeki menüler fixed). */
.q-dock { margin: 8px; border-radius: 16px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-chat-bg) 80%, transparent); flex: none; }
.q-dock:has(> .q-voicedock) { border-color: color-mix(in srgb, var(--q-online) 34%, var(--q-border)); }
.q-dock > .q-voicedock { margin: 0; border: 0; border-bottom: 1px solid var(--q-divider); border-radius: 15px 15px 0 0;
    background: color-mix(in srgb, var(--q-online) 10%, transparent); animation: q-dock-in .24s var(--q-ease-soft); }
.q-dock > .q-voice-elsewhere { border-top: 0; border-bottom: 1px solid var(--q-divider); border-radius: 15px 15px 0 0; }
.q-dock > .q-userpanel { margin: 0; padding: 8px; gap: 4px; border: 0; border-radius: 0 0 15px 15px; background: transparent; }
.q-dock > .q-userpanel:first-child { border-radius: 15px; }
@keyframes q-dock-in { from { opacity: 0; } to { opacity: 1; } }
/* Mikrofon + kulaklık TEK HAP: aradaki boşluk kalkar, oklar butonun sağ-altında hapın içinde kalır. */
.q-uppill { display: inline-flex; align-items: center; flex: none; padding: 2px; border-radius: 999px; background: var(--q-chip); }
.q-uppill .q-up-ctl .q-userpanel-btn { width: 28px; height: 28px; border-radius: 999px; }
.q-uppill .q-up-ctl + .q-up-ctl { margin-left: 1px; }
.q-uppill .q-up-ctl + .q-up-ctl::before { content: ""; position: absolute; left: -1px; top: 7px; bottom: 7px; width: 1px; background: var(--q-divider); }
.q-userpanel .q-uppill .q-up-ctl > .q-menu { top: auto; bottom: -1px; right: -1px; }
.q-userpanel .q-uppill .q-up-ctl .q-vctl-caret { width: 13px; height: 13px; }
.q-dock > .q-userpanel > .q-userpanel-btn { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) { .q-dock > .q-voicedock { animation: none; } }
html.q-instant .q-dock > .q-voicedock { animation: none; }
.q-msg { border-radius: 16px; transition: background .2s; }
.q-msg:hover { background: color-mix(in srgb, var(--q-chip) 70%, transparent); }
.q-msg-name { font-size: 14.5px; font-weight: 800; }
.q-msg-time { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.q-day-sep { margin: 6px 8px; color: var(--q-faint); font-size: 12px; font-weight: 800; }
.q-day-sep::before, .q-day-sep::after { background: var(--q-border); opacity: 1; }
.q-day-sep span { background: none; padding: 0; font-size: 12px; font-weight: 800; color: var(--q-faint); }
.q-expr-ic .q-expr-emo { width: 23px; height: 23px; vertical-align: 0; transition: transform .3s var(--q-ease-spring, ease); }
.q-expr-ic:hover .q-expr-emo, .q-expr-ic.on .q-expr-emo { transform: rotate(-12deg) scale(1.15); }
.q-react { gap: 5px; padding: 2px 10px 2px 6px; background: var(--q-chip); border: 1.5px solid transparent; font-weight: 800; font-size: 12.5px; color: var(--q-text); }
.q-react:hover { border-color: var(--q-border); transform: translateY(-1px); }
.q-react.on { background: var(--q-chip-on); border-color: color-mix(in srgb, var(--q-accent) 70%, transparent); color: var(--q-accent-ink); }
.q-react .gg-emoji { width: 20px; height: 20px; }
.q-typing { font-size: 12.5px; padding: 0 4px; }
/* Etkinlikler: kesikli kutu değil, kanal satırı gibi düz satır + sayı çipi (atlas) */
.q-ev-entry { margin: 6px 8px 0; padding: 6px 10px; border: 0; border-radius: 11px; color: var(--q-text); font-size: 14px; font-weight: 700; }
.q-ev-entry:hover { background: var(--q-chip); color: var(--q-strong); }
.q-ev-badge { background: var(--q-chip-on); color: var(--q-accent-ink); font-weight: 800; }

/* ============================================================================
   BULUT · ATLAS UYUMU — BİLEŞEN KÜTÜPHANESİ (2026-10-18, Fatih: "atlasta ne varsa geçir").
   Onaylı Ekran Atlası'nın ortak ilkelleri (diyalog .dlg, düğme .b, alan .f/.in, anahtar .sw2,
   kaydırıcı .sl, bölmeli seçici .sg, hap .pills, menü .menu, tam sayfa ayar .setp, satır .row)
   uygulamanın KENDİ sınıflarına ve MudBlazor bileşenlerine taşındı. Böylece kullanıcı/sunucu/
   kanal/kategori ayarları, yönetim paneli ve tüm diyaloglar tek yerden atlasa döner.
   Renkler tema değişkenlerinden türer (6 tema × gündüz/gece kendiliğinden çalışır).
   ============================================================================ */
.theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight, .theme-dark,
.theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light, .theme-light {
    /* atlas --surface-2 / --surface-3 / --line-2 karşılıkları */
    --q-surface-2: color-mix(in srgb, var(--q-chat-bg) 70%, var(--q-rail-bg));
    --q-surface-3: color-mix(in srgb, var(--q-chat-bg) 92%, var(--q-accent));
    --q-line-2: color-mix(in srgb, color-mix(in srgb, var(--q-accent) 45%, var(--q-strong)) 22%, transparent);
    --q-btn-grad: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 62%, #ffffff), var(--q-accent) 55%, color-mix(in srgb, var(--q-accent) 84%, #000000));
}
.theme-ocean, .theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight, .theme-dark {
    --q-shadow: 0 14px 40px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.2);
    --q-shadow-lg: 0 30px 80px rgba(0,0,0,.45);
    --q-page-bg: linear-gradient(160deg, var(--q-rail-bg), color-mix(in srgb, var(--q-rail-bg) 88%, var(--q-accent-2)));
    --q-scrim: rgba(8,16,42,.42);
}
.theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light, .theme-light {
    --q-shadow: 0 12px 34px rgba(40,90,170,.12), 0 2px 6px rgba(40,90,170,.06);
    --q-shadow-lg: 0 28px 70px rgba(40,90,170,.18);
    --q-page-bg: linear-gradient(160deg, var(--q-panel-bg), color-mix(in srgb, var(--q-panel-bg) 93%, var(--q-accent-2)));
    --q-scrim: rgba(8,16,42,.26);
}
/* PERDE VE GÖLGE TEMANIN KENDİ TONUNDAN (2026-10-25, Fatih: "bazı popuplarda farklı temada arka planı mavi tonda oluyor").
   Yukarıdaki lacivert perde (8,16,42) ve mavi gölge (40,90,170) atlasın GÖKYÜZÜ renkleri: öbür beş temada bir MudBlazor
   penceresi açılınca arkadaki uygulama maviye boyanıyordu (kullanım şartları penceresi kendi nötr siyah perdesiyle doğru
   görünüyordu). Perde koyu temada temanın en koyu tonundan (--q-rail-bg; Gökyüzü'nünki #09112d, bugünkü lacivertle aynı),
   açık temada koyu metin renginden (--q-strong) türer; açık temaların gölgesi de öyle. Gökyüzü BİLEREK dokunulmadan kalır. */
/* --q-sheet-scrim: telefondaki alt menü (bottom sheet) perdesi; Gökyüzü'nde tanımsız → kuraldaki eski lacivert. */
.theme-grape, .theme-forest, .theme-sunset, .theme-rose, .theme-midnight {
    --q-scrim: color-mix(in srgb, var(--q-rail-bg) 42%, transparent);
    --q-sheet-scrim: color-mix(in srgb, var(--q-rail-bg) 36%, transparent);
}
.theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light {
    --q-scrim: color-mix(in srgb, var(--q-strong) 26%, transparent);
    --q-sheet-scrim: color-mix(in srgb, var(--q-strong) 36%, transparent);
    --q-shadow: 0 12px 34px color-mix(in srgb, var(--q-strong) 12%, transparent), 0 2px 6px color-mix(in srgb, var(--q-strong) 6%, transparent);
    --q-shadow-lg: 0 28px 70px color-mix(in srgb, var(--q-strong) 18%, transparent);
}

/* ---- Yazı: atlas düğme/alan etiketleri GÖVDE yazısı (Nunito 800); Fredoka yalnız başlık ve
   kategori etiketlerinde. Önceki tur düğmeleri de Fredoka yapmıştı → geri alındı. ---- */
.mud-button-label, .q-theme-btn, .q-thcard, .q-settings-field > label {
    font-family: 'Goglis Sans', system-ui, sans-serif; letter-spacing: 0;
}

/* ---- Perde (atlas .ov) ---- */
.mud-overlay .mud-overlay-scrim, .mud-overlay-dialog { background: var(--q-scrim, rgba(8,16,42,.42)) !important; }
.mud-overlay-dialog { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ---- Diyalog (atlas .dlg) ---- */
.mud-dialog {
    background: color-mix(in srgb, var(--q-chat-bg) 96%, transparent);
    border: 1px solid var(--q-line-2);
    box-shadow: var(--q-shadow-lg);
}
.mud-dialog:not(.mud-dialog-fullscreen) { border-radius: 24px; }
.mud-dialog .mud-dialog-title { padding: 18px 20px 10px; font-size: 20px; }
.mud-dialog .mud-dialog-title .mud-typography { font-family: var(--q-display); font-weight: 600; font-size: 20px; letter-spacing: .1px; }
.mud-dialog .mud-dialog-title .mud-button-close {
    top: 14px; right: 16px; width: 32px; height: 32px; padding: 0; border-radius: 10px;
    background: var(--q-chip); color: var(--q-muted) !important;
}
.mud-dialog .mud-dialog-title .mud-button-close .mud-icon-root { font-size: 18px; color: var(--q-muted) !important; }
.mud-dialog .mud-dialog-content { padding: 8px 20px 16px; }
.mud-dialog .mud-dialog-actions {
    padding: 12px 20px 16px; gap: 8px; border-top: 1px solid var(--q-border);
    background: color-mix(in srgb, var(--q-surface-2) 60%, transparent);
}

/* ---- Düğmeler (atlas .b / .b.p / .b.d / .b.g) ---- */
.q-btn-soft, .q-btn-primary, .q-btn-danger {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 16px; border-radius: 13px; font-family: inherit; font-weight: 800; font-size: 13.5px; white-space: nowrap;
}
.q-btn-soft { background: var(--q-chip); color: var(--q-text); border: 1px solid var(--q-border); }
.q-btn-soft:hover { background: var(--q-chip-on); color: var(--q-strong); border-color: var(--q-line-2); }
.q-btn-primary { background: var(--q-btn-grad); color: #fff; border: 1px solid transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent); }
.q-btn-primary:hover { background: var(--q-btn-grad); border-color: transparent; filter: brightness(1.06); }
.q-btn-danger { background: color-mix(in srgb, var(--q-danger) 14%, transparent); color: var(--q-danger); border: 1px solid color-mix(in srgb, var(--q-danger) 30%, transparent); }
.q-btn-danger:hover { background: color-mix(in srgb, var(--q-danger) 22%, transparent); }
.q-btn-primary:disabled { filter: saturate(.6); }
.q-btn-soft .mud-icon-root, .q-btn-primary .mud-icon-root, .q-btn-danger .mud-icon-root { font-size: 16px !important; }
/* MudButton: atlas düğme biçimi (büyük harf yok, 13px köşe, 800 ağırlık) */
.mud-button-root.mud-button { border-radius: 13px; text-transform: none; letter-spacing: 0; }
.mud-button-root.mud-button .mud-button-label { font-weight: 800; font-size: 13.5px; }
.mud-button-filled.mud-button-filled-primary { background: var(--q-btn-grad) !important; color: #fff !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent) !important; }
.mud-button-filled.mud-button-filled-error { background: var(--q-danger) !important; color: #fff !important; box-shadow: none !important; }
/* PASİF DOLU DÜĞME (2026-10-18, Fatih ekran görüntüsüyle: "tasarım hatası var gibi" — Topluluk oluştur'da
   ad yazılmadan önceki "Oluştur"). Üstteki iki kural dolu düğmeyi !important ile boyuyor ama PASİF hâli
   ayırmıyordu: degrade ve vurgu parıltısı tam güçte kalıyor, yalnız yazı (pasif metin kuralı, yukarıda)
   griye dönüyordu → dolu mor düğmenin üstünde soluk gri yazı; düğme hem "basılabilir" parlıyor hem bozuk
   görünüyordu. Pasif hâl artık degradesiz ve parıltısız: düğmenin KENDİ renginde (ana = vurgu, hata =
   kırmızı) yumuşak bir zemin + ince çerçeve + o rengin soluk yazısı — "asıl eylem bu, henüz değil".
   Yazı kontrastı altı renk × gündüz/gece ölçüldü (≥ 3:1; 2026-08-10'daki pasif okunurluk kuralının tabanı). */
.mud-button-filled.mud-button-filled-primary:disabled,
.mud-button-filled.mud-button-filled-primary.mud-disabled,
.q-btn-primary:disabled {
    background: color-mix(in srgb, var(--q-accent) 13%, transparent) !important;
    border-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-accent) 26%, transparent) !important;
    filter: none; opacity: 1;
}
.mud-button-filled.mud-button-filled-primary:disabled .mud-button-label,
.mud-button-filled.mud-button-filled-primary.mud-disabled .mud-button-label,
.mud-button-filled.mud-button-filled-primary:disabled .mud-icon-root,
.q-btn-primary:disabled { color: color-mix(in srgb, var(--q-accent-ink) 66%, var(--q-muted)) !important; }
.mud-button-filled.mud-button-filled-error:disabled,
.mud-button-filled.mud-button-filled-error.mud-disabled {
    background: color-mix(in srgb, var(--q-danger) 11%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--q-danger) 24%, transparent) !important;
}
.mud-button-filled.mud-button-filled-error:disabled .mud-button-label,
.mud-button-filled.mud-button-filled-error.mud-disabled .mud-button-label,
.mud-button-filled.mud-button-filled-error:disabled .mud-icon-root { color: color-mix(in srgb, var(--q-danger) 72%, var(--q-muted)) !important; }
.mud-button-outlined { border-radius: 13px; border: 1px solid var(--q-border) !important; background: var(--q-chip); }
.mud-dialog .mud-dialog-actions .mud-button-text:not(.mud-button-filled) { background: var(--q-chip); border: 1px solid var(--q-border); padding: 7px 16px; }

/* ---- Metin alanları (atlas .in) — MudTextField/MudSelect outlined + düz girişler ---- */
.mud-input.mud-input-outlined { border-radius: 13px; background: var(--q-surface-2); }
.mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 13px; border-width: 1.5px !important; border-color: var(--q-border) !important; }
.mud-input.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--q-line-2) !important; }
.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent) !important; }
.mud-input.mud-input-outlined:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); }
.mud-input.mud-input-outlined .mud-input-root { color: var(--q-strong); font-size: 14px; }
.mud-input-root::placeholder { color: var(--q-faint); opacity: 1; }
.mud-input-helper-text { font-size: 12.5px; color: var(--q-muted); }
.q-settings-select, .q-settings-input {
    min-height: 40px; padding: 8px 12px; border-radius: 13px; background-color: var(--q-surface-2);
    border: 1.5px solid var(--q-border); color: var(--q-strong); font-size: 14px; font-family: inherit;
}
select.q-settings-select {
    max-width: none; appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238696BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
select.q-settings-select option { background: var(--q-chat-bg); color: var(--q-strong); }
.q-settings-select:hover, .q-settings-input:hover { border-color: var(--q-line-2); }
.q-settings-select:focus, .q-settings-input:focus { outline: none; border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); }

/* ---- Anahtar (atlas .sw2): 42×24 ray, 18 px beyaz düğme, açıkken gökyüzü degradesi ---- */
.mud-switch-span, .mud-switch-span.mud-switch-span-medium, .mud-switch-span.mud-switch-span-small {
    width: 42px; height: 24px; padding: 0; margin: 4px; overflow: visible; border-radius: 999px;
}
.mud-switch-span .mud-switch-track {
    position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 999px;
    opacity: 1 !important; background: var(--q-line-2) !important; transition: background .18s;
}
.mud-switch-base, .mud-switch-base.mud-switch-base-medium, .mud-switch-base.mud-switch-base-small {
    padding: 0 !important; top: 3px; left: 3px; color: #fff !important; background: transparent !important;
}
.mud-switch-base:hover, .mud-switch-base:focus-visible { background: transparent !important; }
.mud-switch-base.mud-checked { transform: translateX(18px); }
.mud-switch-base.mud-checked + .mud-switch-track { background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 62%, #fff), var(--q-accent)) !important; }
.mud-switch-button .mud-switch-thumb-medium, .mud-switch-button .mud-switch-thumb-small {
    width: 18px; height: 18px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
.mud-switch-base .mud-ripple, .mud-switch-base::after { display: none; }
.mud-switch-base.mud-switch-disabled + .mud-switch-track { opacity: .45 !important; }

/* ---- Kaydırıcı (atlas .sl): 6 px ray, degrade dolgu, beyaz düğme + gökyüzü halkası.
   Dolgu yüzdesi --q-rp: goglisRangeFill (goglis.js) her girişte/ilk çizimde yazar.
   HARİÇ: duyarlılık eşiği (q-gatebar-range — metrenin üstünde ince beyaz çizgi) ve MudSlider
   (kendi dolgu öğesi var; aşağıda ayrıca biçimlenir). ---- */
input[type="range"].q-vqs-slider, .q-settings-body input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input), .mud-dialog input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input) {
    -webkit-appearance: none; appearance: none; height: 18px; background: transparent; cursor: pointer;
}
.q-vqs-slider::-webkit-slider-runnable-track, .q-settings-body input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-webkit-slider-runnable-track, .mud-dialog input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-webkit-slider-runnable-track {
    height: 6px; border-radius: 999px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--q-accent) 55%, #fff), var(--q-accent)) 0 0 / var(--q-rp, 50%) 100% no-repeat, var(--q-line-2);
}
.q-vqs-slider::-webkit-slider-thumb, .q-settings-body input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-webkit-slider-thumb, .mud-dialog input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%;
    background: #fff; border: 3px solid var(--q-accent); box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.q-vqs-slider::-moz-range-track, .q-settings-body input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-moz-range-track { height: 6px; border-radius: 999px; background: var(--q-line-2); }
.q-vqs-slider::-moz-range-progress, .q-settings-body input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-moz-range-progress { height: 6px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--q-accent) 55%, #fff), var(--q-accent)); }
.q-vqs-slider::-moz-range-thumb, .q-settings-body input[type="range"]:not(.q-gatebar-range):not(.mud-slider-input)::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--q-accent); }

/* ---- Bölmeli seçici (atlas .sg) ve haplar (atlas .pills) ---- */
.q-seg { display: inline-flex !important; flex-wrap: wrap; gap: 4px !important; padding: 3px; border-radius: 13px; background: var(--q-chip); border: 1px solid var(--q-border); margin-top: 0 !important; max-width: 100%; }
.q-seg .q-theme-btn { padding: 6px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--q-muted); font-weight: 800; font-size: 13px; box-shadow: none; gap: 6px; }
.q-seg .q-theme-btn:hover { color: var(--q-strong); background: transparent; box-shadow: none; }
.q-seg .q-theme-btn.on { background: var(--q-chat-bg); color: var(--q-accent-ink); box-shadow: 0 2px 6px rgba(30,80,160,.12); }
.q-seg .q-theme-btn .mud-icon-root { font-size: 16px; }
.q-pills { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
.q-pills .q-theme-btn { padding: 6px 13px; border-radius: 999px; border: 0; background: var(--q-chip); color: var(--q-muted); font-weight: 800; font-size: 13px; box-shadow: none; }
.q-pills .q-theme-btn:hover { color: var(--q-strong); box-shadow: none; }
.q-pills .q-theme-btn.on { background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-pills .q-curprev { display: none; }

/* ---- Renk teması kartları (atlas .thc): çapraz bölünmüş tek renk karesi, seçilene çift halka ---- */
.q-thgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.q-thcard { font-size: 12px; font-weight: 800; color: var(--q-text); gap: 6px; }
.q-thcard > i { background: linear-gradient(150deg, var(--th-a) 0 40%, var(--th-b) 40%) !important; box-shadow: inset 0 0 0 1px var(--q-border); border: 0; }
.q-thcard > i::before, .q-thcard > i::after { display: none; }
.q-thcard.on > i { box-shadow: 0 0 0 2px var(--q-chat-bg), 0 0 0 4px var(--q-accent); }

/* ---- Düzen stili kartları (atlas .layoutc) ---- */
.q-lay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.q-lay-card { align-items: stretch; text-align: left; gap: 8px; padding: 10px; border-radius: 16px; border: 2px solid var(--q-border); background: var(--q-surface-2); box-shadow: none; }
.q-lay-card:hover { border-color: var(--q-line-2); }
.q-lay-card.on { border-color: var(--q-accent); background: var(--q-chip-on); box-shadow: none; }
.q-lay-card .q-lay-mini { width: 100%; height: 90px; gap: 4px; }
.q-lay-card .q-lay-mini i { border-radius: 6px; background: var(--q-line-2); }
.q-lay-card .q-lay-mini i:nth-child(1), .q-lay-card .q-lay-mini i:nth-child(3) { width: 22%; }
.q-lay-card .q-lay-mini.marena i:nth-child(1), .q-lay-card .q-lay-mini.marena i:nth-child(3),
.q-lay-card .q-lay-mini.mklasik i:nth-child(1), .q-lay-card .q-lay-mini.mklasik i:nth-child(3),
.q-lay-card .q-lay-mini.mamfi i:nth-child(1) { background: color-mix(in srgb, var(--q-accent) 35%, var(--q-chat-bg)); }
.q-lay-card .q-lay-name { font-family: var(--q-display); font-weight: 600; font-size: 15px; color: var(--q-strong); }
.q-lay-card .q-lay-hint { font-size: 12px; color: var(--q-muted); }

/* ---- Menüler (atlas .menu) ---- */
.q-menu-panel, .q-mention-pop, .q-ctx-panel {
    padding: 6px; border-radius: 16px; min-width: 220px;
    background: color-mix(in srgb, var(--q-chat-bg) 97%, transparent);
    border: 1px solid var(--q-line-2); box-shadow: var(--q-shadow-lg);
}
.q-menu-item { gap: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--q-text); }
.q-menu-item:hover { background: var(--q-chip); color: var(--q-strong); }
.q-menu-item .q-menu-ico, .q-menu-item > .mud-icon-root { font-size: 17px !important; width: 17px; height: 17px; color: var(--q-muted); }
.q-menu-item.on { background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-menu-item.danger, .q-menu-item.danger .q-menu-ico, .q-menu-item.danger > .mud-icon-root { color: var(--q-danger); }
.q-menu-item.accent, .q-menu-item.accent .q-menu-ico { color: var(--q-accent-ink); }
.q-menu-head { padding: 6px 10px 4px; font-family: 'Goglis Sans', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--q-faint); }
.q-menu-sep { background: var(--q-border); margin: 4px 6px; }
/* MudBlazor açılır listeleri (MudSelect/MudMenu) aynı menü dilinde */
.mud-popover.mud-popover-open:has(.mud-list) { border-radius: 16px; background: color-mix(in srgb, var(--q-chat-bg) 97%, transparent); border: 1px solid var(--q-line-2); box-shadow: var(--q-shadow-lg); }
.mud-popover .mud-list { padding: 6px; }
.mud-popover .mud-list-item { border-radius: 10px; padding: 8px 10px; }
.mud-popover .mud-list-item .mud-typography, .mud-popover .mud-list-item-text { font-size: 13.5px; font-weight: 700; color: var(--q-text); }
.mud-popover .mud-list-item:hover { background: var(--q-chip); }
.mud-popover .mud-list-item.mud-selected-item { background: var(--q-chip-on); }
.mud-popover .mud-list-item.mud-selected-item .mud-typography { color: var(--q-accent-ink); }

/* ---- Tam sayfa ayarlar (atlas .setp) — kullanıcı/sunucu/kanal/kategori ayarları ve yönetim paneli ---- */
.mud-dialog:has(.q-settings) { background: var(--q-page-bg); }
.q-settings { background: transparent; }
.q-settings-nav { gap: 1px; }
.q-settings-navtitle { font-size: 11.5px; letter-spacing: 1.2px; color: var(--q-faint); padding: 12px 10px 5px; }
.q-settings-nav > .q-settings-navtitle:first-child { padding-top: 0; }
.q-settings-navitem { gap: 10px; padding: 7px 10px; border-radius: 11px; font-weight: 700; font-size: 13.5px; color: var(--q-text); white-space: nowrap; }
.q-settings-navitem .mud-icon-root, .q-settings-navitem .q-menu-ico { font-size: 17px !important; width: 17px; height: 17px; color: var(--q-muted); }
.q-settings-navitem:hover { background: var(--q-chip); color: var(--q-strong); }
.q-settings-navitem.on { background: var(--q-chip-on); color: var(--q-accent-ink); font-weight: 700; }
.q-settings-navitem.on .mud-icon-root, .q-settings-navitem.on .q-menu-ico { color: var(--q-accent); }
.q-settings-navitem.danger, .q-settings-navitem.danger .mud-icon-root { color: var(--q-danger); }
.q-settings-nav .q-menu-sep { margin: 8px 10px; background: var(--q-border); }
/* Menünün dibi (2026-10-25): sürüm notları + yasal sayfalar + sürüm; boş yer varsa en alta yaslanır */
.q-settings-navfoot { margin-top: auto; padding: 14px 10px 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px;
    font-size: 11.5px; line-height: 1.5; color: var(--q-muted); }
.q-settings-navfoot i { font-style: normal; color: var(--q-faint); }
.q-settings-navfoot a, .q-settings-navfoot button { padding: 0; border: 0; background: none; color: var(--q-muted); font: inherit; cursor: pointer;
    text-decoration: none; white-space: nowrap; }
.q-settings-navfoot a:hover, .q-settings-navfoot button:hover { color: var(--q-accent); text-decoration: underline; }
.q-settings-navfoot small { flex-basis: 100%; margin-top: 4px; font-size: 11px; color: var(--q-muted); }
.q-settings-subs { margin: 2px 0 6px 38px; border-left: 0; gap: 1px; }
.q-settings-subitem { padding: 3px 0; margin-left: 0; border-left: 0; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--q-muted); }
.q-settings-subitem:hover { background: none; color: var(--q-strong); }
.q-settings-subitem.on { color: var(--q-accent-ink); font-weight: 700; }
.q-settings-h { font-size: 24px; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--q-strong); }
.q-settings-h .q-helpbtn { width: 26px; height: 26px; background: var(--q-chip); color: var(--q-muted); }
.q-settings-h3 {
    font-family: var(--q-display); font-weight: 600; font-size: 16.5px; letter-spacing: 0; text-transform: none;
    color: var(--q-strong); margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--q-border);
}
.q-settings-field > label { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--q-muted); margin-bottom: 6px; }
.q-settings-hint { font-size: 12.5px; color: var(--q-muted); }
/* Bölüm alanı (atlas .sec): Fredoka başlıklı, tam satır, altı çizgili */
.q-settings-field.q-sec { grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--q-border); }
.q-settings-field.q-sec > label { font-family: var(--q-display); font-weight: 600; font-size: 16.5px; letter-spacing: 0; text-transform: none; color: var(--q-strong); margin-bottom: 10px; }
.q-settings-field.q-wide { grid-column: 1 / -1; }
/* Kaydırıcı etiketi (atlas .sl .top b): kalın, cümle biçimi */
.q-settings-field:has(> input[type="range"]) > label { font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--q-strong); }
/* Anahtar satırı (atlas .tg): metin solda, anahtar sağda */
.q-settings-field > .mud-input-control:has(.mud-switch) { width: 100%; }
/* DİKKAT: MudBlazor metin span'ına da `mud-switch` sınıfını basıyor → kural yalnız <label>'a. */
.q-settings-field label.mud-switch { width: 100%; flex-direction: row-reverse; justify-content: space-between; gap: 14px; }
.q-settings-field label.mud-switch > .mud-typography { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--q-strong); margin: 0; }
/* Profil kartı (atlas Hesabım): kapak + kapağa binen büyük avatar + ad/kimlik + sağda "Fotoğrafı kaldır" */
/* overflow: CLIP (hidden DEĞİL): hidden kartı kaydırma kabı yapar → ızgara satırı kartın asgari boyunu 0
   sayıp alanları kartın ÜSTÜNE bindiriyordu (ölçüldü: kart 188 px, satırı ~4 px). DİKKAT: "çözüm" diye
   ızgara çocuklarına `min-height: min-content` VERME — Chrome'da satırları daha da ezip HER ŞEYİ
   üst üste bindirdi (ölçüldü); varsayılan `auto` doğru çalışıyor. */
.q-settings-card { position: relative; padding: 0; overflow: clip; border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 66%, transparent); border: 1px solid var(--q-border); }
.q-settings-card .q-coveredit { height: 110px; border-radius: 0; margin: 0; }
.q-settings-card .q-coveredit-badge { top: auto; bottom: 10px; right: 10px; width: 32px; height: 32px; border-radius: 10px; background: rgba(5,12,32,.5); }
.q-settings-card .q-coveredit-remove { top: auto; bottom: 10px; right: 48px; border-radius: 10px; width: 32px; height: 32px; background: rgba(5,12,32,.5); }
.q-settings-card .q-settings-avrow { align-items: flex-end; gap: 8px 14px; padding: 0 18px 16px; margin-top: -34px; position: relative; }
.q-settings-card .q-avedit .q-av { width: 84px !important; height: 84px !important; font-size: 32px !important; border: 5px solid var(--q-chat-bg); box-sizing: content-box; }
.q-settings-card .q-avedit-badge { border-color: var(--q-chat-bg); right: 2px; bottom: 4px; }
.q-settings-card .q-settings-avrow > div:last-child { flex: 1; padding-bottom: 4px; }
.q-settings-card .q-settings-avrow > div:last-child > div:first-child { font-family: var(--q-display); font-weight: 600 !important; font-size: 20px !important; }
.q-settings-card .q-avedit-remove { position: absolute; right: 18px; bottom: 18px; margin: 0; color: var(--q-accent-ink); font-weight: 800; font-size: 13px; }
/* Kısayol satırları (atlas Kısayollar .row + .kbd2) */
.q-hk-list { max-width: none; gap: 6px; }
.q-hk-row { padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-hk-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--q-chip-on); color: var(--q-accent); }
.q-hk-label { font-weight: 700; color: var(--q-strong); }
.q-hk-bind { background: transparent; border: 0; min-width: 0; }
.q-hk-bind:hover { border-color: transparent; background: var(--q-chip); }
.q-hk-bind.capturing { border: 1px solid var(--q-accent); }
.q-kbd { height: auto; padding: 3px 8px; border-radius: 8px; background: var(--q-chat-bg); border: 1px solid var(--q-line-2); border-bottom-width: 1px; box-shadow: 0 2px 0 var(--q-line-2); font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12px; color: var(--q-text); }

@media (min-width: 701px) and (min-height: 521px) {
    .q-settings-nav { width: 270px; padding: 26px 14px 20px 26px; background: color-mix(in srgb, var(--q-chat-bg) 30%, transparent); border-right: 1px solid var(--q-border); }
    .q-settings-body { padding: 30px 40px 20px; column-gap: 16px; }
    .q-settings-h { padding-right: 230px; }
    /* Üst sağ araçlar (atlas STOOLS): 32 px yuvarlatılmış kareler, Kaydet gökyüzü dolgulu */
    .q-settings-close, .q-settings-save, .q-settings-expand {
        top: 22px; width: 32px; height: 32px; border-radius: 10px; border: 0; box-shadow: none;
        background: var(--q-chip); color: var(--q-muted);
    }
    .q-settings-close:hover, .q-settings-expand:hover { background: var(--q-chip-on); color: var(--q-strong); }
    .q-settings-close { right: 24px; }
    .q-settings-save { right: 64px; background: var(--q-accent); color: #fff; }
    .q-settings-expand { right: 64px; }
    .q-settings:has(.q-settings-save) .q-settings-expand { right: 104px; }
    .q-settings-close .mud-icon-root, .q-settings-save .mud-icon-root, .q-settings-expand .mud-icon-root { font-size: 17px; }
    .q-settings-undo { top: 22px; right: 144px; height: 32px; padding: 0 11px; gap: 6px; border-radius: 10px; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); font-size: 12.5px; font-weight: 800; }
    .q-settings-undo .mud-icon-root { font-size: 16px; }
}

/* İki ya da daha çok .q-theme-btn YAN YANA → bölmeli seçici (atlas .sg). Kapsayıcıya sınıf eklemek
   gerekmez: kullanıcı/sunucu/kanal ayarları ve yönetim panelindeki tüm seçenek grupları tek kuralla döner.
   İmleç gibi hap görünmesi gerekenler q-pills ile hariç tutulur. */
div:has(> .q-theme-btn + .q-theme-btn):not(.q-pills):not(.q-opts) {
    width: fit-content; max-width: 100%; flex-wrap: wrap; gap: 4px !important; padding: 3px; margin-top: 0 !important;
    border-radius: 13px; background: var(--q-chip); border: 1px solid var(--q-border);
}
div:has(> .q-theme-btn + .q-theme-btn):not(.q-pills):not(.q-opts) > .q-theme-btn {
    padding: 6px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--q-muted);
    font-weight: 800; font-size: 13px; box-shadow: none; gap: 6px;
}
div:has(> .q-theme-btn + .q-theme-btn):not(.q-pills):not(.q-opts) > .q-theme-btn:hover { color: var(--q-strong); box-shadow: none; }
div:has(> .q-theme-btn + .q-theme-btn):not(.q-pills):not(.q-opts) > .q-theme-btn.on { background: var(--q-chat-bg); color: var(--q-accent-ink); box-shadow: 0 2px 6px rgba(30,80,160,.12); }
div:has(> .q-theme-btn + .q-theme-btn):not(.q-pills):not(.q-opts) > .q-theme-btn .mud-icon-root { font-size: 16px; }
/* Tek başına duran seçenek düğmesi = atlas küçük düğme (.b.s) */
.q-theme-btn { padding: 7px 12px; border-radius: 11px; border: 1px solid var(--q-border); background: var(--q-chip); color: var(--q-text); font-weight: 800; font-size: 13px; }
.q-theme-btn.on { border-color: color-mix(in srgb, var(--q-accent) 45%, transparent); background: var(--q-chip-on); color: var(--q-accent-ink); }
/* Durum düğmeleri (atlas Hesabım → Durum: .b.s, seçili .b.p) */
.q-status-btn { padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); }
.q-status-btn.on { background: var(--q-btn-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent); }

/* ============================================================================
   BULUT · ATLAS UYUMU — DM (2026-10-18): DM satırı (atlas .r-dm), DM başlığı (.dm-head),
   profil paneli (.m-prof / .pf-*), ev düğmesinin "on" halkası (.m-home.on).
   ============================================================================ */
/* Ev düğmesinin "on" hâli = YUMUŞAK ZEMİN (2026-10-23, Fatih: çift halka "biraz çirkin işaretleme" →
   öneri A). Seçili DM satırı ve topluluk sekmeleriyle aynı dil: açık vurgu zemini, çerçeve yok; üzerine
   gelince daha soluk zemin. Dolgu, kenar boşluğuyla dengelenir — LOGO YERİNDEN OYNAMAZ (ölçüldü: logo
   x=12, y=13): sol -6/+6, alt 3 px yukarı (şerit öğeleri alta hizalı, zemin şeridin dibine yapışmasın). */
.q-brand { border-radius: 14px; padding: 5px 12px 5px 6px; margin: 0 0 3px -6px; transition: background .2s; }
.q-brand:hover:not(.on) { background: var(--q-chip); }
.q-brand.on { background: var(--q-chip-on); }
.q-dmrow { min-height: 46px; gap: 11px; padding: 0 7px; border-radius: 13px; color: var(--q-muted); }
.q-dmrow:hover { background: var(--q-chip); color: var(--q-text); }
.q-dmrow.sel { background: var(--q-chip-on); color: var(--q-strong); }
.q-dmrow .q-dmrow-name { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.q-dmrow .q-dmrow-name > b { font-weight: 700; font-size: 13.5px; color: var(--q-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-dmrow.sel .q-dmrow-name > b { color: var(--q-strong); }
.q-dmrow .q-dmrow-name > small { font-size: 11.5px; font-weight: 600; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-dmrow .q-statuswrap .q-dot { width: 12px; height: 12px; border-width: 2.5px; }
.q-dmrow .q-dmpin, .q-dmrow .q-dmclose { color: var(--q-faint); }
.q-dmrow .q-dmpin.on { color: var(--q-accent); }
/* DM başlığı */
.q-dmh-avwrap { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.q-av.q-dmh-av { width: 32px; height: 32px; font-size: 12px; object-fit: cover; }
.q-dmh-avwrap .q-dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border: 2.5px solid var(--q-chat-bg); }
.q-dmh-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.q-dmh-sub { font-size: 12px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-dmh-sub.play { color: var(--q-online); }
.q-chathead .q-dmfriend { padding: 2px 9px; border-radius: 999px; border: 0; background: var(--q-chip); font-size: 11.5px; font-weight: 800; color: var(--q-text); }
.q-chathead .q-dmfriend.on { background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); }
.q-chathead .q-dmfriend.add { background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-chathead .mud-icon-button.mud-success-text { color: var(--q-online) !important; width: 34px; height: 34px; border-radius: 11px; }
/* Profil paneli — 2026-10-24'ten beri ProfileCardBody'nin kendisi (.q-peerwrap). */
.q-peerwrap .q-pcard2 { width: 100%; max-width: none; border-radius: 16px; }

/* ============================================================================
   BULUT · ATLAS UYUMU — EV / ARKADAŞLAR / ŞU AN AKTİF (2026-10-18)
   ============================================================================ */
/* Ev: karosuz büyük salyangoz + emoji'li kart satırları (atlas "Ev") */
.q-welcome-badge.bare { width: auto; height: auto; padding: 0; margin-bottom: 0; background: none; border-radius: 0; box-shadow: none !important; --gsn-mark: #4CB0FF; }
.q-welcome-badge.bare > .gsnail { width: 170px; height: auto; margin: 0; filter: drop-shadow(0 18px 28px rgba(30,110,220,.32)); }
.q-empty-title.q-welcome-title { font-size: 30px; margin-top: 4px; }
.q-empty-sub.q-welcome-sub { max-width: 520px; font-size: 14.5px; color: var(--q-muted); line-height: 1.5; }
.q-empty-wall .q-empty-hints { width: min(520px, 100%); gap: 6px; margin-top: 6px; }
.q-empty-wall .q-empty-hint {
    gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: left;
    background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border);
    font-weight: 700; font-size: 14px; color: var(--q-strong);
}
.q-empty-wall .q-empty-hint .gg-emoji { width: 30px; height: 30px; vertical-align: 0; }
.q-empty-wall .q-empty-hint b { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; box-shadow: none; }
.q-welcome-dl { padding: 6px 11px; gap: 6px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); color: var(--q-text); border: 1px solid var(--q-border); box-shadow: none; }
.q-welcome-dl:hover { background: var(--q-chip-on); color: var(--q-strong); }
.q-welcome-links { gap: 6px; font-size: 12.5px; }
.q-welcome-links a.lk { color: var(--q-accent-ink); font-weight: 800; }
/* Arkadaşlar (atlas friendsCenter + .row) */
.q-friends-headbadge { width: 42px; height: 42px; border-radius: 14px; background: var(--q-chip-on); color: var(--q-accent); box-shadow: none; }
.q-friends-headbadge .mud-icon-root { font-size: 22px; }
.q-friends-title { font-family: var(--q-display); font-weight: 600; font-size: 20px; }
.q-friends-sub { font-size: 12.5px; color: var(--q-muted); }
.q-friends-discover { padding: 6px 11px; gap: 6px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); color: var(--q-text); border: 1px solid var(--q-border); }
.q-friends-discover:hover { background: var(--q-chip-on); color: var(--q-strong); }
.q-friends-body { display: flex; flex-direction: column; gap: 8px; }
.q-friends-body > .q-ctx-inline { display: block; }
.q-friend-row-lg { gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-friend-row-lg:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-friend-row-lg .q-av { width: 34px !important; height: 34px !important; }
.q-friend-row-lg .q-friend-name { font-size: 14px; font-weight: 700; }
.q-friend-row-lg .q-friend-status { font-size: 12.5px; }
.q-friend-acts { display: flex; align-items: center; gap: 6px; flex: none; }
.q-btn-s { padding: 6px 11px !important; gap: 6px !important; border-radius: 10px !important; font-size: 12.5px !important; }
.q-btn-s .mud-icon-root { font-size: 16px !important; }
.q-btn-mint { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-family: inherit; font-weight: 800; white-space: nowrap;
    background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); border: 1px solid color-mix(in srgb, var(--q-online) 30%, transparent); }
.q-btn-mint:hover { background: color-mix(in srgb, var(--q-online) 24%, transparent); }
.q-icb { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; display: inline-grid; place-items: center; flex: none; cursor: pointer; color: var(--q-muted); background: var(--q-chip); }
.q-icb .mud-icon-root { font-size: 16px; }
.q-icb:hover { color: var(--q-strong); background: var(--q-chip-on); }
.q-icb.d { color: var(--q-danger); background: color-mix(in srgb, var(--q-danger) 12%, transparent); }
.q-icb.d:hover { background: color-mix(in srgb, var(--q-danger) 20%, transparent); }
.q-icb.warn { color: var(--q-amber); }
@media (max-width: 560px) { .q-friend-actlbl { display: none; } }
/* ARKADAŞLAR SAYFASI (2026-10-24, Bulut rötuş 3): süzgeç sekmeleri + arama; eylemler fareli ekranda üzerine gelince
   (menü açıkken de görünür kalır), dokunmatikte hep görünür. Çevrimdışı satır sönük. */
.q-frbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.q-frtabs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.q-frtabs button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
    background: var(--q-chip); color: var(--q-muted); font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
.q-frtabs button:hover { color: var(--q-strong); }
.q-frtabs button.on { background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-frtabs i { font-style: normal; font-size: 11px; color: var(--q-faint); }
.q-frtabs button.on i { color: inherit; opacity: .8; }
.q-frtabs i.hot { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--q-danger); color: #fff; line-height: 18px; text-align: center; opacity: 1; }
.q-frsearch { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 11px; flex: 0 1 220px; min-width: 140px;
    border-radius: 11px; background: var(--q-input-bg); border: 1px solid var(--q-border); color: var(--q-faint); }
.q-frsearch:focus-within { border-color: var(--q-accent); }
.q-frsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--q-strong); font: 600 13px/1.2 'Goglis Sans', system-ui, sans-serif; }
.q-frsearch input::placeholder { color: var(--q-faint); }
@media (max-width: 560px) { .q-frsearch { flex-basis: 100%; } }
.q-frsec { font: 600 11.5px/1 var(--q-display); letter-spacing: 1.2px; text-transform: uppercase; color: var(--q-faint); margin: 10px 4px 2px; }
.q-frrow-t { flex: 1; min-width: 0; }
.q-frrow .q-friend-status { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--q-muted); }
.q-frrow .q-friend-status > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-frrow .q-friend-status.act { color: color-mix(in srgb, var(--q-accent) 75%, var(--q-strong)); }
.q-frrow .q-friend-status.voice { color: var(--q-online); }
.q-frrow .q-friend-status .mud-icon-root { font-size: 14px; }
.q-frrow.off .q-statuswrap, .q-frrow.off .q-frrow-t { opacity: .6; }
@media (hover: hover) {
    .q-frrow .q-fracts { opacity: 0; transition: opacity .15s ease; }
    .q-frrow:hover .q-fracts, .q-frrow:focus-within .q-fracts, .q-frrow .q-fracts:has(.q-menu-panel) { opacity: 1; }
}
/* Şu an aktif (atlas activeNow) */
.q-active { padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.q-active-h { padding: 0; gap: 8px; font-family: var(--q-display); font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none; color: var(--q-strong); }
.q-active-n { min-width: 0; height: auto; padding: 2px 9px; border-radius: 999px; background: var(--q-chip-on); color: var(--q-accent-ink); font-family: 'Goglis Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 800; }
.q-active-row { align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-active-row:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-active-row.voice { box-shadow: none; }
.q-active-name { font-size: 14px; font-weight: 700; }
.q-active-sub { font-size: 12.5px; }
.q-active-join { align-self: center; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; font-family: inherit;
    background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); border: 1px solid color-mix(in srgb, var(--q-online) 30%, transparent); }
.q-active-join:hover { background: var(--q-online); border-color: transparent; color: #fff; }

/* Hesabım kartı: "@kullanıcı · durum" TEK satır (atlas) — ad kapağın altında kalsın */
.q-settings-card .q-settings-avrow > div:last-child > .q-set-ident { display: inline-flex; margin: 0; vertical-align: middle; }
.q-settings-card .q-settings-avrow > div:last-child > .q-set-ident + div { display: inline; font-size: 12.5px !important; }
.q-settings-card .q-settings-avrow > div:last-child > .q-set-ident + div::before { content: " · "; }

/* ============================================================================
   BULUT · ATLAS UYUMU — ARAMA / GELEN KUTUSU (2026-10-18)
   ============================================================================ */
.q-srch-chip { padding: 6px 13px; border-radius: 999px; border: 0; background: var(--q-chip); color: var(--q-muted); font-size: 13px; font-weight: 800; }
.q-srch-chip:hover { color: var(--q-strong); border-color: transparent; }
.q-srch-chip.on { background: var(--q-chip-on); color: var(--q-accent-ink); border-color: transparent; }
.q-srch-chip.sm { padding: 2px 9px; font-size: 11.5px; color: var(--q-text); }
.q-srch-chip.sm.on { color: var(--q-accent-ink); }
/* Gelen kutusu sekmeleri: alt çizgili sekmeler (atlas .tabs2) */
.q-inbox-tabs { gap: 4px; padding: 0 4px; margin: -2px -6px 6px; border-bottom: 1px solid var(--q-border); }
.q-inbox-tab { flex: 1 1 auto; padding: 9px 6px; margin-bottom: -1px; border-radius: 0; border-bottom: 2.5px solid transparent; background: none; font-size: 12.5px; font-weight: 800; color: var(--q-muted); white-space: normal; line-height: 1.25; text-align: center; }
.q-inbox-tab:hover { background: none; color: var(--q-strong); }
.q-inbox-tab.on { background: none; color: var(--q-accent-ink); border-bottom-color: var(--q-accent); font-weight: 800; }
.q-inbox-empty { font-size: 12.5px; color: var(--q-muted); padding: 16px 10px; }

/* ============================================================================
   BULUT · ATLAS UYUMU — GERİ BİLDİRİM / YARDIM MERKEZİ (2026-10-18)
   ============================================================================ */
.q-fb-upload { padding: 6px 11px; gap: 6px; border-radius: 10px; border: 1px solid var(--q-border); background: var(--q-chip); color: var(--q-text); font-size: 12.5px; font-weight: 800; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.q-fb-upload:hover { background: var(--q-chip-on); border-color: var(--q-line-2); }
.q-fb-upload + div { display: inline-block; margin: 0 0 0 10px !important; vertical-align: middle; font-size: 12.5px !important; color: var(--q-muted) !important; }
.q-fb-preview img { border-radius: 14px; }
/* Yardım merkezi = tam sayfa ayar düzeni (atlas .setp + .steps + .note2) */
.mud-dialog:has(.q-help-wrap) { background: var(--q-page-bg); }
.q-help-nav { gap: 1px; }
@media (min-width: 721px) {
    .q-help-nav { flex: 0 0 270px; padding: 26px 14px 20px 26px; background: color-mix(in srgb, var(--q-chat-bg) 30%, transparent); border-right: 1px solid var(--q-border); }
    .q-help-body { padding: 30px 40px 46px; }
}
.q-help-navtitle { padding: 0 10px 8px; font-family: var(--q-display); font-weight: 600; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--q-faint); }
.q-help-navtitle .gg-icon { display: none; }
.q-help-search {
    margin-bottom: 10px; padding: 9px 12px 9px 34px; border-radius: 13px; font-size: 13px; color: var(--q-strong);
    border: 1.5px solid var(--q-border); background: var(--q-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238696BF' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E") no-repeat 12px center / 15px;
}
.q-help-search:focus { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-help-navi { gap: 10px; padding: 7px 10px; border-radius: 11px; font: 700 13.5px/1.3 'Goglis Sans', system-ui, sans-serif; color: var(--q-text); white-space: nowrap; }
.q-help-navi span { overflow: hidden; text-overflow: ellipsis; }
.q-help-navi .gg-icon { color: var(--q-muted); }
.q-help-navi:hover { background: var(--q-chip); color: var(--q-strong); }
.q-help-navi.on { background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-help-navi.on .gg-icon { color: var(--q-accent); }
.q-help-h1 { font-family: var(--q-display); font-weight: 600; font-size: 24px; color: var(--q-strong); padding-right: 90px; }
.q-help-lead { color: var(--q-muted); }
.q-help-h2 { font-family: var(--q-display); font-weight: 600; font-size: 16.5px; color: var(--q-strong); }
.q-help-steps { list-style: none; padding-left: 0; counter-reset: qhs; display: grid; gap: 8px; }
/* li FLEX DEĞİL: satır içi <b>/<code> ayrı flex öğesine dönüp metni bölerdi → numara mutlak konumlu. */
.q-help-steps li { counter-increment: qhs; position: relative; margin: 0; padding-left: 34px; min-height: 24px; }
.q-help-steps li::before { content: counter(qhs); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
    background: var(--q-chip-on); color: var(--q-accent-ink); font-family: var(--q-display); font-weight: 600; font-size: 13px; line-height: 1; }
.q-help-callout { gap: 10px; padding: 10px 12px; border-radius: 14px; font-size: 13px; }
.q-help-callout.tip { background: var(--q-chip-on); border: 0; }
.q-help-callout.tip .mud-icon-root { color: var(--q-accent); }
.q-help-callout.warn { background: color-mix(in srgb, #FFCB55 16%, transparent); border: 0; }
.q-help-callout.warn .mud-icon-root { color: color-mix(in srgb, #FFCB55 80%, var(--q-strong)); }
.q-help-art { border-radius: 18px; border-color: var(--q-border); }

/* ============================================================================
   BULUT · ATLAS UYUMU — MESAJ ARAÇ ÇUBUĞU (atlas .hovtb) (2026-10-18)
   ============================================================================ */
.q-msg-tools { top: -16px; right: 14px; gap: 2px; padding: 3px; border-radius: 12px; background: var(--q-chat-bg); border: 1px solid var(--q-line-2); box-shadow: var(--q-shadow); }
.q-msg-tools .t { width: 30px; height: 30px; padding: 0; border-radius: 9px; align-items: center; justify-content: center; color: var(--q-muted); }
.q-msg-tools .t .mud-icon-root, .q-msg-tools .t .gg-icon { font-size: 17px !important; width: 17px; height: 17px; }
.q-msg-tools .t:hover { background: var(--q-chip); color: var(--q-accent-ink); }
.q-msg-tools .t.del { color: var(--q-danger); }
.q-msg-tools .t.del:hover, .q-msg-tools .t.rep:hover { background: color-mix(in srgb, var(--q-danger) 12%, transparent); color: var(--q-danger); }
.q-msg-tools .t.on { color: var(--q-amber); }

/* Harf avatarları (atlas .av / .sv): kişi rengi üstünde açık tepe degradesi — inline `background`
   rengi korunur, parlaklık katmanı !important ile üstüne biner (fotoğraflar <img>, etkilenmez). */
span.q-av, span.q-mini, span.q-pcard2-av { background-image: linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,0) 62%) !important; }

/* ============================================================================
   BULUT · ATLAS UYUMU — İFADE PANELİ (2026-10-18): solda dikey kategori rayı, 8 sütun emoji,
   kategori başlığı; çıkartmalar büyük karolar; sekmeler hap.
   ============================================================================ */
.q-expr { min-width: min(344px, calc(100vw - 24px)); }
.q-expr-tabs { gap: 4px; padding: 4px 6px 8px; border-bottom: 1px solid var(--q-border); }
.q-expr-tab { padding: 6px 12px; border-radius: 10px; font-size: 13px; font-weight: 800; color: var(--q-muted); }
.q-expr-tab:hover { background: var(--q-chip); color: var(--q-strong); }
.q-expr-tab.on { background: var(--q-btn-grad); color: #fff; box-shadow: 0 4px 10px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-emoji { width: min(340px, calc(100vw - 40px)); display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 6px; align-items: start; }
.q-emoji > .q-emoji-search { grid-column: 1 / -1; margin: 0 0 8px; padding: 8px 12px; border: 1.5px solid var(--q-border); border-radius: 13px; background: var(--q-surface-2); }
.q-emoji > .q-emoji-search:focus-within { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); }
.q-emoji > .q-emoji-cats { grid-column: 1; flex-direction: column; flex-wrap: nowrap; gap: 4px; padding: 0; margin: 0; border: 0; max-height: min(340px, 52vh); overflow-y: auto; scrollbar-width: none; }
.q-emoji > .q-emoji-cats .q-emoji-cat { padding: 4px; border-radius: 9px; opacity: .6; display: grid; place-items: center; }
.q-emoji > .q-emoji-cats .q-emoji-cat.on { background: var(--q-chip-on); opacity: 1; }
.q-emoji > .q-emoji-cats .q-emoji-cat .gg-emoji { width: 22px; height: 22px; }
/* 6 SÜTUN + YATAY KAYDIRMA KAPALI (2026-10-20, Fatih: "bazı ikonlara dokununca scroll görünüyor; satır başı 6
   olsun, emojiler daha büyük görünsün"). Izgara overflow-y:auto olduğundan tarayıcı overflow-x'i de auto sayıyor:
   kenardaki emoji üstüne gelince (scale 1.14) ya da seçilince (q-rx-pop 1.28) kutudan taşıyor ve yatay çubuk
   beliriyordu. 6 sütunda hücre ~45 px → emoji 30'dan 38 px'e büyüdü (aşağıda). */
.q-emoji > .q-emoji-grid { grid-column: 2; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.q-emoji-grid, .q-stickers { overflow-x: hidden; }
/* ALT KENAR DA (aynı gün, Fatih: "hâlâ scroll görünüyor"): SON SATIRDAKİ emoji büyüyünce kutunun ALTINDAN taşıyor ve
   içerik sığdığı hâlde dikey çubuk beliriyordu. Taşma yalnız iç boşluğu AŞARSA kaydırılabilir alan sayılır: 44 px
   hücre × 1.28 (zıplama) = her yana ~6,2 px → 8 px alt boşluk ikisini de (1.14 üstüne gelme, 1.28 zıplama) içine alır. */
.q-emoji-grid { padding-bottom: 8px; }
.q-emoji:not(:has(> .q-emoji-cats)) > .q-emoji-grid { grid-column: 1 / -1; }
.q-emoji > .q-emoji-empty { grid-column: 1 / -1; }
.q-emoji-cath { grid-column: 1 / -1; padding: 2px 2px 4px; font-family: var(--q-display); font-weight: 600; font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--q-faint); }
.q-emoji-grid .q-emoji-i { padding: 3px 0; border-radius: 9px; contain-intrinsic-size: 44px 44px; }
.q-emoji-grid .q-emoji-i .gg-emoji { width: 38px; height: 38px; }
.q-emoji-grid .q-emoji-i:hover { background: var(--q-chip); }
/* Çıkartmalar: büyük karolar (atlas) */
.q-stickers { width: min(340px, calc(100vw - 40px)); }
.q-stickers-cat { padding: 8px 4px 6px; font-family: var(--q-display); font-weight: 600; font-size: 11.5px; letter-spacing: 1.2px; color: var(--q-faint); }
.q-stickers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.q-sticker-btn { height: auto; aspect-ratio: 1; border-radius: 16px; background: var(--q-chip); padding: 8px; transition: transform .2s var(--q-ease-spring, ease), background .15s; }
.q-sticker-btn:hover { background: var(--q-chip-on); transform: translateY(-2px); }
.q-sticker-btn .gg-emoji { width: 64px; height: 64px; }
.q-sticker-btn.img img { max-width: 72px; max-height: 72px; }
/* İFADE PANELİ (2026-10-24, Bulut rötuş 3): çıkartmalar dört sütun + arama + son kullanılanlar; iki sekmede de altta
   önizleme şeridi (üzerine gelinen ifadenin büyük hâli, adı, kısayolu — JS doldurur). Dokunmatikte önizleme yok. */
.q-stickers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.q-sticker-btn { border-radius: 14px; padding: 6px; }
.q-sticker-btn .gg-emoji { width: 52px; height: 52px; }
.q-sticker-btn.img img { max-width: 56px; max-height: 56px; }
.q-stickers > .q-stickers-search { position: sticky; top: 0; z-index: 1; margin: 0 0 4px; padding: 8px 12px; border: 1.5px solid var(--q-border);
    border-radius: 13px; background: var(--q-glass-menu, var(--q-side-bg)); }
.q-stickers > .q-stickers-search:focus-within { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); }
.q-expr-prev { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 54px; margin-top: 4px; padding: 6px 8px;
    border-top: 1px solid var(--q-border); }
.q-stickers > .q-expr-prev { position: sticky; bottom: -4px; background: var(--q-glass-menu, var(--q-side-bg)); }
.q-expr-prev-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; }
.q-expr-prev-ic .gg-emoji { width: 42px; height: 42px; }
.q-expr-prev-ic img { max-width: 42px; max-height: 42px; object-fit: contain; }
.q-expr-prev-t { min-width: 0; display: grid; gap: 2px; }
.q-expr-prev-n { font-size: 13.5px; font-weight: 800; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-expr-prev-n:empty::before { content: attr(data-hint); font-weight: 600; color: var(--q-faint); }
/* KOMUT PALETİ (2026-10-24, Bulut rötuş 3): üstte kutu (Esc), altında filtre çipleri/hapları, bölümlü sonuçlar, altta klavye
   ipuçları. Seçili satır vurgulu (↑ ↓); telefonda tam ekran, klavye ipuçları gizli. */
.q-pal-content { padding: 0 !important; }
.q-pal { display: flex; flex-direction: column; min-width: min(560px, 100%); max-height: min(620px, 80vh); }
.mud-dialog-fullscreen .q-pal { max-height: none; height: 100dvh; padding-top: env(safe-area-inset-top, 0px); }
.q-pal-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--q-border); color: var(--q-muted); flex: none; }
.q-pal-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--q-strong); font: 600 16px/1.3 'Goglis Sans', system-ui, sans-serif; }
.q-pal-in input::placeholder { color: var(--q-faint); font-weight: 500; }
.q-pal kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--q-border);
    background: var(--q-chip); color: var(--q-muted); font: 700 10.5px/1 'Goglis Sans', system-ui, sans-serif; }
.q-pal-x { display: none; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; color: var(--q-muted); cursor: pointer; place-items: center; }
.mud-dialog-fullscreen .q-pal-x { display: inline-grid; }
.mud-dialog-fullscreen .q-pal-esc { display: none; }
.q-pal-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px 6px; flex: none; }
.q-pal-chip { height: 26px; padding: 0 10px; border: 1px dashed var(--q-border); border-radius: 999px; background: transparent; color: var(--q-muted);
    font: 700 12px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
.q-pal-chip:hover { color: var(--q-accent-ink); border-color: color-mix(in srgb, var(--q-accent) 50%, var(--q-border)); }
.q-pal-pill { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; background: var(--q-chip-on);
    color: var(--q-accent-ink); font: 600 12px/1 'Goglis Sans', system-ui, sans-serif; }
.q-pal-pill b { font-weight: 800; }
.q-pal-pill button { width: 20px; height: 20px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; font-size: 11px; }
.q-pal-pill button:hover { background: color-mix(in srgb, var(--q-accent) 20%, transparent); }
.q-pal-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 8px 10px; overscroll-behavior: contain; }
.q-pal-g { display: flex; align-items: center; gap: 8px; padding: 12px 8px 5px; font: 600 11px/1 var(--q-display); letter-spacing: .09em; text-transform: uppercase; color: var(--q-faint); }
.q-pal-scope { display: inline-flex; gap: 4px; margin-left: auto; text-transform: none; letter-spacing: 0; }
.q-pal-scope button { height: 22px; padding: 0 8px; border: 0; border-radius: 999px; background: var(--q-chip); color: var(--q-muted); font: 700 11px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
.q-pal-scope button.on { background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-pal-it { display: flex; align-items: center; gap: 11px; padding: 7px 8px; border-radius: 12px; cursor: pointer; }
.q-pal-it:hover { background: var(--q-hover); }
.q-pal-it.on { background: var(--q-chip-on); }
.q-pal-it > kbd { margin-left: auto; opacity: 0; }
.q-pal-it.on > kbd { opacity: 1; }
.q-pal-av { display: inline-flex; flex: none; }
.q-pal-srv { width: 30px; height: 30px; border-radius: 9px; object-fit: cover; display: grid; place-items: center; color: #fff; font: 800 12px/1 'Goglis Sans', system-ui, sans-serif; }
.q-pal-ico { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--q-chip); color: var(--q-muted); }
.q-pal-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.q-pal-t b { font-size: 14px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-pal-it.msg .q-pal-t b { font-weight: 600; }
.q-pal-t small { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-pal-t mark { background: color-mix(in srgb, var(--q-accent) 26%, transparent); color: inherit; border-radius: 4px; padding: 0 1px; }
.q-pal-wait { padding: 18px 8px; text-align: center; color: var(--q-faint); font-size: 13px; }
.q-pal-foot { display: flex; flex-wrap: wrap; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--q-border); color: var(--q-faint); font-size: 12px; flex: none; }
.q-pal-foot span { display: inline-flex; align-items: center; gap: 4px; }
@media (hover: none) { .q-pal-foot, .q-pal-esc { display: none; } }
.q-expr-prev-s { font-size: 12px; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: none) { .q-expr-prev { display: none; } }

/* MudSlider (ses ayarları): atlas .sl — 6 px ray, degrade dolgu, beyaz düğme + gökyüzü halkası */
.mud-slider .mud-slider-input::-webkit-slider-runnable-track { height: 6px !important; margin: 11px 0 !important; border-radius: 999px; background-color: var(--q-line-2) !important; }
.mud-slider .mud-slider-input::-moz-range-track { height: 6px !important; border-radius: 999px; background-color: var(--q-line-2) !important; }
.mud-slider .mud-slider-filled { height: 6px !important; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--q-accent) 55%, #fff), var(--q-accent)) !important; }
.mud-slider .mud-slider-input::-webkit-slider-thumb { width: 18px !important; height: 18px !important; margin-top: -6px !important; transform: none !important; box-sizing: border-box; background: #fff !important; border: 3px solid var(--q-accent) !important; box-shadow: 0 2px 6px rgba(0,0,0,.25) !important; }
.mud-slider .mud-slider-input::-moz-range-thumb { width: 12px !important; height: 12px !important; transform: none !important; background: #fff !important; border: 3px solid var(--q-accent) !important; }
/* Anahtar alanının etiketi = BÖLÜM BAŞLIĞI (atlas: "Bas-konuş" h5'i altında anahtar satırı);
   seçim/metin alanlarının etiketi büyük harf kalır (atlas .f > label). */
.q-settings-field:has(> .mud-input-control label.mud-switch) > label { font-family: var(--q-display); font-weight: 600; font-size: 16.5px; letter-spacing: 0; text-transform: none; color: var(--q-strong); margin-bottom: 4px; }

.q-settings-h3.q-first { margin-top: 0; padding-top: 0; border-top: 0; }

/* ============================================================================
   BULUT · ATLAS UYUMU — TOPLULUK / KANAL AYARLARI (2026-10-18)
   ============================================================================ */
/* Nav başı: topluluk simgesi + başlık (atlas .srvh) */
.q-settings-srvh { display: flex; align-items: center; gap: 10px; padding: 0 10px 12px; font-family: var(--q-display); font-weight: 600; font-size: 16px; color: var(--q-strong); }
.q-settings-srvh > img, .q-settings-srvh-tile { width: 32px; height: 32px; border-radius: 10px; flex: none; object-fit: cover; }
.q-settings-srvh-tile { display: grid; place-items: center; color: #fff; font-family: 'Goglis Sans', system-ui, sans-serif; font-weight: 800; font-size: 12px; background-image: linear-gradient(150deg, rgba(255,255,255,.34), rgba(255,255,255,0) 62%) !important; }
/* Etiketli anahtarlar (yetki listeleri vb.): metin solda, anahtar sağda (atlas .tg) */
.q-settings-body label.mud-switch:has(> .mud-typography) { width: 100%; flex-direction: row-reverse; justify-content: space-between; gap: 14px; }
.q-settings-body label.mud-switch > .mud-typography { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--q-strong); margin: 0; }
.q-settings-body .mud-input-control:has(label.mud-switch > .mud-typography) { width: 100%; }
/* Açıklamalı anahtar satırı (q-tg) */
.q-settings-field.q-tg { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.q-tg-tx { flex: 1; min-width: 0; display: grid; gap: 2px; }
.q-tg-tx > b { font-weight: 700; font-size: 14px; color: var(--q-strong); }
.q-tg-tx > small { font-size: 12.5px; color: var(--q-muted); line-height: 1.4; }
.q-settings-field.q-tg > .mud-input-control { flex: none; width: auto; margin: 0; }
/* Sekme içindeki İKİNCİ ve sonraki başlıklar bölüm başlığıdır (atlas sayfa başlığı + h5 bölümleri) */
.q-settings-body > .q-settings-h ~ .q-settings-h {
    font-size: 16.5px; margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--q-border); padding-right: 0;
}
.q-settings-body > .q-menu-sep:has(+ .q-settings-h) { display: none; }

/* Ayar listelerindeki kişi satırları = atlas .row kartı; rol kartı = atlas .box */
.q-settings-body .q-friend-row { gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-settings-body .q-friend-row:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-settings-body .q-friend-row .mud-icon-button { width: 32px; height: 32px; padding: 0; border-radius: 10px; background: var(--q-chip); color: var(--q-muted); }
.q-role-card { max-width: none; border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 66%, transparent); border: 1px solid var(--q-border); box-shadow: none; }

/* Etiketi SOLDA, anahtarı SAĞDA olan alan (atlas .tg): "<label> + <div>(anahtar + açıklama)" deseni
   ızgaraya çevrilir; iç div `contents` olur → anahtar sağ sütunda, açıklama etiketin altında.
   TUZAK: :has() İÇ İÇE yazılamaz (spec) — "etiketsiz anahtar" koşulu üst düzeyde :not(:has()) ile. */
.q-settings-field:has(> div > .mud-input-control label.mud-switch):not(:has(> div > .mud-input-control label.mud-switch > .mud-typography)) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
}
.q-settings-field:has(> div > .mud-input-control label.mud-switch):not(:has(> div > .mud-input-control label.mud-switch > .mud-typography)) > label {
    grid-column: 1; grid-row: 1; margin: 0 0 2px; font-family: 'Goglis Sans', system-ui, sans-serif;
    font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--q-strong);
}
.q-settings-field > div:has(> .mud-input-control label.mud-switch):not(:has(> .mud-input-control label.mud-switch > .mud-typography)) { display: contents !important; }
.q-settings-field > div:has(> .mud-input-control label.mud-switch):not(:has(> .mud-input-control label.mud-switch > .mud-typography)) > .mud-input-control { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.q-settings-field > div:has(> .mud-input-control label.mud-switch):not(:has(> .mud-input-control label.mud-switch > .mud-typography)) > span { grid-column: 1; grid-row: 2; font-size: 12.5px !important; color: var(--q-muted) !important; line-height: 1.4; }
/* Diyalog alanı (etiket üstte) + kanal türü kartları (atlas Yeni kanal) */
.q-dlg-fld { display: grid; gap: 6px; margin-top: 12px; }
.q-dlg-fld:first-child { margin-top: 0; }
.q-dlg-fld > label { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted); }
.q-dlg-fld .mud-input-control { margin: 0; }
.q-chkind { display: grid; gap: 6px; margin-top: 12px; }
.q-chkind-opt { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 13px; border: 1.5px solid var(--q-border); background: var(--q-surface-2); color: var(--q-strong); font: 700 14px 'Goglis Sans', system-ui, sans-serif; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.q-chkind-opt:hover { border-color: var(--q-line-2); }
.q-chkind-opt .mud-icon-root { font-size: 17px; color: var(--q-muted); }
.q-chkind-opt.on { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); background: var(--q-chip-on); }
.q-chkind-opt.on .mud-icon-root { color: var(--q-accent); }
.q-rd { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--q-line-2); display: grid; place-items: center; box-sizing: border-box; }
.q-chkind-opt.on .q-rd { border-color: var(--q-accent); background: var(--q-accent); }
.q-chkind-opt.on .q-rd::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.q-chkind-hint { margin-top: 10px; padding: 10px 12px; border-radius: 14px; border: 0; background: var(--q-chip-on); color: var(--q-text); font-size: 13px; }

/* Yeni topluluk (atlas): şablonlar çerçeveli kart satırları + salyangoz emojisi, önizleme kutusu */
.q-tpl-row { gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-tpl-row:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-tpl-row.on { border-color: var(--q-accent); background: var(--q-chip-on); }
.q-tpl-row .q-tpl-emo { width: 34px; height: 34px; vertical-align: 0; }
.q-tpl-row .q-tpl-name { font-weight: 700; font-size: 14px; }
.q-tpl-row .q-tpl-desc { font-size: 12.5px; color: var(--q-muted); }
.q-createsrv-label { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--q-muted); font-family: 'Goglis Sans', system-ui, sans-serif; }
.q-createsrv-prev { padding: 16px; border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 66%, transparent); border: 1px solid var(--q-border); }
.q-createsrv-hint { padding: 10px 12px; border-radius: 14px; background: var(--q-chip-on); color: var(--q-text); }

/* Sürüm notları / hakkımızda (atlas .dlg + .box): diyalog yüzeyi, sürüm kutuları */
.q-about-in { background: color-mix(in srgb, var(--q-chat-bg) 97%, transparent); border: 1px solid var(--q-line-2); border-radius: 24px; padding: 20px 20px 18px; box-shadow: var(--q-shadow-lg); color: var(--q-text); }
.q-about-title { font-family: var(--q-display); font-weight: 600; font-size: 20px; color: var(--q-strong); }
.q-about-ver b { color: var(--q-accent-ink); }
.q-about-x { top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 10px; background: var(--q-chip); color: var(--q-muted); }
.q-about-x:hover { background: var(--q-chip-on); color: var(--q-strong); }
.q-about-log { gap: 10px; }
.q-about-rel { border-radius: 16px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-about-rel summary { padding: 12px 14px; gap: 10px; font-size: 14px; color: var(--q-strong); }
.q-about-rel summary::before { color: var(--q-muted); }
.q-about-rel summary b { font-family: var(--q-display); font-weight: 600; font-size: 15px; color: var(--q-strong); }
.q-about-reltitle { color: var(--q-text); font-weight: 700; }
.q-about-relcount { background: var(--q-chip-on); color: var(--q-accent-ink); font-weight: 800; }
.q-about-rel ul { padding: 0 16px 14px 36px; gap: 6px; }
.q-about-rel li { font-size: 13.5px; color: var(--q-text); line-height: 1.55; }
.q-about-rel li::marker { color: var(--q-accent); }
.q-srvreq-title { font-family: var(--q-display); font-weight: 600; font-size: 18px; }

/* ============================================================================
   BULUT · ATLAS UYUMU — VİDEO SAHNESİ (atlas .vstage/.vtile/.vbar) (2026-10-18)
   Yalnız görünüm: boyut/ızgara mantığına dokunulmadı.
   ============================================================================ */
.q-videostage { background: color-mix(in srgb, #050B20 70%, var(--q-rail-bg)); }
.q-vidtile { border-radius: 18px; background: radial-gradient(80% 80% at 50% 40%, #24407A, #0E1A3D); border-color: transparent; }
.q-vidtile.av { background: radial-gradient(80% 80% at 50% 40%, #24407A, #0E1A3D); }
.q-vidtile.speaking { border-color: transparent; box-shadow: inset 0 0 0 3px var(--q-online); }
.q-vidtile.pinned { border-color: transparent; box-shadow: inset 0 0 0 3px var(--q-accent); }
.q-vidtile.pinned.speaking { box-shadow: inset 0 0 0 3px var(--q-online); }
.q-vidname { left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(5,12,32,.6); color: #fff; font-size: 12px; font-weight: 800; }
/* Sahnenin altındaki kumanda şeridi (atlas .vbar): 46 px yuvarlak, yarı saydam beyaz */
.q-dmctl { background: color-mix(in srgb, #050B20 80%, var(--q-rail-bg)); padding: 12px; gap: 10px; }
.q-dmctl .q-vctl { width: 46px; height: 46px; background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.q-dmctl .q-vctl.on { background: #fff; color: #0E1A3D; }
.q-dmctl .q-vctl.leave, .q-dmctl .q-vctl.q-dmctl-end, .q-dmctl .q-vctl.off { background: var(--q-danger); color: #fff; }
.q-dmctl .q-vctl.cam { background: #fff; color: #0E1A3D; }

/* Yeni topluluk: diyaloğun başlık şeridi gizli (iç başlık atlas başlığıdır), rozet chip-on, ✕ iç başlıkta */
.mud-dialog:has(.q-createsrv) > .mud-dialog-title { display: none; }
.mud-dialog:has(.q-createsrv) .mud-dialog-content { padding-top: 18px; }
.q-createsrv-badge { width: 40px; height: 40px; border-radius: 12px; background: var(--q-chip-on) !important; color: var(--q-accent) !important; box-shadow: none !important; }
.q-createsrv-badge .mud-icon-root { font-size: 20px; }
.q-createsrv-title { font-family: var(--q-display); font-weight: 600; font-size: 20px; color: var(--q-strong); margin: 0; }
.q-createsrv-sub { font-size: 13.5px; color: var(--q-muted); }
.q-dlg-x { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 10px; display: grid; place-items: center; cursor: pointer; background: var(--q-chip); color: var(--q-muted); }
.q-dlg-x:hover { background: var(--q-chip-on); color: var(--q-strong); }
.q-dlg-x .mud-icon-root { font-size: 18px; }

/* ============================================================================
   BULUT · ATLAS UYUMU — MOBİL (2026-10-18): atlas mobil besteleyici (.mcomp: iki satır, gökyüzü
   gönder karesi, sağda "Aa" biçimlendirme), opak menü/eylem sayfaları, dar ızgaralar.
   ============================================================================ */
.q-mdbar-tg { display: none !important; }
@media (max-width: 700px), (max-height: 520px) {
    .q-composer { border-radius: 18px; background: var(--q-chat-bg); border: 1.5px solid var(--q-border); box-shadow: none; }
    .q-composer:focus-within { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); }
    .q-composer-tools { border-top-color: var(--q-border); }
    .q-composer .q-send-btn { width: 34px; height: 34px; border-radius: 12px; color: #fff;
        background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 60%, #fff), var(--q-accent) 55%, color-mix(in srgb, var(--q-accent) 78%, #000));
        box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent); }
    .q-composer .q-send-btn:disabled { color: #fff; opacity: .7; }
    /* Biçimlendirme çubuğu mobilde GİZLİ başlar; araç satırının sonundaki "Aa" açar/kapatır
       (tercih <html data-mdbar>, cihazda kalıcı — goglisMdBar.toggle). Düzenleme çubuğu (q-editbar) hep görünür. */
    .q-mdbar:not(.q-editbar) { display: none; }
    html[data-mdbar] .q-mdbar:not(.q-editbar) { display: flex; }
    .q-mdbar-tg { display: inline-flex !important; margin-left: auto; font: 800 13px/1 'Goglis Sans', system-ui, sans-serif; color: var(--q-muted); }
    html[data-mdbar] .q-mdbar-tg { color: var(--q-accent); background: var(--q-chip-on); }
    /* Menüler / sağ tık: mobilde TAM OPAK (camsı zemin arkadaki mesajları gösteriyordu, #3) */
    .q-menu-panel, .q-ctx-panel, .q-mention-pop { background: var(--q-chat-bg); }
    .q-lay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .q-lay-card .q-lay-mini { height: 56px; }
    .q-thgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .q-dmrow .q-dmpin:not(.on), .q-dmrow .q-dmclose { opacity: .45; }
}

/* MOBİL "ARKADAŞ EKLE" (2026-10-25, Fatih): Aramalar (süzgeç satırının sağı) ve Profil (durum seçicinin altı).
   Atlasın eylem hapı dili: --q-chip-on zemin + --q-accent-ink metin (gece açık, gündüz koyu ton — iki temada da
   okunur). Süzgeç haplarından ve seçili durum hapından bilerek ayrı: bu bir eylem. */
.q-mocalls-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
@media (max-width: 700px), (max-height: 520px) {
    .q-settings-close, .q-settings-save, .q-settings-expand { border-radius: 10px; }
    .q-settings-card .q-avedit-remove { position: static; margin-top: 4px; }
    .q-mbtn.q-mbtn-right { color: var(--q-accent); }
}

/* ============================================================================
   BULUT · ATLAS UYUMU — YÖNETİM PANELİ (2026-10-18): istatistik kartları (atlas .stat: büyük harf
   etiket + satır içi ikon, Fredoka değer), "dikkat" satırları (atlas .row + ok), logolu nav başı.
   ============================================================================ */
.q-settings-srvh-logo { width: 32px; height: 32px; border-radius: 10px; flex: none; }
.q-kpis { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.q-kpi { padding: 14px 16px; border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); border: 1px solid var(--q-border); box-shadow: none; gap: 4px; }
.q-kpi-head { gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--q-muted); }
.q-kpi-ico, .q-kpi-ico.ok { width: auto; height: auto; border-radius: 0; background: none !important; color: var(--q-accent); }
.q-kpi-ico.ok { color: var(--q-online); }
.q-kpi-ico .mud-icon-root { font-size: 15px; }
.q-kpi-val { font-family: var(--q-display); font-weight: 600; font-size: 28px; line-height: 1.1; }
.q-kpis.small .q-kpi-val { font-size: 28px; }
.q-kpi-sub { font-size: 12px; }
.q-kpi-bar { height: 6px; border-radius: 999px; background: var(--q-line-2); }
.q-kpi-bar > span { border-radius: 999px; background: linear-gradient(90deg, var(--q-online), #FFCB55); }
.q-dash-head { margin: 20px 0 10px; }
.q-dash-head > b { font-family: var(--q-display); font-weight: 600; font-size: 16.5px; }
.q-dash-attn { display: grid; gap: 6px; }
.q-dash-attn-item { display: flex; width: 100%; gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: left;
    background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); color: var(--q-strong); font-weight: 700; font-size: 14px; }
.q-dash-attn-item > .mud-icon-root:first-child { width: 32px; height: 32px; padding: 7px; box-sizing: border-box; border-radius: 10px; background: var(--q-chip); color: var(--q-muted); font-size: 18px; flex: none; }
.q-dash-attn-item .chev { margin-left: auto; color: var(--q-muted); font-size: 18px; }
.q-dash-attn-item:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-dash-attn-item.bad > .mud-icon-root:first-child { background: color-mix(in srgb, var(--q-danger) 12%, transparent); color: var(--q-danger); }
.q-dash-clear { border-radius: 14px; border-style: solid; border-color: var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); }
.q-stat { border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); border: 1px solid var(--q-border); }
.q-stat-label { font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.q-stat-val { font-family: var(--q-display); font-weight: 600; font-size: 28px; }

/* Yönetim → Duyurular: editör kutusu (atlas .box) */
.q-ann-box { grid-column: 1 / -1; max-width: 760px; padding: 16px; margin-bottom: 16px; border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 66%, transparent); border: 1px solid var(--q-border); }
.q-ann-box textarea { width: 100%; max-width: none; }
.q-ann-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-ann-foot .q-ann-pub { margin-left: auto; }
.q-md-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
.q-md-toolbar button { min-width: 28px; height: 28px; padding: 0 8px; border: 1px solid var(--q-border); border-radius: 9px; background: var(--q-chip); color: var(--q-text); cursor: pointer; font-size: 13px; }
.q-md-toolbar button:hover { background: var(--q-chip-on); color: var(--q-strong); }
.q-report-card { border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 66%, transparent); border: 1px solid var(--q-border); }

/* ============================================================================
   BULUT · ATLAS UYUMU — İLK GİRİŞ PENCERELERİ (2026-10-18): şartlar onayı, düzen ve tema seçimi
   atlas diyaloğu (.dlg) biçiminde — sola yaslı Fredoka başlık, açıklama, gövde, alt satır düğmeleri.
   Topluluk sorusu atlasta da ORTALI kalır (q-cprompt:not(.q-terms)).
   ============================================================================ */
.q-tpick-overlay { background: var(--q-scrim, rgba(8,16,42,.42)); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.q-tpick-card { max-width: 760px; padding: 18px 20px 16px; border-radius: 24px; text-align: left;
    background: color-mix(in srgb, var(--q-chat-bg) 97%, transparent); border: 1px solid var(--q-line-2); box-shadow: var(--q-shadow-lg); }
.q-tpick-card:not(.q-cprompt) > .q-tpick-logo { display: none; }
.q-tpick-title { font-family: var(--q-display); font-weight: 600; font-size: 20px; margin: 0 0 4px; }
.q-tpick-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--q-muted); }
.q-tpick-base { margin: 0 auto 16px; display: flex; width: fit-content; background: var(--q-chip); }
.q-tpick-base button { font-weight: 800; color: var(--q-muted); }
.q-tpick-base button.on { color: var(--q-accent-ink); }
.q-tpick-card:has(.q-tpick-themes) { max-width: 720px; }
.q-tpick-themes .q-thcard > i { aspect-ratio: 1.4; }
.q-tpick-foot { margin: 16px -20px -16px; padding: 12px 20px 16px; border-top: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 60%, transparent); }
.q-tpick-skip { margin: 0; padding: 9px 16px; border-radius: 13px; text-decoration: none; color: var(--q-accent-ink); font-weight: 800; font-size: 13.5px; }
.q-tpick-skip:hover { background: var(--q-chip); color: var(--q-accent-ink); }
.q-tpick-card > .q-tpick-skip { display: block; margin: 16px 0 0 auto; }
.q-tpick-go { padding: 9px 18px; border-radius: 13px; background: var(--q-btn-grad) !important; font-weight: 800; font-size: 13.5px; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent); }
.q-lay-new { padding: 2px 9px; border-radius: 999px; background: var(--q-chip-on); color: var(--q-accent-ink); font-family: 'Goglis Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: 0; text-transform: none; }
.q-tpick-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.q-tpick-head .q-tpick-title { margin: 0; }
.q-tpick-tile { width: 42px; height: 42px; border-radius: 13px; flex: none; }
.q-terms { max-width: 520px; }
.q-terms-rows { display: grid; gap: 6px; margin-bottom: 12px; }
.q-terms-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; color: var(--q-text);
    background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-terms-row .q-icb { cursor: default; }
.q-terms-link { color: var(--q-accent-ink); font-weight: 800; }
/* Topluluk sorusu: ortalı (atlas), düğmeler atlas biçiminde */
.q-cprompt:not(.q-terms) { max-width: 500px; text-align: center; }
.q-cprompt:not(.q-terms) .q-tpick-title { font-size: 22px; }
.q-cprompt-btn { border-radius: 13px; padding: 10px 16px; font-weight: 800; font-size: 13.5px; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); }
.q-cprompt-btn.primary { background: var(--q-btn-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 34%, transparent); }
.q-cprompt-btn.primary:hover:not(:disabled) { background: var(--q-btn-grad); }
.q-cprompt-btn:last-child:not(.primary) { background: transparent; border-color: transparent; color: var(--q-accent-ink); }

.q-cprompt-tile { width: 76px; height: 76px; border-radius: 24px; margin: 4px auto 12px; }

/* Düzen kartlarının mini şeması (atlas miniLayout): ray + sütunlar nötr, SOHBET sütunu vurgulu.
   ::before = sol ray (atlasta her düzende var). Forum: ortada gönderi kartları. */
.q-lay-card .q-lay-mini::before { content: ""; flex: 0 0 9%; border-radius: 6px; background: var(--q-line-2); }
.q-lay-card .q-lay-mini i { background: var(--q-line-2) !important; }
.q-lay-card .q-lay-mini i:nth-child(2) { background: color-mix(in srgb, var(--q-accent) 35%, var(--q-chat-bg)) !important; }
.q-lay-card .q-lay-mini.mamfi i:nth-child(1) { width: 30%; }
.q-lay-card .q-lay-mini.mforum::before { display: none; }
.q-lay-card .q-lay-mini.mforum i:nth-child(1) { width: 22%; }
.q-lay-card .q-lay-mini.mforum i:nth-child(2) { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--q-accent) 35%, var(--q-chat-bg)) 0 22%, transparent 22% 30%) !important; }
.q-lay-card .q-lay-mini.mforum i:nth-child(3) { display: block; width: 18%; }
.q-tpick-foot.end { justify-content: flex-end; }
/* Tema seçici (atlas "Tarzın ne?"): 3 sütun, büyük kartlar; renk degradesi + iki arayüz çubuğu */
.q-thgrid.q-tpick-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.q-tpick-themes .q-thcard > i { background: linear-gradient(150deg, var(--th-a), var(--th-b)) !important; }
.q-tpick-themes .q-thcard > i::before, .q-tpick-themes .q-thcard > i::after { display: block; }
.q-tpick-themes .q-thcard > i::before { background: rgba(255,255,255,.18); }
.theme-ocean-light .q-tpick-themes .q-thcard > i::before, .theme-grape-light .q-tpick-themes .q-thcard > i::before,
.theme-rose-light .q-tpick-themes .q-thcard > i::before, .theme-sunset-light .q-tpick-themes .q-thcard > i::before,
.theme-forest-light .q-tpick-themes .q-thcard > i::before, .theme-midnight-light .q-tpick-themes .q-thcard > i::before,
.theme-light .q-tpick-themes .q-thcard > i::before { background: rgba(255,255,255,.9); }
@media (max-width: 560px) { .q-thgrid.q-tpick-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 720px) {
    /* Atlas mobil: düzen kartları 2 sütun, kart içi DİKEY (şema üstte) — eski tek sütun/yatay düzen kalktı. */
    .q-lay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .q-lay-card { flex-direction: column; align-items: stretch; text-align: left; padding: 10px; }
    .q-lay-card .q-lay-mini { width: 100%; height: 56px; }
    .q-lay-card .q-lay-name { min-width: 0; }
}

/* Onay kutuları (atlas .ck): 18 px yuvarlatılmış kare; işaretliyken gökyüzü dolgu + beyaz tik.
   MudBlazor'ın görünmez katman girdileri (mud-checkbox-input / mud-switch-input) HARİÇ — onların
   boyutu tıklama alanıdır. Radyo düğmeleri aynı dilde yuvarlak. */
:is(.q-root, .mud-dialog, .mud-popover, .q-tpick-card) input[type="checkbox"]:not(.mud-checkbox-input):not(.mud-switch-input) {
    -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 6px;
    border: 2px solid var(--q-line-2); background: transparent; cursor: pointer; vertical-align: middle;
    transition: background .15s, border-color .15s;
}
:is(.q-root, .mud-dialog, .mud-popover, .q-tpick-card) input[type="checkbox"]:not(.mud-checkbox-input):not(.mud-switch-input):checked {
    border-color: var(--q-accent);
    background: var(--q-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
:is(.q-root, .mud-dialog, .mud-popover, .q-tpick-card) input[type="checkbox"]:not(.mud-checkbox-input):not(.mud-switch-input):focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 18%, transparent); }
:is(.q-root, .mud-dialog, .mud-popover, .q-tpick-card) input[type="radio"]:not(.mud-radio-input) {
    -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 50%;
    border: 2px solid var(--q-line-2); background: transparent; cursor: pointer; vertical-align: middle;
}
:is(.q-root, .mud-dialog, .mud-popover, .q-tpick-card) input[type="radio"]:not(.mud-radio-input):checked { border-color: var(--q-accent); background: radial-gradient(circle, #fff 0 3.5px, var(--q-accent) 4px); }
/* MudCheckBox / MudRadio ikonları: işaretsiz çizgi rengi, işaretli aksan */
.mud-checkbox .mud-icon-root, .mud-radio .mud-icon-root { color: var(--q-line-2); }
.mud-checkbox .mud-checked .mud-icon-root, .mud-radio .mud-checked .mud-icon-root { color: var(--q-accent); }

/* Canlı grafik kartları (atlas .chart): geniş ekranda İKİ SÜTUN (topluluk istatistiği 2×2), kart biçimi */
.q-cap-live { border-radius: 18px; background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); border: 1px solid var(--q-border); }
.q-cap-live-head b { font-weight: 800; font-size: 13.5px; }
/* Yalnız TOPLULUK İSTATİSTİĞİ (q-admin-stats + grafikler; yönetim paneli de q-cap-live kullanır, ona dokunma) */
.q-settings-body:has(> .q-admin-stats) > .q-cap-live .q-cap-spark { height: 96px; }
@media (min-width: 1000px) {
    .q-settings-body:has(> .q-admin-stats) > .q-cap-live { grid-column: auto; margin-top: 0 !important; }
}

@media (max-width: 700px), (max-height: 520px) {
    /* Alt menü (atlas .ph-bar): etkin sekme yuvarlak chip-on hapı, etiket 11.5/800, pembe rozet */
    .q-mobar { padding: 0 8px; background: color-mix(in srgb, var(--q-chat-bg) 86%, transparent); border-top-color: var(--q-border); }
    .q-mobar-b { margin: 6px 2px; border-radius: 16px; font: 800 11px/1 'Goglis Sans', system-ui, sans-serif; }
    .q-mobar-b.on { color: var(--q-accent-ink); background: var(--q-chip-on); }
    .q-mobar-b:active { background: var(--q-chip); }
    .q-mobar-badge { background: var(--q-pink, #FF84AE); border: 2px solid var(--q-chat-bg); line-height: 11px; }
}

/* ============================================================================
   BULUT · ATLAS UYUMU — GİRİŞ / KAYIT (2026-10-18): atlas .f etiketleri (büyük harf), e-posta alanı
   simgeli, ortalı bağlantılar, sağlayıcılar eş koyu karolar, platform indirme hapları adlı.
   ============================================================================ */
.q-auth-field > label { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #8696BF; }
.q-auth-icwrap { position: relative; display: flex; }
.q-auth-icwrap > .q-auth-input { flex: 1; min-width: 0; padding-left: 38px; }
.q-auth-icwrap > .q-auth-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #8696BF; pointer-events: none; }
.q-auth-links { justify-content: center; gap: 12px; }
.q-auth-links a { font-weight: 800; }
.q-login-prov { border-radius: 14px; background: #16214A; border: 1.5px solid rgba(140,180,255,.24); }
.q-login-prov.google, .q-login-prov.google:hover { background: #16214A; border-color: rgba(140,180,255,.24); }
.q-login-prov.steam, .q-login-prov.apple, .q-login-prov.epic { background: #16214A; border-color: rgba(140,180,255,.24); }
.q-login-prov:hover { background: #1B2858 !important; border-color: rgba(140,180,255,.4) !important; }
.q-login-apps { gap: 8px; flex-wrap: wrap; justify-content: center; }
.q-app-ic { width: auto; height: 36px; gap: 7px; padding: 0 12px; border-radius: 12px; font: 800 13px/1 'Goglis Sans', system-ui, sans-serif; color: #BAC7E8;
    background: rgba(22,33,74,.72); border: 1px solid rgba(140,180,255,.18); }
.q-app-ic svg { width: 15px; height: 15px; }
.q-app-ic .q-app-lbl { white-space: nowrap; }

/* Şikayet seçenekleri (atlas): radyo daireli çerçeveli satırlar; seçili gökyüzü çerçeve + chip-on */
.q-report-opt { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border-radius: 13px;
    border: 1.5px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); font-weight: 700; font-size: 14px; color: var(--q-strong); cursor: pointer; }
.q-report-opt:hover { border-color: var(--q-line-2); }
.q-report-opt.on { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); background: var(--q-chip-on); }
.q-report-opt.on .q-rd { border-color: var(--q-accent); background: var(--q-accent); }
.q-report-opt.on .q-rd::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.q-report-msg { border-left: 3px solid var(--q-line-2); border-radius: 4px; padding: 6px 12px; background: none; font-style: normal; color: var(--q-text); }
.q-report-block { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--q-text); }
/* Giriş/kayıt sayfası onay kutuları da atlas kutucuğu (statik sayfa .q-root dışında) */
.q-login-card input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 6px;
    border: 2px solid rgba(140,180,255,.24); background: transparent; cursor: pointer; }
.q-login-card input[type="checkbox"]:checked { border-color: #4CB0FF;
    background: #4CB0FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.q-auth-check[data-err] input[type="checkbox"] { border-color: #FF5C7A; }

/* Bölüm alanının alt çizgisinden hemen sonra gelen ara başlık ikinci bir çizgi çizmesin (çift çizgi) */
.q-settings-field.q-sec + .q-settings-sec + .q-settings-h3, .q-settings-field.q-sec + .q-settings-h3 { border-top: 0; padding-top: 0; }

/* Aygıt menüleri (mikrofon/hoparlör/kamera ^ — atlas "Mikrofon aygıt menüsü"): menü satırı dili, atlas
   anahtarı (42×24 ray, beyaz düğme, açıkken gökyüzü degradesi), etiketler açıkken de beyaz. */
.q-devmenu { min-width: 280px; }
.q-devmenu-item { gap: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 13.5px; color: var(--q-text); }
.q-devmenu-item:hover { background: var(--q-chip); }
.q-devmenu-item.on { color: var(--q-text); font-weight: 700; }
.q-devmenu-item.q-devradio.on { color: var(--q-accent-ink); }
.q-devmenu-title { font-family: 'Goglis Sans', system-ui, sans-serif; font-size: 11px; font-weight: 800; letter-spacing: .8px; color: var(--q-faint); }
.q-devmenu-sep { background: var(--q-border); margin: 4px 6px; }
.q-devmenu-val { font-size: 13px; font-weight: 800; color: var(--q-accent-ink); min-width: 38px; font-variant-numeric: tabular-nums; }
.q-devsw { width: 42px; height: 24px; background: var(--q-line-2); }
.q-devsw::after { top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.q-devsw.on { background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 62%, #fff), var(--q-accent)); }
.q-devsw.on::after { transform: translateX(18px); background: #fff; }

/* ============================================================================
   BULUT · ATLAS UYUMU — DAVET SAYFASI (2026-10-18)
   ============================================================================ */
.q-invite-card.has-cover { padding: 0 0 28px; overflow: hidden; width: 440px; }
.q-invite-cover { position: relative; height: 120px; background: linear-gradient(135deg, #1C4FA6, #2F9BFF 55%, #9FDBFF); overflow: hidden; }
.q-invite-cover-snail { position: absolute; right: -10px; top: 4px; width: 150px; }
.q-invite-cover-snail .gsnail { width: 100%; height: auto; }
.q-invite-card.has-cover .q-invite-server { margin-top: -38px; padding: 0 30px; position: relative; gap: 10px; }
.q-invite-icon { width: 76px; height: 76px; border-radius: 24px; border: 5px solid #16214A; box-sizing: border-box; box-shadow: none; }
.q-invite-icon-ph { background: linear-gradient(150deg, #78D8FF, #35A6FF 52%, #2477E8); font-family: var(--q-display); font-size: 28px; font-weight: 600; }
.q-invite-name { font-family: var(--q-display); font-weight: 600; font-size: 24px; color: #E8EFFF; }
.q-invite-stats { font-weight: 700; color: #8696BF; }
.q-invite-dot.online { background: #22C98A; }
.q-invite-card.has-cover .q-invite-invited, .q-invite-card.has-cover > .q-login-sub { margin: 14px 30px 0; font-size: 14px; color: #BAC7E8; }
.q-invite-acts { display: flex; gap: 8px; margin: 16px 30px 0; }
.q-invite-acts > * { flex: 1; margin: 0 !important; }
.q-invite-card .q-invite-accept { background: linear-gradient(150deg, #6FD0FF, #4CB0FF 55%, #2F8FF0); color: #fff; border: 0; box-shadow: 0 6px 14px rgba(76,176,255,.34); }
.q-invite-card .q-invite-cancel { background: rgba(120,160,255,.12); border: 1px solid rgba(140,180,255,.13); color: #BAC7E8; }
.q-invite-card.has-cover > .q-login-btn { margin: 14px 30px 0 !important; width: calc(100% - 60px); }
.q-invite-emo { display: flex; justify-content: center; margin-bottom: 6px; }
.q-invite-emo .gg-emoji { width: 84px; height: 84px; }
.q-invite-hd { display: flex; justify-content: center; margin-bottom: 10px; }
.q-invite-home { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 18px; text-decoration: none; color: #fff !important; box-sizing: border-box; }

/* Giriş şeritleri (atlas .note2): simgeli; tamam = nane, hata = kırmızı, uyarı = güneş */
.q-auth-msg { display: flex; align-items: flex-start; gap: 10px; text-align: left; font-size: 13px; line-height: 1.45; }
.q-auth-msg::before { content: ""; flex: none; width: 17px; height: 17px; margin-top: 1px; background: currentColor; -webkit-mask: var(--q-ic) center / contain no-repeat; mask: var(--q-ic) center / contain no-repeat; }
.q-auth-msg.ok { --q-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); color: #6BE3B5; background: rgba(62,220,174,.14); border: 0; }
.q-auth-msg.err { --q-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19Z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E"); color: #FF8FA3; background: rgba(255,92,122,.12); border: 0; }
.q-auth-msg.warn { --q-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 2.5 20h19Z'/%3E%3Cpath d='M12 10v4.5M12 17.5h.01'/%3E%3C/svg%3E"); color: #FFD27A; background: rgba(255,203,85,.16); border: 0; }
.q-auth-msg.warn.mail { --q-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.5 7.5 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.q-auth-msg.warn.clock { --q-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.q-auth-msg { color: #E8EFFF; }
.q-auth-msg.ok, .q-auth-msg.err, .q-auth-msg.warn { color: #E8EFFF; }
.q-auth-msg.ok::before { background: #3EDCAE; }
.q-auth-msg.err::before { background: #FF5C7A; }
.q-auth-msg.warn::before { background: #FFCB55; }
.q-auth-resend { margin: -4px 0 4px; }
.q-auth-resend .q-auth-inline { display: inline-flex; align-items: center; gap: 6px; color: #8FD0FF; font-weight: 800; font-size: 13px; }
/* Geri bağlantıları (← Girişe dön): atlas vurgulu bağlantı */
.q-auth-back { color: #8FD0FF; font-weight: 800; }
.q-auth-back:hover { color: #CFE8FF; }

/* ================= BULUT · ATLAS UYUMU — İNDİR (2026-10-18) =================
   Onaylı atlas "İndir": tanıtımın tasarım sistemi (.q-ld tokenları, gündüz/gece tarayıcıdan);
   sol hizalı 30px bölüm başlıkları, yatay başlıklı platform kutuları (46px simge karosu + ad +
   kanal + "senin cihazın" hapı), tam genişlik "İndir →" düğmesi (kullanıcının cihazında birincil),
   üç özellik kartı, çerçeveli ürün görseli ve yüzey kartı kapanış. */
.q-dlx-hero { padding: 60px 20px 50px; gap: 18px; }
.q-dlx-h1 { font-size: clamp(38px, 5.4vw, 60px); line-height: 1.04; max-width: 900px; }
.q-dlx-lead { max-width: 640px; font-size: clamp(15.5px, 1.5vw, 18px); }
.q-dlx-hero .q-ld-btn svg { flex: none; }
.q-dlx-help { font-size: 12.5px; color: var(--ld-muted); }
.q-ld-sec.q-dlx-sec { box-sizing: border-box; max-width: 1128px; margin: 0 auto; padding: 24px 24px 30px; }
.q-dlx-h2 { font-family: var(--q-display); font-weight: 600; font-size: 30px; line-height: 1.15; margin: 0 0 18px; color: var(--ld-ink); }
.q-dlx-sub { margin: -8px 0 18px; font-size: 15px; color: var(--ld-muted); }
.q-dlx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.q-dlx-card, .q-dlx-feat { display: grid; align-content: start; gap: 10px; padding: 16px; border-radius: 18px; box-sizing: border-box;
    background: color-mix(in srgb, var(--ld-solid) 66%, transparent); border: 1px solid var(--ld-line); color: var(--ld-ink) !important; text-decoration: none; }
.q-dlx-card { transition: transform .2s var(--q-ease-spring, ease), box-shadow .2s; }
a.q-dlx-card:hover { transform: translateY(-2px); }
.q-dlx-card.me { box-shadow: 0 0 0 2px var(--ld-sky); }
.q-dlx-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.q-dlx-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--ld-chip); color: var(--ld-sky); }
.q-dlx-ic svg { width: 18px; height: 18px; }
.q-dlx-tt { display: grid; min-width: 0; }
.q-dlx-tt b { font-family: var(--q-display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.q-dlx-tt small { font-size: 12.5px; color: var(--ld-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-dlx-me { margin-inline-start: auto; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; background: var(--ld-chip); color: var(--ld-skyink); }
.q-dlx-txt { font-size: 13.5px; line-height: 1.5; color: var(--ld-muted); }
.q-dlx-go { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; white-space: nowrap;
    background: color-mix(in srgb, var(--ld-ink) 7%, transparent); border: 1px solid var(--ld-line); color: var(--ld-ink2) !important; text-decoration: none; }
a.q-dlx-card:hover .q-dlx-go, a.q-dlx-go:hover { color: var(--ld-ink) !important; border-color: var(--ld-line2); }
.q-dlx-card.me .q-dlx-go { background: linear-gradient(150deg, #6FD0FF, var(--ld-sky) 55%, var(--ld-skydeep)); border-color: transparent; color: #fff !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--ld-sky) 34%, transparent); }
.q-dlx-two { display: flex; flex-wrap: wrap; gap: 6px; }
.q-dlx-feat { gap: 8px; }
.q-dlx-feat .q-dlx-ic { width: 44px; height: 44px; }
.q-dlx-feat b { font-family: var(--q-display); font-weight: 600; font-size: 18px; line-height: 1.25; }
.q-dlx-feat > span:last-child { font-size: 13.5px; line-height: 1.5; color: var(--ld-muted); }
.q-dlx-shot { position: relative; z-index: 2; display: grid; place-items: center; padding: 30px 24px; }
.q-dlx-shot img { display: block; box-sizing: border-box; width: min(760px, 100%); height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left;
    border-radius: 16px; border: 6px solid #1A2547; box-shadow: var(--ld-shadow); background: #0A1230; }
.q-dlx-final { position: relative; z-index: 2; box-sizing: border-box; width: min(1080px, calc(100% - 48px)); margin: 30px auto 50px; padding: 44px; border-radius: 32px;
    display: grid; justify-items: center; gap: 12px; text-align: center; background: var(--ld-surface); border: 1px solid var(--ld-line); }
.q-dlx-final h2 { font-family: var(--q-display); font-weight: 600; font-size: 34px; line-height: 1.1; margin: 0; color: var(--ld-ink); }
.q-dlx-final p { margin: 0; font-size: 15px; color: var(--ld-muted); }
@media (max-width: 900px) { .q-dlx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .q-dlx-hero { padding: 26px 16px 24px; gap: 14px; }
    .q-ld-sec.q-dlx-sec { padding: 18px 16px 22px; }
    .q-dlx-grid { grid-template-columns: minmax(0, 1fr); }
    .q-dlx-h2 { font-size: 26px; }
    .q-dlx-shot { padding: 20px 16px; }
    .q-dlx-final { width: calc(100% - 32px); padding: 30px 20px; border-radius: 26px; }
    .q-dlx-final h2 { font-size: 28px; }
}

/* ================= BULUT · ATLAS UYUMU — YASAL SAYFALAR (2026-10-18) =================
   Onaylı atlas "Kullanım Şartları"/"Gizlilik Politikası"/"Çocuk Güvenliği": okuma sayfası —
   solda dil seçici (bölmeli) + İçindekiler (goglisLegal.toc), sağda 720 px metin sütunu; logo
   karosu + soluk "Goglis", 34px Fredoka başlık, "Son güncelleme" hapı, numaralı 19px başlıklar.
   Kullanıcının kayıtlı temasına uyar (tema <html>'de; teması olmayan ziyaretçi okyanus gecesi).
   1000px altı (uygulama içi yasal pencere 860px dahil) tek sütun, içindekiler gizli. */
.q-legal { padding: 40px 24px; scroll-behavior: smooth;
    background: radial-gradient(520px 520px at -60px -120px, color-mix(in srgb, var(--q-accent) 30%, transparent), transparent 70%),
                radial-gradient(460px 460px at calc(100% + 60px) calc(100% + 80px), rgba(130,100,255,.26), transparent 70%),
                var(--q-page-bg, var(--q-chat-bg)); }
.q-legal-page { max-width: 1060px; margin: 0 auto 48px; display: grid; grid-template-columns: 260px minmax(0, 720px); gap: 30px 40px; justify-content: center; }
.q-legal-nav { position: sticky; top: 0; align-self: start; display: grid; gap: 4px; justify-items: start; font-size: 13px; font-weight: 700; color: var(--q-muted); }
.q-legal-nav .q-legal-lang { display: inline-flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 3px; border-radius: 13px; background: var(--q-chip); border: 1px solid var(--q-border); }
.q-legal-nav .q-legal-lbtn { padding: 6px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--q-muted); font-size: 13px; font-weight: 800; }
.q-legal-nav .q-legal-lbtn:hover { color: var(--q-text); }
.q-legal-nav .q-legal-lbtn.on { background: var(--q-chat-bg); color: var(--q-accent-ink); box-shadow: 0 2px 6px rgba(30,80,160,.12); }
.q-legal-tochd { color: var(--q-strong); font-family: var(--q-display); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.q-legal-toc { display: grid; gap: 2px; }
.q-legal .q-legal-toc a { color: var(--q-muted); padding: 3px 0; line-height: 1.4; transition: color .15s; }
.q-legal .q-legal-toc a:hover { color: var(--q-text); text-decoration: none; }
.q-legal .q-legal-toc a.on { color: var(--q-accent-ink); }
.q-legal-card { max-width: 720px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; min-width: 0; }
.q-legal-head { gap: 10px; margin-bottom: 14px; }
.q-legal-tile { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; --gsn-mark: #fff;
    background: linear-gradient(150deg, var(--q-logo-hi, #78D8FF), var(--q-logo, #35A6FF) 52%, var(--q-logo-lo, #2477E8)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.q-legal-tile .gsnail { width: 82%; height: auto; margin-top: 4%; }
.q-legal-brand { font-family: var(--q-display); font-size: 18px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--q-muted); }
.q-legal h1 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; }
.q-legal p.q-legal-date { display: inline-flex; margin: 0 0 14px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--q-chip); color: var(--q-text); }
.q-legal h2 { font-family: var(--q-display); font-size: 19px; font-weight: 600; margin: 24px 0 8px; scroll-margin-top: 20px; }
.q-legal p, .q-legal li { color: var(--q-text); }
.q-legal strong { color: var(--q-strong); }
.q-legal a { color: var(--q-accent-ink); }
.q-legal-back { font-weight: 800; }
/* "GOGLIS'E DÖN" (2026-10-21, Fatih: "programdayken yasal sayfalara girince geri gelemiyorsun"): masaüstü
   kabuğunda tarayıcı çubuğu yok — sayfa ana pencereye düşerse tek çıkış (davranış goglisLegal.back). Solda
   dil seçicinin ÜSTÜNDE; dar ekranda sayfanın en üstü. Uygulama içi pencerede (iframe → html.q-framed) gizli:
   orada pencerenin ✕'i var ve "/" çerçevenin içinde açılmaya çalışırdı (X-Frame-Options: DENY). */
.q-legal .q-legal-ret { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 6px 13px 6px 9px; border-radius: 10px;
    background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); font-size: 13px; font-weight: 800; line-height: 1.3; }
.q-legal .q-legal-ret:hover { color: var(--q-strong); text-decoration: none; border-color: var(--q-accent-ink); }
.q-legal-ret svg { width: 16px; height: 16px; flex: none; }
html.q-framed .q-legal-ret, html.q-framed .q-legal-back { display: none; }
@media (max-width: 999px) {
    .q-legal-page { grid-template-columns: minmax(0, 1fr); max-width: 720px; gap: 18px; }
    .q-legal-nav { position: static; }
    .q-legal-nav .q-legal-lang { margin: 0; }
    .q-legal-tochd, .q-legal-toc { display: none; }
}
@media (max-width: 600px) {
    .q-legal { padding: 20px 16px; }
    .q-legal h1 { font-size: 26px; }
}

/* ================= BULUT · ATLAS UYUMU — ZENGİN MESAJ KARTLARI (2026-10-18) =================
   Onaylı atlas "Zengin mesajlar": "tüm kartlar aynı yüzey dili — yumuşak kutu, ince kenar".
   Anket (.poll), takım kur (.box), birlikte izle (.box), rol düğmeleri (.b.s), davet kartı ve
   bağlantı önizlemesi (.embed) tek aileye döndü. Renkler tema değişkenlerinden. */
.q-poll, .q-lfg, .q-watchcard, .q-invcard { margin-top: 6px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); box-shadow: none; }
/* Anket */
.q-poll { max-width: 380px; padding: 12px; border-radius: 14px; }
.q-poll-q { gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.q-poll-opt { margin: 0 0 6px; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--q-chip); font-size: 13px; font-weight: 700; }
.q-poll-opt:hover:not(.ended) { border: 0; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-accent) 45%, transparent); }
.q-poll-opt.mine { border: 0; }
.q-poll-fill { background: var(--q-chip-on); }
.q-poll-opt.mine .q-poll-optlabel { color: var(--q-accent-ink); font-weight: 800; }
.q-poll-cnt { font-size: 13px; font-weight: 700; color: var(--q-text); }
.q-poll-foot { margin-top: 2px; font-size: 12.5px; }
/* Takım kur (LFG) */
.q-lfg { max-width: 380px; padding: 16px; border-radius: 18px; display: grid; gap: 8px; }
.q-lfg.full { border-color: color-mix(in srgb, var(--q-online) 45%, transparent); background: color-mix(in srgb, var(--q-online) 8%, color-mix(in srgb, var(--q-surface-2) 70%, transparent)); }
.q-lfg-head { gap: 8px; min-width: 0; }
.q-lfg-game { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; }
.q-lfg-sub { flex: none; margin-inline-start: auto; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
    background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); }
.q-lfg-sub .q-lfg-timer { color: inherit; }
.q-lfg-fulltag { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; letter-spacing: .3px; background: var(--q-online); }
.q-lfg-note { margin: 0; padding: 0; background: none; border-radius: 0; font-size: 12.5px; color: var(--q-muted); }
.q-lfg-slots { margin: 0; gap: 6px; }
.q-lfg-slot { width: 32px; height: 32px; font-size: 11.5px; font-weight: 800; }
.q-lfg-slot.empty { border: 0; background: var(--q-chip); color: var(--q-muted); }
.q-lfg-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.q-lfg-btn, .q-watchcard-foot .q-lfg-btn { padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; border: 1px solid transparent;
    background: var(--q-btn-grad); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-lfg-btn.leave { background: var(--q-chip); color: var(--q-text); border-color: var(--q-border); box-shadow: none; }
.q-lfg-btn.go { background: var(--q-btn-grad); }
.q-lfg-btn[disabled] { background: var(--q-chip); color: var(--q-muted); border-color: var(--q-border); box-shadow: none; }
/* Birlikte izle */
.q-watchcard { max-width: 420px; padding: 16px; border-radius: 18px; }
.q-watchcard-head { gap: 8px; margin-bottom: 8px; }
.q-watchcard-title { font-size: 14px; font-weight: 800; }
.q-watchcard-sub { font-size: 12.5px; }
.q-watchcard-thumb { border-radius: 12px; }
.q-watchcard-members { gap: 4px; margin-top: 8px; }
.q-watchcard-members .q-lfg-slot { width: 24px; height: 24px; font-size: 10px; }
.q-watchcard-foot { margin-top: 8px; }
.q-watchcard-foot:empty { display: none; }
.q-watchcard-hosttag { font-size: 12px; font-weight: 800; color: var(--q-accent-ink); }
/* Rol düğmeleri (atlas .b.s) */
.q-rolebtns { gap: 6px; margin-top: 6px; }
.q-rolebtn { gap: 7px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); color: var(--q-text); border: 1px solid var(--q-border); }
.q-rolebtn:hover { border-color: color-mix(in srgb, var(--q-rbc, var(--q-accent)) 60%, transparent); filter: none; }
.q-rolebtn.on { background: color-mix(in srgb, var(--q-rbc, var(--q-accent)) 16%, var(--q-chip)); border-color: color-mix(in srgb, var(--q-rbc, var(--q-accent)) 50%, transparent); color: var(--q-strong); }
.q-rolebtn .mud-icon-root { font-size: 14px !important; }
/* Davet kartı */
.q-invcard { max-width: 360px; border-radius: 18px; overflow: hidden; }
.q-invcard-banner { height: 60px; }
.q-invcard-banner-fallback { background: linear-gradient(135deg, #9FDBFF, #B6A6FF); }
.q-invcard-body { display: flex; align-items: center; gap: 10px; padding: 0 14px 14px; margin-top: -20px; }
.q-invcard-ico { position: relative; width: 46px; height: 46px; border-radius: 14px; border: 4px solid var(--q-side-bg); box-sizing: border-box; flex: none; }
.q-invcard-ico-txt { font-size: 15px; font-weight: 800; background: var(--q-btn-grad); }
.q-invcard-meta { flex: 1; min-width: 0; padding-top: 20px; }
.q-invcard-name { font-size: 14px; font-weight: 800; }
.q-invcard-stats { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--q-muted); }
.q-invcard-on { display: inline-block; width: 7px; height: 7px; margin: 0 5px 1px 0; vertical-align: middle; }
.q-invcard-join { flex: none; width: auto; align-self: flex-end; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800;
    background: var(--q-btn-grad); box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-invcard-join:hover { background: var(--q-btn-grad); filter: brightness(1.06); }
/* Bağlantı önizlemesi (atlas .embed) */
.q-embed { display: grid; gap: 4px; max-width: 420px; padding: 10px 14px; border-left: 4px solid var(--q-accent); border-radius: 12px; background: var(--q-surface-2); }
.q-embed:has(.q-embed-img) { display: flex; gap: 12px; }
.q-embed-body { gap: 4px; }
.q-embed-site { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--q-muted); }
.q-embed-title { font-weight: 800; color: var(--q-accent-ink); }
.q-embed-yt { max-width: 100%; margin-top: 2px; border-radius: 10px; }

/* ================= BULUT · ATLAS UYUMU — MESAJ DURUMLARI (2026-10-18) =================
   Atlas "Mesaj durumları": düzenleme bir kutu (.box) içinde — B/I/S/H çipleri, odaklı alan,
   Güncelle (birincil) + Vazgeç + kısayol ipucu tek satırda; silinmiş/engelli soluk satır simgeli;
   tek görüntülük alıcıda göz simgeli küçük düğme, gönderende soluk bilgi satırı; thread çipi
   gökyüzü hap ("3 yanıt"). */
.q-editwrap { margin-top: 6px; display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-mdbar.q-editbar { gap: 4px; padding: 0; }
.q-editbar .q-fmd-b { width: 26px; height: 26px; min-width: 26px; padding: 0; border-radius: 8px; background: var(--q-chip); color: var(--q-muted); font-size: 12px; }
.q-editbar .q-fmd-b:hover { color: var(--q-strong); }
.q-editbar .q-fmd-sep { display: none; }
.q-editwrap .q-editbox { margin: 0; padding: 9px 12px; border-radius: 13px; background: var(--q-surface-2); border: 1.5px solid color-mix(in srgb, var(--q-accent) 60%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); color: var(--q-strong); }
.q-editwrap .q-editbox:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 18%, transparent); }
.q-editwrap .q-edit-actions { margin: 0; gap: 8px; flex-wrap: wrap; }
.q-edit-btn { padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); }
.q-edit-btn.primary { background: var(--q-btn-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-editwrap .q-edit-hint { margin: 0; font-size: 12.5px; color: var(--q-muted); }
.q-msg-gone { display: flex; align-items: center; gap: 6px; color: var(--q-faint); font-style: italic; }
.q-msg-gone.blocked { font-style: normal; }
.q-eph { gap: 7px; margin-top: 6px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); }
.q-eph.open { background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); box-shadow: none; }
.q-eph.open:hover { filter: none; border-color: color-mix(in srgb, var(--q-accent) 50%, transparent); color: var(--q-strong); }
.q-eph.sent, .q-eph.done { margin-top: 4px; padding: 0; border: 0; background: none; font-size: 12.5px; font-weight: 600; color: var(--q-muted); }
.q-eph.done { color: var(--q-faint); }
.q-thread-chip { gap: 5px; margin-top: 4px; padding: 3px 9px; border: 0; border-radius: 999px; background: var(--q-chip-on); color: var(--q-accent-ink); font-size: 11.5px; font-weight: 800; }
.q-thread-chip:hover { border: 0; filter: brightness(1.08); }

/* ================= BULUT · ATLAS UYUMU — THREAD / SABİTLENENLER (2026-10-18) =================
   Thread görünümü: yanıtların üstünde "Başlangıç mesajı" kutusu (atlas .box + .lbl2); geri hapı
   atlas .b.s. Sabitlenen kartın ✕'i atlasta hep görünür (soluk), üstüne gelince kırmızılaşır. */
.q-thread-root { margin: 6px 10px 4px; padding: 12px 14px; border-radius: 18px; display: grid; gap: 8px; cursor: pointer;
    background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-thread-root:hover { border-color: var(--q-line-2, var(--q-border)); }
.q-thread-root-lbl { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted); }
.q-thread-root-msg { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.q-thread-root-msg > .q-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 13px; object-fit: cover; }
.q-thread-root-b { min-width: 0; }
.q-thread-root-h { display: flex; align-items: baseline; gap: 8px; }
.q-thread-root-h b { color: var(--q-strong); font-weight: 800; }
.q-thread-root-h time { font-size: 12px; color: var(--q-faint); }
.q-thread-back { gap: 6px; padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); }
.q-pincard-x { display: inline-flex; color: var(--q-faint); }

/* ================= BULUT · ATLAS UYUMU — BESTELEYİCİ ÖNERİ LİSTESİ (2026-10-18) =================
   Atlas "Besteleyici": @ / : / :: önerileri menü ailesinden — 16px köşe, "ÜYELER" etiketi,
   @everyone satırında sağa yaslı ipucu. */
.q-mention-pop { width: 320px; padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--q-panel-bg) 96%, transparent); border: 1px solid var(--q-line-2, var(--q-border)); box-shadow: var(--q-shadow-lg, 0 12px 32px rgba(0,0,0,.4)); }
.q-mention-hd { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted); }
.q-mention-i { gap: 10px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.q-mention-i:hover { background: var(--q-chip); }
.q-mention-i > b { font-weight: 800; }
.q-mention-hint { margin-inline-start: auto; font-size: 11.5px; font-weight: 800; color: var(--q-faint); }

/* Boş kanal (atlas): bulutlu salyangoz 76px, Fredoka başlık, soluk alt satır. */
.q-empty-chan { gap: 6px; }
.q-empty-chan .q-empty-emo { width: 76px; height: 76px; display: block; margin-bottom: 4px; animation: q-empty-float 3.6s ease-in-out infinite; }
.q-empty-chan .q-empty-title { font-family: var(--q-display); font-weight: 600; font-size: 19px; }
.q-empty-chan .q-empty-sub { font-size: 13.5px; }
@keyframes q-empty-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .q-empty-chan .q-empty-emo { animation: none; } }
html.q-instant .q-empty-chan .q-empty-emo { animation: none !important; }

/* ================= BULUT · ATLAS UYUMU — KİLİTLİ KANAL (2026-10-18) =================
   Atlas "Kilitli kanal": başlıkta "Salt okunur" nötr hap (kilit çizgi simgesi), yavaş mod güneş
   sarısı hap; besteleyicinin yerinde gökyüzü tonlu bilgi bandı. */
.q-slow-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.q-slow-badge.lock { background: var(--q-chip); color: var(--q-strong); border: 1px solid var(--q-border); }
.q-slow-badge.slow { background: color-mix(in srgb, #FFCB55 22%, transparent); color: color-mix(in srgb, #FFCB55 70%, var(--q-strong)); }
.q-composer.q-composer-locked { justify-content: flex-start; gap: 10px; min-height: 48px; padding: 12px 16px; border-radius: 16px; border: 0;
    background: color-mix(in srgb, var(--q-accent) 16%, transparent); color: var(--q-text); font-size: 13.5px; box-shadow: none; }
.q-composer.q-composer-locked .mud-icon-root { color: var(--q-accent-ink); }

/* ================= BULUT · ATLAS UYUMU — GELEN KUTUSU 2 (2026-10-18) =================
   Atlas "Gelen kutusu": 420px panel; satırlar kalın soluk "Kanal · Yazar" etiketi + 600 özet;
   boş durumlar Goglis emojisiyle (yıldızlı/mention/okunmamış). */
.q-inbox-panel { width: min(420px, calc(100vw - 24px)); }
.q-inbox-lbl { font-size: 12px; font-weight: 800; color: var(--q-muted); }
.q-inbox-txt { font-size: 13.5px; font-weight: 600; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.q-inbox-empty { display: grid; justify-items: center; gap: 8px; text-align: center; }
.q-inbox-emo { width: 48px; height: 48px; display: block; }

/* ================= BULUT · ATLAS UYUMU — GRUP DM (2026-10-18) =================
   Atlas "Grup DM": sağ kolonda Fredoka "Grup üyeleri · n", nane tonlu "Sesli aramayı başlat",
   kart üye satırları. "Grup DM oluştur": büyük harf alan etiketleri, sayaç sağda, kart satırlar. */
.q-cat.q-grp-title { margin: 4px 0 4px; padding: 0 2px; font-family: var(--q-display); font-size: 16px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--q-strong); }
.q-group-call { width: 100%; margin: 4px 0 6px; justify-content: center; gap: 8px; padding: 9px 12px; border-radius: 13px; border: 1px solid color-mix(in srgb, var(--q-online) 30%, transparent);
    background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); font-weight: 800; font-size: 13.5px; }
.q-group-call:hover { background: color-mix(in srgb, var(--q-online) 24%, transparent); }
.q-member.q-grp-member { gap: 12px; margin-top: 6px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); font-weight: 700; color: var(--q-strong); }
.q-member.q-grp-member:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-gdm { width: min(420px, 82vw); min-height: 180px; display: flex; flex-direction: column; gap: 10px; }
.q-gdm-lbl { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted); }
.q-gdm > .q-gdm-lbl { margin-bottom: -4px; }
.q-gdm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 4px; }
.q-gdm-cnt { font-size: 12.5px; color: var(--q-muted); }
.q-gdm-cnt.full { color: var(--q-danger); }
.q-gdm-rows { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; padding: 2px; }
.q-gdm-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 6px; border-radius: 14px; cursor: pointer; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); transition: border-color .15s, background .15s; }
.q-gdm-row:hover { background: color-mix(in srgb, var(--q-surface-2) 55%, var(--q-chip)); }
.q-gdm-row.on { border-color: color-mix(in srgb, var(--q-accent) 45%, transparent); }
.q-gdm-row .q-av { width: 30px; height: 30px; border-radius: 50%; flex: none; object-fit: cover; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 800; }
.q-gdm-row b { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================= BULUT · ATLAS UYUMU — DM ARAMA / İSTEK ROZETLERİ (2026-10-18) =================
   Atlas "DM araması": giden aramada "Çaldırmayı durdur" pembe-kırmızı hap, bekleyen aramada
   "Aramaya katıl" nane hap; çalan karonun avatarından gökyüzü halkalar yayılır. Arkadaş
   istekleri / mesaj istekleri rozeti ikonun sol üst köşesinde (daraltılmış rayda da görünür). */
.q-callbar { gap: 12px; padding: 10px 14px; background: transparent; border-bottom: 1px solid var(--q-border); font-size: 13.5px; }
.q-callbar-t { font-weight: 800; color: var(--q-strong); }
.q-callbar-b { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font: 800 12.5px/1.2 'Goglis Sans', system-ui, sans-serif;
    background: color-mix(in srgb, var(--q-danger) 14%, transparent); color: var(--q-danger); border: 1px solid color-mix(in srgb, var(--q-danger) 30%, transparent); }
.q-callbar-b:hover { background: color-mix(in srgb, var(--q-danger) 22%, transparent); }
.q-callbar-b.go { background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); border-color: color-mix(in srgb, var(--q-online) 30%, transparent); }
.q-callbar-b.go:hover { background: color-mix(in srgb, var(--q-online) 24%, transparent); }
.q-callbar.join { background: color-mix(in srgb, var(--q-online) 8%, transparent); }
.q-vidtile.av.ringing:not(.hushed) .q-vidav { opacity: .9; animation: q-ring-wave 1.8s ease-out infinite; }
@keyframes q-ring-wave {
    0% { box-shadow: 0 0 0 0 rgba(76,176,255,.55), 0 0 0 0 rgba(76,176,255,.35); }
    100% { box-shadow: 0 0 0 16px rgba(76,176,255,0), 0 0 0 30px rgba(76,176,255,0); }
}
@media (prefers-reduced-motion: reduce) { .q-vidtile.av.ringing .q-vidav { animation: none; } }
html.q-instant .q-vidtile.av.ringing .q-vidav { animation: none !important; }
.q-friends-btn { position: relative; }
.q-friends-btn > .q-friends-badge { position: absolute; top: 2px; left: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10px; font-weight: 800;
    box-shadow: 0 0 0 2px var(--q-rail-bg, var(--q-side-bg)); }
body.q-dmrail-min .q-dmrail .q-friends-btn > .q-friends-badge { display: flex !important; left: calc(50% - 18px); }
.q-friends-emo { width: 48px; height: 48px; display: block; }

/* ================= BULUT · ATLAS UYUMU — DENEYİM ANKETİ (2026-10-18) =================
   Atlas: başlık (Fredoka) + "Sesli arama" alt satırı solda, ✕ sağda; puana göre değişen
   salyangoz, güneş sarısı yıldızlar, atlas alanı biçiminde not kutusu. */
.q-survey { padding: 4px 2px 0; }
.q-survey-head { align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; text-align: start; margin-bottom: 6px; }
.q-survey-head .q-survey-q { margin: 0; font-family: var(--q-display); font-size: 19px; font-weight: 600; }
.q-survey-head .q-survey-kind { margin-top: 2px; font-size: 12.5px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--q-muted); }
.q-survey-emo { width: 56px; height: 56px; display: block; margin: 6px 0 2px; animation: q-survey-bob 2.8s ease-in-out infinite; }
@keyframes q-survey-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .q-survey-emo { animation: none; } }
.q-survey-stars .mud-rating-item .mud-icon-root { color: color-mix(in srgb, var(--q-muted) 55%, transparent); }
.q-survey-stars .mud-rating-item.mud-rating-item-active .mud-icon-root,
.q-survey-stars .mud-rating-item:hover .mud-icon-root { color: #FFCB55; }
.q-survey-hint { font-weight: 700; }
.q-survey-note { margin-top: 12px; padding: 9px 12px; border-radius: 13px; background: var(--q-surface-2); border: 1.5px solid var(--q-border); }
.q-survey-note:focus { border-color: color-mix(in srgb, var(--q-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 14%, transparent); }

/* ================= BULUT · ATLAS UYUMU — KAMERA İSTEMİ (2026-10-18) =================
   Atlas "Kameran açılacak": başlık içerikte (karo + başlık + ✕), açıklama sola yaslı, 2×2 kart
   seçenek (açıklamasız, simge + etiket), not gökyüzü bilgi kutusu. */
.mud-dialog:has(.q-camask) > .mud-dialog-title { display: none; }
.q-camask { text-align: start; padding: 2px 0 0; display: grid; gap: 10px; }
.q-camask-head { display: flex; align-items: center; gap: 10px; }
.q-camask-head .q-camask-ic { width: 36px; height: 36px; margin: 0; border-radius: 11px; flex: none; background: var(--q-chip-on); color: var(--q-accent-ink); box-shadow: none; }
.q-camask-head .q-camask-ic .mud-icon-root { font-size: 19px; }
.q-camask-title { flex: 1; min-width: 0; margin: 0; font-family: var(--q-display); font-weight: 600; font-size: 20px; color: var(--q-strong); }
.q-camask-lead { margin: 0; font-size: 13.5px; font-weight: 600; line-height: 1.5; color: var(--q-text); }
.q-camask-sub { margin: -6px 0 2px; font-size: 12.5px; color: var(--q-muted); }
.q-camask-opts { gap: 8px; }
.q-camask-opt { flex-direction: column; justify-content: center; gap: 6px; min-height: 64px; padding: 12px 10px; border-radius: 14px; border: 1.5px solid var(--q-border);
    background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); color: var(--q-text); }
.q-camask-opt.on { border: 2px solid color-mix(in srgb, var(--q-accent) 70%, transparent); background: var(--q-chip-on); color: var(--q-strong); }
.q-camask-t { font-size: 13px; font-weight: 800; }
.q-camask-d { display: none; }
.q-camask-note { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45;
    background: color-mix(in srgb, var(--q-accent) 12%, transparent); color: var(--q-text); }
.q-camask-note .mud-icon-root { flex: none; font-size: 16px; color: var(--q-accent-ink); margin-top: 1px; }
.q-gdm { width: min(400px, 78vw); }

/* ================= BULUT · ATLAS UYUMU — AYARLAR (DERİN BÖLÜMLER, 2026-10-18) =================
   Şifre ve güvenlik: "Parola" alt başlığı, iki alan yan yana + üst etiket + göz düğmesi (MudBlazor
   kökündeki q-settings-input çerçevesi kaldırıldı); Gelen aramalar satırı metin + sağda anahtar;
   kamera arkaplanı tam genişlik 7'li ızgara. */
.mud-input-control.q-settings-input { background: none; border: 0; padding: 0; box-shadow: none; }
.q-settings-subh { font-family: var(--q-display); font-weight: 600; font-size: 16.5px; color: var(--q-strong); margin-bottom: 2px; }
.q-pwd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; align-items: start; }
.q-fld-lbl { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted); }
.q-pwd-grid .mud-input-control { margin: 0; }
.q-pwd-grid .mud-input-adornment .mud-icon-button { color: var(--q-muted); padding: 4px; }
.q-dset.q-dset-inline { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
.q-bgpick.q-bgpick-wide { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; padding: 6px 0; max-width: none; }
.q-bgpick-wide .q-bgopt { padding: 4px 4px 6px; border-radius: 14px; }
.q-bgpick-wide .q-bgopt-img, .q-bgpick-wide .q-bgopt-blur, .q-bgpick-wide .q-bgopt-none { width: 100%; height: 64px; border-radius: 11px; }
.q-bgpick-wide .q-bgopt-lbl { font-size: 12px; font-weight: 800; }

/* ================= BULUT · ATLAS UYUMU — TOPLULUK AYARLARI PANOLARI (2026-10-18) =================
   Çıkartmalar (esnek ad + birincil yükle, kart ızgara), Webhook'lar (etiketli form, kart satırlar),
   Susturulanlar (3 eşit istatistik kartı: üstte etiket, altta büyük sayı), Şikayetler kartları,
   Günlük kart satırları; başlık sırasındaki eylem düğmeleri (CSV, yedek, Yenile) sağ üstteki
   pencere düğmelerinin SOLUNDA durur — eskiden "margin-left:auto" ile onların altına giriyordu. */
.q-settings-hrow > .q-hrow-act, .q-settings-hrow > .q-mute-refresh { margin-left: auto; margin-right: 124px; }
@media (max-width: 700px) { .q-settings-hrow > .q-hrow-act, .q-settings-hrow > .q-mute-refresh { margin-right: 0; } }
.q-sticker-upload { flex-wrap: nowrap; max-width: 760px; }
.q-sticker-upload > input { flex: 1; min-width: 0; }
.q-btn-up { flex: none; background: var(--q-btn-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-sticker-manage-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; max-width: 760px; }
.q-sticker-manage { gap: 8px; padding: 14px 10px; border-radius: 18px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); }
.q-sticker-manage img { max-width: 64px; max-height: 64px; }
.q-sticker-manage-name { font-size: 12.5px; font-weight: 800; color: var(--q-strong); max-width: 120px; }
.q-wh-form { align-items: flex-end; max-width: 760px; }
.q-wh-fld { flex: 1 1 200px; min-width: 0; display: grid; }
.q-wh-fld .q-settings-select { width: 100%; max-width: none; }
.q-wh-form > .q-theme-btn, .q-wh-form > .mud-button-root { flex: none; height: 40px; }
.q-admin-row.q-wh-row { gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); max-width: 760px; }
.q-mute-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.q-mute-stat { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); }
.q-mute-stat b { font-family: var(--q-display); font-size: 24px; font-weight: 600; color: var(--q-strong); }
.q-mute-stat span { font-size: 12px; font-weight: 800; letter-spacing: .6px; color: var(--q-muted); }
.q-mute-stat.forever, .q-mute-stat.timed { border-color: var(--q-border); }
.q-mute-stat.forever b, .q-mute-stat.timed b { color: var(--q-strong); }
.q-audit { gap: 8px; max-width: 760px !important; }
.q-audit-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); }
.q-audit-row > div { display: flex; align-items: center; gap: 12px; }
.q-audit-ico { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--q-chip); color: var(--q-muted); }
.q-audit-ico .mud-icon-root { font-size: 15px !important; }
.q-audit-text { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--q-strong); }
.q-audit-text b { font-weight: 800; }
.q-audit-target { font-weight: 800; }
.q-audit-time { margin-left: auto; flex: none; font-size: 12px; color: var(--q-muted); }

/* Şikayet kartı (atlas): tarih solda, "Çözüldü işaretle / Yeniden aç" sağa yaslı gökyüzü bağlantısı; alıntı sol çizgili. */
.q-report-card { max-width: 760px; padding: 14px 16px; }
.q-report-meta > .mud-button-root { margin-left: auto; color: var(--q-accent-ink) !important; font-weight: 800; text-transform: none; }
.q-report-snap { padding: 6px 12px; border-radius: 0; background: none; border-left: 3px solid var(--q-line-2, var(--q-border)); font-style: normal; color: var(--q-text); }

/* ================= BULUT · ATLAS UYUMU — KÜÇÜK DİYALOGLAR (2026-10-18) =================
   Kategoriye taşı (üst etiket), topluluk kurma talebi (salyangoz + kart maddeler + güneş tonlu
   bekleme notu), topluluk kuralları (kurallar çerçeveli kutuda). Kapatma ✕'leri başlıkta. */
.q-srvreq { align-items: stretch; text-align: start; gap: 10px; }
.q-srvreq-emo { width: 64px; height: 64px; display: block; align-self: center; animation: q-survey-bob 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .q-srvreq-emo { animation: none; } }
.q-srvreq-title { align-self: center; text-align: center; margin-bottom: 2px; }
.q-srvreq-list { gap: 8px; margin: 0; }
.q-srvreq-list li { align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); font-size: 13px; font-weight: 700; line-height: 1.45; }
.q-srvreq-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--q-chip); }
.q-srvreq-ico { margin: 0 !important; color: var(--q-muted) !important; font-size: 16px !important; }
.q-srvreq-pending { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; font-weight: 700; color: var(--q-text); background: color-mix(in srgb, #FFCB55 18%, transparent); }
.q-srvreq-pending .mud-icon-root { color: #FFCB55; }
.q-rules-body { padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); border: 1px solid var(--q-border); }
.q-rules-body strong { color: var(--q-strong); }
.q-rules-body p { margin: 0 0 8px; color: var(--q-muted); }
.q-rules-body p:last-child { margin-bottom: 0; }

/* Takım kur (atlas): zaman + süre iki sütun (kişi sayısı çipleri .q-opts). */
.q-lfg-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; align-items: end; }

/* SEÇENEK ÇİPLERİ (atlas "opts" = ayrı .b.s çipler, seçili .b.p gökyüzü dolgu): kanal ayarlarında yavaş mod /
   bit hızı / medya profili / kişi sınırı ve takım kur kişi sayısı. Bölmeli denetim (.sg) kuralı q-opts'u
   hariç tutar — atlas bu iki biçimi ayrı tutuyor (seg = görünüm tercihleri, opts = sayı/profil seçimi). */
div.q-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.q-opts > .q-theme-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 11px; border-radius: 10px;
    font-size: 12.5px; font-weight: 800; background: var(--q-chip); color: var(--q-text); border: 1px solid var(--q-border); box-shadow: none; }
.q-opts > .q-theme-btn:hover:not(:disabled) { color: var(--q-strong); border-color: var(--q-line-2, var(--q-border)); }
.q-opts > .q-theme-btn.on { background: var(--q-btn-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-opts > .q-theme-btn .mud-icon-root { font-size: 15px; }

/* ================= BULUT · ATLAS UYUMU — ÜST BANTLAR, KUYRUK, GELEN ARAMA (2026-10-18) =================
   Bantlar: ince renkli şerit (doğrulama güneş, VPN lavanta tonlu), kalın metin, "Tekrar gönder" küçük
   birincil düğme, kapatma simge karosu. Kapasite kuyruğu: gökyüzü + kart + büyük sıra numarası.
   Gelen arama: dalga yayan avatar + iki etiketli düğme. */
.q-verifybar, .q-vpnbar { gap: 12px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--q-strong); border-bottom: 1px solid var(--q-border); }
.q-verifybar { background: color-mix(in srgb, #FFCB55 26%, var(--q-panel-bg)); }
.q-vpnbar { background: color-mix(in srgb, #A193FF 20%, var(--q-panel-bg)); }
.q-verifybar .mud-icon-root, .q-vpnbar .mud-icon-root { color: var(--q-text); }
.q-verifybar-btn { padding: 6px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 800; background: var(--q-btn-grad); color: #fff;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-vpnbar-x { width: 32px; height: 32px; border-radius: 10px; background: var(--q-chip); color: var(--q-muted); }
.q-vpnbar-x:hover { background: var(--q-chip-on); color: var(--q-strong); }
.q-capqueue.q-login-bg { position: fixed; inset: 0; z-index: 5000; padding: 20px; gap: 0; color: #E8EFFF; }
.q-capqueue-card { display: grid; gap: 14px; justify-items: center; text-align: center; width: 440px; }
.q-capqueue-card .q-login-logo { margin: 0 0 -4px; }
.q-capqueue-card .q-capqueue-title { margin: 0; font-family: var(--q-display); font-weight: 600; font-size: 26px; color: #E8EFFF; }
.q-capqueue-card .q-capqueue-hint { margin-top: -8px; max-width: none; font-size: 14px; color: #8696BF; }
.q-capqueue-box { justify-self: stretch; display: grid; justify-items: center; gap: 4px; padding: 10px; border-radius: 18px; background: rgba(76,176,255,.22); }
.q-capqueue-box span { font-size: 12.5px; color: #8696BF; }
.q-capqueue-box b { font-family: var(--q-display); font-weight: 600; font-size: 44px; line-height: 1.1; color: #8FD0FF; }
.q-capqueue-dots { display: flex; gap: 5px; }
.q-capqueue-dots i { width: 7px; height: 7px; border-radius: 50%; background: #8FD0FF; animation: q-cq-dot 1.2s ease-in-out infinite; }
.q-capqueue-dots i:nth-child(2) { animation-delay: .15s; }
.q-capqueue-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes q-cq-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .q-capqueue-dots i { animation: none; } }
.q-callring { flex-direction: column; align-items: stretch; gap: 12px; width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 16px; border-radius: 18px;
    background: var(--q-panel-bg); border: 1px solid var(--q-line-2, var(--q-border)); box-shadow: var(--q-shadow-lg, 0 14px 38px rgba(0,0,0,.42)); }
.q-callring-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.q-callring-av { animation: q-ring-wave 1.8s ease-out infinite; }
.q-callring-txt b { font-size: 16px; font-weight: 800; }
.q-callring-acts { display: flex; gap: 8px; }
.q-callring-btn { flex: 1; width: auto; height: auto; min-height: 40px; gap: 7px; padding: 9px 16px; border-radius: 13px; font: 800 13.5px/1.2 'Goglis Sans', system-ui, sans-serif; }
.q-callring-btn .mud-icon-root { font-size: 17px; }
.q-callring-btn.no { background: var(--q-danger); color: #fff; }
.q-callring-btn.ok { background: color-mix(in srgb, var(--q-online) 16%, transparent); color: var(--q-online); border: 1px solid color-mix(in srgb, var(--q-online) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .q-callring-av { animation: none; } }

/* ================= BULUT · ATLAS UYUMU — YÖNETİM 2FA KİLİDİ (2026-10-18) =================
   Atlas "2FA kilidi": tam ekran gece gökyüzü (giriş sayfalarıyla aynı sahne), ortada kart. Yönetim
   paneli gibi tam ekran örter (z 1000; mobilde panel gibi 1300). */
.q-login-bg.q-tfa-gate { position: fixed; inset: 0; z-index: 1000; }
@media (max-width: 700px), (max-height: 520px) { .q-login-bg.q-tfa-gate { z-index: 1300; } }
.q-tfa-card { display: grid; gap: 12px; justify-items: center; text-align: center; width: 440px; }
.q-tfa-ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: rgba(76,176,255,.22); color: #8FD0FF; }
.q-tfa-ic .mud-icon-root { font-size: 22px; }
.q-tfa-title { font-family: var(--q-display); font-weight: 600; font-size: 24px; color: #E8EFFF; }
.q-tfa-card .q-login-sub { margin: -6px 0 2px; font-size: 13.5px; line-height: 1.5; }
.q-tfa-card .q-auth-input.q-tfa-code { width: 100%; height: 50px; box-sizing: border-box; text-align: center; font-size: 22px; font-weight: 800; letter-spacing: 10px; }
.q-tfa-card .q-auth-submit { width: 100%; }
.q-tfa-err { font-size: 12.5px; font-weight: 700; color: #FF8FA3; }

/* ================= BULUT · ATLAS UYUMU — YÖNETİM PANELİ 2 (2026-10-18) =================
   Talepler alt başlıkları Fredoka; ekleme formları kutusuz, alan etiketleri ÜSTTE büyük harf
   (MudTextField'in kenara gömülü etiketi yerinde sabitlenir, çentik kapanır), düğme solda;
   girişler/ziyaretçiler 4 KPI yan yana ve ana grafik tam genişlik (topluluk istatistiğindeki
   iki sütun kuralı yalnız diyaloğa daraltıldı); geri bildirim sayaç çipleri renkli; log satırları
   kart + kısa seviye çipi + eş aralıklı yazı. */
.q-adm-h3 { margin: 18px 0 8px; font-family: var(--q-display); font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--q-strong); }
.q-form-panel { border: 0; border-radius: 0; padding: 0; background: none; }
.q-form-panel > h4 { margin: 0 0 2px; font-family: var(--q-display); font-weight: 600; font-size: 16px; color: var(--q-strong); }
.q-admin-lkform { margin-top: 6px; padding: 0; background: none; border: 0; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 12px; }
.q-admin-lkform .mud-input-control.mud-input-outlined-with-label { margin-top: 22px; }
.q-admin-lkform .mud-input-label-outlined { top: -21px !important; left: 0 !important; transform: none !important; padding: 0 !important; background: transparent !important;
    font-size: 12px !important; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted) !important; max-width: 100%; }
.q-admin-lkform .mud-input-outlined-border legend { width: 0 !important; max-width: 0 !important; padding: 0 !important; }
.q-admin-lkform > div:not(.mud-input-control):has(.mud-switch) { margin-top: 26px; justify-content: space-between; }
.q-form-panel .q-cap-cl { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--q-muted); margin-bottom: 6px; }
.q-form-panel .q-form-actions { justify-content: flex-start; margin-top: 14px; }
.q-admin-stats:has(> .q-stat:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 700px) { .q-admin-stats:has(> .q-stat:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
    .q-settings-body:has(> .q-admin-stats) > .q-cap-live { grid-column: 1 / -1; }
    .mud-dialog .q-settings-body:has(> .q-admin-stats) > .q-cap-live { grid-column: auto; }
}
.q-log-row { gap: 10px; margin-bottom: 6px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent);
    font-family: ui-monospace, 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace; font-size: 12px; }
.q-log-row:nth-child(odd) { background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); }
.q-log-lvl { font-family: 'Goglis Sans', system-ui, sans-serif; font-size: 10px; letter-spacing: .5px; padding: 2px 7px; background: var(--q-chip-on); color: var(--q-accent-ink); }
.q-log-row.tracking .q-log-lvl { background: color-mix(in srgb, #A193FF 18%, transparent); color: color-mix(in srgb, #A193FF 62%, var(--q-strong)); }
.q-log-row.warning .q-log-lvl { background: color-mix(in srgb, #FFCB55 20%, transparent); color: color-mix(in srgb, #FFCB55 75%, var(--q-strong)); }
.q-log-row.error .q-log-lvl, .q-log-row.critical .q-log-lvl { background: color-mix(in srgb, var(--q-danger) 16%, transparent); color: var(--q-danger); }
.q-log-row time { font-size: 12px; color: var(--q-muted); }
.q-log-cat { font-size: 12px; font-weight: 700; color: var(--q-accent-ink); font-family: inherit; }
.q-log-msg { color: var(--q-text); }

.q-adm-ssl { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 30px; font-size: 13px; font-weight: 800; color: var(--q-strong); }
.q-adm-ssl .mud-input-control { margin: 0; flex: none; }

/* Kurulum rehberi (atlas): adım numarası yuvarlatılmış kare gökyüzü karo, başlık kalın, açıklama soluk,
   kod kutusu atlas alanı biçiminde, "Kopyala" küçük düğme; giriş notu gökyüzü tonlu kutu. */
.q-guide { gap: 16px; }
.q-guide-intro { border-left: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--q-accent) 12%, transparent); color: var(--q-text); }
.q-guide-h { gap: 10px; font-size: 14px; font-weight: 800; }
.q-guide-no { width: 26px; height: 26px; border-radius: 9px; background: var(--q-chip-on); color: var(--q-accent-ink); font-size: 12.5px; font-weight: 800; }
.q-guide-body { padding-left: 36px; color: var(--q-muted); }
.q-guide-links { padding-left: 36px; }
.q-guide-links a { color: var(--q-accent-ink); font-weight: 700; }
.q-guide-codewrap { margin-left: 36px; }
.q-guide-code { padding: 11px 14px; border-radius: 13px; background: var(--q-surface-2); border: 1.5px solid var(--q-border); }
.q-guide-copy { padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 800; background: var(--q-chip); border: 1px solid var(--q-border); color: var(--q-text); }
.q-guide-copy:hover { color: var(--q-strong); border-color: var(--q-line-2, var(--q-border)); }

/* Mobil gelen kutusu (atlas): her öğe kart; etiket kalın soluk + simge, metin kalın. */
@media (max-width: 700px), (max-height: 520px) {
    .q-moinbox-body { padding: 12px 12px 18px; display: grid; gap: 8px; align-content: start; }
    .q-moinbox-row { gap: 4px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--q-border); background: color-mix(in srgb, var(--q-surface-2) 70%, transparent); }
    .q-moinbox-meta { display: flex; align-items: center; gap: 6px; font: 800 12px/1.2 'Goglis Sans', system-ui, sans-serif; color: var(--q-muted); }
    .q-moinbox-meta .mud-icon-root { font-size: 15px; }
    .q-moinbox-txt { font: 800 14px/1.35 'Goglis Sans', system-ui, sans-serif; }
}

@media (max-width: 700px), (max-height: 520px) {
    .q-moinbox-body { grid-template-columns: minmax(0, 1fr); }
    .q-moinbox-row { min-width: 0; }
}
/* Konuşma halkaları yanındaki yazının üstüne binmesin (dock satırı 4px aralıktı). */
.q-voicedock-on:has(> .q-speaksnail) { gap: 8px; }

/* ================= BULUT RÖTUŞ (2026-10-18 gece, onaylı "Kaçan ayrıntılar" listesi) =================
   Atlasta olup uygulamaya geçmemiş hareketler. H1 konuşma halkası · H2 üye ses satırı · H3 kalp
   pıtırtısı · H4 yumuşak basış (goglis.js) · H5 emoji büyümesi · H6 kayan hap · H7 logo bakışı
   (goglis.js) · H8 logo zıplaması · H10 yıldız ışıltısı · H11 canlı mesaj · H12 odak halkası ·
   Y1 profil adı. H9 (yazıyor'da yüzlü salyangoz) Fatih'in kararıyla atlandı. Dosyanın SONUNDA:
   aynı seçicilerin önceki tanımlarını bilerek ezer. */

/* H1 — konuşanın avatarından kabuk halkası gibi İKİ dalga (1,8 sn, ikincisi yarım tur geride).
   Halkalar sarmalayıcının sahte öğelerinde: avatar çoğu zaman <img> ve img sahte öğe taşıyamaz.
   Eski kutu-gölgesi nabzı kapanır; yeşil kenar durur (hareketi azalt açıkken de konuşan belli). */
.q-spk { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.q-spk.on::before, .q-spk.on::after, .q-speakring::before, .q-speakring::after,
.q-vidtile.av.speaking .q-vidav::before, .q-vidtile.av.speaking .q-vidav::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
    border: 2px solid var(--q-online); animation: q-talk 1.8s var(--q-ease-soft) infinite;
}
.q-spk.on::after, .q-speakring::after, .q-vidtile.av.speaking .q-vidav::after { animation-delay: .9s; }
@keyframes q-talk { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.q-vuav.speaking { animation: none; }
.q-speakring { border: 0; animation: none; }
/* Arama karosundaki büyük avatar: halkalar dışarı taşabilsin diye kırpma görsele indi. */
.q-vidav { position: relative; overflow: visible; }
.q-vidav img { border-radius: 50%; }
.q-vidtile.av.speaking .q-vidav { animation: none; box-shadow: 0 0 0 3px var(--q-online); }
.q-vidtile.av.speaking .q-vidav::before, .q-vidtile.av.speaking .q-vidav::after { inset: -4px; border-width: 3px; }

/* H2 — üye listesinde ses satırı: kanal adı; konuşuyorsa nane rengi "· konuşuyor". */
.q-member-voice { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 12px; line-height: 1.3; color: var(--q-muted); }
.q-member-voice > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-member-voice .mud-icon-root { flex: none; font-size: 13px; }
.q-member-voice.on { color: var(--q-online); font-weight: 700; }

/* H3 — tepki eklenince üç kalp yelpaze gibi yükselir (70 ms arayla, 0,9 sn). goglis.js gövdeye
   position:fixed basar: çipin satırı kaydırılan listede, taşma orada kırpılırdı. */
.q-rx-puff { position: fixed; z-index: 3000; width: 13px; height: 13px; pointer-events: none; color: #FF7FA8; animation: q-rx-puff .9s ease-out both; }
.q-rx-puff svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@keyframes q-rx-puff { 0% { transform: translate(0, 0) scale(.5); opacity: 1; } 100% { transform: translate(var(--dx, 0), -34px) scale(1.1); opacity: 0; } }

/* H5 — emoji hücresi üzerine gelince büyür (%114), seçilince zıplar (goglis.js data-pop);
   çıkartma ve mobil hızlı tepki şeridinde de. */
.q-emoji-i, .q-emoji-grid .q-emoji-i { transition: background-color .15s var(--q-ease), transform .22s var(--q-ease-spring); }
.q-emoji-i:hover, .q-emoji-i:focus-visible { transform: scale(1.14); position: relative; z-index: 1; }
.q-sticker-btn:hover { transform: translateY(-2px) scale(1.06); }
.q-emoji-i[data-pop], .q-sticker-btn[data-pop], .q-msheet-rx button[data-pop] { animation: q-rx-pop .45s var(--q-ease-spring); }

/* H6 — mobil alt menü: seçili sekmenin hapı yeni sekmeye yaylanarak kayar, simge hafifçe zıplar.
   Hap çubuğun sahte öğesi; konum :has() ile sekmeden okunur (iç içe :has YOK — tuzak #21).
   Ölçü: çubuk 8px yan dolgu + düğmelerin 2px yan payı → hücre (100% - 16px) / 5, hap hücre - 4px.
   DÖRT SEKME (2026-10-24): Aramalar, Topluluk ile Profil arasına girdi.
   BEŞ SEKME (2026-10-25): Ev en başta (Mobil Rötuş Turu); düğme payı 6 → 3px, sekme 48 px yüksek. */
@media (max-width: 700px), (max-height: 520px) {
    .q-mobar::before {
        content: ""; position: absolute; top: 3px; bottom: 3px; left: 10px; width: calc((100% - 16px) / 5 - 4px);
        border-radius: 16px; background: var(--q-chip-on); pointer-events: none;
        transition: translate .42s var(--q-ease-spring), opacity .2s ease;
    }
    .q-mobar:has(> .q-mobar-b[data-mo="dm"].on)::before { translate: calc(100% + 4px) 0; }
    .q-mobar:has(> .q-mobar-b[data-mo="community"].on)::before { translate: calc(200% + 8px) 0; }
    .q-mobar:has(> .q-mobar-b[data-mo="calls"].on)::before { translate: calc(300% + 12px) 0; }
    .q-mobar:has(> .q-mobar-b[data-mo="profile"].on)::before { translate: calc(400% + 16px) 0; }
    .q-mobar:not(:has(> .q-mobar-b.on))::before { opacity: 0; }
    .q-mobar-b.on { background: transparent; }
    .q-mobar-b > :first-child { transition: translate .35s var(--q-ease-spring), scale .35s var(--q-ease-spring); }
    .q-mobar-b.on > :first-child { translate: 0 -2px; scale: 1.12; }
}

/* H7 — büyük logolarda salyangoz başını imlece çevirir (goglis.js .sn-face'e translate yazar). */
.gsnail .sn-face { transition: transform .5s var(--q-ease-soft); }

/* H8 — üst şerit logosu üzerine gelince hafifçe kalkıp sola eğilir. Ayrı translate/rotate
   özellikleri: mevcut soluma animasyonunun transform'uyla ÇARPIŞMAZ, üst üste biner. */
.q-logo { transition: translate .25s var(--q-ease-spring), rotate .25s var(--q-ease-spring); }
.q-brand:hover .q-logo { translate: 0 -2px; rotate: -4deg; }

/* H10 — karşılama ve boş kanal: dört köşeli yıldızcıklar (Twinkles.razor). Dört tur oynar, sonra
   soluk durur — okuma alanında sonsuz döngü yok. Eski yuvarlak nokta ışıltısının yerini alır. */
.q-twinkles { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.q-empty-wall > .q-twinkles { position: absolute; z-index: 0; }
.q-empty-wall::before { content: none; }
.q-tw { position: absolute; color: color-mix(in srgb, var(--q-accent) 30%, #fff); background: currentColor; opacity: .15;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: q-login-tw 5s ease-in-out 4; }
:is(.theme-light, .theme-ocean-light, .theme-grape-light, .theme-forest-light, .theme-sunset-light, .theme-rose-light, .theme-midnight-light) .q-tw { color: var(--q-accent); }
.q-empty-chan { position: relative; overflow: hidden; }
.q-empty-chan > :not(.q-twinkles) { position: relative; z-index: 1; }

/* H11 — yalnız canlı gelen mesaj (data-live) aşağıdan hafifçe yükselerek oturur; kanal açılırken
   yüklenen geçmiş yerinde durur. Satıra yine transform VERİLMEZ (2026-07-30 dersi), yalnız gövdeye. */
.q-msg, .q-msg .q-md { animation: none; }
.q-msg[data-live] { animation: q-el-rise .2s var(--q-ease-soft); }
.q-msg[data-live] .q-md { animation: q-msg-live .2s var(--q-ease-soft); }
@keyframes q-msg-live { from { transform: translateY(8px); } to { transform: none; } }
/* KÜÇÜK HAREKETLER (2026-10-24, Bulut rötuş 3): yukarıdaki giriş 500 ms / 14 px'ten 200 ms / 8 px'e indi; okunmamış
   rozeti artınca zıplar, tepki sayısı değişince büyür. Hepsi 300 ms altı. data-bump render bekçisinden (BumpTracker):
   ilk görülen değer oynamaz, değer "a" ↔ "b" döner ki öznitelik yerindeyken gelen yeni değişim de animasyonu yeniden
   başlatsın (değer değişince animasyon ADI değişir). Hareketi azalt ve q-instant'ta hiçbiri oynamaz. */
[data-bump] { animation: q-bump-a .28s var(--q-ease-spring); }
[data-bump="b"] { animation-name: q-bump-b; }
@keyframes q-bump-a { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.32); } }
@keyframes q-bump-b { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.32); } }
.q-react-n { display: inline-block; }
.q-react-n[data-bump] { animation-duration: .24s; }

/* H12 — klavye odak halkası her etkileşimli öğede (fare tıklamasında görünmez). */
:is(button, a[href], summary, [role="button"], [role="tab"], [role="menuitem"], [role="option"], [role="switch"], .mud-button-root):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--q-accent) 80%, transparent); outline-offset: 2px;
}

/* Y1 — profil kartında ad başlık yazı tipiyle (atlas: Fredoka 20). */
.q-pcard2-name { font-family: var(--q-display); font-weight: 600; font-size: 20px; letter-spacing: .1px; }
html.q-layout-amfi .q-pcard2-name { font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
    .q-spk.on::before, .q-speakring::before, .q-vidtile.av.speaking .q-vidav::before { animation: none; transform: none; opacity: .9; }
    .q-spk.on::after, .q-speakring::after, .q-vidtile.av.speaking .q-vidav::after, .q-rx-puff { display: none; }
    .q-emoji-i[data-pop], .q-sticker-btn[data-pop], .q-msheet-rx button[data-pop],
    .q-msg[data-live], .q-msg[data-live] .q-md, .q-tw, [data-bump] { animation: none !important; }
    .q-tw { opacity: .4; }
    .q-mobar::before, .q-mobar-b > :first-child, .gsnail .sn-face, .q-logo { transition: none; }
}
html.q-instant .q-spk.on::before, html.q-instant .q-speakring::before, html.q-instant .q-vidtile.av.speaking .q-vidav::before { animation: none; transform: none; opacity: .9; }
html.q-instant .q-spk.on::after, html.q-instant .q-speakring::after, html.q-instant .q-vidtile.av.speaking .q-vidav::after, html.q-instant .q-rx-puff { display: none; }
html.q-instant .q-emoji-i[data-pop], html.q-instant .q-sticker-btn[data-pop], html.q-instant .q-msheet-rx button[data-pop],
html.q-instant .q-msg[data-live], html.q-instant .q-msg[data-live] .q-md, html.q-instant .q-tw, html.q-instant [data-bump] { animation: none !important; }
html.q-instant .q-tw { opacity: .4; }
html.q-instant .q-mobar::before, html.q-instant .q-mobar-b > :first-child, html.q-instant .gsnail .sn-face, html.q-instant .q-logo { transition: none; }

/* ================= MOBİL ARAMA EKRANI (2026-10-23) =================
   Telefonun yerel arama ekranının (onaylı atlas "Gelen arama" + "Yerel arama ekranı"; Goglis Platform
   CallSession/CallUi) web ikizi. Ölçüler atlastan: .cbg gökyüzü zemini + kişi renginde hale, .cl-brand hap,
   .cl-av 128 px avatar ve üç kabuk halkası (2,7 sn, 0,9 sn arayla), ad Fredoka 34, .ic-b 58 px düğmeler,
   72 px kırmızı Bitir. Yalnız dar ekranda; tema bağımsız (yerel ekran gibi hep gece gökyüzü). Üst şerit
   (1276), alt menü (1260), mobil sahne (1290/1291) ve topluluk listesinin (1292) üstünde, diyalogların altında. */
.q-mcall { display: none; }
@media (max-width: 700px), (max-height: 520px) {
    .q-mcall {
        position: fixed; inset: 0; z-index: 1295; display: flex; flex-direction: column; overflow: hidden;
        color: #fff; font-family: 'Goglis Sans', system-ui, sans-serif;
        background: #142A66;
        background: radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--c2) 70%, #2F9BFF) 0%, #142A66 55%, #070F2E 100%);
        padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
        animation: q-mcall-in .28s var(--q-ease-soft);
    }
}
.q-mcall::before {
    content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: 20%; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none; filter: blur(30px);
    background: radial-gradient(circle, color-mix(in srgb, var(--c1) 45%, transparent), transparent 65%);
}
.q-mcall > :not(.q-twinkles) { position: relative; }
.q-mcall .q-tw { color: #CFE8FF; }
@keyframes q-mcall-in { from { opacity: 0; } to { opacity: 1; } }

.q-mcall-top { display: flex; justify-content: center; padding-top: 20px; }
.q-mcall-brand {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px;
    background: rgba(255,255,255,.14); font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .3px;
}
.q-mcall .q-mcall-tile { width: 22px; height: 22px; border-radius: 7px; box-shadow: none; flex: none; }

.q-mcall-who { display: grid; justify-items: center; gap: 8px; margin-top: clamp(24px, 7vh, 54px); padding: 0 24px; text-align: center; min-width: 0; }
.q-mcall-who > b {
    max-width: 100%; margin-top: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 600 34px/1.15 var(--q-display, 'Goglis Display'), 'Goglis Sans', system-ui, sans-serif;
}
.q-mcall-sub { font-size: 15px; opacity: .8; }
.q-mcall .q-mcall-av {
    position: relative; display: grid; place-items: center; flex: none; width: 128px; height: 128px; border-radius: 50%;
    background: rgba(255,255,255,.18); box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.q-mcall-av > img, .q-mcall-init { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; }
.q-mcall-init {
    display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2));
    font: 600 46px/1 var(--q-display, 'Goglis Display'), 'Goglis Sans', system-ui, sans-serif;
}
.q-mcall-av > i {
    position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(160,220,255,.8); opacity: 0; pointer-events: none;
    animation: q-mcall-ring 2.7s var(--q-ease-soft) infinite;
}
.q-mcall-av > i:nth-child(2) { animation-delay: .9s; }
.q-mcall-av > i:nth-child(3) { animation-delay: 1.8s; }
@keyframes q-mcall-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }

.q-mcall-bottom { margin-top: auto; padding: 0 26px 40px; display: grid; gap: 26px; }
.q-mcall-state {
    justify-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
    background: rgba(255,255,255,.14); font: 800 14px/1.2 'Goglis Sans', system-ui, sans-serif;
}
.q-mcall-state.ok { padding-left: 14px; }
.q-mcall-state .q-speaksnail { width: 26px; height: 26px; flex: none; }
.q-mcall-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #3EDCAE; box-shadow: 0 0 0 4px rgba(62,220,174,.3); }
.q-mcall-state .q-actdur { opacity: 1; font-size: inherit; margin-left: 0; }
.q-mcall-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.q-mcall-b {
    display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; padding: 0; border: 0; background: none;
    color: #fff; font: 700 12px/1.2 'Goglis Sans', system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.q-mcall-b > span {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14);
    transition: background .15s, color .15s, transform .18s var(--q-ease-spring);
}
.q-mcall-b > span .mud-icon-root { font-size: 24px; }
.q-mcall-b:active:not(:disabled) > span { transform: scale(.92); }
.q-mcall-b.on > span { background: #fff; color: #142A66; }
.q-mcall-b:disabled { opacity: .45; cursor: default; }
.q-mcall-b small { font: inherit; opacity: .95; }
.q-mcall-b:focus-visible { outline: none; }
.q-mcall-b:focus-visible > span { outline: 3px solid rgba(160,220,255,.9); outline-offset: 3px; }
.q-mcall-endrow { display: flex; justify-content: center; }
.q-mcall-b.end > span { width: 72px; height: 72px; background: linear-gradient(150deg, #FF8FA6, #F2496B); box-shadow: 0 10px 24px rgba(242,73,107,.35); }
.q-mcall-b.end > span .mud-icon-root { font-size: 28px; }
@media (max-height: 640px) {
    .q-mcall-who { margin-top: 14px; }
    .q-mcall .q-mcall-av { width: 104px; height: 104px; }
    .q-mcall-av > img, .q-mcall-init { width: 94px; height: 94px; }
    .q-mcall-who > b { font-size: 28px; margin-top: 10px; }
    .q-mcall-bottom { gap: 18px; padding-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .q-mcall, .q-mcall-av > i { animation: none; } }
html.q-instant .q-mcall, html.q-instant .q-mcall-av > i { animation: none !important; }

/* ============================================================================
   BULUT RÖTUŞLARI · İKİNCİ TUR (2026-10-23, onaylı öneri sayfası R1–R13)
   Hepsi yalnız web; telefon/masaüstü kabuğu güncellemesi istemez.
   ============================================================================ */

/* R1 — kanalın/DM'in başlangıç kartı (geçmişin en başında). Karo gönder düğmesiyle aynı vurgu degradesi:
   renk teması değişince karo da değişir. */
.q-chstart { display: grid; justify-items: start; gap: 6px; padding: 22px 16px 14px; margin: 0 6px 4px; }
.q-chstart-tile { width: 64px; height: 64px; border-radius: 21px; display: grid; place-items: center; color: #fff;
    background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 55%, #fff), var(--q-accent) 55%, color-mix(in srgb, var(--q-accent) 76%, #000));
    box-shadow: 0 10px 22px color-mix(in srgb, var(--q-accent) 30%, transparent); }
.q-chstart-tile .mud-icon-root { font-size: 32px; }
.q-chstart-av { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; color: #fff;
    font: 600 30px/1 'Goglis Display', 'Goglis Sans', system-ui, sans-serif; box-shadow: 0 0 0 4px color-mix(in srgb, var(--q-accent) 16%, transparent); }
.q-chstart-title { font: 600 22px/1.2 'Goglis Display', 'Goglis Sans', system-ui, sans-serif; color: var(--q-strong); margin-top: 6px; text-wrap: balance; }
.q-chstart-sub { color: var(--q-muted); font-size: 13.5px; max-width: 62ch; }
.q-chstart-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.q-chstart-b { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--q-border);
    background: var(--q-chip); color: var(--q-text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s; }
.q-chstart-b:hover { background: var(--q-chip-on); color: var(--q-accent-ink); border-color: color-mix(in srgb, var(--q-accent) 40%, transparent); }

/* R2 — "Yeni mesajlar" ayracı: solda pembe çizgi, sağda hap. goglisNewSep söndürünce (data-read)
   solup kapanır; liste dipteyse yukarıdaki kayma kaydırma çapasıyla emilir. */
.q-newsep { display: flex; align-items: center; gap: 8px; margin: 10px 10px 6px; max-height: 26px;
    transition: opacity .6s var(--q-ease-soft), max-height .6s var(--q-ease-soft), margin .6s var(--q-ease-soft); }
.q-newsep::before { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--q-pink); }
.q-newsep > span { font: 800 10.5px/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #fff;
    background: var(--q-pink); padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.q-newsep[data-read] { opacity: 0; max-height: 0; margin-top: 0; margin-bottom: 0; overflow: hidden; }

/* R3 — senden bahseden mesaj: hafif vurgu zemini + solda ince çizgi, adının etiketi koyu vurgulu. */
/* Çizgi ayrı öğe (::before): satırın 16 px yuvarlak köşesinde inset gölge kıvrılıp "(" gibi duruyordu. */
.q-msg.ment { background: color-mix(in srgb, var(--q-accent) 9%, transparent); }
.q-msg.ment::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 3px; background: var(--q-accent); pointer-events: none; }
.q-msg.ment:hover { background: color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-msg.ment .q-mention.me, .q-msg.ment .q-mention:not([data-uid]) { background: color-mix(in srgb, var(--q-accent) 30%, transparent); color: var(--q-accent-ink); font-weight: 800; }

/* R4 — DM ARAMA SATIRI (2026-10-23 kart → 2026-10-24 tek satır, Bulut rötuş 3): nane (biten), pembe (bana gelen
   cevapsız), vurgu (cevaplanmayan aramam). Art arda izler tek satırda toplanır (`.grp`), tıklayınca açılır. */
.q-callrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; max-width: 520px;
    margin: 4px 6px 2px 52px; padding: 2px 4px 2px 2px; border-radius: 14px; transition: background-color .15s ease; }
.q-callrow:hover { background: var(--q-hover); }
.q-callrow.miss { background: color-mix(in srgb, var(--q-pink) 9%, transparent); }
.q-callrow-main { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-width: 0; padding: 4px 6px; border: 0; border-radius: 12px;
    background: transparent; color: inherit; font: inherit; text-align: left; }
button.q-callrow-main { cursor: pointer; }
.q-callrow-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff;
    background: linear-gradient(150deg, #4FE0A8, #22C98A); }
.q-callrow-ic .mud-icon-root { font-size: 14px; }
.q-callrow.out .q-callrow-ic { background: linear-gradient(150deg, color-mix(in srgb, var(--q-accent) 55%, #fff), var(--q-accent)); }
.q-callrow.miss .q-callrow-ic { background: linear-gradient(150deg, #FF8FA6, #F2496B); }
.q-callrow-main b { flex: none; font-size: 13.5px; font-weight: 800; color: var(--q-strong); white-space: nowrap; }
.q-callrow.miss .q-callrow-main b { color: color-mix(in srgb, var(--q-pink) 72%, var(--q-strong)); }
.q-callrow-d { min-width: 0; font-size: 12.5px; color: var(--q-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-callrow-chev { flex: none; font-size: 18px !important; color: var(--q-faint); transition: transform .2s var(--q-ease-soft); }
.q-callrow.open .q-callrow-chev { transform: rotate(180deg); color: var(--q-muted); }
.q-callrow-b { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border: 0; border-radius: 10px;
    background: var(--q-chip-on); color: var(--q-accent-ink); font: 800 12px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.q-callrow-b .mud-icon-root { font-size: 14px; }
.q-callrow.miss .q-callrow-b { background: color-mix(in srgb, var(--q-pink) 20%, transparent); color: color-mix(in srgb, var(--q-pink) 70%, var(--q-strong)); }
/* "Tekrar ara" fareli ekranda yalnız üzerine gelince; bana gelen cevapsızda "Geri ara" hep görünür. Dokunmatikte etiketsiz simge. */
@media (hover: hover) {
    .q-callrow:not(.miss) .q-callrow-b { opacity: 0; transition: opacity .15s ease; }
    .q-callrow:hover .q-callrow-b, .q-callrow .q-callrow-b:focus-visible { opacity: 1; }
}
@media (hover: none) { .q-callrow-b { width: 32px; padding: 0; justify-content: center; } .q-callrow-b > span { display: none; } }
/* Grup açılınca alt satırlar (0fr → 1fr). */
.q-callrow-sub { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s var(--q-ease-soft); }
.q-callrow.open .q-callrow-sub { grid-template-rows: 1fr; }
.q-callrow-sin { min-height: 0; overflow: hidden; }
.q-callrow-si { padding: 3px 8px 3px 41px; font-size: 12.5px; color: var(--q-muted); }
.q-callrow-si:last-child { padding-bottom: 8px; }
.q-callrow-si time { color: var(--q-text); font-variant-numeric: tabular-nums; }
@media (max-width: 700px), (max-height: 520px) { .q-callrow { margin-left: 8px; max-width: none; } }
/* Görüşme biter bitmez canlı düşen satır (LonelyCallCleanupService yayını) mesajlar gibi süzülerek oturur. */
.q-callrow[data-live] { animation: q-el-rise .5s var(--q-ease-soft); }
@media (prefers-reduced-motion: reduce) { .q-callrow[data-live] { animation: none; } .q-callrow-sub, .q-callrow-chev { transition: none; } }
html.q-instant .q-callrow[data-live] { animation: none !important; }
html.q-instant .q-callrow-sub, html.q-instant .q-callrow-chev { transition: none; }

/* R5 — araç çubuğunun başında üç hızlı tepki + ince ayraç. */
.q-msg-tools .t.qr { padding: 3px; }
.q-msg-tools .t.qr .gg-emoji { width: 22px; height: 22px; vertical-align: middle; transition: transform .2s var(--q-ease-spring); }
.q-msg-tools .t.qr:hover .gg-emoji { transform: scale(1.18); }
.q-msg-tools-sep { width: 1px; align-self: stretch; margin: 4px 3px; background: var(--q-border); flex: none; }

/* R6 — biçim çubuğu yalnız YAZARKEN (masaüstü): yazı kutusu odaktayken ya da içinde yazı varken
   yumuşakça belirir. Çubuğa basınca odak kaçmaz (onmousedown preventDefault) — yoksa çubuk tık
   gelmeden kapanırdı. Mobilde "Aa" düzeni aynen sürer. */
@media (min-width: 701px) and (min-height: 521px) {
    .q-mdbar:not(.q-editbar) { max-height: 44px; overflow: hidden;
        transition: max-height .22s var(--q-ease-soft), opacity .18s, transform .22s var(--q-ease-soft), margin .22s, padding .22s; }
    .q-mdbar:not(.q-editbar):not(:has(~ .q-composer:focus-within, ~ .q-composer .q-msgbox:not(:placeholder-shown))) {
        max-height: 0; opacity: 0; transform: translateY(6px); margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
}

/* R7 — kâğıt uçak düğmenin içinden uçup çıkar (taşan kısım kırpılır). */
.q-composer .q-send-btn { overflow: hidden; }

/* R8 — DM listesi: son mesaj + saat + pembe rozet; okunmamışta kalın. Sabitle/kapat fareli ekranda
   sağ sütunun üstüne biner (yer tutmaz), dokunmatikte akışta kalır. */
.q-dmrow { position: relative; }
.q-dmrow .q-dmrow-name > small.typing { color: var(--q-accent-ink); font-weight: 700; }
.q-dmrow .q-dmrow-name > small.missed { color: color-mix(in srgb, var(--q-pink) 72%, var(--q-strong)); }
.q-dmrow.unread .q-dmrow-name > b { font-weight: 800; color: var(--q-strong); }
.q-dmrow.unread .q-dmrow-name > small:not(.typing):not(.missed) { color: var(--q-text); font-weight: 700; }
.q-dmrow-meta { display: grid; justify-items: end; align-content: center; gap: 4px; flex: none; margin-left: auto; transition: opacity .15s; }
.q-dmrow-t { font-size: 11px; font-weight: 700; line-height: 1; color: var(--q-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.q-dmrow.unread .q-dmrow-t { color: var(--q-accent-ink); }
.q-dmrow-pinned { display: inline-flex; color: var(--q-accent); opacity: .75; }
.q-dmrow .q-dmrow-meta .q-dm-count { margin-left: 0; background: var(--q-pink); }
.q-dmrow .q-dmrow-meta .q-unread { margin-left: 0; }
.q-dmrow-acts { display: inline-flex; align-items: center; gap: 2px; flex: none; }
@media (hover: hover) {
    .q-dmrow-acts { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 2px; border-radius: 10px;
        background: var(--q-chat-bg); box-shadow: 0 2px 8px rgba(10, 30, 80, .12); opacity: 0; pointer-events: none; transition: opacity .15s; }
    .q-dmrow:hover .q-dmrow-acts { opacity: 1; pointer-events: auto; }
    .q-dmrow:hover .q-dmrow-meta { opacity: 0; }
}
body.q-dmrail-min .q-dmrail .q-dmrow-meta { display: contents; }
body.q-dmrail-min .q-dmrail .q-dmrow-t,
body.q-dmrail-min .q-dmrail .q-dmrow-acts,
body.q-dmrail-min .q-dmrail .q-dmrow-pinned { display: none !important; }

/* R9 — kullanıcı panelinde ad tek satır, sığmazsa üç nokta. */
.q-userpanel-me .q-up-name { display: block; color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* R10 — üst şeritte kayan seçim zemini (adlı sekmeler, masaüstü). data-on yalnız yerleştirme başarılıysa
   gelir; o zaman sekmenin kendi zemini kalkar, yoksa sekme eski görünümünü korur. */
.q-tabs { position: relative; }
.q-tabind { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; border-radius: 999px; pointer-events: none; opacity: 0;
    background: var(--q-chip-on); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-accent) 55%, transparent);
    transition: transform .45s var(--q-ease-spring), width .45s var(--q-ease-spring), height .3s var(--q-ease-soft), opacity .2s; }
.q-tabind:not([data-ready]) { transition: none; }
.q-tabind[data-on] { opacity: 1; }
body:not(.q-nav-names) .q-tabind { display: none; }
.q-tabs .q-tab { z-index: 1; }
body.q-nav-names .q-tabs:has(> .q-tabind[data-on]) .q-tab.sel { background: transparent; box-shadow: none; }

/* R11 — kapak yoksa gökyüzü: bulanık bulutlar + yıldız ışıltısı. Avatar sarmalayıcıları kapağın
   ÜSTÜNDE (z-index): öneri sayfasındaki örnekte avatarın üst yarısı kapağın altında kalıyordu. */
.q-pcard2-banner { position: relative; overflow: hidden; }
.q-pcard2-avwrap { z-index: 1; }
.q-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.q-sky-cl { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .55); filter: blur(7px); }
.q-sky-cl.a { width: 38%; height: 26%; left: 5%; top: 56%; }
.q-sky-cl.b { width: 48%; height: 30%; right: -8%; top: 14%; opacity: .7; }
.q-sky-cl.c { width: 24%; height: 18%; left: 47%; top: 68%; opacity: .6; }
.q-sky .q-tw { color: #fff; opacity: .55; }

/* R12 — dairesel tema geçişi: View Transitions'ın varsayılan çapraz solması kapalı, yeni görünüm
   goglis.js'teki daire animasyonuyla açılır. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* R13 — boş ekranlarda Goglis emojisi + kısa açıklama + düğme. */
.q-srch-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 10px 12px; }
.q-srch-empty-emo { width: 64px; height: 64px; display: block; animation: q-empty-float 3.6s ease-in-out 3; }
.q-srch-empty > b { font: 600 16px/1.25 'Goglis Display', 'Goglis Sans', system-ui, sans-serif; color: var(--q-strong); margin-top: 6px; }
.q-srch-empty > span { color: var(--q-muted); font-size: 13px; max-width: 42ch; }
.q-srch-empty-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.q-srch-empty-acts .q-srch-chip { font-family: inherit; }
.q-dm-empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 14px 8px 10px; font-size: 12.5px; line-height: 1.4; color: var(--q-muted); }
.q-dm-empty-emo { width: 44px; height: 44px; display: block; }
.q-dm-empty-b { padding: 6px 13px; border-radius: 999px; border: 0; background: var(--q-chip-on); color: var(--q-accent-ink); font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; }
.q-dm-empty-b:hover { filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
    .q-newsep, .q-tabind, .q-dmrow-meta, .q-dmrow-acts, .q-mdbar { transition: none !important; }
    .q-srch-empty-emo { animation: none; }
}
html.q-instant .q-newsep, html.q-instant .q-tabind, html.q-instant .q-mdbar { transition: none !important; }
html.q-instant .q-srch-empty-emo { animation: none !important; }

/* ============================================================================
   PROFİL KARTI — CİLA (2026-10-24, Fatih: "profil kartını profesyonelleştir ve güzelleştir")
   Yan ray düzeni (2026-07-31 kullanıcı seçimi) KORUNDU, içi yeniden düzenlendi: köşede ✕ (alt "Kapat"
   şeridi kalktı) · durum adın altında, kesilmeden · rol hapı · iki seviye aynı dizilişte, ilerleme halkasıyla ·
   sağ panel "Hakkında": simgeli bilgi karoları, logolu ortak topluluklar, en altta not.
   Masaüstü panelinin tek sütun düzeni yukarıdaki B DÜZENİ bloğunda (yerinde değiştirildi).
   ============================================================================ */
.q-pcard2 { position: relative; }
.q-pcard2-x { position: absolute; top: 12px; right: 12px; z-index: 4; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer; color: var(--q-muted);
    background: color-mix(in srgb, var(--q-strong) 7%, transparent); transition: background .15s, color .15s; }
.q-pcard2-x:hover { background: color-mix(in srgb, var(--q-strong) 13%, transparent); color: var(--q-strong); }
.q-pcard2-x .mud-icon-root { font-size: 19px; }

/* Ad satırı: rozetler yumuşak yuvarlak çipler (kutu kenarı yok); üzerine gelince hafifçe yükselir.
   `.q-badge` dosyada iki ayrı şey (okunmamış sayacı + profil rozeti) — kapsam bilerek `.q-badges` altı. */
.q-pcard2 .q-badges { gap: 5px; margin-left: 8px; vertical-align: 3px; }
.q-pcard2 .q-badges .q-badge { width: 24px; height: 24px; border: 0; border-radius: 50%; font-size: 13px;
    background: color-mix(in srgb, var(--q-strong) 8%, transparent); transition: transform .2s cubic-bezier(.3,1.6,.5,1), background .15s; }
.q-pcard2 .q-badges .q-badge:hover { transform: translateY(-2px) scale(1.08); background: color-mix(in srgb, var(--q-accent) 18%, transparent); }

/* Kullanıcı adı + rol HAPI (sahip amber, moderatör nane, üye gökyüzü). Yazı rengi koyu/açık metinle
   KARIŞTIRILIR: saf #FFB72E / #22C98A açık zeminde okunmuyor; karışım iki temada da kontrastlı kalır. */
.q-pcard2-user { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13.5px; color: var(--q-muted); margin-top: 3px; }
.q-pcard2-role { --rc: var(--q-accent); display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 800; line-height: 1.5;
    color: color-mix(in srgb, var(--rc) 72%, var(--q-strong)); background: color-mix(in srgb, var(--rc) 16%, transparent); }
.q-pcard2-role.owner { --rc: var(--q-amber); }
.q-pcard2-role.mod { --rc: var(--q-online); }

/* Durum yazısı: sol üst köşesi sivri konuşma balonu (adı "söyleyen"), rayın tam genişliği, kesilmeden. */
.q-pcard2-statusline { margin-top: 10px; padding: 8px 11px; border-radius: 4px 14px 14px 14px; font-size: 13px; line-height: 18px; color: var(--q-strong);
    background: color-mix(in srgb, var(--q-accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--q-accent) 22%, transparent); overflow-wrap: anywhere; }

/* SEVİYELER: ilerleme halkası + başlık + XP. Halka bir MASKE — içi şeffaf, hangi zemine konursa konsun (ray,
   popover, mobil profil ekranı) ayrı bir "zemin rengi" taşımaz, kopyalar ayrışmaz. */
.q-lvring-row { display: flex; align-items: center; gap: 12px; }
.q-lvring { --p: 0%; --c1: var(--q-accent); --c2: #8FD6FF; --trk: color-mix(in srgb, var(--q-strong) 12%, transparent);
    position: relative; flex: none; width: 48px; height: 48px; display: grid; place-content: center; justify-items: center; line-height: 1; cursor: default; }
.q-lvring::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(var(--c2) 0, var(--c1) var(--p), var(--trk) var(--p) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); }
.q-lvring.global { --c1: #E39A12; --c2: #FFD86B; }
.q-lvring small { font: 800 8px/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--q-muted); margin-bottom: 1px; }
.q-lvring b { font: 600 17px/1.05 var(--q-display); color: var(--q-strong); }
.q-lvring-t { min-width: 0; display: grid; gap: 3px; }
.q-lvring-h { display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 800; color: var(--q-strong); }
.q-lvring-h .q-xp-help { margin-left: 2px; }
.q-lvring-x { font-size: 11.5px; color: var(--q-muted); font-variant-numeric: tabular-nums; }

/* SAĞ PANEL başlığı ("Hakkında") — ✕ bu satırın hizasında; metin ona çarpmasın. */
.q-pcard2-phead { font: 600 15px/1.3 var(--q-display); color: var(--q-strong); padding-right: 44px; margin-top: 4px; }
/* Bilgi karoları: solda renkli simge kutusu, sağda etiket + değer. */
.q-pcfact { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; }
.q-pcfact-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
    color: var(--q-accent); background: color-mix(in srgb, var(--q-accent) 14%, transparent); }
.q-pcfact-ic .mud-icon-root { font-size: 18px; }
.q-pcfact.live .q-pcfact-ic { color: var(--q-online); background: color-mix(in srgb, var(--q-online) 15%, transparent); }
.q-pcfact-t { min-width: 0; display: grid; gap: 2px; }
.q-pcfact .q-pcard2-h { margin: 0; font-size: 10.5px; letter-spacing: .05em; }
.q-pcfact .q-pcard2-val { font-size: 13.5px; font-weight: 700; color: var(--q-strong); }
/* Ortak topluluk çipi: topluluğun logosu ya da topluluğa özgü renkte baş harf. */
.q-pcsrv { width: 24px; height: 24px; border-radius: 8px; object-fit: cover; font-size: 11px; font-weight: 700; }
.q-pcard2-mutual-n, .q-pcard2-mutual > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Not: başlıkta kalem; alanın kendisi yumuşak bir giriş kutusu (odakta vurgulu). */
.q-pcard2-h .q-pcard2-noteic { font-size: 13px; vertical-align: -2px; margin-right: 2px; }
/* Bağlantısı olmayan kendi profilinde ne işe yaradığını söyleyen satır (dokununca Ayarlar → Bağlantılar). */
.q-pcard2-connhint { display: block; width: 100%; margin: 2px 0 0; padding: 0; border: 0; background: none; text-align: start;
    font: inherit; font-size: 13px; line-height: 1.45; color: var(--q-muted); cursor: pointer; }
.q-pcard2-connhint:hover { color: var(--q-strong); }
/* Mini kartta seviyeler gövdenin başında: eylem satırıyla arası 34 px'e açılıyordu. */
.q-pp .q-pcard2-raillvl { padding-top: 6px; }
.q-pcard2-notesec .q-pcard2-note { margin-top: 2px; padding: 9px 11px; border-radius: 10px; border: 1px solid transparent;
    background: color-mix(in srgb, var(--q-strong) 6%, transparent); transition: border-color .15s, background .15s; }
.q-pcard2-notesec .q-pcard2-note:focus { border-color: color-mix(in srgb, var(--q-accent) 55%, transparent); background: transparent; }

@media (min-width: 861px) {
    /* Liste bölümleri KUTUSUZ (başlık + çipler); kutu yalnız bilgi karolarında — hiyerarşi düzleşmesin. */
    .mud-dialog .q-pcard2-body > .q-pcard2-section { background: transparent; padding: 0; border-radius: 0; box-shadow: none; }
    .mud-dialog .q-pcard2-body > .q-pcard2-section > .q-pcard2-h { margin-bottom: 8px; }
    .mud-dialog .q-pcard2-body .q-pcard2-mutuals { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px; }
    .mud-dialog .q-pcard2-body .q-pcard2-mutual { min-width: 0; padding: 7px 9px; border-radius: 11px; background: color-mix(in srgb, var(--q-strong) 5%, transparent); }
    .mud-dialog .q-pcard2-body .q-pcard2-mutual:hover { background: var(--q-hover); }
    .mud-dialog .q-pcard2-body .q-pcard2-mutual.static:hover { background: color-mix(in srgb, var(--q-strong) 5%, transparent); }
    .mud-dialog .q-pcard2-body > .q-pcard2-notesec { margin-top: auto; }
    .mud-dialog .q-pcard2-rail .q-pcard2-ident { padding-bottom: 20px; }
}
/* Telefonda tam ekran diyalog: ✕ kapağın üstünde — cam düğme; alt "Kapat" şeridi gidince gövdenin dibi nefes alsın. */
@media (max-width: 860px) {
    .q-pcard2-x { top: calc(10px + env(safe-area-inset-top, 0px)); color: #fff; background: rgba(8, 16, 40, .42);
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .q-pcard2-x:hover { color: #fff; background: rgba(8, 16, 40, .58); }
    .q-pcard2-phead { padding-right: 0; margin-top: 14px; }
    .mud-dialog .q-pcard2-body { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}
/* MOBİL ZORUNLU GÜNCELLEME (2026-10-24) — goglis.js goglisMobilTaban. Blazor ağacının DIŞINDA, body'nin son çocuğu;
   her şeyin üstünde (MudBlazor perdesi 1400+, video sahnesi 1290+) ve kapatılamaz. Tema değişkenleri yoksa (giriş
   sayfası teması henüz kurulmadıysa) koyu yedek renkler devreye girer. */
.q-zorunlu { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    background: var(--q-rail-bg, #09112d); color: var(--q-text, #dfe6ff); overflow-y: auto; }
.q-zorunlu-kart { width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    padding: 28px 22px 22px; border-radius: 22px; background: var(--q-panel-bg, #0f193c);
    border: 1px solid var(--q-divider, rgba(255, 255, 255, .08)); box-shadow: var(--q-elev-3, 0 12px 32px rgba(0, 0, 0, .35)); }
.q-zorunlu-logo { width: 72px; height: 72px; border-radius: 18px; }
.q-zorunlu-baslik { margin: 4px 0 0; font: 600 22px/1.25 var(--q-display, system-ui, sans-serif); color: var(--q-strong, #fff); }
.q-zorunlu-govde, .q-zorunlu-tarif { margin: 0; font-size: 15px; line-height: 1.5; }
.q-zorunlu-tarif { padding: 10px 12px; border-radius: 12px; background: var(--q-chip, rgba(255, 255, 255, .06)); color: var(--q-strong, #fff); }
.q-zorunlu-btn { margin-top: 6px; width: 100%; min-height: 48px; border: 0; border-radius: 14px; cursor: pointer;
    font: 600 16px/1 var(--q-display, system-ui, sans-serif); background: var(--q-accent, #2F9BFF); color: #fff; }
.q-zorunlu-btn:active { transform: scale(.98); }
.q-zorunlu-surum { font-size: 12px; color: var(--q-muted, #8f9bc4); }

/* ============ YÖNETİM PANELİ · ÜYELER TABLOSU (2026-10-24) ============
   Fatih: "üyeler kısmını daha modern yap, mobil uyumlu olsun". Girişler › Kayıtlar tablosuyla aynı dil.
   Kap overflow KESMEZ (topluluk/cihaz açılır kutuları taşar); dar kapta (container query — yan menünün
   açık/kapalı olmasından bağımsız) satırlar karta döner. */
.q-utable { container-type: inline-size; border: 1px solid var(--q-border); border-radius: 18px;
    background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); }
.q-utable-head, .q-urow { display: grid; align-items: center; gap: 16px; padding: 11px 18px;
    grid-template-columns: minmax(0, 2.4fr) minmax(118px, .9fr) minmax(150px, 1.25fr) 76px 118px; }
.q-utable-head { padding-block: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: var(--q-faint); border-bottom: 1px solid var(--q-divider); }
.q-urow { border-bottom: 1px solid color-mix(in srgb, var(--q-divider) 70%, transparent); transition: background-color .12s; }
.q-urow:last-child { border-bottom: 0; border-radius: 0 0 17px 17px; }
.q-urow:hover { background: color-mix(in srgb, var(--q-accent) 6%, transparent); }
.q-urow.gone { opacity: .55; }
.q-urow.banned .q-urow-av { filter: grayscale(.75); }
.q-urow-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.q-urow-avw { flex: none; }
.q-urow-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; object-fit: cover;
    color: #fff; font: 600 14px/1 var(--q-display); }
.q-urow-av[hidden] { display: none; }   /* fotoğraf yüklenemeyince yerine harf avatarı (onerror) */
.q-urow-id { min-width: 0; display: grid; gap: 3px; }
.q-urow-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.q-urow-nm > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font: 700 14px/1.3 var(--q-display); color: var(--q-strong); }
.q-urow-shield { flex: none; font-size: 15px !important; color: var(--q-accent); }
.q-ubadge { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; line-height: 1.7; white-space: nowrap; background: var(--q-chip); color: var(--q-muted); }
.q-ubadge .mud-icon-root { font-size: 12px; }
.q-ubadge.ban { background: color-mix(in srgb, var(--q-danger) 16%, transparent); color: var(--q-danger); }
.q-ubadge.bot { background: color-mix(in srgb, var(--q-amber, #ef9f27) 18%, transparent); color: var(--q-amber, #ef9f27); cursor: help; }
.q-urow-em { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; color: var(--q-muted); }
.q-urow-em .q-adm-dev, .q-urow-em .q-adm-prov { margin-right: 0; }
.q-urow-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-urow-em .q-adm-vic { margin-left: 0; }
/* Masaüstünde bilgi sarmalayıcısı yok sayılır: çocukları kendi sütunlarına oturur. */
.q-urow-meta { display: contents; }
.q-urow-when { display: grid; gap: 4px; min-width: 0; font-size: 12.5px; color: var(--q-text); }
.q-urow-date { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.q-urow-date .mud-icon-root { font-size: 13px; color: var(--q-faint); }
.q-urow-hm { color: var(--q-faint); font-size: 11.5px; }
.q-urow-st { font-size: 11.5px; font-weight: 700; color: var(--q-online); }
.q-urow-st.idle { color: var(--q-amber); }
.q-urow-st.dnd { color: var(--q-danger); }
.q-urow-st.adm-inv { color: var(--q-muted); }
.q-urow-com { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.q-urow-adm { display: flex; align-items: center; gap: 8px; }
.q-urow-adm .mud-input-control { margin: 0; width: auto; flex: none; }
.q-urow-adm .mud-switch { margin: 0; }
.q-urow-admt { display: none; font-size: 12.5px; font-weight: 600; color: var(--q-muted); }
.q-urow-acts { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.q-urow-acts .mud-icon-button { border-radius: 10px; color: var(--q-muted); }
.q-urow-acts .mud-icon-button:hover { color: var(--q-strong); background: var(--q-hover); }
.q-urow-acts .q-urow-ban { color: var(--q-amber, #ef9f27); }
.q-urow-acts .q-urow-del { color: var(--q-danger, #ed4245); }
.q-urow-acts .q-urow-del:hover { background: color-mix(in srgb, var(--q-danger, #ed4245) 14%, transparent); }
/* Dar kap (telefon, dar pencere): satır KART — kimlik + yönetici anahtarı / bilgi çipleri + eylemler.
   YÖNETİCİ ANAHTARI SAĞ ÜSTTE (2026-10-27, Fatih: "yönetici açma kapama orda çirkin görünüyor, sağ köşeye koymak güzel
   olur"): eskiden kartın sol altında kendi satırındaydı; artık kimliğin hizasında, eylemler bilgi çiplerinin satırında sağda. */
@container (max-width: 780px) {
    .q-utable-head { display: none; }
    .q-urow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "user adm" "meta acts";
        gap: 10px 12px; padding: 14px; }
    .q-utable-head + .q-urow { border-radius: 17px 17px 0 0; }
    .q-utable-head + .q-urow:last-child { border-radius: 17px; }
    .q-urow-user { grid-area: user; align-items: flex-start; }
    .q-urow-nm { flex-wrap: wrap; }
    .q-urow-nm > b { white-space: normal; overflow-wrap: anywhere; }
    .q-urow-mail { white-space: normal; overflow-wrap: anywhere; }
    .q-urow-meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-left: 52px; }
    .q-urow-when { display: flex; align-items: center; gap: 8px; }
    .q-urow-adm { grid-area: adm; align-self: start; }
    .q-urow-admt { display: inline; }
    .q-urow-acts { grid-area: acts; align-self: end; }
    .q-urow-acts:empty { display: none; }
}
@container (max-width: 420px) {
    .q-urow-meta { padding-left: 0; }
}
/* Telefonda filtreler: arama tam genişlik; "Aktif" + hesap türü TEK satır, iki tarih yan yana (etiket üstte).
   Eskiden dört ayrı satır kaplıyordu, liste ekranın yarısından sonra başlıyordu. Topluluk ayarlarındaki
   aynı filtre bileşenine dokunmamak için yalnız üyeler sekmesinin sınıfına (.q-ufilters) bağlı. */
.q-usearch { max-width: 340px; margin-bottom: 10px; }
.q-ufilters-r1 { display: contents; }   /* masaüstünde sarmalayıcı yok sayılır, düzen aynen */
@media (max-width: 700px) {
    .q-usearch { max-width: none; }
    .q-ufilters { gap: 8px; }
    .q-ufilters-r1 { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; }
    .q-ufilters .q-adm-onl { flex: 0 0 auto; padding: 8px 12px; }
    .q-ufilters .q-adm-seg { flex: 1 1 auto; min-width: 0; }
    .q-ufilters .q-adm-dt { flex: 1 1 calc(50% - 4px); min-width: 0; flex-direction: column; align-items: stretch; gap: 4px; }
    .q-ufilters .q-adm-dt > span { font-size: 11px; font-weight: 700; color: var(--q-faint); }
    .q-ufilters .q-adm-dt input { width: 100%; }
}

/* ============ YÖNETİM PANELİ · GERİ BİLDİRİM (2026-10-24) ============
   Fatih: "geri bildirim sayfası tam köşeye yapışmamış, elden geçir". Kartlar eskiden şikâyet kartlarının
   760 px sınırını paylaşıyordu, üstteki satırlar tam genişlikti; artık her parça aynı genişlikte. */
.q-fbp { display: grid; gap: 14px; }
.q-fbp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.q-fbp-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* Masaüstündeki `padding-right: 230px` (köşe araçlarına yer) burada iptal: başlık kısa, sayı yanına otursun. */
.q-fbp-title .q-settings-h { margin: 0; padding-right: 0; }
.q-fbp-count { min-width: 26px; height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--q-chip); color: var(--q-muted); font: 700 12px/1 var(--q-display); font-variant-numeric: tabular-nums; }
.q-fbp-reset { flex: none; border-radius: 999px !important; }
.q-fbp-sub { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap; margin-top: -4px; }
.q-fbp-hint { margin: 0; flex: 1 1 260px; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--q-muted); }
.q-cpx { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--q-border); border-radius: 18px;
    background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); }
.q-cpx-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.q-cpx-head h3 { margin: 0; font: 600 15px/1.3 var(--q-display); color: var(--q-strong); }
.q-cpx-def { padding: 1px 9px; border-radius: 999px; background: var(--q-chip-on); color: var(--q-accent-ink); font-size: 11.5px; font-weight: 700; }
.q-cpx-note { font-size: 12.5px; color: var(--q-muted); }
.q-cpx-bar { display: flex; gap: 3px; height: 8px; border-radius: 999px; overflow: hidden; }
.q-cpx-bar > span { min-width: 0; background: var(--cpx); }
.q-cpx-bar > span[style^="flex-grow:0;"] { display: none; }
.q-cpx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.q-cpx-tile { position: relative; display: grid; gap: 2px; min-width: 0; padding: 10px 12px 10px 15px; border-radius: 14px; background: var(--q-chip); }
.q-cpx-tile::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cpx); }
.q-cpx-tile b { font: 700 22px/1.15 var(--q-display); color: var(--q-strong); font-variant-numeric: tabular-nums; }
.q-cpx-tile span { font-size: 12px; line-height: 1.35; color: var(--q-muted); }
.q-cpx .join { --cpx: var(--q-online); }
.q-cpx .own { --cpx: var(--q-accent); }
.q-cpx .dm { --cpx: color-mix(in srgb, var(--q-muted) 75%, transparent); }
.q-cpx .pending { --cpx: #FFCB55; }
.q-fbp-empty { padding: 28px 16px; border: 1px dashed var(--q-border); border-radius: 18px; text-align: center; font-size: 13px; color: var(--q-muted); }
.q-fbp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 12px; align-items: start; }
.q-fbk { display: grid; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--q-border); border-radius: 18px;
    background: color-mix(in srgb, var(--q-chat-bg) 70%, transparent); transition: border-color .15s ease; }
.q-fbk:hover { border-color: color-mix(in srgb, var(--q-accent) 35%, var(--q-border)); }
.q-fbk-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.q-fbk-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 13px/1 var(--q-display); }
.q-fbk-who { min-width: 0; display: grid; gap: 2px; }
.q-fbk-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13.5px/1.25 var(--q-display); color: var(--q-strong); }
.q-fbk-who time { font-size: 11.5px; color: var(--q-faint); }
.q-fbk-head .q-fbk-del { margin-left: auto; border-radius: 10px; color: var(--q-faint); }
.q-fbk-head .q-fbk-del:hover { color: var(--q-danger, #ed4245); background: color-mix(in srgb, var(--q-danger, #ed4245) 12%, transparent); }
.q-fbk-subj { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.q-fbk-subj b { min-width: 0; font-size: 13.5px; color: var(--q-strong); overflow-wrap: anywhere; }
.q-fbk-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--q-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.q-fbk .q-fbk-img { margin-top: 0; border-radius: 12px; }
.q-fbk-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--q-divider) 70%, transparent); }
.q-fbk-logs { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--q-border); background: var(--q-chip); color: var(--q-text); font: 700 12px/1 var(--q-display); }
.q-fbk-logs .mud-icon-root { font-size: 15px; }
.q-fbk-logs:hover { border-color: var(--q-accent); color: var(--q-strong); }
.q-fbk-chip, .q-fbk-raw > summary { height: 24px; padding: 0 9px; border-radius: 999px; display: inline-flex; align-items: center; white-space: nowrap;
    background: color-mix(in srgb, var(--q-chip) 75%, transparent); color: var(--q-muted); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.q-fbk-raw > summary { list-style: none; cursor: pointer; font-weight: 800; }
.q-fbk-raw > summary::-webkit-details-marker { display: none; }
.q-fbk-raw > summary:hover { color: var(--q-strong); }
.q-fbk-raw[open] { flex-basis: 100%; }
.q-fbk-raw code { display: block; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--q-code-bg, rgba(0, 0, 0, .25));
    color: var(--q-muted); font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 720px) {
    .q-cpx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .q-fbp-reset { width: 100%; }
}

/* ============================================================================
   MOBİL RÖTUŞ TURU · İLK PAKET (2026-10-25, Fatih "başla"; öneriler "Mobil Rötuş Turu" sayfasında).
   Ev sekmesi ve marka, en az 44 px dokunma alanı ve 16 px giriş yazısı, tek satırlık yazma kutusu,
   kanal çekmecesinde ✕'in kendi satırı, ana sayfada "Şu an aktif"in boş hâli tek satır.
   Hepsi telefon kapısında (goglisMQ ile aynı); masaüstü değişmez. Dosyanın SONUNDA: yukarıdaki
   telefon kurallarını (6117 üst şerit, 6131/9182 besteleyici, 5778 çekmece) bilerek ezer.
   ============================================================================ */
@media (max-width: 700px), (max-height: 520px) {
    /* — Alt menü: beş sekme, sekme 48 px (çubuk 54 px, düğme payı 3 px; kayan hap H6'da) — */
    .q-mobar-b { margin: 3px 2px; min-width: 0; }
    .q-mobar-b > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mobar-logo { width: 25px; height: 25px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; --gsn-mark: #fff;
        background: linear-gradient(150deg, var(--q-logo-hi), var(--q-logo) 52%, var(--q-logo-lo));
        box-shadow: 0 3px 8px color-mix(in srgb, var(--q-logo) 34%, transparent), 0 1px 0 rgba(255, 255, 255, .45) inset; }
    .q-mobar-logo > .gsnail { width: 82%; height: auto; margin-top: 4%; filter: drop-shadow(0 2px 3px rgba(10, 70, 170, .28)); }

    /* — Üst şerit: Ev sekmesinde logo + Goglis — */
    .q-motitle-home { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
    .q-motitle-home .q-logo { width: 28px; height: 28px; border-radius: 9px; flex: none; }

    /* — Dokunma alanı en az 44 px: simge boyu aynı, düğme kutusu büyür. `display`'e dokunulmaz —
       telefonda gizlenen düğmeler (`.q-no-mo`) gizli kalsın. — */
    .q-topactions .q-topico, .q-topbar .q-mbtn { width: 44px; height: 44px; padding: 0; }
    .q-hsearch, .q-hbtn { width: 44px; height: 44px; }
    .q-chtopic.ghost { min-height: 44px; }
    .q-callrow-b { min-width: 44px; height: 44px; }
    .q-mocalls-filt button { height: 40px; }
    .q-uppill .q-up-ctl .q-userpanel-btn { width: 44px; height: 44px; }
    .q-mdrawer-x { width: 44px; height: 44px; }
    .q-chathead .mud-icon-button { min-width: 44px; min-height: 44px; }
    .q-chstart-b, .q-callrow-main, .q-pcard2-connhint { min-height: 44px; }
    /* Görünüşü küçük kalması gerekenler: dokunma alanı görünmez bir uzantıyla büyür */
    .q-hero-new, .q-pc-editlnk { position: relative; }
    .q-hero-new::after { content: ""; position: absolute; inset: -7px 0; }
    .q-pc-editlnk::after { content: ""; position: absolute; inset: -12px; }

    /* — Giriş yazısı 16 px: iPhone daha küçük yazılı kutuya dokununca sayfayı yakınlaştırıyor. Yakınlaştırmayı
       tümden kapatmak (user-scalable=no) yerine bu; ölçülen: Aramalar araması 15, DM notu 14 px. — */
    .q-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    .q-root textarea, .q-root select, .q-root [contenteditable="true"],
    .mud-dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    .mud-dialog textarea, .mud-popover input { font-size: 16px; }

    /* — Tek satırlık yazma kutusu: + · metin · emoji · (yazarken Aa) · gönder. Çıkartma ve GIF ifade panelinin
       sekmelerinde; emoji simgesi yoksa (yetki) onlar görünür kalır. Kilitli kutu (yazma yetkisi yok) hariç. — */
    .q-composer:not(.q-composer-locked) { flex-wrap: nowrap; align-items: flex-end; gap: 0; padding: 4px; }
    .q-composer:not(.q-composer-locked) > .q-msgwrap { flex: 1 1 auto; min-width: 0; align-self: center; }
    .q-composer-tools { order: 0; width: auto; flex: none; gap: 0; margin-top: 0; padding-top: 0; border-top: 0; }
    .q-composer-tools .q-expr-icons { gap: 0; }
    .q-expr-icons:has(> .q-expr-em) > .q-expr-st, .q-expr-icons:has(> .q-expr-em) > .q-expr-gif { display: none; }
    .q-composer .q-expr-ic, .q-composer .q-attach { width: 44px; height: 44px; padding: 0; }
    .q-composer .q-send-btn { width: 44px; height: 44px; border-radius: 14px; }
    /* Düğmeler 44 px'e büyürken SARMALAYICILARI ("+" için QMenu'nün `div.q-menu`'sü, emoji/Aa için `.q-composer-tools`)
       masaüstündeki 30 px'te kalmıştı (2124/2130): flex-end ile dibe oturan 30 px'lik kutuda ortalanan 44 px'lik düğme
       7 px aşağı kayıp kutudan taşıyordu — metin ve gönder merkezi 754, +/emoji/Aa 761 (2026-10-26, Fatih: "+ ve goglis
       ikonu hizalı değil"). "+" simgesi de kutusunun soluna yaslıydı; emoji ve Aa gibi ortalanır. */
    .q-composer:not(.q-composer-locked) > .q-menu, .q-composer:not(.q-composer-locked) > .q-composer-tools { height: 44px; }
    .q-composer .q-attach { justify-content: center; }
    .q-composer .q-mdbar-tg { margin-left: 0; }
    .q-composer:has(.q-msgbox:placeholder-shown) .q-mdbar-tg { display: none !important; }

    /* — Kanal çekmecesi: ✕ artık kapağın üstünde yüzmüyor, kendi satırında (Toplulukta "Kanallar" yazar) — */
    .q-channels .q-mdrawer-top { position: static; padding: 4px 6px 2px 16px; }
    .q-channels .q-mdrawer-x { width: 44px; height: 44px; border-radius: 12px; background: transparent; color: var(--q-muted); }
    .q-mdrawer-ttl { flex: 1; min-width: 0; font: 600 12px/1 var(--q-display); letter-spacing: .09em; text-transform: uppercase; color: var(--q-faint); }

    /* — Ana sayfa: "Şu an aktif" boşken koca kart yerine tek satır — */
    .q-hnow .q-active-empty { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 2px 12px; padding: 8px 4px; text-align: left; }
    .q-hnow .q-active-empty > .gsnail { grid-row: span 2; width: 36px; height: 36px; }
    .q-hnow .q-active-empty-d { line-height: 1.4; }
}

/* ==== MOBİL MESAJLAR LİSTESİ (2026-10-25, Mobil Rötuş Turu "Mesajlar: önce liste, sonra sohbet") ====
   Liste Aramalar ekranıyla AYNI katman ve dil (.q-mocalls-tools / -search / -filt paylaşılır); satırlar masaüstü
   panelinin satırları, telefonda daha iri. DM sohbeti kendi ekranında açılır: .q-root.q-mochat alt menüyü gizler ve
   çubuğun payını (--q-mobar-h — çubuk için yer ayıran kuralların tek kaynağı) iPhone'un güvenli alanına indirir; 0
   olsaydı yazma kutusu ana sayfa çizgisinin altında kalırdı. ← (.q-chback) yalnız telefonda. */
.q-modms, .q-chback { display: none; }
@media (max-width: 700px), (max-height: 520px) {
    .q-modms {
        position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0; z-index: 1245;
        display: flex; flex-direction: column; background: var(--q-chat-bg);
    }
    .q-modms-chips { overflow-x: auto; scrollbar-width: none; margin: 0 -14px; padding: 0 14px; }
    .q-modms-chips::-webkit-scrollbar { display: none; }
    .q-modms-chips button { flex: none; }
    .q-modms-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px 8px 18px; overscroll-behavior: contain; }
    .q-modms .q-dmrow { min-height: 64px; padding: 9px 10px; gap: 12px; border-radius: 14px; }
    .q-modms .q-dmrow .q-av { width: 46px !important; height: 46px !important; font-size: 17px !important; }
    .q-modms .q-dmrow-name b { font-size: 15.5px; }
    .q-modms .q-dmrow-name small { font-size: 13.5px; }
    .q-chback {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        width: 40px; height: 44px; margin-left: -6px; padding: 0; border: 0; border-radius: 12px;
        background: transparent; color: var(--q-strong); cursor: pointer;
    }
    .q-chback:active { background: var(--q-hover); }
    .q-root.q-mochat { --q-mobar-h: env(safe-area-inset-bottom, 0px); }
    .q-root.q-mochat .q-mobar { display: none; }
}

/* ============================================================================
   MOBİL RÖTUŞ TURU · İKİNCİ PAKET (2026-10-26, Fatih: "önerileri de yap"). Kalan altı öneri: Aramalar'da sakin
   düğmeler, Profil'de tek satır durum + ayar satırları, sade topluluk menüsü, topluluk ekranı (şerit + kanallar),
   sohbette tek başlık satırı, satır düğmeleri yerine uzun basma. Hepsi telefon kapısında; masaüstü değişmez.
   ============================================================================ */
@media (max-width: 700px), (max-height: 520px) {
    /* — Aramalar: arama düğmesi çizgi stilinde, yeşil dolgu yalnız basılınca; altı yeşil daire dikkati dağıtıyordu — */
    .q-mocall-call { background: transparent; color: var(--q-online); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-online) 58%, transparent); }
    .q-mocall-call:active { background: linear-gradient(150deg, #4FE0A8, #22C98A); color: #fff; box-shadow: none; filter: none; }
    /* "Diğer arkadaşlar": alt yazısız, daha kısa satır (avatar satır içi stilde 40 px — !important onu ezer).
       SATIR ARALIĞI (2026-10-26, Fatih: "arama butonları row olarak çok yakınlar, profesyonel durmuyor"): 5 px dolguyla
       satır 44 px'lik düğmeyle aynı boydaydı, alt alta yeşil halkalar birbirine değiyordu. 10 px → satır 52 px, halkalar
       arasında 8 px; "Son aramalar" satırları (~58 px) ile aynı ritim. */
    .q-mocall-fr .q-mocall-main { padding-block: 10px; }
    .q-mocall-fr .q-mocall-main .q-av { width: 32px !important; height: 32px !important; font-size: 13px !important; }
}
@media (max-width: 700px), (max-height: 520px) {
    /* İkinci paketin kart yüzeyi: tema sınıfı .q-root'ta olduğu için türev renkler de orada tanımlanır. */
    .q-root { --q-mo-card: color-mix(in srgb, var(--q-strong) 5%, transparent); --q-mo-cardline: color-mix(in srgb, var(--q-strong) 9%, transparent); }

    /* — Profil: durum tek satır, seviyeler yan yana iki küçük kart, altında ayar satırları — */
    .q-mopr-strow { display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; min-height: 48px; padding: 0 10px 0 14px;
        border: 1px solid var(--q-mo-cardline); border-radius: 14px; background: var(--q-mo-card); color: var(--q-strong);
        font: 700 14.5px/1.2 'Goglis Sans', system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .q-mopr-strow:active { background: var(--q-hover); }
    .q-mopr-strow .q-sdot { flex: none; margin-right: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--q-strong) 8%, transparent); }
    .q-mopr-strow-t { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mopr-strow-c { flex: none; font-size: 13px; font-weight: 700; color: var(--q-muted); }
    .q-mopr-strow .mud-icon-root { flex: none; font-size: 19px; color: var(--q-faint); margin-left: -6px; }
    .q-moprofile .q-pcard2-raillvl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-top: 10px; }
    .q-moprofile .q-pcard2-raillvl > .q-lvlsec { padding: 10px; border: 1px solid var(--q-mo-cardline); border-radius: 14px; background: var(--q-mo-card); }
    .q-moprofile .q-pcard2-raillvl .q-lvring-row { gap: 9px; }
    .q-moprofile .q-pcard2-raillvl .q-lvring { width: 40px; height: 40px; }
    .q-moprofile .q-pcard2-raillvl .q-lvring b { font-size: 14px; }
    .q-moprofile .q-pcard2-raillvl .q-lvring-h { font-size: 12px; line-height: 1.2; }
    .q-moprofile .q-pcard2-raillvl .q-lvring-x { font-size: 11px; }
    .q-pcard2-after { padding-top: 10px; }
    .q-mopr-set { display: grid; border: 1px solid var(--q-mo-cardline); border-radius: 14px; background: var(--q-mo-card); overflow: hidden; }
    .q-mopr-set > button { display: flex; align-items: center; justify-content: flex-start; gap: 13px; min-height: 48px; padding: 0 10px 0 14px; border: 0; background: none;
        color: var(--q-strong); font: 700 14.5px/1.2 'Goglis Sans', system-ui, sans-serif; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .q-mopr-set > button + button { border-top: 1px solid var(--q-mo-cardline); }
    .q-mopr-set > button:active { background: var(--q-hover); }
    .q-mopr-set > button > .mud-icon-root:first-child { flex: none; font-size: 20px; color: var(--q-muted); }
    .q-mopr-set > button > span { flex: 1; min-width: 0; }
    .q-mopr-set-go { flex: none; font-size: 19px !important; color: var(--q-faint); }
    .q-mopr-set-new { flex: none; font-style: normal; padding: 4px 8px; border-radius: 999px; background: var(--q-accent); color: #fff;
        font: 800 10.5px/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .02em; }

    /* — Alttan açılan seçenek sayfaları (durum, satır eylemleri): başlık, seçili satır, onay işareti — */
    .q-msheet-head { padding: 0 10px 8px; font: 600 12px/1 var(--q-display); letter-spacing: .09em; text-transform: uppercase; color: var(--q-faint); }
    .q-msheet-row .q-sdot { flex: none; width: 11px; height: 11px; margin: 0 5px; }
    .q-msheet-row .q-msheet-l { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-msheet-row.on { color: var(--q-strong); font-weight: 800; }
    .q-msheet-row .q-msheet-chk { color: var(--q-accent) !important; }
}
@media (max-width: 700px), (max-height: 520px) {
    /* — Sade topluluk menüsü (alttan açılan sayfa): kimlik başlığı, üç hızlı kutucuk, satırlar — */
    .q-srvsheet-head { display: flex; align-items: center; gap: 12px; padding: 4px 8px 12px; }
    .q-srvsheet-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; object-fit: cover; display: grid; place-items: center;
        color: #fff; font: 700 15px/1 var(--q-display); }
    .q-srvsheet-t { min-width: 0; display: grid; gap: 3px; }
    .q-srvsheet-t b { font: 600 17px/1.15 var(--q-display); color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-srvsheet-t small { font-size: 12.5px; color: var(--q-muted); }
    .q-srvsheet-quick { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 0 2px 10px; }
    .q-menu-panel .q-srvsheet-quick > .q-menu-item.q-srvq { display: block; min-height: 0; padding: 0; border: 1px solid var(--q-mo-cardline); border-radius: 14px;
        background: var(--q-mo-card); white-space: normal; }
    .q-menu-item.q-srvq > span { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 11px; text-align: center;
        font: 700 12.5px/1.15 'Goglis Sans', system-ui, sans-serif; color: var(--q-strong); }
    .q-menu-item.q-srvq .mud-icon-root { font-size: 22px; color: var(--q-accent); }
    .q-menu-item.q-srvq.off .mud-icon-root { color: var(--q-muted); }
    .q-menu-item.q-srvq:active { background: var(--q-hover); }
    .q-menu-item.q-srvset::after { content: "\203A"; margin-left: auto; padding-left: 8px; font-size: 22px; line-height: 1; color: var(--q-faint); }
}
/* Topluluk ekranı yalnız telefonda (2026-10-26); masaüstünde kanalsız bir toplulukta da DOM'a düşebilir. */
.q-mosrv { display: none; }
@media (max-width: 700px), (max-height: 520px) {
    /* — Topluluk ekranı: toplulukların şeridi, topluluk kartı, etkinlikler, kanallar (Mesajlar/Aramalar'la aynı katman) — */
    .q-mosrv { position: fixed; inset: var(--q-topbar-h) 0 var(--q-mobar-h) 0; z-index: 1245; display: flex; flex-direction: column; background: var(--q-chat-bg); }
    .q-mosrv-strip { flex: none; display: flex; align-items: center; gap: 12px; overflow-x: auto; scrollbar-width: none; padding: 12px 14px 10px; }
    .q-mosrv-strip::-webkit-scrollbar { display: none; }
    .q-mosrv-chip { position: relative; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 15px; background: none;
        cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .14s ease; }
    .q-mosrv-chip:active { transform: scale(.93); }
    .q-mosrv-chip > img, .q-mosrv-init { width: 100%; height: 100%; border-radius: 15px; object-fit: cover; display: grid; place-items: center;
        color: #fff; font: 700 15px/1 var(--q-display); }
    .q-mosrv-chip.on { box-shadow: 0 0 0 2.5px var(--q-chat-bg), 0 0 0 4.5px var(--q-accent); }
    .q-mosrv-chip.add { display: grid; place-items: center; border: 1.5px dashed color-mix(in srgb, var(--q-strong) 32%, transparent); color: var(--q-muted); }
    .q-mosrv-chip.add .mud-icon-root { font-size: 22px; }
    .q-mosrv-dot { position: absolute; top: -3px; right: -3px; width: 13px; height: 13px; border-radius: 50%; background: var(--q-pink, #FF84AE);
        box-shadow: 0 0 0 2.5px var(--q-chat-bg); }
    .q-mosrv-voice { position: absolute; right: -4px; bottom: -4px; width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
        background: var(--q-online); color: #fff; box-shadow: 0 0 0 2.5px var(--q-chat-bg); }
    .q-mosrv-voice .mud-icon-root { font-size: 11px; }
    .q-mosrv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 4px 12px 18px; }
    .q-mosrv-card { display: flex; align-items: center; gap: 6px; padding: 10px 6px 10px 14px; border: 1px solid var(--q-mo-cardline); border-radius: 16px; background: var(--q-mo-card); }
    .q-mosrv-card-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
    .q-mosrv-card-t b { font: 600 17px/1.15 var(--q-display); color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mosrv-card-t small { font-size: 12.5px; color: var(--q-muted); }
    .q-mosrv-inv { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 0; border-radius: 12px;
        background: var(--q-chip); color: var(--q-strong); font: 800 12.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
    .q-mosrv-inv .mud-icon-root { font-size: 17px; }
    .q-mosrv-card .q-menu { flex: none; }
    .q-mosrv-more { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--q-muted); cursor: pointer; }
    .q-mosrv-more .mud-icon-root { font-size: 22px; }
    .q-mosrv-ev { display: flex; align-items: center; justify-content: flex-start; gap: 10px; min-height: 48px; padding: 0 8px 0 14px; border: 1px solid var(--q-mo-cardline);
        border-radius: 14px; background: var(--q-mo-card); color: var(--q-strong); font: 700 14px/1.2 'Goglis Sans', system-ui, sans-serif; text-align: left;
        cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .q-mosrv-ev:active { background: var(--q-hover); }
    .q-mosrv-ev > .mud-icon-root:first-child { flex: none; font-size: 19px; color: var(--q-amber); }
    .q-mosrv-ev-t { flex: 1; min-width: 0; }
    .q-mosrv-ev-when { flex: none; font-size: 12.5px; font-weight: 700; color: var(--q-muted); }
    .q-mosrv-go { flex: none; font-size: 19px !important; color: var(--q-faint); }
    .q-mosrv-list { display: flex; flex-direction: column; gap: 1px; }
    .q-mosrv-list .q-chrow { min-height: 44px; border-radius: 12px; }
    .q-mosrv-list .q-chdel, .q-mosrv-list .q-row-more { display: none !important; }
    .q-mosrv-add { display: flex; align-items: center; justify-content: flex-start; gap: 9px; min-height: 44px; margin-top: 4px; padding: 0 10px; border: 0; border-radius: 12px;
        background: none; color: var(--q-muted); font: 700 13.5px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; }
    .q-mosrv-add .mud-icon-root { font-size: 18px; }
    /* Seste olunca ses kartı + kullanıcı paneli sayfanın dibinde (çekmecedeki gibi): mikrofon/kulaklık hapı panelde yaşıyor,
       gizlemek sesi kapatmayı imkânsız kılardı. */
    .q-mosrv-dock { flex: none; padding: 0 8px 8px; }
}
/* Tek satır başlığın sarmalayıcıları masaüstünde yerleşime karışmaz (2026-10-26). */
.q-chwho, .q-chic { display: contents; }
@media (max-width: 700px), (max-height: 520px) {
    /* — Sohbette tek başlık satırı: sohbet kendi ekranındayken (q-mochat) uygulama şeridi gizli, başlık en üst satır:
       ← · kanal ya da kişi (altında topluluk · üye ya da durum) · ara/telefon · ⋯. Kazanç ~46 px. Çekmeceler (⋯ → Üyeler)
       şeridin payı olmadan en üstten açılır. — */
    .q-root.q-mochat .q-topbar { display: none; }
    .q-root.q-mochat { --q-topbar-h: env(safe-area-inset-top, 0px); }
    .q-root.q-mochat .q-chathead { height: calc(58px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); gap: 8px; }
    .q-chwho { display: grid; flex: 0 1 auto; min-width: 0; gap: 2px; }
    .q-chwho .q-chtitle { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-chathead .q-chsub { display: block !important; min-width: 0; font-size: 12px; font-weight: 600; color: var(--q-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-chic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--q-mo-card); color: var(--q-accent); }
    .q-dmh-fr { display: inline !important; }
    /* Telefonda başlıktan ⋯ menüsüne geçenler: konu, rozetler, raptiye, zil, üye düğmesi, "Arkadaş" hapı */
    .q-chathead .q-chtopic, .q-chathead .q-slow-badge, .q-chathead .q-pinbtn, .q-chathead .q-hbtn,
    .q-chathead .q-memtoggle, .q-chathead .q-fmemtoggle, .q-chathead .q-dmfriend { display: none !important; }
    .q-chathead .q-hsearch { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .q-chathead .q-hsearch > span { display: none; }
    .q-chmore-w { flex: none; }
    .q-chmore { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--q-muted); cursor: pointer; }
    .q-chmore .mud-icon-root { font-size: 22px; }
    .q-chmore-panel .q-menu-item > span:has(> .q-chmore-l) { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .q-chmore-v { flex: none; font-weight: 700; color: var(--q-muted); }
    .q-chmore-topic { margin: 0 4px 6px; padding: 2px 6px 10px; border-bottom: 1px solid var(--q-divider); font-size: 13.5px; line-height: 1.45; color: var(--q-text);
        white-space: normal; overflow-wrap: anywhere; }
    /* Sabitlenenler sayfası */
    .q-pinsheet .q-pincard { padding: 10px 8px; }
    .q-pinsheet-empty { padding: 18px 10px 26px; text-align: center; font-size: 14px; color: var(--q-muted); }
}
@media (max-width: 700px), (max-height: 520px) {
    /* — Satır düğmeleri yerine uzun basma: Mesajlar listesinde sabitle/✕ ve topluluk ekranında ⋮ gizli; eylemler uzun basınca
       alttan açılan sayfada (goglisRowGestures). Konuşmayı sola kaydırmak Sabitle/Kapat şeridini açar (data-swipe). — */
    .q-modms .q-dmrow, .q-mosrv .q-chrow, .q-mosrv .q-cathdr { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    .q-modms .q-dmrow { position: relative; overflow: hidden; }
    .q-modms .q-dmrow-acts { display: none !important; }
    .q-modms .q-dmrow[data-swipe] .q-dmrow-acts { display: flex !important; position: absolute; top: 0; right: 0; bottom: 0; left: auto; transform: none; z-index: 2;
        gap: 0; padding: 0; border-radius: 0; opacity: 1; pointer-events: auto; background: none; box-shadow: none; animation: q-swipe-in .18s var(--q-ease-soft); }
    .q-modms .q-dmrow[data-swipe] .q-dmpin, .q-modms .q-dmrow[data-swipe] .q-dmclose { width: 74px; height: 100%; display: grid; place-items: center; align-content: center;
        gap: 4px; border-radius: 0; color: #fff; opacity: 1; }
    .q-modms .q-dmrow[data-swipe] .q-dmpin { background: var(--q-accent); }
    .q-modms .q-dmrow[data-swipe] .q-dmclose { background: var(--q-danger); }
    .q-modms .q-dmrow[data-swipe] .q-dmpin .mud-icon-root, .q-modms .q-dmrow[data-swipe] .q-dmclose .mud-icon-root { font-size: 19px !important; color: #fff; }
    .q-dmacts-l { display: none; font: 700 11.5px/1 'Goglis Sans', system-ui, sans-serif; font-style: normal; }
    .q-modms .q-dmrow[data-swipe] .q-dmacts-l { display: block; }
    @keyframes q-swipe-in { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
    /* Satır eylem sayfasının başlığı (avatar/kanal simgesi + ad + alt satır) */
    .q-rowsheet-head { display: flex; align-items: center; gap: 12px; margin: 0 2px 6px; padding: 0 8px 12px; border-bottom: 1px solid var(--q-divider); }
    .q-rowsheet-av { width: 40px !important; height: 40px !important; flex: none; font-size: 15px; object-fit: cover; }
    .q-rowsheet-ic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--q-mo-card); color: var(--q-accent); }
    .q-rowsheet-ic .mud-icon-root { font-size: 21px; }
    .q-rowsheet-t { min-width: 0; display: grid; gap: 3px; }
    .q-rowsheet-t b { font: 600 16.5px/1.15 var(--q-display); color: var(--q-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-rowsheet-t small { font-size: 12.5px; color: var(--q-muted); }
    .q-msheet-sep { height: 1px; margin: 6px; background: var(--q-divider); }
    /* Alttan açılan sayfalar menü sayfaları gibi buzlu: %97 opak zemin arkadaki yazıyı hafifçe gösteriyordu. */
    .q-msheet { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
}

/* DM SATIRI EYLEMLERİ · MASAÜSTÜ (2026-10-26, Fatih ekran görüntüsüyle: "sabitle kapat arayüzü ne kadar çirkin, güzelleştir").
   Telefonun kaydırma şeridi için eklenen "Sabitle / Kapat" etiketleri (.q-dmacts-l) yalnız telefon bloğunda gizleniyordu —
   masaüstünde fareyle satırın üstüne gelince italik yazı olarak çıkıp adın üstüne biniyordu. Etiketler artık her yerde gizli,
   yalnız telefondaki açık şeritte görünür (o kural daha özgül). Kutu da toparlandı: iki yuvarlak simge düğmesi, sabitle vurgu,
   kapat tehlike tonunda; hap ince kenarlı ve sade (eskiden gölgeli beyaz). */
.q-dmacts-l { display: none; }
@media (hover: hover) {
    .q-dmrow-acts { right: 8px; gap: 2px; padding: 3px; border-radius: 11px; background: var(--q-glass-menu, var(--q-side-bg));
        box-shadow: 0 0 0 1px var(--q-divider), 0 4px 12px rgba(10, 30, 80, .10); }
    .q-dmrow .q-dmrow-acts .q-dmpin, .q-dmrow .q-dmrow-acts .q-dmclose { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
        opacity: 1; color: var(--q-muted); transition: background-color .12s ease, color .12s ease; }
    .q-dmrow .q-dmrow-acts .q-dmpin .mud-icon-root, .q-dmrow .q-dmrow-acts .q-dmclose .mud-icon-root { font-size: 16px !important; }
    .q-dmrow .q-dmrow-acts .q-dmpin:hover, .q-dmrow .q-dmrow-acts .q-dmpin.on { color: var(--q-accent); }
    .q-dmrow .q-dmrow-acts .q-dmpin:hover { background: color-mix(in srgb, var(--q-accent) 15%, transparent); }
    .q-dmrow .q-dmrow-acts .q-dmclose:hover { color: var(--q-danger); background: color-mix(in srgb, var(--q-danger) 14%, transparent); }
}

/* ============================================================================
   MOBİL · TOPLULUKTA "ŞU AN ÇEVRİMİÇİ" (2026-10-26, Fatih: "topluluklarda çevrimiçi kimler göremiyorum" → öneri B,
   "önerileni uygula"). Topluluk kartının altında yatay şerit: yüz + durum noktası + ad + seste kanal adı (yeşil) ya da
   "Oyunda"; konuşan kişinin yüzünde yeşil halka. "Tüm üyeler" masaüstündeki tam listeyi (MembersBody) alttan açılan
   sayfada gösterir (.q-memsheet). Yalnız telefon kapısında; masaüstü değişmez.
   ============================================================================ */
@media (max-width: 700px), (max-height: 520px) {
    .q-mosrv-now { display: grid; gap: 8px; padding-top: 2px; }
    .q-mosrv-now-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px; }
    .q-mosrv-now-h > span { font: 800 11px/1 'Goglis Sans', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--q-faint); }
    .q-mosrv-now-all { display: inline-flex; align-items: center; min-height: 32px; padding: 0 0 0 10px; border: 0; background: transparent;
        color: var(--q-accent-ink); font: 700 13px/1 'Goglis Sans', system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .q-mosrv-now-all .mud-icon-root { font-size: 18px; margin-right: -4px; }
    .q-mosrv-now-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; scrollbar-width: none; overscroll-behavior-x: contain; }
    .q-mosrv-now-row::-webkit-scrollbar { display: none; }
    /* Düğme ızgarası minmax(0,1fr) (tuzak #19): yoksa sütun içerik genişliğinde kalır, uzun ad 70 px'i taşırdı. */
    .q-mosrv-now-p { flex: none; width: 70px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 4px;
        padding: 4px 0 2px; border: 0; border-radius: 14px; background: transparent; color: inherit; text-align: center; cursor: pointer;
        -webkit-tap-highlight-color: transparent; }
    .q-mosrv-now-p:active { background: var(--q-mo-card); }
    .q-mosrv-now-av { position: relative; width: 52px; height: 52px; }
    .q-mosrv-now-av > img, .q-mosrv-now-av > i { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
        font: 800 17px/1 'Goglis Sans', system-ui, sans-serif; font-style: normal; color: #fff; }
    .q-mosrv-now-av.spk > img, .q-mosrv-now-av.spk > i { box-shadow: 0 0 0 2.5px var(--q-chat-bg), 0 0 0 4.5px var(--q-online); }
    .q-mosrv-now-av .q-dot { width: 15px; height: 15px; border-width: 3px; border-color: var(--q-chat-bg); right: -1px; bottom: -1px; }
    .q-mosrv-now-p b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12.5px/1.2 'Goglis Sans', system-ui, sans-serif; color: var(--q-strong); }
    .q-mosrv-now-p small { display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; font-size: 11px; line-height: 1.15; color: var(--q-muted); }
    .q-mosrv-now-p small > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .q-mosrv-now-p small.v { color: var(--q-online); }
    .q-mosrv-now-p small .mud-icon-root { font-size: 13px; flex: none; }
    .q-mosrv-now-p small > svg { flex: none; }
    .q-mosrv-now-more .q-mosrv-now-av > i { background: var(--q-mo-card); border: 1px dashed var(--q-mo-cardline); color: var(--q-muted); font-size: 14px; }
    .q-mosrv-now-empty { padding: 0 6px 2px; font-size: 13px; color: var(--q-muted); }
    /* "Tüm üyeler" sayfası: büyük başlık + masaüstündeki liste */
    .q-memsheet-t { padding: 0 8px 6px; font: 600 19px/1.2 var(--q-display); color: var(--q-strong); }
    .q-memsheet .q-member { padding: 7px 8px; }
    /* PROFİL KARTININ PERDESİ (2026-10-27): kart telefonda z 1400 ama perdesi menülerinki gibi 1274'te kalıyordu; listeden
       açılan kart üstteyken dışarı dokunmak alttaki sayfayı (perde 1290) kapatıyor, kart ortada kalıyordu. Perde kartın
       hemen altına çıkınca önce kart kapanır, liste yerinde kalır (geri tuşu da en üst perdeyi seçiyor — goglisMobileBack). */
    .q-menu-backdrop:has(+ .q-pp) { z-index: 1395; }
}

/* ============================================================================
   MOBİL · TOPLULUK EKLE SAYFASI (2026-10-27, Fatih: "toplulukta + dan ekleye basınca daha geri gelemiyorum" → öneri A).
   Topluluk ekranındaki + artık alttan açılan sayfa (.q-msheet parçaları); kod kutusu ve Katıl, hiç topluluğu olmayanın
   katıl/kur sayfasıyla aynı (.q-mojoin-inp/-go, ortak JoinCodeForm). KLAVYE: Android'de düzen zaten kısalıyor
   (interactive-widget=resizes-content); iPhone düzeni kısaltmaz → sayfadaki bir kutuya odaklanınca goglis.js
   (goglisSheetKb) klavyenin kapladığı yüksekliği --q-kb olarak yazar, sayfa onun üstüne kalkar.
   ============================================================================ */
@media (max-width: 700px), (max-height: 520px) {
    .q-msheet { bottom: var(--q-kb, 0px); }
    .q-joinsheet-hint { padding: 0 10px 10px; font-size: 13.5px; line-height: 1.45; color: var(--q-muted); }
    .q-joinsheet-form { padding: 0 10px 4px; }
    .q-joinsheet .q-msheet-sep { margin: 12px 6px 6px; }
    .q-msheet-row .q-msheet-go { font-size: 20px; opacity: .7; }
}

/* ============================================================================
   ÜYE SATIRINDA OYUN ÖNCE (2026-10-28, Fatih: "bende Dota 2 oynuyor görünüyorken aynı anda Oyun olarak görünüyor").
   Hem seste hem oyunda olanın alt satırı oyunu yazar; seste olduğunu sondaki hoparlör söyler (konuşurken yeşil). Eskiden
   ses kanalının adı yazıyordu ve kanalın adı "Oyun" olunca oyun bilgisi sanılıyordu. Satır flex: uzun oyun adı kısalır,
   hoparlör kesilmez. Telefonun "Şu an çevrimiçi" şeridi de aynı kural (oyunun adı + sonda hoparlör).
   ============================================================================ */
.q-member-act.q-member-actrow { display: flex; align-items: center; gap: 4px; min-width: 0; }
.q-member-actrow > .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-member-actrow > :not(.t) { flex: none; }
.q-member-actrow .q-member-vc { font-size: 13px; }
.q-member-actrow.on .q-member-vc { color: var(--q-online); }
@media (max-width: 700px), (max-height: 520px) {
    .q-mosrv-now-p small.g .vc { font-size: 12px; }
    .q-mosrv-now-p small.g.on .vc { color: var(--q-online); }
}