/* tema.css — webtasarimordu.com.tr görsel yenileme katmanı.
   style.css ve responsive.css'ten SONRA yüklenir; yalnızca görünümü günceller (HTML yapısına dokunmaz).
   İçerik: renk değişkenleri, daha ferah tipografi/boşluklar, yumuşak gölgeli kartlar ve hover efektleri,
   yenilenmiş butonlar, düzenli hero/CTA/footer alanları, erişilebilir odak çerçevesi, hareket azaltma desteği.
   Geri almak için: sayfalardaki <link ... tema.css> satırını silmek yeterli. */

:root {
  --t-ink: #14112b;
  --t-text: #4a4766;
  --t-brand: #6d28d9;
  --t-brand-2: #8b5cf6;
  --t-deep: #1a0b4d;
  --t-accent: #22d3a6;
  --t-soft: #f5f3ff;
  --t-line: #e8e4f7;
  --t-radius: 18px;
  --t-shadow: 0 10px 30px rgba(45, 20, 110, .08);
  --t-shadow-lg: 0 22px 50px rgba(45, 20, 110, .16);
}

html { scroll-behavior: smooth; }
body { color: var(--t-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5 { color: var(--t-ink); letter-spacing: -.01em; }
p { line-height: 1.75; }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 3px solid var(--t-accent); outline-offset: 3px; border-radius: 8px; }

/* ---- Üst menü ---- */
.navbar-sticky.visible { box-shadow: 0 6px 24px rgba(20, 11, 77, .14); }
.navbar-nav .nav-link { font-weight: 600; letter-spacing: .01em; position: relative; }
.navbar-nav .nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: .35rem; width: 0; height: 2px;
  background: var(--t-accent); transition: width .25s, left .25s;
}
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { width: 60%; left: 20%; }

/* ---- Butonlar ---- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: .01em; transition: transform .2s, box-shadow .2s, background .2s, color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn-bordered, .btn-bordered-white { border-width: 2px; }
.btn-bordered:hover { background: var(--t-brand); border-color: var(--t-brand); color: #fff; box-shadow: 0 10px 24px rgba(109, 40, 217, .3); }
.btn-bordered-white:hover { background: #fff; color: var(--t-deep); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }

/* ---- Hero ---- */
.welcome-area { background: radial-gradient(1200px 600px at 85% 10%, #5b21b6 0%, transparent 60%), linear-gradient(135deg, #12063f 0%, #2a0f73 55%, #4c1d95 100%); }
.welcome-intro h1 { font-weight: 800; line-height: 1.08; letter-spacing: -.02em; text-shadow: 0 4px 24px rgba(0, 0, 0, .25); }
.welcome-intro p { color: rgba(255, 255, 255, .88); font-size: 1.1rem; max-width: 34rem; }
.welcome-animation { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }

/* ---- Başlıklar ---- */
.section-heading h2 { font-weight: 700; position: relative; padding-bottom: 1rem; }
.section-heading h2::after {
  content: ""; display: block; width: 56px; height: 4px; border-radius: 4px; margin: 1rem auto 0;
  background: linear-gradient(90deg, var(--t-brand), var(--t-accent));
}
.section-heading p { max-width: 40rem; margin-left: auto; margin-right: auto; }
.bg-grey { background: var(--t-soft) !important; }

/* ---- Kartlar ---- */
.single-promo h3 { line-height: 1.25; }
.single-promo, .single-service, .single-review, .single-price-plan, .contact-box, .portfolio-item {
  border-radius: var(--t-radius) !important; box-shadow: var(--t-shadow); border: 1px solid var(--t-line);
  transition: transform .3s, box-shadow .3s;
}
.single-promo:hover, .single-service:hover, .single-review:hover, .single-price-plan:hover, .contact-box:hover, .portfolio-item:hover {
  transform: translateY(-6px); box-shadow: var(--t-shadow-lg);
}
.single-promo.active, .single-promo:nth-child(2) { border-color: transparent; }
.portfolio-item { overflow: hidden; background: #fff; }
.portfolio-item img { transition: transform .5s; }
.portfolio-item:hover img { transform: scale(1.04); }
.single-service .service-icon, .single-service img { transition: transform .3s; }
.single-service:hover .service-icon, .single-service:hover img { transform: scale(1.08); }

/* ---- Fiyat paketleri ---- */
.single-price-plan { padding: 2.2rem 1.6rem; background: #fff; }
.plan-price { font-weight: 800; background: linear-gradient(90deg, var(--t-brand), var(--t-brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-features li { padding: .35rem 0; border-bottom: 1px dashed var(--t-line); }

/* ---- Yorumlar / CTA ---- */
.review-area, .cta-area { background: linear-gradient(135deg, #12063f 0%, #2a0f73 60%, #4c1d95 100%) !important; }
.single-review .quot-icon { opacity: .35; }

/* ---- SSS / akordeon ---- */
.accordion-button { border-radius: 12px; font-weight: 600; transition: background .2s, color .2s; }
.accordion-button:hover { background: var(--t-soft); }

/* ---- İletişim kutuları ---- */
.contact-box { padding: 1.8rem 1rem; background: #fff; }
.contact-box h3, .contact-box h4 { overflow-wrap: anywhere; }

/* ---- Alt bilgi ---- */
.footer-area a { transition: color .2s; }
.footer-area a:hover { color: var(--t-brand) !important; }
.footer-title { letter-spacing: .08em; font-size: 1rem; }

/* ---- WhatsApp düğmesi ---- */
.whatsapp-float img { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .3)); }
.whatsapp-tooltip a { border-radius: 999px; box-shadow: 0 8px 18px rgba(37, 211, 102, .35); }

/* ---- Makale sayfaları: okunabilirlik ---- */
article { max-width: 820px; margin: 0 auto; }
article p, article li { font-size: 1.05rem; line-height: 1.85; }
article h2, article h3 { margin-top: 2rem; }

/* ---- Mobil ---- */
@media (max-width: 767px) {
  .welcome-intro h1 { font-size: 2.4rem; }
  .single-promo, .single-service, .single-price-plan { margin-bottom: 1.2rem; }
  .section-heading h2 { font-size: 1.6rem; }
}

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

/* ---- İç sayfa başlığı ve kart başlıkları: okunabilirlik ---- */
.breadcrumb-content > h1.breadcrumb-h1, .breadcrumb-content > h2 { color: #fff !important; background: none !important; -webkit-text-fill-color: #fff !important; font-weight: 800; letter-spacing: -.01em; }
.single-service h3, .single-promo h3, .single-price-plan h3 { line-height: 1.3; }