/* ============================================
 Content Page Premium UX — UzunYaşa
 styles/content-page.css
 ============================================ */

/* Reading Progress Bar */
.reading-progress {
 position: fixed;
 top: 0;
 left: 0;
 width: 0%;
 height: 3px;
 background: linear-gradient(90deg, #2a6b73, #10b981, #f59e0b);
 z-index: 10000;
 transition: width 0.15s ease-out;
}

/* Reading Time & Meta Bar */
.content-meta-bar {
 display: flex;
 align-items: center;
 gap: 1.5rem;
 padding: 0.75rem 0;
 margin-bottom: 2rem;
 border-bottom: 1px solid var(--border, #e2e8f0);
 font-size: 0.9rem;
 color: var(--text-gray, #64748b);
 flex-wrap: wrap;
}
.content-meta-bar .reading-time::before { content: "⏱ "; }
.content-meta-bar .word-count::before { content: " "; }

/* Table of Contents */
.toc-container {
 background: linear-gradient(135deg, #f8fafc, #f0f9ff);
 border: 1px solid #e2e8f0;
 border-left: 4px solid #2a6b73;
 border-radius: 0 12px 12px 0;
 padding: 1.5rem 2rem;
 margin-bottom: 2.5rem;
 position: relative;
}
.toc-container h4 {
 font-size: 0.95rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 0.05em;
 color: #2a6b73;
 margin-bottom: 1rem;
}
.toc-container h4::before { content: " "; }
.toc-list {
 list-style: none;
 margin: 0;
 padding: 0;
 counter-reset: toc;
}
.toc-list li {
 counter-increment: toc;
 margin-bottom: 0.4rem;
}
.toc-list li a {
 display: flex;
 align-items: center;
 gap: 0.5rem;
 text-decoration: none;
 color: #334155;
 font-size: 0.95rem;
 padding: 0.35rem 0.5rem;
 border-radius: 6px;
 transition: all 0.2s;
}
.toc-list li a::before {
 content: counter(toc);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 24px;
 height: 24px;
 background: #e2e8f0;
 border-radius: 50%;
 font-size: 0.75rem;
 font-weight: 700;
 color: #475569;
 flex-shrink: 0;
 transition: all 0.2s;
}
.toc-list li a:hover,
.toc-list li a.active {
 background: rgba(42, 107, 115, 0.08);
 color: #2a6b73;
}
.toc-list li a:hover::before,
.toc-list li a.active::before {
 background: #2a6b73;
 color: white;
}

/* Section Cards */
.guide-content section,
.guide-content > .content-section,
.content section {
 background: white;
 border-radius: 16px;
 padding: 2rem;
 margin-bottom: 2rem;
 box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
 border: 1px solid rgba(0,0,0,0.04);
}

/* Heading Styles */
.guide-content h2,
.content h2 {
 position: relative;
 padding-bottom: 0.75rem;
 margin-top: 2.5rem;
 margin-bottom: 1.25rem;
}
.guide-content h2::after,
.content h2::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 60px;
 height: 3px;
 background: linear-gradient(90deg, #2a6b73, #10b981);
 border-radius: 2px;
}

/* Copy Link Button on Headings */
.heading-anchor {
 display: inline-flex;
 align-items: center;
 margin-left: 0.5rem;
 opacity: 0;
 transition: opacity 0.2s;
 cursor: pointer;
 background: none;
 border: none;
 padding: 0.2rem 0.4rem;
 border-radius: 4px;
 font-size: 0.85rem;
 color: #94a3b8;
 vertical-align: middle;
}
h2:hover .heading-anchor,
h3:hover .heading-anchor {
 opacity: 1;
}
.heading-anchor:hover {
 color: #2a6b73;
 background: rgba(42, 107, 115, 0.08);
}
.heading-anchor.copied {
 color: #10b981;
}

/* Info Boxes — Enhanced */
.info-box, .warning-box, .success-box, .tip-box, .fact-box, .stat-box {
 padding: 1.5rem 1.5rem 1.5rem 1.75rem;
 border-radius: 0 12px 12px 0;
 margin: 1.5rem 0;
 position: relative;
 border-left-width: 4px;
 border-left-style: solid;
}
.info-box.tip, .tip-box {
 background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
 border-left-color: #10b981;
}
.info-box.warning, .warning-box {
 background: linear-gradient(135deg, #fef3c7, #fffbeb);
 border-left-color: #f59e0b;
}
.info-box.fact, .fact-box {
 background: linear-gradient(135deg, #eff6ff, #f0f9ff);
 border-left-color: #3b82f6;
}
.info-box.stat, .stat-box {
 background: linear-gradient(135deg, #faf5ff, #f5f3ff);
 border-left-color: #8b5cf6;
}

/* Pull Quotes */
.pull-quote {
 position: relative;
 padding: 2rem 2.5rem;
 margin: 2rem 0;
 font-size: 1.2rem;
 font-style: italic;
 color: #334155;
 background: linear-gradient(135deg, #f8fafc, #f0f9ff);
 border-radius: 12px;
 border-left: 4px solid #2a6b73;
}
.pull-quote::before {
 content: "\201C";
 position: absolute;
 top: -10px;
 left: 15px;
 font-size: 4rem;
 color: rgba(42, 107, 115, 0.15);
 font-family: Georgia, serif;
 line-height: 1;
}

/* Key Takeaway Box */
.key-takeaway {
 background: linear-gradient(135deg, #195157, #2a6b73);
 color: white;
 padding: 2rem;
 border-radius: 16px;
 margin-bottom: 2.5rem;
 position: relative;
 overflow: hidden;
}
.key-takeaway::before {
 content: "";
 position: absolute;
 top: -10px;
 right: -5px;
 font-size: 5rem;
 opacity: 0.1;
}
.key-takeaway h4 {
 font-size: 0.85rem;
 text-transform: uppercase;
 letter-spacing: 0.1em;
 opacity: 0.8;
 margin-bottom: 0.75rem;
}
.key-takeaway ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.key-takeaway li {
 padding: 0.4rem 0;
 padding-left: 1.5rem;
 position: relative;
}
.key-takeaway li::before {
 content: "";
 position: absolute;
 left: 0;
 color: #10b981;
 font-weight: bold;
}

/* Numbered Steps */
.numbered-steps {
 counter-reset: step;
 list-style: none;
 padding: 0;
}
.numbered-steps > li {
 counter-increment: step;
 display: flex;
 gap: 1rem;
 align-items: flex-start;
 margin-bottom: 1.25rem;
 padding: 1rem;
 background: #f8fafc;
 border-radius: 12px;
 transition: transform 0.2s, box-shadow 0.2s;
}
.numbered-steps > li:hover {
 transform: translateY(-1px);
 box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.numbered-steps > li::before {
 content: counter(step);
 display: flex;
 align-items: center;
 justify-content: center;
 min-width: 36px;
 height: 36px;
 background: linear-gradient(135deg, #2a6b73, #10b981);
 color: white;
 border-radius: 50%;
 font-weight: 700;
 font-size: 0.9rem;
 flex-shrink: 0;
}

/* FAQ / Collapsible Sections */
.faq-section { margin: 2rem 0; }
.faq-item {
 border: 1px solid #e2e8f0;
 border-radius: 12px;
 margin-bottom: 0.75rem;
 overflow: hidden;
 transition: box-shadow 0.2s;
}
.faq-item:hover {
 box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.faq-question {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 1.25rem 1.5rem;
 background: white;
 border: none;
 cursor: pointer;
 font-size: 1rem;
 font-weight: 600;
 color: #1e293b;
 text-align: left;
 font-family: inherit;
 gap: 1rem;
}
.faq-question::after {
 content: "+";
 font-size: 1.5rem;
 font-weight: 300;
 color: #94a3b8;
 transition: transform 0.3s;
 flex-shrink: 0;
}
.faq-item.open .faq-question::after {
 content: "−";
 color: #2a6b73;
}
.faq-answer {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.35s ease, padding 0.35s ease;
 padding: 0 1.5rem;
}
.faq-item.open .faq-answer {
 max-height: 500px;
 padding: 0 1.5rem 1.25rem;
}

/* Before/After Comparison */
.comparison-block {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 1rem;
 margin: 1.5rem 0;
}
.comparison-before, .comparison-after {
 padding: 1.5rem;
 border-radius: 12px;
}
.comparison-before {
 background: linear-gradient(135deg, #fef2f2, #fff1f2);
 border: 1px solid #fecaca;
}
.comparison-after {
 background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
 border: 1px solid #a7f3d0;
}
.comparison-before h4::before { content: " "; }
.comparison-after h4::before { content: " "; }

/* Scroll Animations */
.animate-on-scroll {
 opacity: 0;
 transform: translateY(20px);
 transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.animate-on-scroll.visible {
 opacity: 1;
 transform: translateY(0);
}
.animate-on-scroll.stagger-1 { transition-delay: 0.1s; }
.animate-on-scroll.stagger-2 { transition-delay: 0.2s; }
.animate-on-scroll.stagger-3 { transition-delay: 0.3s; }
.animate-on-scroll.stagger-4 { transition-delay: 0.4s; }

/* ============================================
   Category Accent Colors
   Add class to <body> or wrapper: category-beslenme, category-egzersiz, etc.
   ============================================ */

/* CSS custom properties per category */
.category-beslenme  { --cat-accent: #2D9F4F; --cat-accent-light: rgba(45,159,79,0.1); --cat-accent-bg: linear-gradient(135deg, #f0fdf4, #ecfdf5); --cat-gradient: linear-gradient(135deg, #1a6b30, #2D9F4F); }
.category-egzersiz  { --cat-accent: #E8963E; --cat-accent-light: rgba(232,150,62,0.1); --cat-accent-bg: linear-gradient(135deg, #fff7ed, #fef3c7); --cat-gradient: linear-gradient(135deg, #b5700e, #E8963E); }
.category-uyku      { --cat-accent: #5B4FCF; --cat-accent-light: rgba(91,79,207,0.1); --cat-accent-bg: linear-gradient(135deg, #f5f3ff, #ede9fe); --cat-gradient: linear-gradient(135deg, #3b2fa0, #5B4FCF); }
.category-stres     { --cat-accent: #D4A030; --cat-accent-light: rgba(212,160,48,0.1); --cat-accent-bg: linear-gradient(135deg, #fffbeb, #fef3c7); --cat-gradient: linear-gradient(135deg, #a07818, #D4A030); }
.category-tedavi    { --cat-accent: #2B7AB5; --cat-accent-light: rgba(43,122,181,0.1); --cat-accent-bg: linear-gradient(135deg, #eff6ff, #dbeafe); --cat-gradient: linear-gradient(135deg, #1a5a8a, #2B7AB5); }

/* Apply accent to key elements when category is set */
[class*="category-"] .toc-container { border-left-color: var(--cat-accent); }
[class*="category-"] .toc-container h4 { color: var(--cat-accent); }
[class*="category-"] .toc-list li a:hover,
[class*="category-"] .toc-list li a.active { background: var(--cat-accent-light); color: var(--cat-accent); }
[class*="category-"] .toc-list li a:hover::before,
[class*="category-"] .toc-list li a.active::before { background: var(--cat-accent); }
[class*="category-"] .guide-content h2::after,
[class*="category-"] .content h2::after { background: var(--cat-gradient); }
[class*="category-"] .pull-quote { border-left-color: var(--cat-accent); }
[class*="category-"] .pull-quote::before { color: var(--cat-accent); opacity: 0.2; }
[class*="category-"] .key-takeaway { background: var(--cat-gradient); }
[class*="category-"] .numbered-steps > li::before { background: var(--cat-gradient); }
[class*="category-"] .guide-hero-overlay { background: linear-gradient(135deg, rgba(0,0,0,0.6), var(--cat-accent-light)) !important; }
[class*="category-"] .guide-badge { background: var(--cat-accent); }
[class*="category-"] .guide-content h2 { color: var(--cat-accent); }
[class*="category-"] .heading-anchor:hover { color: var(--cat-accent); background: var(--cat-accent-light); }

/* Hero overlay per category (more specific, uses actual accent as tint) */
.category-beslenme .guide-hero-overlay { background: linear-gradient(135deg, rgba(26,107,48,0.88), rgba(45,159,79,0.8)) !important; }
.category-egzersiz .guide-hero-overlay { background: linear-gradient(135deg, rgba(140,85,10,0.88), rgba(232,150,62,0.8)) !important; }
.category-uyku .guide-hero-overlay     { background: linear-gradient(135deg, rgba(40,30,120,0.88), rgba(91,79,207,0.8)) !important; }
.category-stres .guide-hero-overlay    { background: linear-gradient(135deg, rgba(120,90,15,0.88), rgba(212,160,48,0.8)) !important; }
.category-tedavi .guide-hero-overlay   { background: linear-gradient(135deg, rgba(18,60,100,0.88), rgba(43,122,181,0.8)) !important; }

/* ============================================
   Stat Highlight Cards (inline stat callouts)
   ============================================ */
.stat-highlight {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8fafc, #f0f9ff);
  border: 1px solid #e2e8f0;
}
[class*="category-"] .stat-highlight { background: var(--cat-accent-bg); border-color: var(--cat-accent); border-width: 1px; }
.stat-highlight .stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: #2a6b73;
  line-height: 1;
  flex-shrink: 0;
}
[class*="category-"] .stat-highlight .stat-number { color: var(--cat-accent); }
.stat-highlight .stat-text {
  font-size: 1rem;
  color: #334155;
  line-height: 1.5;
}

/* ============================================
   Inline SVG Infographic Container
   ============================================ */
.infographic {
  margin: 2.5rem 0;
  padding: 2rem;
  background: #f8fafc;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  text-align: center;
}
.infographic svg { max-width: 100%; height: auto; }
.infographic-caption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #64748b;
  font-style: italic;
}

/* ============================================
   Process Steps (horizontal visual)
   ============================================ */
.process-steps {
  display: flex;
  gap: 0.5rem;
  margin: 2rem 0;
  overflow-x: auto;
  padding: 0.5rem 0;
}
.process-step {
  flex: 1;
  min-width: 140px;
  text-align: center;
  padding: 1.5rem 1rem;
  background: white;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  position: relative;
}
.process-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #2a6b73, #10b981);
  color: white;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}
[class*="category-"] .process-step .step-num { background: var(--cat-gradient); }
.process-step h4 { font-size: 0.9rem; margin-bottom: 0.35rem; }
.process-step p { font-size: 0.8rem; color: #64748b; }
.process-step + .process-step::before {
  content: "→";
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 768px) {
 .toc-container { padding: 1.25rem 1.5rem; }
 .comparison-block { grid-template-columns: 1fr; }
 .key-takeaway { padding: 1.5rem; }
 .guide-content section,
 .guide-content > .content-section,
 .content section {
 padding: 1.25rem;
 margin-bottom: 1.25rem;
 border-radius: 12px;
 }
 .heading-anchor { opacity: 0.5; }
 .faq-question { padding: 1rem 1.25rem; font-size: 0.95rem; }
 .pull-quote { padding: 1.5rem; font-size: 1.1rem; }
 .stat-highlight { flex-direction: column; text-align: center; padding: 1.25rem; }
 .stat-highlight .stat-number { font-size: 2rem; }
 .process-steps { flex-direction: column; }
 .process-step + .process-step::before { content: "↓"; left: 50%; top: -1rem; transform: translateX(-50%); }
}