/* Dashboard/assets/css/icons-panel.css
   İKONLAR paneli — /dashboard sayfasındaki "İkonlar" kartı ve iki popup.
   Dış kabuk sayfanın kendi sınıflarını kullanıyor (.dash-chart-panel/.dg-*);
   buradakiler yalnızca kart ve popup İÇİNİ biçimlendiriyor. */

.ikon-ozet { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.ikon-ozet .rozet {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--uk-surface-2, rgba(255,255,255,.04));
    border: 1px solid var(--uk-border, rgba(255,255,255,.08));
    border-radius: 999px; padding: 5px 12px; font-size: 13px;
}
.ikon-ozet .rozet b { font-weight: 700; }
.ikon-ozet .rozet.uyari { border-color: #e0af68; color: #e0af68; }
.ikon-ozet .rozet.iyi { border-color: #3ba55d; }

/* ── Popup gövdesi: sol grup listesi + sağ ikon listesi ── */
.ikon-duzen { display: flex; gap: 16px; min-height: 420px; }
.ikon-gruplar {
    flex: 0 0 190px; display: flex; flex-direction: column; gap: 2px;
    max-height: 60vh; overflow-y: auto; padding-right: 4px;
}
.ikon-gruplar button {
    display: flex; justify-content: space-between; align-items: center; gap: 8px;
    width: 100%; text-align: left; background: transparent; color: inherit;
    border: 1px solid transparent; border-radius: 11px; padding: 8px 10px;
    font-size: 13px; cursor: pointer;
}
.ikon-gruplar button:hover { background: var(--uk-surface-2, rgba(255,255,255,.05)); }
.ikon-gruplar button.aktif {
    background: var(--uk-primary, #5865f2); color: #fff; border-color: transparent;
}
.ikon-gruplar .sayi { font-size: 11px; opacity: .75; }

.ikon-sag { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ikon-arac { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ikon-arac input[type="search"] { flex: 1; min-width: 160px; }
/* .dg-input width:100% verdiği için esnek satırda seçim kutusu taşıyordu. */
.ikon-arac select { flex: 0 0 auto; width: auto; min-width: 150px; max-width: 200px; }

.ikon-liste { max-height: 52vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ikon-satir {
    display: flex; align-items: center; gap: 12px; padding: 8px 10px;
    border: 1px solid var(--uk-border, rgba(255,255,255,.07)); border-radius: 12px;
}
.ikon-satir:hover { background: var(--uk-surface-2, rgba(255,255,255,.03)); }
.ikon-satir.bozuk { border-color: #da373c; }
.ikon-gosterim {
    flex: 0 0 40px; height: 40px; display: grid; place-items: center;
    font-size: 22px; background: var(--uk-surface-2, rgba(255,255,255,.05)); border-radius: 8px;
}
.ikon-gosterim img { width: 26px; height: 26px; object-fit: contain; }
.ikon-bilgi { flex: 1; min-width: 0; }
.ikon-bilgi .ad { font-weight: 600; font-size: 14px; }
.ikon-bilgi .anahtar { font-size: 11px; opacity: .6; font-family: ui-monospace, Consolas, monospace; }
.ikon-bilgi .not { font-size: 11px; opacity: .65; }
.ikon-satir .eylem { display: flex; gap: 6px; flex: 0 0 auto; }
.ikon-rozet {
    font-size: 10px; border-radius: 999px; padding: 2px 7px; border: 1px solid currentColor;
}
.ikon-rozet.ozel { color: #3ba55d; }
.ikon-rozet.eksik { color: #da373c; }

/* ── Emoji seçici ── */
.emoji-izgara {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
    gap: 6px; max-height: 46vh; overflow-y: auto; padding: 2px;
}
.emoji-hucre {
    display: grid; place-items: center; gap: 2px; padding: 6px 2px;
    border: 1px solid var(--uk-border, rgba(255,255,255,.07)); border-radius: 11px;
    background: transparent; color: inherit; cursor: pointer;
}
.emoji-hucre:hover { border-color: var(--uk-primary, #5865f2); }
.emoji-hucre img { width: 28px; height: 28px; object-fit: contain; }
.emoji-hucre span { font-size: 9px; opacity: .7; max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emoji-hucre.kullanimda { border-color: #3ba55d; }

.ikon-yukle-alan {
    border: 2px dashed var(--uk-border, rgba(255,255,255,.15)); border-radius: 12px;
    padding: 18px; text-align: center; font-size: 13px; opacity: .85; cursor: pointer;
}
.ikon-yukle-alan.uzerinde { border-color: var(--uk-primary, #5865f2); opacity: 1; }

/* Boşken hiç çizilmiyor (JS gizliyor) — kartta boş bir şerit kalmasın. */
.ikon-onizleme {
    border: 1px solid var(--uk-border, rgba(255,255,255,.08)); border-radius: 12px;
    padding: 10px 12px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.ikon-onizleme .onizleme-etiket { font-size: 11px; opacity: .6; margin-right: 2px; }
.ikon-onizleme .dg {
    display: inline-flex; align-items: center; gap: 6px; background: #4e5058; color: #fff;
    border: none; border-radius: 11px; padding: 6px 12px; font-size: 13px;
    font-family: inherit; cursor: pointer; transition: filter .15s, transform .15s;
}
.ikon-onizleme .dg:hover { filter: brightness(1.15); transform: translateY(-1px); }

/* Önizlemeden gelindiğinde ilgili satır kısa süre vurgulanır. */
.ikon-satir.vurgulu {
    border-color: var(--uk-primary, #5865f2);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, .22);
}
.ikon-onizleme img { width: 18px; height: 18px; vertical-align: -3px; }

@media (max-width: 720px) {
    .ikon-duzen { flex-direction: column; }
    .ikon-gruplar { flex: none; flex-direction: row; overflow-x: auto; max-height: none; }
    .ikon-gruplar button { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════
   SİSTEMLER SEKMESİ — botun gerçek ekranlarının Discord görünümlü önizlemesi
   (JSON: /api/icons/onizleme · çizim: assets/js/icons-preview.js)
   ══════════════════════════════════════════════════════════════════════════ */
.ikon-sekmeler {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 0 20px 10px; margin-top: -4px;
    border-bottom: 1px solid var(--uk-border, rgba(255,255,255,.08));
}
.ikon-sekmeler > button:not(.dg-btn):not(.uk-btn) {
    background: transparent; color: inherit; border: none; cursor: pointer;
    font: inherit; font-size: 14px; padding: 8px 14px; border-radius: 10px 10px 0 0;
    border-bottom: 2px solid transparent; opacity: .7;
}
.ikon-sekmeler > button.aktif {
    opacity: 1; font-weight: 600;
    border-bottom-color: var(--uk-primary, #5865f2);
}
.ikon-sistemler button.sonuk { opacity: .55; }
.ikon-sistemler .sayi.kotu { color: #da373c; }

.onz-liste { max-height: 62vh; overflow-y: auto; padding-right: 4px; }
.onz-sistem-bas h4 { margin: 0 0 2px; font-size: 15px; }
.onz-sistem-bas p { margin: 0 0 14px; font-size: 12px; opacity: .7; }
.onz-bilgi {
    font-size: 13px; line-height: 1.55; opacity: .85; margin-bottom: 10px;
    background: var(--uk-surface-2, rgba(255,255,255,.04));
    border-radius: 10px; padding: 12px 14px;
}
.onz-hata {
    font-size: 13px; line-height: 1.5; color: #e0af68;
    border: 1px solid #e0af68; border-radius: 10px; padding: 12px 14px;
}

.onz-ekran { margin-bottom: 22px; }
.onz-ekran-bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onz-ekran-bas h5 { margin: 0; font-size: 13px; font-weight: 700; }
.onz-rozet {
    font-size: 10px; opacity: .7; border: 1px solid currentColor;
    border-radius: 999px; padding: 1px 8px;
}
.onz-nerede { margin: 2px 0 8px; font-size: 11px; opacity: .6; }

/* ── Discord mesaj görünümü ── */
.onz-mesaj { display: flex; gap: 12px; background: #2b2d31; border-radius: 10px; padding: 14px; }
.onz-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; background: linear-gradient(135deg,#5865f2,#9368e9); }
.onz-govde { min-width: 0; flex: 1; color: #dbdee1; font-size: 14px; line-height: 1.4; }
.onz-ust { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.onz-ad { font-weight: 600; color: #e879f9; font-size: 14px; }
.onz-etiket { background: #5865f2; color: #fff; font-size: 9px; font-weight: 600; border-radius: 4px; padding: 1px 5px; }

.onz-kap {
    background: #313338; border: 1px solid #3f4147; border-left: 4px solid var(--onz-accent, #5865f2);
    border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 7px;
}
.onz-td { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onz-h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.onz-h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.onz-kucuk { font-size: 12px; color: #949ba4; }
.onz-sat { font-size: 14px; }
.onz-alinti { border-left: 3px solid #4e5058; padding-left: 8px; }
.onz-td code { background: #1e1f22; border-radius: 4px; padding: 1px 4px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.onz-link { color: #00a8fc; }
.onz-mention { background: rgba(88,101,242,.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; }
.onz-ayrac { height: 1px; background: #3f4147; margin: 1px 0; }
.onz-ayrac.gizli { background: transparent; }

.onz-bolum { display: flex; gap: 12px; align-items: center; }
.onz-bolum-sol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onz-bolum-sag { flex: none; }
.onz-gorsel {
    width: 100%; height: 64px; border-radius: 6px;
    display: grid; place-items: center;
    font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #6b6e76;
    background: repeating-linear-gradient(45deg, #3a3c42 0 8px, #34363c 8px 16px);
}
/* Kapak/albüm görselleri önizlemede yer tutucu: panel gerçek CDN'e çıkmıyor,
   üstelik burada önemli olan görsel değil ÜSTÜNDEKİ simgeler. */
.onz-gorsel::after { content: 'görsel'; }
.onz-gorsel.kapak { width: 52px; height: 52px; font-size: 0; }
.onz-gorsel.kapak::after { content: ''; }
/* ── KENDİ ALAN ADIMIZDAKİ GERÇEK GÖRSEL (21.09.2026) ────────────────────────
   Botun EQ şeridi ({DASHBOARD_URL}/assets/img/eq-*.gif) aynı kaynaktan
   sunuluyor; yer tutucu yerine kendisi çiziliyor (bkz. icons-preview.js
   #kendiGorselimizMi). Duraklatılmış kartın donmuş .png'si ile çalan kartın
   .gif'i arasındaki fark ancak böyle görünüyor — yer tutucuyla ikisi de aynı
   gri kutuydu. Ölçüler yer tutucuyla aynı tutuldu ki düzen oynamasın. */
.onz-gorsel-gercek {
    width: 100%; max-height: 64px; border-radius: 6px;
    object-fit: contain; object-position: center; display: block;
    background: rgba(0, 0, 0, .18);
}
.onz-gorsel-gercek.kapak { width: 52px; height: 52px; max-height: 52px; object-fit: cover; }

/* ── ÇALAR KARTININ GERÇEK GÖRSELİ (21.09.2026) ──────────────────────────────
   /api/ekranlar/kart, botun kendi çizicisiyle 310x75 bir JPEG üretiyor.
   Discord kartı DOĞAL boyutunda gösteriyor; burada da öyle duruyor, yalnızca
   dar ekranda küçülüyor. `width:310px` yazmıyoruz — görselin kendi boyutu
   değişirse düzen kendiliğinden uysun. */
.onz-kart {
    display: block; max-width: 100%; height: auto;
    border-radius: 6px; background: rgba(0, 0, 0, .18);
}

.onz-galeri { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.onz-galeri.tek { grid-template-columns: 1fr; }
.onz-galeri.tek .onz-gorsel { height: 44px; }
.onz-galeri.tek .onz-gorsel-gercek { max-height: 44px; }

.onz-satir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.onz-dugme {
    display: inline-flex; align-items: center; gap: 6px; border-radius: 8px;
    padding: 7px 13px; font-size: 13px; font-weight: 500; color: #fff; min-height: 32px;
}
.onz-dugme.birincil { background: #5865f2; }
.onz-dugme.ikincil  { background: #4e5058; }
.onz-dugme.basari   { background: #248046; }
.onz-dugme.tehlike  { background: #da373c; }
.onz-dugme.baglanti { background: #4e5058; }
.onz-dugme.pasif { opacity: .5; }
.onz-em { width: 18px; height: 18px; object-fit: contain; }

.onz-secim-sarmal { flex: 1 1 260px; min-width: 240px; }
.onz-secim {
    display: flex; justify-content: space-between; align-items: center;
    background: #1e1f22; border: 1px solid #3f4147; border-radius: 8px;
    padding: 8px 12px; color: #949ba4; font-size: 13px;
}
.onz-sec-menu { margin-top: 4px; background: #1e1f22; border: 1px solid #3f4147; border-radius: 8px; padding: 6px; }
/* ── AÇILIR MENÜ (21.09.2026) ────────────────────────────────────────────────
   Menü artık gerçekten açılıp kapanıyor: rehberde kapalı, ikon panelinde açık
   başlıyor (icons-preview.js#secimKutusu). Dört sekmelik bir menünün hep açık
   durması rehber sayfasını gereksiz uzatıyordu ve Discord'da da öyle
   görünmüyor. */
.onz-sec-menu.kapali { display: none; }
.onz-secim.acilir { cursor: pointer; }
.onz-secim .onz-ok { transition: transform .12s ease; }
.onz-secim.acik .onz-ok { transform: rotate(180deg); }
.onz-sec-ogesi.secili { background: rgba(88, 101, 242, .18); }
.onz-sec-bas { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #949ba4; padding: 2px 8px 6px; }
.onz-sec-ogesi { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: 4px; font-size: 13px; color: #dbdee1; }
.onz-sec-alt { font-size: 11px; color: #949ba4; }
.onz-sec-em { flex: none; }

.onz-mesaj-liste { display: flex; flex-direction: column; gap: 5px; }
.onz-mini { padding: 2px 0; }

/* ── Klasik gömlek (embed) ── */
/* Ekonomi ekranları Components V2'ye geçmedi; Discord'un embed düzeni. */
.onz-gomlek {
    display: flex; gap: 12px; background: #2b2d31;
    border-left: 4px solid var(--onz-accent, #5865f2);
    border-radius: 4px; padding: 12px 16px; max-width: 520px;
}
.onz-gomlek-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.onz-gomlek-yazar { font-size: 13px; font-weight: 600; }
.onz-gomlek-baslik { font-size: 15px; font-weight: 700; color: #fff; }
.onz-gomlek-alanlar { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 2px; }
.onz-gomlek-alan { min-width: 100%; }
.onz-gomlek-alan.satirici { min-width: 0; flex: 1 1 30%; }
.onz-gomlek-alan-ad { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.onz-gomlek-alan-deger { font-size: 13px; }
.onz-gomlek-alt { font-size: 11px; color: #949ba4; margin-top: 4px; }
.onz-gomlek-kucuk { flex: none; }

/* ── Tıklanabilir ikon rozeti ── */
/* Önizlemedeki HER simge bir düğme: tıklayınca o ikonun emoji seçicisi açılır.
   Kesikli çerçeve "buraya basılabilir"i anlatıyor; atanmış olanlar yeşil. */
.onz-ikon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding: 0 3px; margin: 0 1px;
    background: rgba(88,101,242,.14); border: 1px dashed rgba(88,101,242,.55);
    border-radius: 6px; cursor: pointer; font: inherit; font-size: 15px;
    line-height: 1; color: inherit; vertical-align: -4px;
}
.onz-ikon:hover { background: rgba(88,101,242,.34); border-style: solid; }
.onz-ikon img { width: 18px; height: 18px; object-fit: contain; display: block; }
.onz-ikon.ozel { border-color: rgba(59,165,93,.7); background: rgba(59,165,93,.14); }
.onz-ikon.bozuk { border-color: #da373c; background: rgba(218,55,60,.16); }
.onz-ikon.bilinmeyen { border-color: #e0af68; background: rgba(224,175,104,.16); }
.onz-h2 .onz-ikon { height: 28px; min-width: 28px; font-size: 19px; }
.onz-h3 .onz-ikon { height: 25px; min-width: 25px; font-size: 16px; }
.onz-kucuk .onz-ikon { height: 20px; min-width: 20px; font-size: 13px; vertical-align: -3px; }

/* ══ REHBER KİPİ SİMGESİ (21.09.2026) ═══════════════════════════════════════
   Rehber görselleri panelinde ekran, Discord'da NASIL görünüyorsa öyle
   çiziliyor: çerçeve, zemin, varyant sayacı yok. Yalnızca simgenin kendisi.
   Ölçüler .onz-ikon ile aynı tutuldu ki kipler arası geçişte satır yüksekliği
   ve hizalama oynamasın — aksi halde rehberdeki ekran görüntüsü, paneldeki
   önizlemeden farklı bir düzene sahip olurdu. */
.onz-ikon-rehber {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; margin: 0 1px;
    font: inherit; font-size: 15px; line-height: 1;
    vertical-align: -4px;
}
.onz-ikon-rehber img { width: 18px; height: 18px; object-fit: contain; display: block; }
.onz-h2 .onz-ikon-rehber { height: 24px; min-width: 24px; font-size: 19px; }
.onz-h2 .onz-ikon-rehber img { width: 22px; height: 22px; }
.onz-h3 .onz-ikon-rehber { height: 22px; min-width: 22px; font-size: 16px; }
.onz-kucuk .onz-ikon-rehber { height: 17px; min-width: 17px; font-size: 13px; vertical-align: -3px; }
.onz-kucuk .onz-ikon-rehber img { width: 15px; height: 15px; }

@media (max-width: 720px) {
    .onz-mesaj { padding: 10px; gap: 8px; }
    .onz-kap { padding: 10px; }
    .ikon-sekmeler { padding: 0 12px 8px; }
}
/* Düz metin alanındaki simge: Discord orada özel emoji göstermiyor. */
.onz-ikon.duz {
    background: transparent; border-style: dotted; border-color: rgba(148,155,164,.5);
    cursor: default; opacity: .8;
}
.onz-ikon.duz:hover { background: transparent; border-style: dotted; }

/* ══ DEĞİŞKEN (VARYANTLI) SİMGELER ══════════════════════════════════════════
   Bazı noktalarda tek simge yok: çalan parçanın kaynağına, oynatıcı durumuna
   ya da bir tercihin açık/kapalı oluşuna göre biri çıkıyor. Rozetin köşesindeki
   sayı bunu belli ediyor; tıklayınca mesajın altında bütün seçenekler açılıyor.
   ═══════════════════════════════════════════════════════════════════════════ */
.onz-ikon.varyant { position: relative; }
.onz-ikon.varyant::after {
    content: attr(data-varyant); position: absolute; right: -6px; bottom: -6px;
    min-width: 14px; height: 14px; padding: 0 3px; border-radius: 7px;
    background: var(--uk-primary, #5865f2); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    display: grid; place-items: center;
}
/* Şeridi açık olan rozet: hangi simgeye baktığın belli olsun. */
.onz-ikon.varyant.acik {
    border-style: solid; border-color: var(--uk-primary, #5865f2);
    box-shadow: 0 0 0 3px rgba(88, 101, 242, .25);
}

.varyant-serit {
    margin-top: 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--uk-surface-2, rgba(255,255,255,.04));
    border: 1px solid var(--uk-border, rgba(255,255,255,.08));
}
.varyant-serit .vs-bas { font-size: 11px; opacity: .72; margin-bottom: 8px; line-height: 1.5; }
.varyant-serit .vs-bas b { opacity: 1; }
.varyant-kutular { display: flex; flex-wrap: wrap; gap: 6px; }
.varyant-kutu {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: #313338; border: 1px solid #3f4147; border-radius: 8px;
    padding: 5px 10px 5px 6px; font: inherit; font-size: 12px; color: #dbdee1;
}
.varyant-kutu:hover { border-color: var(--uk-primary, #5865f2); }
.varyant-kutu .vk-em {
    width: 24px; height: 24px; display: grid; place-items: center; font-size: 15px;
    border-radius: 6px; border: 1px dashed rgba(88,101,242,.55); background: rgba(88,101,242,.14);
}
.varyant-kutu .vk-em img { width: 17px; height: 17px; object-fit: contain; display: block; }
.varyant-kutu.ozel .vk-em { border-style: solid; border-color: rgba(59,165,93,.7); background: rgba(59,165,93,.14); }
.varyant-kutu.bozuk .vk-em { border-style: solid; border-color: #da373c; background: rgba(218,55,60,.16); }
.varyant-serit .vs-kapat {
    margin-top: 9px; background: transparent; border: none; cursor: pointer;
    color: var(--uk-primary, #5865f2); font: inherit; font-size: 11px; padding: 0;
}
.varyant-serit .vs-kapat:hover { text-decoration: underline; }

/* Bir rozet birden çok kümede olabiliyor; kümeler şeritte alt alta çiziliyor.
   İkinci ve sonraki başlıklar üsttekinden ince bir çizgiyle ayrılıyor. */
.varyant-serit .vs-bas + .varyant-kutular + .vs-bas {
    margin-top: 12px; padding-top: 10px;
    border-top: 1px solid var(--uk-border, rgba(255,255,255,.08));
}

/* Kapalı seçim kutusunda seçili seçenek görünüyorsa metin soluk değil,
   normal renkte (Discord'daki gibi: placeholder soluk, seçili değer değil). */
.onz-secim.secili { color: #dbdee1; }
.onz-secim-yazi { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }

/* Çalışma anında üretilen kart görseli: şarkı bilgisi görselin İÇİNE
   çiziliyor, metin olarak yalnızca görselin açıklamasında var. Yer tutucu o
   açıklamayı gösteriyor — kartın düzenini taklit etmeden. */
.onz-gorsel.yazili {
    font-size: 12px; text-transform: none; letter-spacing: 0;
    color: #c7cad1; padding: 0 10px; text-align: center; line-height: 1.4;
}
.onz-gorsel.yazili::after { content: ''; }

/* Discord zaman damgası (<t:…>) — okuyucunun saatine göre yazılıyor. */
.onz-zaman { background: rgba(255, 255, 255, .06); border-radius: 3px; padding: 0 3px; }

/* ══ DISCORD AÇIK TEMA ════════════════════════════════════════════════════════
   Rehberdeki bot ekranları Discord'un açık temasıyla da gösterilebiliyor
   (yazar blok başına seçiyor, okuyucu ekranın altındaki düğmeyle değiştiriyor).
   Kök öğeye .onz-acik sınıfı veriliyor; renkler Discord'un açık paletinden.
   Yalnızca RENKLER değişiyor — ölçüler aynı kalmalı ki işaretçiler kaymasın. */
.onz-acik .onz-mesaj { background: #f2f3f5; }
.onz-acik .onz-govde { color: #313338; }
.onz-acik .onz-ad { color: #b01bcf; }
.onz-acik .onz-kap { background: #ffffff; border-color: #e3e5e8; }
.onz-acik .onz-kucuk,
.onz-acik .onz-sec-alt,
.onz-acik .onz-sec-bas,
.onz-acik .onz-gomlek-alt { color: #5c5e66; }
.onz-acik .onz-alinti { border-left-color: #c4c9ce; }
.onz-acik .onz-td code { background: #ebedef; color: #313338; }
.onz-acik .onz-link { color: #006ce7; }
.onz-acik .onz-mention { background: rgba(88, 101, 242, .15); color: #505cdc; }
.onz-acik .onz-zaman { background: rgba(0, 0, 0, .06); }
.onz-acik .onz-ayrac { background: #e3e5e8; }
.onz-acik .onz-ayrac.gizli { background: transparent; }
.onz-acik .onz-gorsel {
    color: #80848e;
    background: repeating-linear-gradient(45deg, #e3e5e8 0 8px, #ebedef 8px 16px);
}
.onz-acik .onz-gorsel.yazili { color: #4e5058; }
.onz-acik .onz-dugme.ikincil,
.onz-acik .onz-dugme.baglanti { background: #6d6f78; }
.onz-acik .onz-secim { background: #ebedef; border-color: #e3e5e8; color: #5c5e66; }
.onz-acik .onz-sec-menu { background: #ffffff; border-color: #e3e5e8; }
.onz-acik .onz-sec-ogesi { color: #313338; }
.onz-acik .onz-gomlek { background: #f2f3f5; }
.onz-acik .onz-gomlek-baslik,
.onz-acik .onz-gomlek-alan-ad { color: #060607; }