/* Dashboard/assets/css/bot-ekran.css
   REHBER YAZILARINDAKİ CANLI BOT EKRANLARI — çerçeve, tur, işaretçiler.

   Bu dosya İKİ yerde kullanılıyor:
     • sayfada (<link>): blok kutusunun kendisi (.bot-ekran / .bot-tur) ve
       yüklenirken görünen iskelet; ayrıca Rehber Görselleri panelindeki
       işaretçiler.
     • her bloğun GÖLGE KÖKÜNDE (bot-ekran.js indirip uyguluyor): çerçeve,
       tur düzeni, işaretçiler. :host kuralları yalnızca orada geçerli.

   Ekranın kendi görünümü (.onz-*) icons-panel.css'ten geliyor ve oraya
   DOKUNULMUYOR: aynı kurallar hem ikon panelini hem gömülü ekranı çiziyor. */

/* ── Blok kutusu (sayfa tarafı) ─────────────────────────────────────────── */
.bot-ekran, .bot-tur { display: block; margin: 22px 0; }

.be-yukleniyor {
    min-height: 140px;
    border-radius: 14px;
    background: var(--dp-s04, rgba(127, 127, 127, .08));
    animation: bePulse 1.4s ease-in-out infinite;
}
@keyframes bePulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .be-yukleniyor { animation: none; } }

/* ── Gölge kök: sayfanın yazı kurallarından yalıtım ─────────────────────────
   all:initial kalıtılan özellikleri (makalenin 17px/1.85 satır aralığı, açık
   temanın metin rengi…) sıfırlıyor; ekran Discord ölçüleriyle çiziliyor. */
:host {
    all: initial;
    display: block;
    margin: 22px 0;
    font-family: 'gg sans', 'Noto Sans', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.375;
    color: #dbdee1;
    text-align: left;
}
:host *, :host *::before, :host *::after { box-sizing: border-box; }

.be-hata { font-size: 13px; color: #949ba4; padding: 12px 0; }

/* ── Çerçeve ────────────────────────────────────────────────────────────── */
.be-cerceve {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    overflow: hidden;
    background: #313338;            /* Discord mesaj alanı */
    max-width: 620px;
}
.be-sahne-sar { position: relative; }
.be-sahne { padding: 14px; color: #dbdee1; }

/* Gömülü ekranda panel başlıkları görünmesin — okuyucu için anlamsız. */
.be-sahne .onz-ekran-bas,
.be-sahne .onz-nerede { display: none; }

/* ── Bildirimler ──────────────────────────────────────────────────────────── */
.be-bildirimler:not(:empty) { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.be-bildirim {
    animation: beGir .22s ease-out;
    border-left: 2px solid rgba(88, 101, 242, .5);
    padding-left: 10px;
}
@keyframes beGir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .be-bildirim { animation: none; } }

.be-alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    background: rgba(0, 0, 0, .18);
}
.be-ipucu { font-size: 11.5px; color: #949ba4; line-height: 1.5; }
.be-alt-sag { display: inline-flex; gap: 6px; flex: none; }

.be-geri, .be-tema {
    flex: none;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #dbdee1;
    border-radius: 7px;
    padding: 4px 10px;
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
}
.be-geri:hover, .be-tema:hover { background: rgba(255, 255, 255, .12); }

/* ── Tıklanabilir noktalar ────────────────────────────────────────────────── */
.be-tikla {
    cursor: pointer;
    position: relative;
    outline: 1px solid rgba(88, 101, 242, .55);
    outline-offset: 1px;
    border-radius: 4px;
    transition: outline-color .15s, box-shadow .15s;
    animation: beNabiz 2.4s ease-in-out infinite;
}
.be-tikla:hover,
.be-tikla:focus-visible {
    outline-color: #5865f2;
    box-shadow: 0 0 0 4px rgba(88, 101, 242, .22);
}
.be-tikla:focus-visible { outline-width: 2px; }
@keyframes beNabiz {
    0%, 100% { outline-color: rgba(88, 101, 242, .35); }
    50%      { outline-color: rgba(88, 101, 242, .85); }
}
@media (prefers-reduced-motion: reduce) {
    .be-tikla { animation: none; outline-color: rgba(88, 101, 242, .7); }
}
.be-ac { cursor: pointer; border-color: rgba(88, 101, 242, .55) !important; }
.be-ac:hover { border-color: #5865f2 !important; }

/* ── NUMARALI İŞARETÇİLER ─────────────────────────────────────────────────────
   Katman ekranın üstünde ama tıklamaları GEÇİRİYOR: işaretçi bir düğmenin
   üstüne düşse bile okuyucu o düğmeye basabilmeli. */
.be-isaret-katman { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.be-isaret {
    position: absolute;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #f23f43;
    color: #fff !important;
    font: 700 12px/1 'gg sans', 'Noto Sans', 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(0, 0, 0, .45);
    animation: beIsaret .3s ease-out;
}
@keyframes beIsaret { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .be-isaret { animation: none; } }

.be-isaret-liste {
    list-style: none;
    margin: 0;
    padding: 4px 14px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.be-isaret-liste li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #dbdee1; margin: 0; }
.be-isaret-no {
    flex: none;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    background: #f23f43; color: #fff !important;
    font-size: 11px; font-weight: 700;
}
.be-isaret-metin { padding-top: 1px; }

/* ── ADIM ADIM TUR ────────────────────────────────────────────────────────── */
.bt-kok {
    max-width: 660px;
    border-radius: 16px;
    border: 1px solid rgba(124, 92, 255, .35);
    background: linear-gradient(160deg, rgba(124, 92, 255, .16), rgba(24, 213, 168, .08)), #1e1f22;
    padding: 14px;
    color: #dbdee1;
    outline: none;
}
.bt-kok:focus-visible { box-shadow: 0 0 0 3px rgba(124, 92, 255, .45); }
.bt-bas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bt-rozet {
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px;
    background: rgba(124, 92, 255, .25); color: #cfc3ff;
}
.bt-baslik { font-size: 15px; font-weight: 800; color: #fff; flex: 1; min-width: 0; }
.bt-sayac { font-size: 12px; color: #949ba4; font-variant-numeric: tabular-nums; }
.bt-cubuk { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-bottom: 12px; }
.bt-cubuk i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #7c5cff, #18d5a8); transition: width .25s ease; }
.bt-aciklama { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.bt-no {
    flex: none; width: 26px; height: 26px; border-radius: 9px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #7c5cff, #18d5a8); color: #fff;
    font-weight: 800; font-size: 13px;
}
.bt-metin { font-size: 14px; line-height: 1.6; padding-top: 2px; }
.bt-metin code { background: rgba(0, 0, 0, .3); border-radius: 4px; padding: 1px 5px; font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.bt-ekran .be-cerceve { max-width: none; }
.bt-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.bt-onceki, .bt-sonraki {
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-radius: 9px;
    padding: 7px 14px;
    font: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer;
}
.bt-sonraki { background: linear-gradient(135deg, #7c5cff, #5865f2); border-color: transparent; }
.bt-onceki:disabled, .bt-sonraki:disabled { opacity: .45; cursor: default; }
.bt-noktalar { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.bt-nokta {
    width: 9px; height: 9px; padding: 0; border-radius: 50%;
    border: 0; background: rgba(255, 255, 255, .22); cursor: pointer;
    transition: transform .15s, background .15s;
}
.bt-nokta.gecti { background: rgba(24, 213, 168, .6); }
.bt-nokta.aktif { background: #7c5cff; transform: scale(1.35); }

/* ── Discord açık teması (çerçeve kısmı; ekranın içi icons-panel.css) ──── */
.onz-acik .be-cerceve { background: #ffffff; border-color: rgba(0, 0, 0, .1); }
.onz-acik .be-sahne { color: #313338; }
.onz-acik .be-alt { background: #f2f3f5; border-top-color: #e3e5e8; }
.onz-acik .be-ipucu { color: #5c5e66; }
.onz-acik .be-geri, .onz-acik .be-tema { color: #313338; background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .12); }
.onz-acik .be-geri:hover, .onz-acik .be-tema:hover { background: rgba(0, 0, 0, .08); }
.onz-acik .be-isaret-liste li { color: #313338; }
.bt-kok.onz-acik { background: linear-gradient(160deg, rgba(124, 92, 255, .10), rgba(24, 213, 168, .06)), #f7f7fb; color: #313338; border-color: rgba(124, 92, 255, .3); }
.bt-kok.onz-acik .bt-baslik { color: #111827; }
.bt-kok.onz-acik .bt-rozet { color: #5b3fd6; background: rgba(124, 92, 255, .14); }
.bt-kok.onz-acik .bt-sayac { color: #5c5e66; }
.bt-kok.onz-acik .bt-cubuk { background: rgba(0, 0, 0, .08); }
.bt-kok.onz-acik .bt-metin code { background: rgba(0, 0, 0, .06); }
.bt-kok.onz-acik .bt-onceki { color: #313338; background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .12); }
.bt-kok.onz-acik .bt-nokta { background: rgba(0, 0, 0, .18); }
.bt-kok.onz-acik .bt-nokta.gecti { background: rgba(24, 160, 130, .6); }
.bt-kok.onz-acik .bt-nokta.aktif { background: #7c5cff; }

@media (max-width: 640px) {
    .be-sahne { padding: 10px; }
    .be-alt { flex-direction: column; align-items: flex-start; }
    .bt-kok { padding: 10px; }
    .bt-onceki, .bt-sonraki { padding: 7px 10px; }
}