/* ============================================================
   🪟 VK-CONFIRM — ORTAK OYUN İÇİ ONAY · UYARI · GİRDİ PENCERESİ
   ============================================================
   Tarayıcının kendi `confirm` · `alert` · `prompt` kutuları yerine
   oyunun kendi penceresi kullanılır (tek yerden yönetilir).

   • Markup'ı `assets/vk-confirm.js` JS ile kurar → sayfada HTML GEREKMEZ.
   • Renkler tema değişkenlerinden gelir (`assets/themes.css`);
     değişken tanımsızsa (ör. yönetim paneli) yedek renk devreye girer.
   • z-index 9600: oyun modalı (260) · bildirim/toast (300) · pet modalı
     (9000) ve etkinlik çekmecesi (9500) ÜSTÜNDE kalır — 💬 sohbet
     baloncuğunun (2147482000) ALTINDA.
   ============================================================ */

.vk-cf {
    position: fixed; inset: 0; z-index: 9600;
    display: none; place-items: center; padding: 20px;
    background: var(--p-overlay, rgba(4, 8, 16, .74));
    backdrop-filter: blur(3px);
}
.vk-cf.show { display: grid; }

.vk-cf-box {
    width: 100%; max-width: 450px; max-height: 84vh; overflow: auto;
    padding: 18px; border-radius: 18px;
    background: linear-gradient(180deg, var(--p-surface, #101827) 0%, var(--p-surface-deep, #0c1322) 100%);
    border: 1px solid var(--p-border, rgba(148, 163, 184, .14));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
    color: var(--p-text-strong, #eef2f8);
    animation: vkCfIn .16s ease-out;
}
@keyframes vkCfIn {
    from { transform: translateY(8px) scale(.985); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.vk-cf-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-weight: 800; margin-bottom: 14px; line-height: 1.35;
}
.vk-cf-head span { min-width: 0; }
.vk-cf-head button {
    flex: none; background: none; border: none; padding: 0;
    color: var(--p-muted, #93a4c0); font-size: 18px; line-height: 1;
    cursor: pointer; font-family: inherit;
}
.vk-cf-head button:hover { color: var(--p-text-strong, #fff); }

/* ---- metin · not ---- */
.vk-cf-text { font-size: 13px; line-height: 1.65; color: var(--p-text-soft, #cfd8e8); margin-bottom: 14px; }
.vk-cf-text:last-child { margin-bottom: 0; }
.vk-cf-note { font-size: 11.5px; line-height: 1.55; color: var(--p-muted-2, #64748b); margin-bottom: 14px; }

/* ---- bilgi satırları (satış onay penceresindeki `.sl-row` görünümü) ---- */
.vk-cf-rows { display: grid; gap: 7px; margin-bottom: 14px; }
.vk-cf-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 11px; font-size: 13px;
    background: var(--p-card-3, rgba(4, 8, 16, .45));
    border: 1px solid var(--p-border, rgba(148, 163, 184, .14));
}
.vk-cf-row .vk-ic { font-size: 20px; flex: none; }
.vk-cf-row .vk-n  { flex: 1; min-width: 0; font-weight: 700; }
.vk-cf-row .vk-q  { font-weight: 800; color: var(--p-sky-text, #7dd3fc); white-space: nowrap; }
.vk-cf-row .vk-p  { font-weight: 800; color: var(--p-warn-text, #fbbf24); white-space: nowrap; text-align: right; }

/* ---- girdi kutusu (prompt yerine) ---- */
.vk-cf-in {
    display: block; width: 100%; box-sizing: border-box;
    padding: 11px 12px; margin-bottom: 14px; border-radius: 11px;
    font-family: inherit; font-size: 13px;
    background: var(--p-card-3, rgba(4, 8, 16, .45));
    border: 1px solid var(--p-border, rgba(148, 163, 184, .14));
    color: var(--p-text-strong, #eef2f8);
}
.vk-cf-in:focus { outline: none; border-color: var(--p-sky-text, #7dd3fc); }
.vk-cf-in::placeholder { color: var(--p-muted-2, #64748b); }

/* ---- düğmeler (sayfa stilinden BAĞIMSIZ: panelde de aynı görünür) ---- */
.vk-cf-acts { display: flex; gap: 9px; }
.vk-cf-acts .vk-btn {
    flex: 1; padding: 11px 12px; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 12.5px; font-weight: 800;
    letter-spacing: .4px; white-space: nowrap;
    background: var(--p-card-3, rgba(4, 8, 16, .45));
    border: 1px solid var(--p-border, rgba(148, 163, 184, .14));
    color: var(--p-text-soft, #cfd8e8);
}
.vk-cf-acts .vk-btn:hover { filter: brightness(1.15); }
.vk-cf-acts .vk-btn.ok {
    background: linear-gradient(180deg, #22c55e, #15803d);
    border-color: rgba(34, 197, 94, .55); color: #04240f;
}
/* ⚠️ `.danger` KURALI `.ok`'tan SONRA gelmeli (aynı özgüllük → kırmızı kazanır) */
.vk-cf-acts .vk-btn.danger {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    border-color: rgba(239, 68, 68, .55); color: #fff;
}
/* ⏳ KİLİT: pencere açıldıktan sonraki ilk 400 ms ONAY düğmesi devre dışı
   (yanlışlıkla onay koruması · `vk-confirm.js` → `VK_CONFIRM_LOCK_MS`) */
.vk-cf-acts .vk-btn[disabled] {
    opacity: .5; filter: grayscale(.5); cursor: default; pointer-events: none;
}

/* 📱 dar ekranda düğmeler alt alta (ONAY üstte kalır) */
@media (max-width: 430px) { .vk-cf-acts { flex-direction: column-reverse; } }