/* =========================================================
   YALNIZ BİLİŞİM — SKIN (Açık tema bileşen sınıfları)
   WHMCS'ye uyumlu, modüler. index.html ve tüm iç sayfalar bu dosyayı kullanır.
   Skin değişikliği SADECE burada yapılır → tüm site otomatik güncellenir.
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  background: #FFFFFF;
  color: #51647A;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---- Marka degradesi (logo: cyan -> mavi) ---- */
.brand-gradient { background: linear-gradient(135deg, #46BEE6 0%, #2F6FBE 100%); }
.text-gradient-blue {
  background: linear-gradient(135deg, #2F9FD6 0%, #2F6FBE 60%, #265FA8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Tanıtım (feature) kartı — koyu mavi degrade ---- */
.feature-promo {
  background:
    radial-gradient(circle at 18% 12%, rgba(70,190,230,0.38), transparent 46%),
    radial-gradient(circle at 92% 88%, rgba(70,190,230,0.20), transparent 42%),
    linear-gradient(155deg, #2F6FBE 0%, #234F8C 55%, #1E3F6E 100%);
  color: #fff;
}

/* ---- Servis etiketleri (pills) ---- */
.pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #EAF6FC; color: #265FA8; border: 1px solid #D2ECF8;
  font-size: .875rem; font-weight: 600;
  padding: .5rem 1rem; border-radius: 999px;
  transition: background-color 200ms ease, color 200ms ease,
              border-color 200ms ease, transform 200ms ease;
}
/* El imleci yalnızca gerçekten tıklanabilir olduğunda (link/buton içindeyse) */
a > .pill, button > .pill, .pill:is(a, button) { cursor: pointer; }
.pill:hover { background: linear-gradient(135deg, #2F9FD6, #2F6FBE); color: #fff; border-color: transparent; transform: translateY(-2px); }

/* ---- Yüzen etiket çipleri (illüstrasyon üzeri) ---- */
.float-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: #fff; border: 1px solid #E3EDF5; border-radius: 14px;
  padding: .55rem .85rem; box-shadow: 0 14px 30px rgba(15,41,66,0.12);
  font-size: .8rem; font-weight: 600; color: #0F2942;
}

/* ---- Kategori rozeti ---- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  background: #EAF6FC; color: #265FA8;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .85rem; border-radius: 999px;
}

/* İkinci yüzen animasyon (varyasyon) */
@keyframes float2 { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-9px);} }
.float-2 { animation: float2 7s ease-in-out infinite; }

/* ---- SSS akordeon (<details>) ---- */
.faq-item { border: 1px solid #E3EDF5; border-radius: 14px; background: #fff; transition: box-shadow 200ms ease, border-color 200ms ease; }
.faq-item[open] { box-shadow: 0 12px 28px rgba(15,41,66,0.08); border-color: #CFE2F1; }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .chev { transition: transform 220ms ease; }
.faq-item[open] .chev { transform: rotate(180deg); }

/* ---- Teknoloji ortakları logo metni ---- */
.partner-logo { color: #8aa0b3; font-weight: 800; letter-spacing: -0.01em; transition: color 200ms ease; }
.partner-logo:hover { color: #2F6FBE; }

/* ---- Mega menü öğe hover (dehost'tan farklılaştırma) ---- */
.mega-item { transition: background-color 200ms ease, transform 200ms ease; }
.mega-item:hover { transform: translateX(3px); }
.mega-item .icon-box { transition: all 200ms ease; }
.mega-item:hover .icon-box { background: linear-gradient(135deg, #2F9FD6, #2F6FBE); color: #fff; }
.mega-item:hover .mega-title { color: #2F6FBE; }

/* ---- Açık zemin dekoratif arka planlar ---- */
.bg-soft { background: #F4F9FC; }
.bg-mesh-light {
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse 70% 50% at 15% -10%, rgba(70,190,230,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 90% 0%, rgba(47,111,190,0.10) 0%, transparent 55%);
}
.grid-lines {
  background-image:
    linear-gradient(rgba(47,111,190,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,111,190,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---- Frosted nav (açık) ---- */
.glass {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #E3EDF5;
}

/* =========================================================
   BUTON SİSTEMİ
   ---------------------------------------------------------
   Önceki hâlde birincil CTA yeşil degradeydi (#22C55E -> #16A34A).
   Yeşil CTA, uygun fiyatlı hosting segmentinin klişesidir ve markanın
   kendi kimliğiyle hiçbir bağı yoktu. Degradeler de "şablon" hissi verir;
   premium markalar düz ve kararlı renk kullanır.

   Yeni hiyerarşi üç kademeli ve markanın kendi paletinden türetilmiş:

     1. .btn-success  — birincil dönüşüm eylemi
        Marka turkuazı (#46BEE6, logo degradesinin açık ucu) + koyu lacivert
        metin. Kritik kısıt: bu buton hem beyaz hem koyu lacivert zeminde
        kullanılıyor (slider). Turkuaz ikisinde de öne çıkar ve kendi
        içindeki metin kontrastı 6.8:1 (WCAG AA).

     2. .btn-primary  — güçlü ikincil eylem (yalnızca açık zeminde)
        Düz koyu lacivert + beyaz metin, 14.8:1. Teknoloji şirketi tonu.

     3. .btn-ghost / .btn-outline — üçüncül eylem

   Gölgeler daraltıldı: geniş ve yumuşak gölge "yüzen kart" hissi verir,
   dar ve yakın gölge daha kurumsal durur.
   ========================================================= */

.btn-success {
  background: #46BEE6;
  color: #0B2138;
  font-weight: 700;
  border: 1px solid #46BEE6;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 2px rgba(11,33,56,0.10);
}
.btn-success:hover {
  background: #5FCCEF;
  border-color: #5FCCEF;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(70,190,230,0.35);
}
.btn-success:active { transform: translateY(0); }

.btn-primary {
  background: #0F2942;
  color: #fff;
  border: 1px solid #0F2942;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 1px 2px rgba(15,41,66,0.12);
}
.btn-primary:hover {
  background: #1B4570;
  border-color: #1B4570;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15,41,66,0.22);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: #fff;
  color: #0F2942;
  border: 1px solid #CFE2F1;
  transition: background-color 200ms ease, border-color 200ms ease,
              transform 200ms ease;
}
.btn-ghost:hover { background: #F4F9FC; border-color: #6FBFE5; transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  color: #0F2942;
  border: 1.5px solid #0F2942;
  transition: background-color 200ms ease, color 200ms ease;
}
.btn-outline:hover { background: #0F2942; color: #fff; }

/* ---- Kartlar ----
   transition: all yerine açık liste kullanılıyor. "all", tarayıcıyı her
   değişebilir özelliği izlemeye zorlar ve kompozit edilmeyen özelliklerde
   her karede repaint tetikler; 20+ kartlı sayfalarda hover'da takılma yapar. */
.card,
.service-card,
.pricing-card,
.feature-card {
  background: #FFFFFF;
  border: 1px solid #E3EDF5;
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15,41,66,0.04);
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

/* Not: .service-card üzerinde cursor:pointer yoktu artık — kartın kendisi
   link değil, içindeki bağlantı link. El imleci göstermek tıklanabilir
   olmayan bir alanı tıklanabilir gibi sunuyordu. Kartın tamamını
   tıklanabilir yapan "stretched link" deseni aşağıda. */
.service-card:hover,
.feature-card:hover {
  transform: translateY(-5px);
  border-color: #A7D8F0;
  box-shadow: 0 22px 44px rgba(15,41,66,0.10);
}

.pricing-card:hover {
  transform: translateY(-4px);
  border-color: #A7D8F0;
  box-shadow: 0 22px 48px rgba(15,41,66,0.12);
}

/* Kartın tamamını tıklanabilir yapar; erişilebilirlik açısından tek bir
   gerçek <a> odaklanabilir kalır, ek JS gerekmez. */
.service-card { position: relative; }
.service-card .kart-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.service-card:focus-within {
  border-color: #A7D8F0;
  box-shadow: 0 22px 44px rgba(15,41,66,0.10);
}
.pricing-card.popular {
  border: 2px solid #2F9FD6;
  box-shadow: 0 18px 50px rgba(47,159,214,0.18);
  position: relative;
}
@media (min-width: 1024px) {
  .pricing-card.popular { transform: scale(1.04); }
  .pricing-card.popular:hover { transform: scale(1.04) translateY(-4px); }
}

/* ---- İkon kutusu ---- */
.icon-box {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #EAF6FC;
  color: #2F6FBE;
  flex-shrink: 0;
}

/* ---- Rozetler ---- */
.badge-new, .badge-hot {
  font-size: 10px; padding: 3px 8px; border-radius: 6px;
  font-weight: 700; letter-spacing: 0.04em; color: #fff;
}
.badge-new { background: linear-gradient(135deg, #22C55E, #16A34A); }
.badge-hot { background: linear-gradient(135deg, #F59E0B, #EF4444); }
.badge-soft {
  background: #EAF6FC; color: #265FA8;
  font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 600;
}

/* ---- Fiyat gösterimi (CLS koruması) ----
   Fiyatlar HTML'e ₺ olarak gömülüyor, sonra pricing.js güncel kurla ve
   seçilen para birimiyle yeniden yazıyor (₺139 -> $2.99). Rakam genişlikleri
   farklı olduğu için bu, yanındaki "/ay" ekini kaydırıp CLS üretiyordu.
   tabular-nums tüm rakamları eşit genişliğe sabitler; inline-block ise
   satır kutusunun yeniden akmasını engeller. */
.js-price {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ---- Bölüm çizgisi ---- */
.section-line { height: 1px; background: linear-gradient(90deg, transparent, #E3EDF5, transparent); }

/* ---- Animasyonlar ---- */
@keyframes pulse-dot { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.55; transform:scale(1.35);} }
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-12px);} }
.float { animation: float 6s ease-in-out infinite; }

@keyframes blink { 0%,100% { opacity:1;} 50% { opacity:0;} }
.blink { animation: blink 1s step-end infinite; }

@keyframes slideUp { from { opacity:0; transform: translateY(24px);} to { opacity:1; transform: translateY(0);} }
.slide-up { animation: slideUp .7s ease forwards; }
.slide-up-delay-1 { animation: slideUp .7s .1s ease forwards; opacity:0; }
.slide-up-delay-2 { animation: slideUp .7s .25s ease forwards; opacity:0; }

@keyframes progressFill { from { width: 0; } }
.progress-fill { animation: progressFill 1.8s ease-out forwards; }

/* ---- Focus & scrollbar ----
   Odak halkası çift katmanlı: koyu dış çizgi açık zeminde, turkuaz hale
   koyu zeminde görünür. Tek renkli halka, sitenin hem beyaz hem lacivert
   bölümleri olduğu için birinde mutlaka kayboluyordu. */
:focus-visible {
  outline: 2px solid #0F2942;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(70,190,230,0.55);
  border-radius: 6px;
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F4F9FC; }
::-webkit-scrollbar-thumb { background: #CFE2F1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9FC8E6; }

/* ---- Nav dropdown (hover + JS hover-intent ile .open) ---- */
.nav-item .dropdown { display: none; }
.nav-item:hover .dropdown,
.nav-item.open .dropdown { display: block; }

/* ---- Mobil alt menü (accordion / <details>) ---- */
details.m-sub > summary { list-style: none; cursor: pointer; }
details.m-sub > summary::-webkit-details-marker { display: none; }
details.m-sub .m-chev { transition: transform 200ms ease; }
details.m-sub[open] .m-chev { transform: rotate(180deg); }

/* ---- Mobil menü ---- */
#mobileMenu { display: none; }
#mobileMenu.open { display: block; }

/* TLD çipleri artık gerçek <button>: tıklanınca uzantı seçimini doldurur.
   Önceden cursor:pointer taşıyan ama hiçbir şey yapmayan <div>'lerdi. */
.tld-chip {
  transition: transform 200ms ease, box-shadow 200ms ease,
              border-color 200ms ease, background-color 200ms ease;
  background: #fff;
  text-align: center;
  width: 100%;
}
.tld-chip:hover { border-color: #9FC8E6; background: #F0F7FB; transform: translateY(-2px); }
.tld-chip[aria-pressed="true"] {
  border-color: #2F9FD6;
  background: #EAF6FC;
  box-shadow: 0 0 0 1px #2F9FD6 inset;
}

.pay-icon { transition: all 200ms ease; }
.pay-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,41,66,0.08); }

/* =========================================================
   DOKUNMA HEDEFİ BÜYÜTME (WCAG 2.5.8 — en az 24x24 CSS px)
   ---------------------------------------------------------
   Görsel boyutu değiştirmeden, görünmez bir ::after katmanıyla tıklama
   alanı genişletilir. Böylece tasarım aynı kalır, parmakla kullanım düzelir.
   ========================================================= */

/* Slider noktaları görünürde 32x8 px; dokunma alanı 32x24'e çıkarılıyor */
.slider-dot { position: relative; }
.slider-dot::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
}

/* Footer bağlantıları 16-20 px yükseklikteydi. Dikey iç boşluk eklenerek
   24 px eşiği geçiliyor; negatif margin ile görsel aralık korunuyor. */
footer nav ul a,
footer ul a {
  display: inline-block;
  padding-block: 3px;
}

/* ---- YLZ-SLIDER (Hero altı 3 slide'lı kayan banner) ---- */
.ylz-slider-track { position: relative; }
.ylz-slider-track .slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(40px) scale(.98);
  transition: opacity .8s ease, transform .8s ease, visibility 0s linear .8s;
}
.ylz-slider-track .slide.slide-active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(0) scale(1);
  transition: opacity .8s ease, transform .8s ease, visibility 0s linear 0s;
}
/* Yüzen ikon — yumuşak hareketli */
@keyframes ylz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ylz-bob-2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes ylz-pulse-soft { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes ylz-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ylz-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bob { animation: ylz-bob 3.5s ease-in-out infinite; }
.bob-2 { animation: ylz-bob-2 4s ease-in-out infinite; animation-delay: .8s; }
.pulse-soft { animation: ylz-pulse-soft 2.5s ease-in-out infinite; }
.spin-slow { animation: ylz-spin-slow 18s linear infinite; }
.marquee-track { animation: ylz-marquee 18s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .bob, .bob-2, .pulse-soft, .spin-slow, .marquee-track { animation: none !important; }
}

/* ---- BLOG MAKALE TİPOGRAFİSİ (.prose-blog içeriği için) ---- */
.prose-blog { font-size: 17px; line-height: 1.75; color: #33485C; }
.prose-blog h1, .prose-blog h2 { font-size: 1.875rem; font-weight: 800; color: #0F2942; margin-top: 2.5rem; margin-bottom: 1rem; line-height: 1.25; letter-spacing: -0.01em; }
.prose-blog h3 { font-size: 1.375rem; font-weight: 700; color: #0F2942; margin-top: 2rem; margin-bottom: 0.75rem; line-height: 1.3; }
.prose-blog h4 { font-size: 1.125rem; font-weight: 700; color: #0F2942; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose-blog p { margin-bottom: 1.25rem; }
.prose-blog ul, .prose-blog ol { margin: 1rem 0 1.5rem 0; padding-left: 1.5rem; }
.prose-blog ul { list-style: disc; }
.prose-blog ol { list-style: decimal; }
.prose-blog li { margin-bottom: 0.5rem; line-height: 1.7; }
.prose-blog li::marker { color: #2F6FBE; }
.prose-blog strong { color: #0F2942; font-weight: 700; }
.prose-blog em { font-style: italic; color: #33485C; }
.prose-blog a { color: #2F6FBE; text-decoration: underline; text-underline-offset: 2px; }
.prose-blog a:hover { color: #1E3F6E; }
.prose-blog blockquote { border-left: 4px solid #2F6FBE; padding: 0.5rem 1.25rem; margin: 1.5rem 0; background: #F5F8FB; color: #51647A; font-style: italic; }
.prose-blog img { max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0; }
.prose-blog code { background: #F5F8FB; color: #2F6FBE; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.9em; font-family: 'JetBrains Mono', monospace; }
.prose-blog pre { background: #0F2942; color: #fff; padding: 1rem 1.25rem; border-radius: 8px; overflow-x: auto; margin: 1.25rem 0; font-size: 0.9em; line-height: 1.6; }
.prose-blog pre code { background: transparent; color: inherit; padding: 0; }
.prose-blog hr { border: 0; border-top: 1px solid #E8F1F8; margin: 2.5rem 0; }
.prose-blog table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95em; }
.prose-blog th, .prose-blog td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid #E8F1F8; }
.prose-blog th { background: #F5F8FB; font-weight: 700; color: #0F2942; }
.prose-blog figure { margin: 1.5rem 0; }
.prose-blog figcaption { text-align: center; font-size: 0.9em; color: #6B7C8D; margin-top: 0.5rem; }
.prose-blog .wp-block-image img { border-radius: 12px; }

/* =========================================================
   PREMIUM 2026 — SITE-WIDE VISUAL SYSTEM
   ---------------------------------------------------------
   This layer deliberately sits after the legacy component rules. It keeps
   every existing page and checkout link intact while giving the complete
   site one calmer, more editorial and more premium visual language.
   ========================================================= */
:root {
  --ylz-navy-950: #071725;
  --ylz-navy-900: #0b2136;
  --ylz-navy-800: #123754;
  --ylz-blue-700: #245f9f;
  --ylz-blue-600: #2f78bf;
  --ylz-cyan-500: #3bbce8;
  --ylz-cyan-300: #85dcf4;
  --ylz-ice-100: #eaf6fb;
  --ylz-ice-50: #f5fafc;
  --ylz-surface: rgba(255, 255, 255, .88);
  --ylz-line: rgba(38, 103, 153, .14);
  --ylz-text: #102b42;
  --ylz-muted: #577087;
  --ylz-shadow-sm: 0 1px 2px rgba(7, 23, 37, .04), 0 8px 24px rgba(7, 23, 37, .05);
  --ylz-shadow-md: 0 20px 55px rgba(7, 23, 37, .10);
  --ylz-shadow-lg: 0 30px 80px rgba(7, 23, 37, .16);
  --ylz-radius-sm: 14px;
  --ylz-radius-md: 22px;
  --ylz-radius-lg: 30px;
}

html { color-scheme: light; scroll-padding-top: 96px; }
body.site-page {
  min-height: 100vh;
  color: var(--ylz-muted);
  background:
    radial-gradient(circle at 8% 3%, rgba(59, 188, 232, .08), transparent 24rem),
    radial-gradient(circle at 95% 18%, rgba(47, 120, 191, .06), transparent 28rem),
    #fff;
  text-rendering: optimizeLegibility;
}

body.site-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: radial-gradient(rgba(36, 95, 159, .22) .55px, transparent .55px);
  background-size: 18px 18px;
  mask-image: linear-gradient(to bottom, #000, transparent 45%);
}

::selection { color: #fff; background: var(--ylz-blue-600); }

body.site-page h1,
body.site-page h2,
body.site-page h3,
body.site-page h4 {
  color: var(--ylz-text);
  text-wrap: balance;
}

body.site-page p { text-wrap: pretty; }

/* Premium top rail and glass navigation */
body.site-page > .bg-soft.border-b:first-of-type {
  color: rgba(255, 255, 255, .78) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  background:
    radial-gradient(circle at 12% 0, rgba(59, 188, 232, .18), transparent 22rem),
    linear-gradient(100deg, var(--ylz-navy-950), var(--ylz-navy-800)) !important;
}
body.site-page > .bg-soft.border-b:first-of-type a:hover { color: #fff !important; }
body.site-page > .bg-soft.border-b:first-of-type .ylz-cur-btn { color: rgba(255, 255, 255, .82) !important; }

.glass {
  background: rgba(255, 255, 255, .82);
  border-bottom-color: rgba(38, 103, 153, .11);
  box-shadow: 0 1px 0 rgba(255,255,255,.9);
  transition: background-color 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.glass.is-scrolled {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(38, 103, 153, .16);
  box-shadow: 0 14px 40px rgba(7, 23, 37, .09);
}
.glass nav > a img { filter: drop-shadow(0 8px 18px rgba(7, 23, 37, .08)); }
.glass .nav-item > button,
.glass nav > ul > li > a { font-weight: 650; letter-spacing: -.01em; }
.nav-item .dropdown > .card {
  border-color: rgba(38, 103, 153, .13);
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 80px rgba(7, 23, 37, .18);
  backdrop-filter: blur(22px);
}

/* Reading progress is progressively enhanced by premium.js */
.ylz-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: 3px;
  pointer-events: none;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--ylz-cyan-500), var(--ylz-blue-600));
  box-shadow: 0 0 18px rgba(59,188,232,.6);
}

/* Hero and section atmosphere */
.bg-mesh-light {
  isolation: isolate;
  background-color: #f9fcfe;
  background-image:
    radial-gradient(ellipse 62% 68% at 7% -15%, rgba(59,188,232,.22), transparent 64%),
    radial-gradient(ellipse 55% 58% at 94% -12%, rgba(36,95,159,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(242,249,252,.74));
  border-bottom: 1px solid rgba(38,103,153,.10);
}
.bg-mesh-light::after {
  content: "";
  position: absolute;
  width: 36rem;
  height: 36rem;
  right: -18rem;
  bottom: -28rem;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(59,188,232,.22);
  box-shadow: 0 0 0 80px rgba(59,188,232,.035), 0 0 0 160px rgba(36,95,159,.025);
}
.grid-lines { opacity: .48 !important; background-size: 64px 64px; }
.grid-lines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f8fcfe 0, transparent 16%, transparent 84%, #f8fcfe 100%);
}

body.site-page main > section { position: relative; }
body.site-page main > section[class*="py-"] { scroll-margin-top: 90px; }
body.site-page main > section:not(.bg-mesh-light):nth-of-type(even) {
  background-image: linear-gradient(180deg, rgba(245,250,252,.72), rgba(255,255,255,.25));
}

body.site-page h1 {
  letter-spacing: -.045em !important;
  font-weight: 800;
  line-height: 1.04 !important;
}
body.site-page h2 { letter-spacing: -.03em; }

.eyebrow,
.badge-soft {
  border: 1px solid rgba(47,120,191,.14);
  background: rgba(234,246,251,.84);
  color: var(--ylz-blue-700);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ylz-cyan-500);
  box-shadow: 0 0 0 4px rgba(59,188,232,.13);
}

/* Unified premium surfaces */
.card,
.service-card,
.pricing-card,
.feature-card,
.faq-item {
  border-color: var(--ylz-line);
  background: var(--ylz-surface);
  border-radius: var(--ylz-radius-md);
  box-shadow: var(--ylz-shadow-sm);
  backdrop-filter: blur(12px);
}
.service-card,
.feature-card,
.pricing-card { overflow: hidden; }
.service-card::before,
.feature-card::before,
.pricing-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(59,188,232,.65), transparent);
  opacity: 0;
  transition: opacity 250ms ease;
}
.service-card:hover::before,
.feature-card:hover::before,
.pricing-card:hover::before { opacity: 1; }
.service-card:hover,
.feature-card:hover,
.pricing-card:hover {
  border-color: rgba(59,188,232,.40);
  box-shadow: var(--ylz-shadow-md);
}
.pricing-card.popular {
  border-color: var(--ylz-cyan-500);
  background: linear-gradient(180deg, rgba(237,249,253,.94), #fff 28%);
  box-shadow: 0 22px 65px rgba(36,95,159,.16);
}
.icon-box {
  border: 1px solid rgba(59,188,232,.18);
  background: linear-gradient(145deg, #f4fbfe, #dff3fa);
  box-shadow: inset 0 1px 0 #fff, 0 10px 26px rgba(36,95,159,.08);
}

/* Buttons: confident rather than loud */
.btn-success,
.btn-primary,
.btn-ghost,
.btn-outline {
  min-height: 46px;
  border-radius: 13px;
  letter-spacing: -.01em;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, var(--ylz-navy-900), var(--ylz-navy-800));
  border-color: var(--ylz-navy-900);
  box-shadow: 0 12px 28px rgba(7,23,37,.18);
}
.btn-success {
  background: linear-gradient(135deg, var(--ylz-cyan-300), var(--ylz-cyan-500));
  border-color: rgba(59,188,232,.72);
  box-shadow: 0 12px 28px rgba(59,188,232,.22);
}
.btn-primary::after,
.btn-success::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.30) 48%, transparent 70%);
  transform: translateX(-130%);
  transition: transform 650ms ease;
}
.btn-primary:hover::after,
.btn-success:hover::after { transform: translateX(130%); }

/* Forms and controls */
body.site-page input:not([type="checkbox"]):not([type="radio"]),
body.site-page select,
body.site-page textarea {
  border-color: rgba(38,103,153,.18) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.90) !important;
  box-shadow: inset 0 1px 2px rgba(7,23,37,.035);
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
body.site-page input:not([type="checkbox"]):not([type="radio"]):focus,
body.site-page select:focus,
body.site-page textarea:focus {
  border-color: var(--ylz-cyan-500) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(59,188,232,.13) !important;
}

/* FAQ */
.faq-item { overflow: clip; }
.faq-item summary { padding-block: 1.15rem !important; }
.faq-item[open] {
  border-color: rgba(59,188,232,.34);
  background: linear-gradient(180deg, rgba(244,251,254,.96), #fff);
  box-shadow: 0 18px 50px rgba(7,23,37,.09);
}

/* Blog / GEO-friendly editorial presentation */
body.page-blog-article .bg-mesh-light > .relative.max-w-3xl { max-width: 58rem; padding-top: 4rem; padding-bottom: 4rem; }
body.page-blog-article .prose-blog {
  max-width: 52rem;
  padding: clamp(1.5rem, 4vw, 4rem);
  border: 1px solid var(--ylz-line);
  border-radius: var(--ylz-radius-lg);
  background: rgba(255,255,255,.94);
  box-shadow: var(--ylz-shadow-md);
  font-size: clamp(1.03rem, .98rem + .18vw, 1.14rem);
  line-height: 1.82;
}
body.page-blog-article .prose-blog > div:first-child > div:first-child { margin-top: 0; }
.prose-blog h2 {
  padding-top: .4rem;
  font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem);
  scroll-margin-top: 108px;
}
.prose-blog h3 { scroll-margin-top: 108px; }
.prose-blog a { text-decoration-thickness: 1px; text-decoration-color: rgba(47,120,191,.35); }
.prose-blog a:hover { text-decoration-color: currentColor; }
.prose-blog blockquote {
  border: 0;
  border-left: 4px solid var(--ylz-cyan-500);
  border-radius: 0 var(--ylz-radius-sm) var(--ylz-radius-sm) 0;
  background: linear-gradient(90deg, rgba(234,246,251,.95), rgba(245,250,252,.6));
  padding: 1.2rem 1.4rem;
}
.prose-blog table {
  border: 1px solid var(--ylz-line);
  border-radius: var(--ylz-radius-sm);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(7,23,37,.05);
}
.prose-blog th { background: var(--ylz-navy-900); color: #fff; }
.prose-blog tr:nth-child(even) td { background: var(--ylz-ice-50); }

.article-toc {
  max-width: 52rem;
  margin: 0 auto 1.5rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--ylz-line);
  border-radius: var(--ylz-radius-md);
  background: linear-gradient(135deg, rgba(245,250,252,.96), rgba(234,246,251,.78));
  box-shadow: var(--ylz-shadow-sm);
}
.article-toc-title { display: flex; align-items: center; gap: .65rem; color: var(--ylz-text); font-weight: 800; }
.article-toc-title::before { content: ""; width: 18px; height: 2px; background: var(--ylz-cyan-500); box-shadow: 7px -5px 0 var(--ylz-blue-600), 7px 5px 0 var(--ylz-blue-600); }
.article-toc ol { margin-top: .85rem; columns: 2; column-gap: 2rem; }
.article-toc li { break-inside: avoid; margin: .38rem 0; }
.article-toc .toc-level-3 { padding-left: .8rem; position: relative; }
.article-toc .toc-level-3::before { content: ""; position: absolute; left: 0; top: .68em; width: 4px; height: 4px; border-radius: 50%; background: var(--ylz-cyan-500); }
.article-toc a { color: var(--ylz-muted); font-size: .92rem; line-height: 1.4; }
.article-toc a:hover { color: var(--ylz-blue-700); }

.editorial-note {
  max-width: 52rem;
  margin: 1.5rem auto 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: center;
  padding: 1.15rem 1.3rem;
  color: var(--ylz-muted);
  border: 1px solid var(--ylz-line);
  border-radius: var(--ylz-radius-md);
  background: #fff;
  box-shadow: var(--ylz-shadow-sm);
}
.editorial-note-mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--ylz-blue-700);
  background: var(--ylz-ice-100);
  font-weight: 800;
}
.editorial-note strong { display: block; color: var(--ylz-text); }

/* Legal and company pages become readable documents instead of flat blocks */
body.page-legal main section .max-w-3xl,
body.page-company main section .max-w-3xl,
body.page-contact main section .max-w-3xl {
  border-radius: var(--ylz-radius-lg);
}

/* Footer */
body.site-page footer {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 0, rgba(59,188,232,.15), transparent 28rem),
    radial-gradient(circle at 88% 100%, rgba(47,120,191,.22), transparent 34rem),
    var(--ylz-navy-950) !important;
}
body.site-page footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
body.site-page footer > * { position: relative; }

/* Scroll-reveal added without hiding content before JS is ready */
.premium-reveal-ready .premium-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 650ms cubic-bezier(.2,.7,.2,1), transform 650ms cubic-bezier(.2,.7,.2,1);
}
.premium-reveal-ready .premium-reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 767px) {
  :root { --ylz-radius-md: 18px; --ylz-radius-lg: 22px; }
  body.site-page h1 { letter-spacing: -.035em !important; }
  body.site-page main > section[class*="py-"] { padding-top: 3.25rem; padding-bottom: 3.25rem; }
  body.page-blog-article .prose-blog { border-radius: 20px; padding: 1.35rem; }
  .article-toc ol { columns: 1; }
  .editorial-note { grid-template-columns: 1fr; }
  .pricing-card.popular { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-reveal-ready .premium-reveal { opacity: 1; transform: none; }
  .btn-primary::after, .btn-success::after { display: none; }
}

/* =========================================================
   PREMIUM CONTRAST EDITION — visibly distinct direction
   ========================================================= */
body.site-page {
  background:
    radial-gradient(circle at 0 20%, rgba(59,188,232,.09), transparent 30rem),
    linear-gradient(180deg, #f2f7fa 0, #fff 32rem, #f7fafc 100%);
}

/* Airy glass navigation: premium without making the page feel heavy */
header.glass {
  color: var(--ylz-text);
  background: rgba(255,255,255,.90);
  border-bottom-color: rgba(38,103,153,.11);
  box-shadow: 0 12px 36px rgba(7,23,37,.07);
}
header.glass.is-scrolled {
  background: rgba(255,255,255,.97);
  border-bottom-color: rgba(38,103,153,.16);
  box-shadow: 0 16px 42px rgba(7,23,37,.10);
}
header.glass nav > a:first-child {
  padding: .2rem .35rem;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
}
header.glass nav > ul > li > a,
header.glass .nav-item > button { color: #33485c !important; }
header.glass nav > ul > li > a:hover,
header.glass .nav-item > button:hover {
  color: var(--ylz-blue-700) !important;
  background: rgba(59,188,232,.08) !important;
}
header.glass nav > ul > li > a[aria-current="page"] {
  color: var(--ylz-blue-700) !important;
  background: rgba(59,188,232,.10);
}
header.glass .btn-primary {
  color: #fff;
  border-color: var(--ylz-navy-900);
  background: linear-gradient(135deg, var(--ylz-navy-900), #17486c);
  box-shadow: 0 10px 24px rgba(7,23,37,.16);
}
header.glass .btn-ghost {
  color: var(--ylz-text);
  border-color: rgba(38,103,153,.16);
  background: rgba(245,250,252,.85);
}
header.glass #mobileMenu {
  color: var(--ylz-text);
  background: #fff;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 24px 60px rgba(7,23,37,.28);
}

/* Bright editorial hero with depth concentrated in small areas */
body.site-page main > section.bg-mesh-light {
  color: var(--ylz-muted);
  min-height: 390px;
  background:
    radial-gradient(circle at 3% 12%, rgba(59,188,232,.20), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(47,120,191,.13), transparent 34rem),
    linear-gradient(118deg, #fbfdfe 0%, #f2f8fa 48%, #eaf4f8 100%);
  border-bottom: 1px solid rgba(38,103,153,.10);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}
body.page-home main > section.bg-mesh-light { min-height: 570px; }
body.site-page main > section.bg-mesh-light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(38,103,153,.035) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(38,103,153,.03) 50%, transparent 50.2%);
  background-size: 96px 96px;
  mask-image: radial-gradient(circle at 55% 45%, #000, transparent 74%);
}
body.site-page main > section.bg-mesh-light::after {
  right: -13rem;
  bottom: -24rem;
  border-color: rgba(47,120,191,.12);
  box-shadow: 0 0 0 90px rgba(59,188,232,.025), 0 0 0 180px rgba(47,120,191,.018);
}
body.site-page main > section.bg-mesh-light .grid-lines {
  opacity: .42 !important;
  background-image:
    linear-gradient(rgba(38,103,153,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38,103,153,.055) 1px, transparent 1px);
}
body.site-page main > section.bg-mesh-light .grid-lines::after {
  background: linear-gradient(90deg, #f8fcfd 0, transparent 18%, transparent 82%, #eef7f9 100%);
}
body.site-page main > section.bg-mesh-light h1,
body.site-page main > section.bg-mesh-light h2,
body.site-page main > section.bg-mesh-light h3,
body.site-page main > section.bg-mesh-light .text-ink-900 { color: var(--ylz-text) !important; }
body.site-page main > section.bg-mesh-light .text-ink-500,
body.site-page main > section.bg-mesh-light .text-ink-600,
body.site-page main > section.bg-mesh-light .text-ink-700 { color: var(--ylz-muted) !important; }
body.site-page main > section.bg-mesh-light .text-gradient-blue {
  background-image: linear-gradient(120deg, var(--ylz-blue-700) 0%, var(--ylz-cyan-500) 52%, #1d79b5 100%);
}
body.site-page main > section.bg-mesh-light .eyebrow,
body.site-page main > section.bg-mesh-light .badge-soft {
  color: var(--ylz-blue-700);
  border-color: rgba(47,120,191,.15);
  background: rgba(255,255,255,.70);
  box-shadow: 0 8px 26px rgba(7,23,37,.05), inset 0 1px 0 #fff;
}
body.site-page main > section.bg-mesh-light nav[aria-label="Breadcrumb"] a { color: #6b8193; }
body.site-page main > section.bg-mesh-light nav[aria-label="Breadcrumb"] a:hover { color: var(--ylz-blue-700); }

/* Keep hero product mockups bright against the dark stage */
body.site-page main > section.bg-mesh-light .card,
body.site-page main > section.bg-mesh-light .feature-card {
  color: var(--ylz-muted);
  border-color: rgba(38,103,153,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 80px rgba(7,23,37,.14), inset 0 1px 0 #fff;
}
body.site-page main > section.bg-mesh-light .card h2,
body.site-page main > section.bg-mesh-light .card h3,
body.site-page main > section.bg-mesh-light .card .text-ink-900,
body.site-page main > section.bg-mesh-light .feature-card h2,
body.site-page main > section.bg-mesh-light .feature-card h3,
body.site-page main > section.bg-mesh-light .feature-card .text-ink-900 { color: var(--ylz-text) !important; }
body.site-page main > section.bg-mesh-light .card .text-ink-500,
body.site-page main > section.bg-mesh-light .card .text-ink-600,
body.site-page main > section.bg-mesh-light .card .text-ink-700 { color: var(--ylz-muted) !important; }
body.site-page main > section.bg-mesh-light .float-chip,
body.site-page main > section.bg-mesh-light .float-chip .text-ink-500,
body.site-page main > section.bg-mesh-light .float-chip .text-ink-600,
body.site-page main > section.bg-mesh-light .float-chip .text-ink-700,
body.site-page main > section.bg-mesh-light .float-chip .text-ink-900 {
  color: var(--ylz-text) !important;
}
body.site-page main > section.bg-mesh-light .btn-ghost {
  color: var(--ylz-text);
  border-color: rgba(38,103,153,.18);
  background: rgba(255,255,255,.64);
  backdrop-filter: blur(12px);
}
body.site-page main > section.bg-mesh-light .btn-ghost:hover { border-color: var(--ylz-cyan-500); background: #fff; }

/* Stronger rhythm below the fold */
body.site-page main > section:not(.bg-mesh-light)[class*="py-"] { padding-block: clamp(4.5rem, 7vw, 7.5rem); }
body.site-page main > section:not(.bg-mesh-light):nth-of-type(even) {
  background:
    radial-gradient(circle at 100% 0, rgba(59,188,232,.08), transparent 30rem),
    linear-gradient(180deg, #eef5f8, #f8fbfc);
  border-block: 1px solid rgba(38,103,153,.08);
}
body.site-page .service-card,
body.site-page .feature-card,
body.site-page .pricing-card {
  border-radius: 26px;
  box-shadow: 0 16px 50px rgba(7,23,37,.09);
}
body.site-page .service-card:hover,
body.site-page .feature-card:hover,
body.site-page .pricing-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 28px 80px rgba(7,23,37,.16);
}
body.site-page .icon-box {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  border-color: rgba(133,220,244,.25);
  background: linear-gradient(145deg, var(--ylz-cyan-500), var(--ylz-blue-700));
  box-shadow: 0 14px 30px rgba(47,120,191,.24);
}

body.page-blog-article .bg-mesh-light > .relative.max-w-3xl { padding-top: 5rem; padding-bottom: 5.5rem; }
body.page-blog-article .prose-blog {
  margin-top: -2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 34px 90px rgba(7,23,37,.14);
}
body.page-blog-article .article-toc { position: relative; z-index: 3; }

/* Compact consent surface so the redesigned hero remains visible */
#ylz-cookie {
  max-width: 820px !important;
  padding: 13px 16px !important;
  border-color: rgba(133,220,244,.18) !important;
  border-radius: 18px !important;
  background: rgba(7,23,37,.94) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.38) !important;
  backdrop-filter: blur(18px) !important;
}
#ylz-cookie-ok {
  color: var(--ylz-navy-950) !important;
  background: linear-gradient(135deg, var(--ylz-cyan-300), var(--ylz-cyan-500)) !important;
}

@media (max-width: 767px) {
  header.glass nav > a:first-child { padding: .3rem .55rem; border-radius: 13px; }
  body.page-home main > section.bg-mesh-light { min-height: auto; }
  body.site-page main > section.bg-mesh-light { min-height: 320px; }
  body.site-page main > section:not(.bg-mesh-light)[class*="py-"] { padding-block: 4rem; }
  body.page-blog-article .prose-blog { margin-top: -1.25rem; }
}

@media (max-width: 430px) {
  header.glass nav { gap: .4rem !important; padding-inline: .65rem !important; }
  header.glass nav > a:first-child { flex-shrink: 1; min-width: 0; }
  header.glass nav > a:first-child img { height: 34px !important; max-width: 145px; object-fit: contain; }
  header.glass nav > div.flex { gap: .25rem !important; }
  header.glass nav > div.flex > .btn-primary {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 12px;
  }
  header.glass nav > div.flex > .btn-primary span { display: none; }
  header.glass #menuToggle { color: var(--ylz-text) !important; padding: .5rem; }
}

/* =========================================================
   ARTICLE AUTHORITY + CONVERSION — compact, intent-led
   ========================================================= */
.geo-byline {
  flex-wrap: wrap;
  row-gap: .35rem;
}
.geo-author-link {
  color: var(--ylz-blue-700);
  font-weight: 700;
  text-decoration: none;
}
.geo-author-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.article-related {
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(38,103,153,.11);
}
.prose-blog .article-related-title {
  margin: 0 0 .75rem;
  color: #6c8293;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.prose-blog .article-related ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose-blog .article-related li { margin: 0; padding: 0; }
.prose-blog .article-related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-height: 100%;
  padding: .85rem .9rem;
  color: var(--ylz-text);
  font-size: .82rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration: none;
  border: 1px solid rgba(38,103,153,.12);
  border-radius: 13px;
  background: #fff;
}
.prose-blog .article-related a:hover { color: var(--ylz-blue-700); border-color: rgba(47,120,191,.28); }

.article-author-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 1rem;
  align-items: start;
  margin-top: 3rem;
  padding: 1.15rem 1.25rem;
  color: #4d6475;
  border: 1px solid rgba(38,103,153,.13);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(239,248,251,.92), rgba(255,255,255,.98));
}
.article-author-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--ylz-cyan-500), var(--ylz-blue-700));
  box-shadow: 0 10px 24px rgba(47,120,191,.22);
}
.prose-blog .article-author-kicker {
  margin: 0 0 .2rem;
  color: #718697;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.prose-blog .article-author-name { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; }
.prose-blog .article-author-name a { color: var(--ylz-text); text-decoration: none; }
.prose-blog .article-author-name a:hover { color: var(--ylz-blue-700); }
.prose-blog .article-author-card p:last-child { margin: 0; font-size: .88rem; line-height: 1.65; }

.article-sources {
  margin-top: 1rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--ylz-cyan-500);
  border-radius: 0 14px 14px 0;
  background: #f7fafc;
}
.prose-blog .article-sources-title {
  margin: 0 0 .35rem;
  color: var(--ylz-text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.prose-blog .article-sources ul {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prose-blog .article-sources li { margin: 0; padding: 0; font-size: .84rem; }
.prose-blog .article-sources a { color: var(--ylz-blue-700); font-weight: 650; }

.article-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(47,120,191,.35) transparent;
}
.article-table-scroll table { width: 100%; }

.article-conversion-card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(230px, .65fr);
  gap: clamp(1.3rem, 4vw, 2.5rem);
  align-items: center;
  margin-top: 1.25rem;
  padding: clamp(1.4rem, 4vw, 2.15rem);
  color: #d9e9f3;
  border: 1px solid rgba(133,220,244,.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 100% 0, rgba(59,188,232,.18), transparent 19rem),
    linear-gradient(140deg, #0b2032, #123b58);
  box-shadow: 0 24px 58px rgba(7,23,37,.18);
}
.prose-blog .article-conversion-eyebrow {
  display: block;
  margin-bottom: .55rem;
  color: #85dcf4;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.prose-blog .article-conversion-card h2 {
  margin: 0 0 .65rem;
  color: #fff;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  line-height: 1.2;
}
.prose-blog .article-conversion-card p { margin: 0; color: #c5d8e5; font-size: .94rem; }
.prose-blog .article-conversion-card ul {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .9rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.prose-blog .article-conversion-card li {
  position: relative;
  margin: 0;
  padding-left: 1rem;
  color: #d8e8f1;
  font-size: .79rem;
}
.prose-blog .article-conversion-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #51d3a5;
  box-shadow: 0 0 0 4px rgba(81,211,165,.1);
}
.article-conversion-actions { display: grid; gap: .7rem; }
.prose-blog .article-cta-primary,
.prose-blog .article-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1rem;
  text-align: center;
  text-decoration: none;
  border-radius: 13px;
  font-size: .88rem;
  font-weight: 800;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.prose-blog .article-cta-primary {
  color: #071725;
  background: linear-gradient(135deg, #85dcf4, #51d3a5);
  box-shadow: 0 12px 28px rgba(81,211,165,.16);
}
.prose-blog .article-cta-secondary {
  color: #eef8fc;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}
.prose-blog .article-cta-primary:hover,
.prose-blog .article-cta-secondary:hover { transform: translateY(-2px); }
.prose-blog .article-cta-secondary:hover { border-color: rgba(133,220,244,.52); background: rgba(255,255,255,.1); }
.prose-blog .article-conversion-actions small { color: #9fb7c7; text-align: center; line-height: 1.45; }

@media (max-width: 767px) {
  .article-table-scroll table { min-width: 560px; }
  .prose-blog .article-related ul { grid-template-columns: 1fr; }
  .article-author-card { grid-template-columns: 40px 1fr; padding: 1rem; }
  .article-author-mark { width: 40px; height: 40px; }
  .article-conversion-card { grid-template-columns: 1fr; border-radius: 20px; }
  .prose-blog .article-conversion-card ul { display: grid; }

  #ylz-cookie {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
    border-radius: 14px !important;
  }
  #ylz-cookie p {
    flex-basis: 190px !important;
    font-size: 11px !important;
    line-height: 1.38 !important;
  }
  #ylz-cookie button {
    padding: 8px 11px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   SERVICE-PAGE INLINE BUYING GUIDES
   ========================================================= */
.service-inline-article {
  color: var(--ylz-muted);
}
.service-guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  align-items: center;
  margin-bottom: 1rem;
  color: #6f8596;
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.service-guide-lead {
  margin: 0;
  color: #425a6c;
  font-size: 1.06rem;
  line-height: 1.8;
}
.service-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .8rem;
  margin-top: 1.5rem;
}
.service-guide-grid section {
  padding: 1.15rem;
  border: 1px solid rgba(38,103,153,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 34px rgba(7,23,37,.055);
}
.service-guide-number {
  display: block;
  margin-bottom: .65rem;
  color: var(--ylz-cyan-500);
  font-family: "JetBrains Mono", monospace;
  font-size: .7rem;
  font-weight: 800;
}
.service-guide-grid h3,
.service-location-note h3 {
  margin: 0 0 .5rem;
  color: var(--ylz-text);
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.35;
}
.service-guide-grid p { margin: 0; font-size: .84rem; line-height: 1.65; }
.service-location-note {
  display: grid;
  grid-template-columns: minmax(180px, .45fr) minmax(0, 1.55fr);
  gap: 1.2rem;
  align-items: center;
  margin-top: .8rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(229,246,251,.85), rgba(245,250,252,.95));
}
.service-location-label {
  display: block;
  margin-bottom: .35rem;
  color: var(--ylz-blue-700);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.service-location-note h3,
.service-location-note p { margin: 0; }
.service-location-note p { font-size: .84rem; line-height: 1.65; }
.service-guide-links {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(38,103,153,.1);
}
.service-guide-links > p {
  flex: 0 0 auto;
  margin: 0;
  color: #6f8596;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.service-guide-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-guide-links a { color: var(--ylz-blue-700); font-size: .8rem; font-weight: 700; text-decoration: none; }
.service-guide-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.service-guide-action {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.15rem;
  padding: 1rem 1.1rem;
  color: #d5e7f2;
  border-radius: 16px;
  background: linear-gradient(135deg, #0b2032, #123b58);
}
.service-guide-action p { margin: 0; font-size: .83rem; line-height: 1.55; }
.service-guide-action a {
  flex: 0 0 auto;
  padding: .72rem .9rem;
  color: #071725;
  font-size: .8rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #85dcf4, #51d3a5);
}

@media (max-width: 767px) {
  .service-guide-grid { grid-template-columns: 1fr; }
  .service-location-note { grid-template-columns: 1fr; }
  .service-guide-links { display: block; }
  .service-guide-links ul { display: grid; margin-top: .65rem; }
  .service-guide-action { display: grid; }
  .service-guide-action a { text-align: center; }
}

/* =========================================================
   VDS / VPS WORKLOAD DECISION GUIDES
   ========================================================= */
.server-workload-section {
  background:
    radial-gradient(circle at 100% 0, rgba(59,188,232,.08), transparent 25rem),
    linear-gradient(180deg, #f4f9fb, #fff);
  border-block: 1px solid rgba(38,103,153,.09);
}
.server-guide-heading {
  display: grid;
  grid-template-columns: minmax(270px, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.4rem, 5vw, 4rem);
  align-items: end;
}
.server-guide-heading h2 {
  margin: 0;
  color: var(--ylz-text);
  font-size: clamp(1.65rem, 3.6vw, 2.6rem);
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.035em;
}
.server-guide-heading > p { margin: 0; color: #536b7c; font-size: .98rem; line-height: 1.75; }
.server-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
  margin-top: 2rem;
}
.server-metric-grid article {
  min-height: 100%;
  padding: 1.1rem;
  border: 1px solid rgba(38,103,153,.12);
  border-radius: 17px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 14px 36px rgba(7,23,37,.055);
}
.server-metric-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  margin-bottom: .8rem;
  padding: 0 .55rem;
  color: var(--ylz-blue-700);
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  font-weight: 800;
  border-radius: 9px;
  background: rgba(59,188,232,.1);
}
.server-metric-grid h3 { margin: 0 0 .45rem; color: var(--ylz-text); font-size: .95rem; font-weight: 800; }
.server-metric-grid p { margin: 0; color: #607687; font-size: .82rem; line-height: 1.65; }
.server-guide-caution {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
  gap: 1.2rem;
  align-items: center;
  margin-top: .8rem;
  padding: 1.1rem 1.2rem;
  color: #d7e7f1;
  border-radius: 17px;
  background: linear-gradient(135deg, #0b2032, #123b58);
}
.server-guide-caution span { color: #85dcf4; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.server-guide-caution p { margin: .3rem 0 0; font-size: .84rem; line-height: 1.6; }
.server-guide-cta { display: grid; grid-template-columns: .7fr 1.3fr; gap: .55rem; }
.server-guide-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .65rem .75rem;
  color: #eef8fc;
  text-align: center;
  font-size: .76rem;
  font-weight: 800;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 11px;
  background: rgba(255,255,255,.055);
}
.server-guide-cta a:last-child { color: #071725; border: 0; background: linear-gradient(135deg, #85dcf4, #51d3a5); }
.server-guide-related {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
}
.server-guide-related > span { color: #718697; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.server-guide-related ul { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; padding: 0; list-style: none; }
.server-guide-related a { color: var(--ylz-blue-700); font-size: .79rem; font-weight: 700; text-decoration: none; }
.server-guide-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.server-guide-author { margin: .7rem 0 0; color: #8295a3; font-size: .7rem; }

@media (max-width: 900px) {
  .server-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .server-guide-heading,
  .server-guide-caution { grid-template-columns: 1fr; }
  .server-metric-grid { grid-template-columns: 1fr; }
  .server-guide-cta { grid-template-columns: 1fr; }
  .server-guide-related { display: block; }
  .server-guide-related ul { display: grid; margin-top: .6rem; }
}

/* Footer: marka ve ana kategoriler masaüstünde aynı satırda. */
.footer-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.footer-columns > * { min-width: 0; }

@media (min-width: 768px) and (max-width: 1099px) {
  .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns > .footer-brand { grid-column: 1 / -1; }
}

@media (min-width: 1100px) {
  .footer-columns {
    grid-template-columns: minmax(300px, 1.65fr) repeat(3, minmax(170px, 1fr));
    column-gap: clamp(2rem, 4vw, 4.5rem);
  }
  .footer-columns > .footer-brand { grid-column: auto; }
}