/* ============================================================
   🚀 SÜRÜM NOTLARI MODALI (site geneli — tek dosya)
   ------------------------------------------------------------
   Kullanıldığı yerler: 🏠 landing · 🌾 Çiftlik · ⚔️ Efsaneler
   Tetikleyici: <button data-updates-open> (herhangi bir öğe olabilir)
   Veri       : public/api/updates.php  ·  JS: assets/updates.js
   Renkler    : portal değişkenleri VARSA onları kullanır (fallback'li)
   ============================================================ */

.vk-upd-back {
    position: fixed; inset: 0; z-index: 9998;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(2, 6, 23, .74);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    animation: vkUpdFade .18s ease both;
}
.vk-upd-back[hidden] { display: none; }

.vk-upd {
    position: relative; width: 100%; max-width: 640px;
    /* ⚠️ Mobil tarayıcıda `vh` GÖRÜNÜR yükseklikten büyüktür (adres çubuğu) →
       alt kenara yaslı panelin ÜSTÜ (başlık + ✕) ekrandan çıkıyordu.
       Bu yüzden `dvh` (görsel yükseklik) öncelikli; `vh` eski tarayıcı yedeği. */
    max-height: 86vh; max-height: 86dvh;
    min-height: 0; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--p-panel, #0f1720);
    border: 1px solid var(--p-border, rgba(148, 163, 184, .22));
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, .58);
    color: var(--p-text-strong, #e2e8f0);
    font-family: inherit; text-align: left;
    animation: vkUpdIn .22s cubic-bezier(.22, .68, .32, 1) both;
}

.vk-upd-head {
    display: flex; align-items: flex-start; gap: 12px;
    flex: 0 0 auto;                       /* başlık kırpılmaz → ✕ her durumda görünür */
    padding: 16px 18px 13px;
    border-bottom: 1px solid var(--p-border, rgba(148, 163, 184, .22));
}
.vk-upd-head .ic { font-size: 22px; line-height: 1; }
.vk-upd-head .tx { flex: 1 1 auto; min-width: 0; }
.vk-upd-head h3 { margin: 0 0 3px; font-size: 17px; font-weight: 800; letter-spacing: .2px; }
.vk-upd-head p  { margin: 0; font-size: 12.5px; color: var(--p-muted, #94a3b8); }

.vk-upd-x {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(148, 163, 184, .12); color: var(--p-text-soft, #cbd5e1);
    border: 1px solid var(--p-border, rgba(148, 163, 184, .22));
    font-size: 17px; line-height: 1; cursor: pointer; font-family: inherit;
    transition: background .18s, color .18s;
}
.vk-upd-x:hover { background: rgba(239, 68, 68, .18); color: #fca5a5; }

.vk-upd-body {
    overflow-y: auto; padding: 14px 18px 18px;
    min-height: 0;                        /* flex öğesi kısalabilsin → gövde panelden taşmaz */
    overscroll-behavior: contain;         /* kaydırma arka sayfaya sızmasın */
    display: flex; flex-direction: column; gap: 12px;
    -webkit-overflow-scrolling: touch;
}
/* ---------- sürüm kartı ---------- */
.vk-upd-item {
    border: 1px solid var(--p-border, rgba(148, 163, 184, .22));
    border-radius: 14px; padding: 13px 15px;
    background: rgba(148, 163, 184, .06);
}
.vk-upd-item.latest {
    background: linear-gradient(135deg, rgba(34, 197, 94, .13), rgba(56, 189, 248, .09));
    border-color: rgba(34, 197, 94, .32);
}
.vk-upd-item-top {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.vk-upd-ver {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; font-weight: 800; letter-spacing: .5px;
    padding: 3px 9px; border-radius: 999px;
    background: rgba(56, 189, 248, .16); color: var(--p-sky-text, #7dd3fc);
    border: 1px solid rgba(56, 189, 248, .34);
}
.vk-upd-kind {
    font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
    background: rgba(34, 197, 94, .14); color: var(--p-green-text, #86efac);
    border: 1px solid rgba(34, 197, 94, .3);
}
.vk-upd-date { font-size: 11.5px; color: var(--p-muted, #94a3b8); margin-left: auto; }
.vk-upd-item h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 800; overflow-wrap: break-word; overflow-wrap: anywhere; }
.vk-upd-item ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.vk-upd-item li {
    position: relative; padding-left: 16px;
    font-size: 12.8px; line-height: 1.55; color: var(--p-text-soft, #cbd5e1);
    overflow-wrap: break-word; overflow-wrap: anywhere;   /* uzun URL/kimlik yatay taşmasın */
}
.vk-upd-item li::before {
    content: ''; position: absolute; left: 3px; top: 7px;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--p-green, #22c55e); opacity: .75;
}
.vk-upd-item b { color: var(--p-text-strong, #f1f5f9); }

/* ---------- durumlar ---------- */
.vk-upd-load {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 26px 0; color: var(--p-muted, #94a3b8); font-size: 13px;
}
.vk-upd-spin {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, .3); border-top-color: var(--p-green, #22c55e);
    animation: vkUpdSpin .8s linear infinite;
}
.vk-upd-empty { text-align: center; padding: 28px 10px; color: var(--p-muted, #94a3b8); font-size: 13px; }
.vk-upd-empty .big { font-size: 34px; display: block; margin-bottom: 8px; }

/* ---------- tetikleyici etiket (BETA vX.Y.Z) ---------- */
.vk-upd-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
    color: var(--p-muted, #94a3b8); background: rgba(148, 163, 184, .12);
    border: 1px solid var(--p-border, rgba(148, 163, 184, .22));
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.vk-upd-tag:hover {
    color: var(--p-green-text, #86efac);
    border-color: rgba(34, 197, 94, .42);
    background: rgba(34, 197, 94, .14);
}

body.vk-upd-lock { overflow: hidden; }

@keyframes vkUpdFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vkUpdIn   { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes vkUpdSpin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    /* 📱 BOTTOM SHEET: alt kenara yaslı tam genişlik.
       `dvh` → panel GERÇEK görünür yüksekliğe uyar (üst başlık ekrandan çıkmaz);
       `env(safe-area-inset-bottom)` → son madde home-indicator'ın altında kalmaz. */
    .vk-upd-back { padding: 0; align-items: flex-end; }
    .vk-upd { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 18px 18px 0 0; }
    .vk-upd-head { padding: 14px 14px 12px; }
    .vk-upd-body { padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
    .vk-upd-date { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vk-upd-back, .vk-upd, .vk-upd-spin { animation: none; }
}