/* =====================================================================
   cPanel Hosting / DirectAdmin Hosting sayfaları (2026-09-28, SEO Faz 2)
   Ortak şablon: templates/verilink/includes/panel-hosting.tpl
   Temel görünüm hosting-page.css'ten (.vlhp-*) gelir; burada yalnızca bu iki
   sayfaya özgü bloklar var (.vlpn-*). Paket kartları paket-kart.css'te —
   burada yeniden tanımlanmaz (Kurallar.md).
   ===================================================================== */

/* Hero maketindeki panel logosu (Ekonomik sayfasındaki hız kadranının yerine) */
.vlpn-panel-logo {
    display: flex; align-items: center; gap: 16px;
}
.vlpn-panel-logo .logo {
    flex: 0 0 auto; width: 84px; height: 84px; border-radius: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--hp-line);
    box-shadow: 0 6px 18px rgba(22, 27, 51, .06);
}
.vlpn-panel-logo .logo img { width: 52px; height: 52px; object-fit: contain; }
.vlpn-panel-logo strong { display: block; font-size: 15.5px; font-weight: 800; color: var(--hp-ink); }
.vlpn-panel-logo span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--hp-muted); }

/* "cPanel hosting nedir?" — kısa tanım kutusu (arama motorları ve yapay zekâ
   özetleri bu tür net tanımları alıntılar; metin uydurma iddia içermez) */
.vlpn-nedir {
    max-width: 880px; margin: 0 auto; padding: 26px 28px;
    border-radius: var(--hp-radius); background: #fff; border: 1px solid var(--hp-line);
}
.vlpn-nedir h2 { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: var(--hp-ink); }
.vlpn-nedir p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--hp-ink-soft); }
.vlpn-nedir p + p { margin-top: 10px; }

/* Tanım kutusu + SSS alt alta tek blok: aradaki boşluk daraltılır */
.vlpn-nedir-bolum { padding-bottom: 12px; }
.vlpn-sss-bolum { padding-top: 36px; }

/* "Neler yaparsınız" ızgarasında Font Awesome ikonları (hosting-page.css img bekliyor) */
.vlhp-neden-item .ikon i { font-size: 20px; color: var(--hp-purple); }

/* cPanel mi DirectAdmin mi? — iki sütunlu karşılaştırma */
.vlpn-karsi {
    max-width: 960px; margin: 0 auto;
    border: 1px solid var(--hp-line); border-radius: var(--hp-radius);
    background: #fff; overflow: hidden;
}
.vlpn-karsi-satir {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.vlpn-karsi-satir + .vlpn-karsi-satir { border-top: 1px solid var(--hp-line); }
.vlpn-karsi-satir > div { padding: 14px 18px; font-size: 14px; line-height: 1.55; color: var(--hp-ink-soft); min-width: 0; }
.vlpn-karsi-satir > div:first-child { font-weight: 700; color: var(--hp-ink); }
.vlpn-karsi-satir.baslik > div { background: var(--hp-bg-soft); font-weight: 800; color: var(--hp-ink); }
.vlpn-karsi-satir.baslik img { width: 22px; height: 22px; margin-right: 8px; vertical-align: -5px; }
/* Bu sayfanın paneli vurgulu */
.vlpn-karsi-satir > .bu { background: rgba(69, 83, 199, .05); }
.vlpn-karsi-satir.baslik > .bu { background: rgba(69, 83, 199, .10); }
.vlpn-karsi-alt { max-width: 960px; margin: 14px auto 0; text-align: center; font-size: 14px; color: var(--hp-muted); }
.vlpn-karsi-alt a { color: var(--hp-purple); font-weight: 700; }

/* "Diğer paketler": 6 kart, hosting-page.css'teki auto-fit 4+2 dağıtıyordu → 3×2 */
.vlpn .vlhp-diger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
    .vlpn .vlhp-diger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .vlpn-nedir { padding: 20px; }
    .vlpn-karsi-satir { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    /* Telefonda satır başlığı tam genişlik, iki panel yan yana */
    .vlpn-karsi-satir > div:first-child { grid-column: 1 / -1; padding-bottom: 4px; }
    .vlpn-karsi-satir.baslik > div:first-child { display: none; }
    .vlpn-karsi-satir > div { padding: 10px 14px; font-size: 13.5px; }
    .vlpn .vlhp-diger { grid-template-columns: minmax(0, 1fr); }
}