/* =====================================================================
   Kontrol paneli seçim penceresi — ORTAK dosya (2026-09-24)
   Ekonomik Hosting ve WordPress Hosting sayfalarının ikisi de kullanır;
   bu yüzden hosting-page.css içinden buraya taşındı (tek yerden yönetilsin).
   Sayfa şablonlarında hosting-page.css / wordpress-page.css ile BİRLİKTE
   <link> edilmeli. Kurallar sayfa sarmalayıcısına bağlı DEĞİL: pencere
   document.body altına ekleniyor.
   ===================================================================== */
/* --- Kontrol paneli seçimi (satın al sonrası) ---
   2026-09-23, Murat: "panel seçeneğini satın al dedikten sonra sunsak daha mantıklı
   gibi." Sayfadaki cPanel/DirectAdmin sekmeleri kaldırıldı; müşteri "Hemen başla"ya
   basınca iki panel fiyatlarıyla yan yana gösteriliyor ve seçtiği panelin ürünü
   sepete ekleniyor. Böylece yanlış panelle sipariş verme ihtimali de kalmıyor. */
.vlhp-panel-sec { display: none; }
/* ⚠️ Pencere `document.body`'ye ekleniyor, yani `.vlhp` sarmalayıcısının DIŞINDA
   kalıyor. Değişkenler `.vlhp` üzerinde tanımlı olduğu için burada yeniden
   tanımlanmalı — aksi halde renkler tanımsız kalıp bağlantı rengine düşüyor. */
.vlhp-panel-overlay {
    --hp-ink: #161B33;
    --hp-ink-soft: #454B6B;
    --hp-muted: #7D839F;
    --hp-line: #E6E8F2;
    --hp-purple: #4553C7;
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(16,20,48,.55); backdrop-filter: blur(3px);
    animation: vlhpFade .16s ease;
}
@keyframes vlhpFade { from { opacity: 0 } to { opacity: 1 } }
.vlhp-panel-kutu {
    width: 100%; max-width: 620px; background: #fff; border-radius: 18px;
    padding: 26px 26px 22px; box-shadow: 0 30px 70px rgba(10,16,60,.35);
    animation: vlhpUp .2s ease;
}
@keyframes vlhpUp { from { transform: translateY(10px); opacity: .6 } to { transform: none; opacity: 1 } }
.vlhp-panel-kutu .vlhp-panel-baslik {
    margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--hp-ink); letter-spacing: -.3px;
}
.vlhp-panel-kutu .vlhp-panel-alt { margin: 0 0 20px; font-size: 13.5px; line-height: 1.6; color: var(--hp-muted); }
.vlhp-panel-kutu .vlhp-panel-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vlhp-panel-kart {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 20px 18px; border: 1px solid var(--hp-line); border-radius: 14px;
    text-decoration: none; background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.vlhp-panel-kart:hover {
    border-color: var(--hp-purple); box-shadow: 0 12px 26px rgba(69,83,199,.16);
    transform: translateY(-2px); text-decoration: none;
}
.vlhp-panel-kart .logo { height: 26px; display: flex; align-items: center; }
.vlhp-panel-kart .logo img { height: 26px; width: auto; }
.vlhp-panel-kart .ad { font-size: 15.5px; font-weight: 700; color: var(--hp-ink); }
.vlhp-panel-kart .aciklama { font-size: 12.5px; line-height: 1.55; color: var(--hp-muted); flex: 1 1 auto; }
.vlhp-panel-kart .fiyat { font-size: 22px; font-weight: 800; color: var(--hp-ink); letter-spacing: -.5px; }
.vlhp-panel-kart .fiyat .cycle { font-size: 13px; font-weight: 600; color: var(--hp-muted); margin-left: 2px; }
.vlhp-panel-kart .fiyat .old-price { margin-left: 7px; font-size: 13px; font-weight: 600; color: #B6BBD2; text-decoration: line-through; }
.vlhp-panel-kart .devam {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 42px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
    background: #F2F4FC; color: var(--hp-purple); transition: background .15s, color .15s;
}
.vlhp-panel-kart:hover .devam { background: var(--hp-purple); color: #fff; }
.vlhp-panel-kart .indirim {
    position: absolute; top: -10px; right: 14px;
    padding: 4px 10px; border-radius: 999px; background: #E8384F; color: #fff;
    font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
}
/* "Vazgeç" yerine nereye dönüleceğini söyleyen, daha kibar bir bağlantı
   (2026-09-23, Murat) */
.vlhp-panel-vazgec {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 20px auto 0; padding: 9px 20px; border-radius: 999px;
    background: none; border: 1px solid transparent; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--hp-muted);
    transition: color .15s, background .15s, border-color .15s;
}
.vlhp-panel-vazgec i { font-size: 11px; transition: transform .15s; }
.vlhp-panel-vazgec:hover { color: var(--hp-ink); background: #F5F6FC; border-color: var(--hp-line); }
.vlhp-panel-vazgec:hover i { transform: translateX(-2px); }