/* =====================================================================
   Ücretsiz araçlar (/araclar/…) — ortak stil (2026-09-28)
   İlk araç: pages/araclar-hosting-sorgulama.tpl. Hero Kurallar.md tarifine göre: saf dikey degrade.
   ===================================================================== */
.vlar-hero, .vlar-bolum { --ar-ink: #161B33; --ar-soft: #454B6B; --ar-muted: #7D839F; --ar-line: #E6E8F2; --ar-purple: #4553C7; --ar-bg: #F7F8FC; }
.vlar-hero { background: linear-gradient(180deg, #4553C7 0%, #3D4ABB 42%, #2E3A9E 100%); color: #fff; padding: 56px 0 64px; text-align: center; }
.vlar-hero .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.vlar-hero h1 { margin: 16px auto 10px; max-width: 860px; font-size: 40px; line-height: 1.18; font-weight: 800; color: #fff; }
.vlar-hero .lead { margin: 0 auto; max-width: 660px; font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.88); }
.vlar-ara { position: relative; display: flex; max-width: 640px; margin: 26px auto 0; background: #fff; border-radius: 14px; box-shadow: 0 14px 34px rgba(18,24,70,.22); padding: 6px; }
.vlar-ara > i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ar-muted); }
.vlar-ara input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 12px 12px 12px 44px; font-size: 16px; color: var(--ar-ink); }
.vlar-ara button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; background: var(--ar-purple); color: #fff; font-weight: 700; font-size: 15px; padding: 0 22px; cursor: pointer; white-space: nowrap; }
.vlar-ara button:hover { background: #2E3A9E; }
.vlar-ara button:disabled { opacity: .7; cursor: default; }
.vlar-not { margin: 12px auto 0; font-size: 13px; color: rgba(255,255,255,.72); }

.vlar-bolum { padding: 44px 0 56px; }
.vlar-bolum.acik { background: var(--ar-bg); }
.vlar-bas { text-align: center; margin: 36px 0 18px; }
.vlar-bas h2 { margin: 0; font-size: 26px; font-weight: 800; color: var(--ar-ink); }
.vlar-sss { max-width: 880px; margin: 0 auto; }
.vlar-diger { text-align: center; margin: 22px 0 0; font-weight: 700; }
.vlar-diger a { color: var(--ar-purple); }

/* Sonuç kartı */
.vlar-sonuc { max-width: 880px; margin: 0 auto 26px; background: #fff; border: 1px solid var(--ar-line); border-radius: 18px; overflow: hidden; }
.vlar-sonuc .bas { padding: 22px 26px; border-bottom: 1px solid var(--ar-line); }
.vlar-sonuc .bas .alan { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ar-muted); }
.vlar-sonuc .bas h2 { margin: 6px 0 6px; font-size: 22px; font-weight: 800; color: var(--ar-ink); line-height: 1.3; overflow-wrap: anywhere; }
.vlar-sonuc .bas p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--ar-soft); }
.vlar-sonuc .bas.verilink { background: #E8F8F0; }
.vlar-sonuc .bas.cdn { background: #FFF6E5; }
.vlar-sonuc .bas.kayit-yok { background: var(--ar-bg); }
.vlar-sonuc .satirlar { display: grid; }
.vlar-sonuc .satir { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; padding: 13px 26px; border-bottom: 1px solid var(--ar-line); }
.vlar-sonuc .satir:last-child { border-bottom: 0; }
.vlar-sonuc .etiket { font-size: 14px; color: var(--ar-muted); }
.vlar-sonuc .deger { font-size: 14.5px; font-weight: 700; color: var(--ar-ink); overflow-wrap: anywhere; }
.vlar-sonuc .alt { padding: 14px 26px; background: var(--ar-bg); border-top: 1px solid var(--ar-line); font-weight: 700; font-size: 14px; }
.vlar-sonuc .alt a { color: var(--ar-purple); }
/* SSL aracı durum renkleri */
.vlar-sonuc .bas.iyi { background: #E8F8F0; }
.vlar-sonuc .bas.uyari { background: #FFF6E5; }
.vlar-sonuc .bas.kotu { background: #FDECEC; }
.vlar-sonuc .bas.notr { background: var(--ar-bg); }
.vlar-iyi { color: #0E9F6E; }
.vlar-kotu { color: #D14343; }
.vlar-orta { color: #C27A00; }
.vlar-notr { color: var(--ar-muted); }
/* DNS aracı: kayıt değerleri (uzun TXT'ler satır içinde sarılır) */
.vlar-sonuc .deger code.kayit { display: block; margin-top: 6px; padding: 6px 9px; border-radius: 8px; background: var(--ar-bg); color: var(--ar-soft); font-size: 12.5px; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.vlar-sonuc .deger code.kayit:first-child { margin-top: 0; }
#vldnsSonuc { max-width: 880px; margin: 0 auto 26px; display: grid; gap: 18px; }
#vldnsSonuc > .vlar-sonuc { margin: 0; }
.vlar-sonuc .deger .cozum { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--ar-soft); }
.vlar-uyari { padding: 18px 22px; color: #8A2C2C; background: #FDECEC; font-weight: 600; }

/* Taşıma kutusu */
.vlar-tasima { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; max-width: 880px; margin: 0 auto; padding: 22px 24px; border-radius: 16px; background: rgba(69,83,199,.06); border: 1px solid rgba(69,83,199,.14); }
.vlar-tasima strong { display: block; font-size: 17px; color: var(--ar-ink); }
.vlar-tasima span { font-size: 14px; color: var(--ar-soft); }
.vlar-tasima .dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.vlar-tasima a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none !important; }
.vlar-tasima .birincil { background: var(--ar-purple); color: #fff; }
.vlar-tasima .ikincil { background: #fff; border: 1px solid var(--ar-line); color: var(--ar-ink); }

@media (max-width: 767.98px) {
    .vlar-hero { padding: 40px 0 48px; }
    .vlar-hero h1 { font-size: 27px; }
    .vlar-ara button { padding: 0 14px; }
    .vlar-sonuc .satir { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 18px; }
    .vlar-sonuc .bas { padding: 18px; }
}

/* /araclar ana sayfası: araç kartları */
.vlar-kartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.vlar-kart { display: flex; flex-direction: column; gap: 8px; padding: 22px; min-width: 0; background: #fff; border: 1px solid var(--ar-line); border-radius: 16px; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease; }
.vlar-kart:hover { border-color: var(--ar-purple); box-shadow: 0 10px 26px rgba(69,83,199,.10); }
.vlar-kart .simge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(69,83,199,.08); color: var(--ar-purple); font-size: 19px; }
.vlar-kart strong { font-size: 17px; font-weight: 800; color: var(--ar-ink); }
.vlar-kart .acik { font-size: 14px; line-height: 1.6; color: var(--ar-muted); }
.vlar-kart .git { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--ar-purple); }
@media (max-width: 991.98px) { .vlar-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .vlar-kartlar { grid-template-columns: minmax(0, 1fr); } }