/* =========================================================
   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; }