/**
 * 🚀 RÜYA DETAY SAYFASI — ULTRA MODERN 2026
 * Gradient mesh, glass article, premium section headings
 * @version 2026.3.3
 */

/* Sayfa arka plan — gradient mesh */
.ruya-detail-page {
  background: 
    radial-gradient(ellipse 120% 80% at 50% -15%, rgba(124, 58, 237, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 40%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 0% 90%, rgba(34, 197, 94, 0.03) 0%, transparent 50%),
    var(--bg, #f8fafc) !important;
  min-height: 100vh;
}
[data-theme="dark"] .ruya-detail-page {
  background: 
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 70% 40% at 90% 60%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
    var(--bg) !important;
}

/* Article — 3D glass, premium depth */
.ruya-detail-page .ruya-detail-article {
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,0.97) 0%, rgba(250,250,252,0.94) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.04),
    0 12px 40px -8px rgba(124, 58, 237, 0.15),
    0 8px 24px -8px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(124, 58, 237, 0.06);
  border: 2px solid rgba(124, 58, 237, 0.08);
  border-left: 6px solid #7c3aed;
  overflow: hidden;
}
[data-theme="dark"] .ruya-detail-page .ruya-detail-article {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(51, 65, 85, 0.88) 100%);
  border-left-color: #a78bfa;
  border-color: rgba(124, 58, 237, 0.25);
  box-shadow: 
    0 1px 2px rgba(0,0,0,0.3),
    0 12px 40px -8px rgba(124, 58, 237, 0.25),
    0 8px 24px -8px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Kategori badge — mor gradient */
.ruya-detail-page .ruya-detail-category {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%);
  border: 1px solid rgba(124, 58, 237, 0.25);
  color: #7c3aed;
}
[data-theme="dark"] .ruya-detail-page .ruya-detail-category {
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.2) 0%, rgba(129, 140, 248, 0.1) 100%);
  border-color: rgba(167, 139, 250, 0.35);
  color: #c4b5fd;
}

/* Başlık — dramatic gradient, premium typography */
.ruya-detail-page .ruya-detail-title {
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 25%, #4c1d95 50%, #5b21b6 80%, #7c3aed 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .ruya-detail-page .ruya-detail-title {
  background: linear-gradient(135deg, #e9d5ff 0%, #c4b5fd 30%, #a78bfa 60%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero extras — renkli kutular */
.ruya-detail-page .ruya-extras-box {
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.ruya-detail-page .ruya-extras-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, 0.15);
}

/* Accordion / bölüm başlıkları */
.ruya-detail-page .tarif-accordion-item details summary,
.ruya-detail-page [class*="accordion"] summary {
  border-radius: 14px;
  transition: background 0.2s, border-color 0.2s;
}
.ruya-detail-page .tarif-accordion-item details[open] summary {
  border-color: rgba(124, 58, 237, 0.25);
  background: rgba(124, 58, 237, 0.04);
}

/* İlgili rüyalar — premium kartlar, 3D hover */
.ruya-detail-page .sv-related-content-2026 .sv-related-item,
.ruya-detail-page [class*="related"] a {
  border-radius: 20px;
  border: 2px solid rgba(124, 58, 237, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);
}
.ruya-detail-page .sv-related-content-2026 .sv-related-item:hover,
.ruya-detail-page [class*="related"] a:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.2);
}

/* Mobil — tam genişlik, padding */
@media (max-width: 767px) {
  .ruya-detail-page .ruya-detail-article {
    margin-left: var(--space-3);
    margin-right: var(--space-3);
    padding: var(--space-4);
    border-radius: 20px;
  }
  .ruya-detail-page .ruya-detail-title {
    font-size: clamp(22px, 5vw, 28px);
  }
  .ruya-detail-page .ruya-hero-extras {
    grid-template-columns: 1fr;
  }
}