/* ══════════════════════════════════════════════════════════════════════
   Öğretici katmanı — morph eden yüzey, ok, halka, perde
   ══════════════════════════════════════════════════════════════════════

   KATMAN SIRASI (z-index)
     9000  .bnt-tut-shield   karartma perdesi
     9001  .bnt-tut-raised   perdenin üstüne çıkarılan gerçek arayüz parçası
     9500  #tutorialRoot     öğreticinin kendi çizimleri (her zaman en üstte)

   Perde tıklamayı YUTMAZ (`pointer-events:none`); engelleme JS tarafında,
   `tutorial-stop.js` içindeki yakalama dinleyicileriyle yapılır.

   TEK YÜZEY
     Adımlar ayrı kutular değil; `.tut-surface` tek bir öğe olarak kart ⇄ balon
     ⇄ kenar çubuğu arasında MORPH eder. Ölçü/konum/köşe yarıçapı geçişli,
     içerik çapraz geçişli.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --tut-bg:     rgba(18, 20, 28, 0.94);
    --tut-border: rgba(255, 255, 255, 0.14);
    --tut-text:   #f2f3f7;
    --tut-muted:  rgba(242, 243, 247, 0.62);
    --tut-ease:   cubic-bezier(.16, 1, .3, 1);
}

/* ── Perde ──────────────────────────────────────────────────────────── */
.bnt-tut-shield {
    position: fixed; inset: 0;
    z-index: 9000;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: background .3s ease, backdrop-filter .3s ease;
    animation: tut-fade-in .28s ease both;
}
/* Kullanıcı panoyla gerçekten etkileşecekse (sürükleme, boyutlandırma, widget
   ayarları) arka plan NET olmalı — bulanık zeminde ne yaptığını göremez. */
body.bnt-tut-clear .bnt-tut-shield {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.bnt-tut-frozen { cursor: default; }
body.bnt-tut-frozen .widget { cursor: default; }
.bnt-tut-raised { box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 18px 60px rgba(0,0,0,.55); }

/* ── Kök katman ─────────────────────────────────────────────────────── */
#tutorialRoot {
    position: fixed; inset: 0;
    z-index: 9500;
    pointer-events: none;   /* yalnızca çocukları tıklanabilir */
    color: var(--tut-text);
    font-family: var(--font-family, inherit);
}
#tutorialRoot > * { pointer-events: auto; }

@keyframes tut-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── "Öğreticiden Çık" ──────────────────────────────────────────────
   z-index yüzeyin ÜSTÜNDE: eski sürümde ekranı kaplayan kart sarmalayıcısı
   bu düğmenin tıklamasını yutuyordu. */
.bnt-tut-exit {
    position: fixed;
    z-index: 6;
    top: clamp(10px, 1.6vw, 20px);
    right: clamp(10px, 1.6vw, 20px);
    display: inline-flex; align-items: center; gap: 7px;
    padding: clamp(7px, 1vw, 10px) clamp(11px, 1.4vw, 15px);
    border-radius: 999px;
    border: 1px solid var(--tut-border);
    background: var(--tut-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--tut-text);
    font: inherit;
    font-size: clamp(.72rem, 1vw, .84rem);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .45);
    transition: background .18s, border-color .18s, transform .18s;
    animation: tut-fade-in .3s ease both;
}
.bnt-tut-exit:hover {
    background: rgba(248, 113, 113, .92);
    border-color: rgba(248, 113, 113, 1);
    transform: translateY(-1px);
}
.bnt-tut-exit svg { opacity: .85; }

/* ══════════════════════════════════════════════════════════════════════
   MORPH EDEN YÜZEY
   ══════════════════════════════════════════════════════════════════════ */
.tut-surface {
    position: fixed;
    z-index: 3;
    left: 50%; top: 50%;
    width: 320px; height: 160px;
    box-sizing: border-box;
    overflow: hidden;

    background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 75%), var(--tut-bg);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--tut-border));
    backdrop-filter: blur(24px) saturate(1.25);
    -webkit-backdrop-filter: blur(24px) saturate(1.25);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .65), 0 0 45px color-mix(in srgb, var(--accent) 15%, transparent);

    opacity: 0;
    transform: scale(.96);

    /* Morph'un kendisi */
    transition:
        left          .46s var(--tut-ease),
        top           .46s var(--tut-ease),
        width         .46s var(--tut-ease),
        height        .46s var(--tut-ease),
        border-radius .40s ease,
        padding       .40s ease,
        opacity       .30s ease,
        transform     .40s var(--tut-ease);
}
.tut-surface.is-in { opacity: 1; transform: none; }

/* Ölçüm ikizi — yüzeyle aynı sınıfları taşır, geçiş yapmaz, görünmez */
.tut-surface.tut-measure {
    left: -99999px !important; top: 0 !important;
    height: auto !important;
    opacity: 0 !important;
    transform: none !important;
    transition: none !important;
    visibility: hidden;
    pointer-events: none;
}

/* Biçimler */
.tut-kind-card    { border-radius: clamp(14px, 1.6vw, 22px); padding: clamp(18px, 2.4vw, 28px); }
.tut-kind-bubble  { border-radius: clamp(12px, 1.3vw, 16px); padding: clamp(13px, 1.5vw, 17px) clamp(14px, 1.6vw, 18px); }
.tut-kind-sidebar { border-radius: clamp(16px, 1.8vw, 26px); padding: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 24px); }

/* ── İçerik katmanı — adımlar arası çapraz geçiş ────────────────────── */
.tut-surface-body {
    position: absolute;
    inset: 0;
    padding: inherit;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    gap: clamp(9px, 1.2vw, 14px);
    overflow-y: auto; overflow-x: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .26s var(--tut-ease);
}
.tut-surface-body.is-shown { opacity: 1; transform: none; }
.tut-measure .tut-surface-body {
    position: static; opacity: 1; transform: none; transition: none;
    overflow: visible;
}

/* Kart ortalanmış, kenar çubuğu ve balon sola dayalı */
.tut-kind-card .tut-surface-body { text-align: center; align-items: stretch; }
.tut-kind-card .tut-actions      { justify-content: center; margin-top: clamp(14px, 2.2vw, 24px); margin-bottom: 2px; }

/* ── Balon kuyruğu ──────────────────────────────────────────────────── */
.tut-surface-tail {
    position: absolute;
    width: 14px; height: 14px;
    background: var(--tut-bg);
    border: 1px solid var(--tut-border);
    transform: rotate(45deg);
    display: none;
    z-index: 1;
}
.tut-kind-bubble.tut-side-top    .tut-surface-tail { bottom: -8px; margin-left: -7px; border-top: none;    border-left: none;  }
.tut-kind-bubble.tut-side-bottom .tut-surface-tail { top: -8px;    margin-left: -7px; border-bottom: none; border-right: none; }
.tut-kind-bubble.tut-side-left   .tut-surface-tail { right: -8px;  margin-top: -7px;  border-bottom: none; border-left: none;  }
.tut-kind-bubble.tut-side-right  .tut-surface-tail { left: -8px;   margin-top: -7px;  border-top: none;    border-right: none; }
/* Kuyruk yüzeyin dışına taşacağı için o durumda kırpma kapatılır */
.tut-kind-bubble { overflow: visible; }
.tut-kind-bubble .tut-surface-body { border-radius: inherit; }

/* ── Tipografi ──────────────────────────────────────────────────────── */
.tut-title {
    margin: 0;
    font-size: clamp(1.02rem, 1.6vw, 1.32rem);
    font-weight: 700;
    letter-spacing: -.01em;
    flex-shrink: 0;
}
.tut-title.sm { font-size: clamp(.86rem, 1.15vw, .98rem); }
.tut-text {
    margin: 0;
    font-size: clamp(.8rem, 1.05vw, .92rem);
    line-height: 1.6;
    color: var(--tut-muted);
    flex-shrink: 0;
}
.tut-text.sm { font-size: clamp(.76rem, 1vw, .88rem); line-height: 1.55; }
.tut-grow { flex: 1; min-height: 8px; }

/* ── Eylem satırı ───────────────────────────────────────────────────── */
.tut-actions {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; flex-shrink: 0;
    margin-top: 2px;
    min-height: 36px;
}
.tut-actions.tut-center { justify-content: center; }
.tut-spacer { flex: 1; }
.tut-step-label {
    font-size: clamp(.64rem, .85vw, .72rem);
    color: var(--tut-muted);
    opacity: .7;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tut-wait {
    font-size: clamp(.72rem, 1vw, .82rem);
    color: var(--tut-muted);
    animation: tut-blink 1.4s ease-in-out infinite;
}
@keyframes tut-blink { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }

/* ── GIF kutusu — 1080p/720p kaynak yüzey genişliğine küçültülür ────── */
.tut-gif {
    border-radius: clamp(10px, 1.2vw, 14px);
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255, 255, 255, .08);
    line-height: 0;
    flex-shrink: 0;
}
.tut-gif img {
    display: block;
    width: 100%; height: auto;
    max-height: min(42dvh, 320px);
    object-fit: contain;
}
.tut-kind-sidebar .tut-gif img { max-height: min(30dvh, 220px); }

/* ── Kart üst başlık rozeti ─────────────────────────────────────────── */
.tut-card-badge {
    width: 50px; height: 50px;
    margin: 0 auto 6px;
    display: grid; place-items: center;
    border-radius: 15px;
    background: color-mix(in srgb, var(--accent) 18%, rgba(255,255,255,0.05));
    border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--accent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 22%, transparent);
    flex-shrink: 0;
    transition: transform .25s ease, background .25s ease;
}
.tut-card-badge.accent {
    background: color-mix(in srgb, #10b981 20%, rgba(255,255,255,0.05));
    border-color: rgba(16, 185, 129, 0.45);
    color: #10b981;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.22);
}

.tut-done-badge {
    width: 56px; height: 56px; margin: 0 auto;
    display: grid; place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--accent);
    flex-shrink: 0;
}

/* ── Vurgu halkası ──────────────────────────────────────────────────── */
.tut-ring {
    position: fixed; z-index: 2;
    border: 2px solid var(--accent);
    border-radius: 10px;
    pointer-events: none !important;
    animation: tut-ring-pulse 1.6s ease-in-out infinite;
}
@keyframes tut-ring-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
                           0 0 16px color-mix(in srgb, var(--accent) 35%, transparent); }
    50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent),
                           0 0 30px color-mix(in srgb, var(--accent) 60%, transparent); }
}

/* ── Animasyonlu ok ─────────────────────────────────────────────────── */
.tut-arrow {
    position: fixed; z-index: 2;
    width: 56px; height: 28px;
    color: var(--accent);
    pointer-events: none !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .5));
}
.tut-arrow svg { width: 100%; height: 100%; display: block; }
.tut-arrow-left  { transform: rotate(180deg); animation: tut-nudge 1.1s ease-in-out infinite; }
.tut-arrow-right { animation: tut-nudge 1.1s ease-in-out infinite; }
.tut-arrow-down  { transform: rotate(90deg);  animation: tut-nudge 1.1s ease-in-out infinite; }
.tut-arrow-up    { transform: rotate(-90deg); animation: tut-nudge 1.1s ease-in-out infinite; }
/* Öğeler döndürüldüğü için X ekseni ekranda ilgili yöne denk gelir */
@keyframes tut-nudge { 0%, 100% { translate: 0 0; } 50% { translate: -9px 0; } }

/* ── Şeffaf tıklama alanı ───────────────────────────────────────────
   Gerçek düğmenin üstüne oturur; tıklama öğretici katmanında kalır ve
   altındaki düğmeye ULAŞMAZ (6. adımda ayar penceresi açılmasın diye). */
.tut-hotspot {
    position: fixed; z-index: 4;
    background: transparent;
    border: none; padding: 0; margin: 0;
    cursor: pointer;
    border-radius: 10px;
}
.tut-hotspot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Kaydırma kilidi ────────────────────────────────────────────────
   Öğretici anlatırken kullanıcı listeyi kaydıramaz. `overflow: hidden`
   PROGRAMATİK `scrollTo`'yu engellemez — öğretici kendi kaydırmasını
   yapmaya devam eder. */
.tut-noscroll { overflow: hidden !important; }

/* ── Ekleme listesi kilidi (edit öğreticisi 2. adım) ────────────────── */
#widgetAdder.tut-lock-list .wa-item {
    opacity: .32;
    filter: grayscale(.6);
    pointer-events: none;
}
#widgetAdder.tut-lock-list .wa-item.tut-allow {
    opacity: 1;
    filter: none;
    pointer-events: auto;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
#widgetAdder.tut-lock-list .wa-close { opacity: .3; pointer-events: none; }

/* ── Düğmeler ───────────────────────────────────────────────────────── */
.tut-btn {
    padding: clamp(8px, 1vw, 10px) clamp(16px, 1.8vw, 22px);
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit;
    font-size: clamp(.78rem, 1.05vw, .88rem);
    font-weight: 600;
    cursor: pointer;
    transition: all .2s cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
}
.tut-btn:hover { transform: translateY(-1px); }
.tut-btn:active { transform: translateY(0) scale(.98); }
.tut-btn.primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 38%, transparent);
}
.tut-btn.primary:hover {
    filter: brightness(1.12);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 52%, transparent);
}
.tut-btn.ghost {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .14);
    color: var(--tut-text);
}
.tut-btn.ghost:hover {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .24);
}

/* ══════════════════════════════════════════════════════════════════════
   Ayarlar > Öğreticiler
   ══════════════════════════════════════════════════════════════════════ */
.tut-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    margin-bottom: 8px;
}
.tut-row-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    opacity: .85;
}
.tut-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tut-row-title { font-weight: 600; font-size: .88rem; }
.tut-row-desc  { font-size: .74rem; opacity: .55; line-height: 1.4; }
.tut-row-badge {
    flex-shrink: 0;
    font-size: .68rem; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    white-space: nowrap;
}
.tut-row-badge.done { background: rgba(74, 222, 128, .16); color: #4ade80; }

/* ── Dar / alçak pencereler ─────────────────────────────────────────── */
@media (max-width: 560px) {
    .bnt-tut-exit { top: 8px; right: 8px; }
    .tut-row { flex-wrap: wrap; }
}
html[data-vh="xshort"] .tut-surface-body { gap: 8px; }
html[data-vh="xshort"] .tut-gif img { max-height: 34dvh; }
html[data-vh="xshort"] .tut-kind-sidebar .tut-gif img { max-height: 24dvh; }

@media (prefers-reduced-motion: reduce) {
    .tut-surface { transition: opacity .2s ease; }
    .tut-ring, .tut-arrow { animation: none !important; }
}