/* ─────────────────────────────────────────────────────
   BNT Welcome & Tutorial Overlay
───────────────────────────────────────────────────── */
#welcomeOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 9, 14, 0.62);
    backdrop-filter: blur(22px) saturate(1.1);
    -webkit-backdrop-filter: blur(22px) saturate(1.1);
    opacity: 0;
    transition: opacity .35s ease, background .5s ease, backdrop-filter .5s ease;
}
#welcomeOverlay.visible { opacity: 1; }
#welcomeOverlay.closing { opacity: 0; pointer-events: none; }
#welcomeOverlay[hidden]  { display: none !important; }
/* Yeni sekme intro: tam siyah başlangıç, morph animasyonuyla solacak */
#welcomeOverlay.w-intro-black {
    background: #000 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: none !important;
}
#welcomeOverlay.w-intro-black.visible {
    opacity: 1;
}
#welcomeOverlay.w-intro-black .w-modal {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ── Panel — VARSAYILAN: ORTALANMIŞ CAM PENCERE (glassmorphism) ─────
   Eskiden tam ekran/kenarlıksızdı; artık ekranın ortasında yüzen, yuvarlak
   köşeli, buzlu-cam bir kart. Preview (sol kenar çubuğu) ve spotlight modları
   aşağıda bu karttan kendi biçimlerine MORPH olur. */
.w-modal {
    position: fixed;
    left: 50%; top: 50%;
    width: min(460px, calc(100vw - 40px));
    height: auto;
    max-height: calc(100vh - 40px);
    border-radius: 28px;
    background: rgba(20, 20, 28, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(40px) saturate(1.35);
    -webkit-backdrop-filter: blur(40px) saturate(1.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 34px 26px;
    overflow-x: hidden;
    overflow-y: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.96);
    transition: left .55s cubic-bezier(.16,1,.3,1), top .55s cubic-bezier(.16,1,.3,1),
                width .55s cubic-bezier(.16,1,.3,1), height .55s cubic-bezier(.16,1,.3,1),
                max-height .55s cubic-bezier(.16,1,.3,1),
                border-radius .5s ease, background .45s ease, border-color .45s ease,
                box-shadow .45s ease, opacity .4s ease,
                transform .45s cubic-bezier(.16,1,.3,1);
}
#welcomeOverlay.visible .w-modal { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ── Mode: PREVIEW (stil sayfası) — SOL kenar çubuğu (pencere modu) ── */
/* Tam ekrandan → 20px kenar boşluklu, yuvarlak köşeli, tepeden-tabana kenar
   çubuğuna morph olur; arka plan blur kalkar → sağda canlı önizleme. */
#welcomeOverlay.w-mode-preview {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
#welcomeOverlay.w-mode-preview.visible .w-modal {
    left: 20px; top: 20px;
    transform: translate(0, 0) scale(1);   /* ortalanmış karttan sol kenara otur */
    width: min(430px, 42vw);
    height: calc(100vh - 40px);
    max-height: none;
    border-radius: 26px;
    padding: 30px 26px;
    background: rgba(15,15,21,.94);
    border-color: rgba(255,255,255,.12);
    box-shadow: 0 30px 90px rgba(0,0,0,.6);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    justify-content: flex-start;
}
#welcomeOverlay.w-mode-preview .w-slide-area {
    max-width: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
#welcomeOverlay.w-mode-preview .w-footer { max-width: none; margin-top: 16px; }

/* ── Mode: SPOTLIGHT (ayarlar sayfası) — tam ekran koyu + köşe aydınlık ── */
/* Panel tam ekran/şeffaf kalır; koyuluğu `.w-spotlight` box-shadow'u sağlar,
   böylece arka plan içeriği (widget'lar) sızıp üst üste binmez. */
#welcomeOverlay.w-mode-spotlight {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
/* Panel şeffaf olur ki spotlight koyusu + delik (gerçek butonlar) görünsün */
#welcomeOverlay.w-mode-spotlight.visible .w-modal {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── Slide area ─────────────────────────────────────── */
.w-slide-area {
    width: 100%;
    max-width: 500px;
    min-height: 300px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
}
.w-slide {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: wSlideIn .3s cubic-bezier(.16,1,.3,1) both;
}
@keyframes wSlideIn {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: translateX(0); }
}
.w-slide.slide-back { animation: wSlideInBack .3s cubic-bezier(.16,1,.3,1) both; }
@keyframes wSlideInBack {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Icon ───────────────────────────────────────────── */
.w-icon {
    width: 90px;
    height: 90px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent, #6b6bff), color-mix(in srgb, var(--accent,#6b6bff) 55%, #b366ff));
    box-shadow: 0 10px 36px color-mix(in srgb, var(--accent,#6b6bff) 45%, transparent);
    margin-bottom: 24px;
    font-size: 2.4rem;
    color: #fff;
    flex-shrink: 0;
}
.w-icon svg { stroke: #fff; fill: none; }

/* ── Text ───────────────────────────────────────────── */
.w-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: rgba(255,255,255,.95);
    margin: 0 0 10px;
    letter-spacing: -.025em;
    line-height: 1.2;
}
.w-desc {
    font-size: .97rem;
    color: rgba(255,255,255,.58);
    line-height: 1.75;
    margin: 0 0 20px;
    max-width: 370px;
}
.w-preview-hint {
    font-size: .82rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--accent,#7d8cff) 55%, #fff);
    margin: 0 0 14px;
}

/* ── Language picker ────────────────────────────────── */
.w-lang-label {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.35);
    margin-bottom: 10px;
}
.w-lang-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}
.w-lang-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.65);
    font-size: .84rem;
    cursor: pointer;
    transition: all .18s;
    font-family: inherit;
}
.w-lang-opt:hover {
    border-color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.1);
    color: #fff;
}
.w-lang-opt.active {
    border-color: var(--accent, #6b6bff);
    background: color-mix(in srgb, var(--accent,#6b6bff) 22%, transparent);
    color: #fff;
}
.w-lang-opt img { width: 18px; height: 18px; border-radius: 3px; }

/* ── Feature highlight row ──────────────────────────── */
.w-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    text-align: left;
    margin-top: 4px;
}
.w-tip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    font-size: .88rem;
    color: rgba(255,255,255,.72);
    animation: wFadeUp .3s ease both;
}
.w-tip:nth-child(2) { animation-delay: .06s; }
.w-tip:nth-child(3) { animation-delay: .12s; }
@keyframes wFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.w-tip-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent,#6b6bff) 18%, transparent);
    color: var(--accent, #6b6bff);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.w-tip-icon svg { stroke: currentColor; fill: none; }

/* ── Stil sayfası (sol kenar çubuğu içeriği) ─────────── */
.w-style-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
}
.w-style-heading {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(255,255,255,.42);
    margin: 12px 0 4px;
}
.w-style-heading:first-child { margin-top: 2px; }

.w-tpl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    width: 100%;
}
.w-tpl-card {
    position: relative;
    height: 52px;
    border-radius: 11px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .18s, border-color .18s, box-shadow .18s;
    overflow: hidden;
    padding: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.w-tpl-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25);
    transition: background 0.2s;
}
.w-tpl-card:hover::after { background: rgba(0,0,0,0); }
.w-tpl-card.active {
    border-color: var(--accent, #6b6bff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 0 2px color-mix(in srgb, var(--accent,#6b6bff) 40%, transparent);
}
.w-tpl-card.active::after { background: rgba(0,0,0,0); }

/* Widget teması chip'leri */
.w-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.w-chip {
    padding: 6px 13px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    font-size: .8rem;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s;
}
.w-chip:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; }
.w-chip.active {
    border-color: var(--accent, #6b6bff);
    background: color-mix(in srgb, var(--accent,#6b6bff) 24%, transparent);
    color: #fff;
}

/* Vurgu rengi swatch'ları */
.w-accent-row { display: flex; flex-wrap: wrap; gap: 9px; padding-bottom: 4px; }
.w-accent {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.18);
    cursor: pointer;
    padding: 0;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.w-accent:hover { transform: scale(1.14); }
.w-accent.active {
    border-color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 0%, transparent), 0 0 10px rgba(0,0,0,.4);
    transform: scale(1.1);
}

/* ── Chrome-kurulum aksiyon butonları ───────────────── */
.w-chrome-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 6px;
}
.w-chrome-actions .w-btn { width: 100%; }
.w-chrome-note {
    font-size: .8rem;
    line-height: 1.55;
    color: rgba(255,255,255,.52);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 9px 13px;
    margin: 0;
    text-align: center;
}
/* Yeni sekme geri sayımı — büyük SVG çarkı */
.w-countdown-wrap {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 12px auto 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.w-cd-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* 12 o'clock start */
}
.w-cd-bg {
    fill: none;
    stroke: rgba(255,255,255,.08);
    stroke-width: 7;
}
.w-cd-arc {
    fill: none;
    stroke: var(--accent, #7d8cff);
    stroke-width: 7;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.9s linear;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent,#7d8cff) 70%, transparent));
}
.w-cd-num {
    font-size: 3.2rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -.04em;
    line-height: 1;
    text-shadow: 0 0 24px color-mix(in srgb, var(--accent,#7d8cff) 55%, transparent);
    animation: wCdPulse 1s ease-in-out infinite;
}
@keyframes wCdPulse { 0%,100% { transform: scale(1); opacity:1; } 50% { transform: scale(1.06); opacity:.88; } }
.w-cd-label {
    font-size: .88rem;
    color: rgba(255,255,255,.52);
    text-align: center;
    margin: 2px 0 10px;
    line-height: 1.5;
}
/* Eski küçük geri sayım (yedek) */
.w-countdown {
    width: 74px; height: 74px;
    margin: 2px auto 6px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; font-weight: 700; color: #fff;
    background: color-mix(in srgb, var(--accent,#7d8cff) 22%, transparent);
    border: 2px solid var(--accent, #7d8cff);
    box-shadow: 0 0 26px color-mix(in srgb, var(--accent,#7d8cff) 40%, transparent);
    animation: wCountPulse 1s ease-in-out infinite;
}
@keyframes wCountPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }

/* ── Spotlight (ayarlar sayfası) ────────────────────── */
.w-spotlight {
    position: fixed;
    border-radius: 16px;
    box-shadow:
        0 0 0 9999px rgba(6,6,10,.975),
        0 0 0 2px color-mix(in srgb, var(--accent,#7d8cff) 75%, #fff) inset,
        0 0 34px 6px color-mix(in srgb, var(--accent,#7d8cff) 45%, transparent);
    pointer-events: none;
    animation: wPulse 1.8s ease-in-out infinite;
    transition: all .35s ease;
}
@keyframes wPulse {
    0%,100% { box-shadow: 0 0 0 9999px rgba(6,6,10,.975), 0 0 0 2px color-mix(in srgb, var(--accent,#7d8cff) 75%, #fff) inset, 0 0 30px 4px color-mix(in srgb, var(--accent,#7d8cff) 35%, transparent); }
    50%     { box-shadow: 0 0 0 9999px rgba(6,6,10,.975), 0 0 0 2px color-mix(in srgb, var(--accent,#7d8cff) 90%, #fff) inset, 0 0 42px 10px color-mix(in srgb, var(--accent,#7d8cff) 55%, transparent); }
}
.w-hotspot {
    position: fixed;
    z-index: 100001;               /* tam ekran panelin üstünde — tıklama alsın */
    border: none;
    background: transparent;
    border-radius: 16px;
    cursor: pointer;
    padding: 0;
}

/* ── Yönlendirici oklar ─────────────────────────────── */
.w-arrow {
    position: fixed;
    z-index: 100002;
    display: flex;
    flex-direction: column;      /* label üstte, ok altta (aşağı oklar için) */
    align-items: center;
    gap: 5px;
    pointer-events: none;
    translate: -50% 0;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent,#7d8cff) 55%, transparent))
            drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.w-arrow-graphic {
    width: 80px;
    height: 80px;
    display: block;
    color: #fff;                 /* satır içi SVG → beyaz, koyu üstünde net */
    flex-shrink: 0;
}
.w-arrow-graphic svg  { width: 100%; height: 100%; display: block; }
/* Kullanıcının koyacağı yeni ok dosyası hangi renk/çizim tekniğini kullanırsa
   kullansın görünür olsun diye stroke/fill'i currentColor'a zorla (none korunur). */
.w-arrow-graphic svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.w-arrow-graphic svg [fill]:not([fill="none"]):not([fill="transparent"]) { fill: currentColor; }
.w-arrow-graphic svg path { stroke: currentColor; }
.w-arrow-label {
    font-size: .92rem;
    font-weight: 600;
    color: #fff;
    background: color-mix(in srgb, var(--accent,#7d8cff) 90%, #000);
    padding: 5px 13px;
    border-radius: 9px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
/* Yön döndürmesi — temel görsel AŞAĞI bakar (arrow.svg) */
.w-arrow-down       .w-arrow-graphic { transform: rotate(0deg); }
.w-arrow-up         .w-arrow-graphic { transform: rotate(180deg); }
.w-arrow-left       .w-arrow-graphic { transform: rotate(90deg); }
.w-arrow-right      .w-arrow-graphic { transform: rotate(-90deg); }
.w-arrow-down-right .w-arrow-graphic { transform: rotate(-45deg); }
.w-arrow-right      { flex-direction: row; }   /* label solda, ok sağda */
/* Salınım (yön döndürmesi child'da olduğu için container'da güvenli) */
.w-arrow-down, .w-arrow-down-right, .w-arrow-up { animation: wArrowBobY 1.1s ease-in-out infinite; }
.w-arrow-right, .w-arrow-left                   { animation: wArrowBobX 1.1s ease-in-out infinite; }
@keyframes wArrowBobY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
@keyframes wArrowBobX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(9px); } }
/* Chrome-kurulum sabit konumlu oklar (tarayıcı köşesine göre, çözünürlükten bağımsız) */
/* "Chrome'u özelleştir" düğmesi sağ-alt köşede → ok tam AŞAĞI bakar, üstünde durur */
.w-arrow-customize { right: 30px; bottom: 48px; left: auto; top: auto; translate: 0 0; }
/* "Altbilgi" düğmesi Chrome panelinin ALTINDA (~752px, panel yukarıdan aşağı dizilir);
   bu sabit ofset 1080p'de de 1440p'de de toggle'a denk gelir (fraksiyon değil, sabit px). */
.w-arrow-footer    { right: 55px; top: min(752px, calc(100vh - 66px)); left: auto; translate: 0 -50%; }
/* "ask" adımı: ekran altına yayılmış, alttaki bar'ı gösteren oklar (3.png) */
.w-arrow-ask       { bottom: 54px; top: auto; }

/* ── Footer ─────────────────────────────────────────── */
.w-footer {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
}
.w-dots { display: flex; gap: 7px; align-items: center; }
.w-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all .2s;
}
.w-dot.active {
    background: var(--accent, #6b6bff);
    width: 22px;
    border-radius: 4px;
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent,#6b6bff) 60%, transparent);
}
.w-actions { display: flex; gap: 8px; align-items: center; }

/* ── Buttons ────────────────────────────────────────── */
.w-btn {
    padding: 9px 20px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all .18s;
}
.w-btn.primary {
    background: var(--accent, #6b6bff);
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent,#6b6bff) 40%, transparent);
}
.w-btn.primary:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent,#6b6bff) 50%, transparent);
}
.w-btn.primary.large { padding: 11px 28px; font-size: .95rem; }
.w-btn.secondary {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.1);
}
.w-btn.secondary:hover { background: rgba(255,255,255,.14); color: #fff; }
.w-btn.ghost {
    background: transparent;
    color: rgba(255,255,255,.4);
    border: none;
    padding: 9px 12px;
}
.w-btn.ghost:hover { color: rgba(255,255,255,.7); }
.w-btn[hidden] { display: none !important; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
    /* Dar ekranda stil kenar çubuğu daha geniş (neredeyse tam genişlik) */
    #welcomeOverlay.w-mode-preview.visible .w-modal { width: calc(100vw - 40px); }
}
@media (max-width: 480px) {
    .w-modal { padding: 36px 20px; }
    .w-title { font-size: 1.3rem; }
    .w-icon  { width: 72px; height: 72px; font-size: 2rem; border-radius: 20px; }
    .w-btn   { padding: 8px 14px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
    .w-arrow, .w-spotlight { animation: none !important; }
}