/**
 * Modern Content Detail Styles
 * Luminie Modern UI System
 */

/* Import CSS Variables */
@import url("variables.css");

/* ===== CSS CUSTOM PROPERTIES - LUMINIE BRAND ALIGNED ===== */
:root {
  /* Luminie Brand Colors - Primary Palette */
  --luminie-primary: #3b82f6; /* Existing Luminie Blue */
  --luminie-secondary: #8b5cf6; /* Existing Luminie Purple */
  --luminie-success: #10b981; /* Existing Success Green */
  --luminie-warning: #f59e0b; /* Existing Warning Orange */
  --luminie-error: #ef4444; /* Existing Error Red */
  --luminie-info: #0ea5e9; /* Existing Info Blue */

  /* Primary Color Scale - Based on Luminie Blue */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6; /* Luminie Primary Blue */
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;

  /* Secondary Color Scale - Based on Luminie Purple */
  --secondary-50: #f5f3ff;
  --secondary-100: #ede9fe;
  --secondary-200: #ddd6fe;
  --secondary-300: #c4b5fd;
  --secondary-400: #a78bfa;
  --secondary-500: #8b5cf6; /* Luminie Purple */
  --secondary-600: #7c3aed;
  --secondary-700: #6d28d9;
  --secondary-800: #5b21b6;
  --secondary-900: #4c1d95;

  /* Success Color Scale - Based on Luminie Green */
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981; /* Luminie Success Green */
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;
  --success-900: #064e3b;

  /* Warning Color Scale - Based on Luminie Orange */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b; /* Luminie Warning Orange */
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* Error Color Scale - Based on Luminie Red */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444; /* Luminie Error Red */
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;

  /* Luminie Text Colors - Existing Brand */
  --text-primary: #1e293b; /* Existing Luminie Text Primary */
  --text-secondary: #64748b; /* Existing Luminie Text Secondary */
  --text-tertiary: #94a3b8; /* Existing Luminie Text Tertiary */
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  /* Luminie Background Colors - Existing Brand */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc; /* Existing Luminie BG Light */
  --bg-tertiary: #f1f5f9;
  --bg-dark: #0f172a; /* Existing Luminie BG Dark */

  /* Luminie Border Colors - Existing Brand */
  --border-light: #e2e8f0; /* Existing Luminie Border Light */
  --border-medium: #cbd5e1; /* Existing Luminie Border Medium */
  --border-dark: #475569;

  /* Gray Scale - Aligned with Luminie Text Colors */
  --gray-50: #f8fafc; /* Matches Luminie BG Light */
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0; /* Matches Luminie Border Light */
  --gray-300: #cbd5e1; /* Matches Luminie Border Medium */
  --gray-400: #94a3b8; /* Matches Luminie Text Tertiary */
  --gray-500: #64748b; /* Matches Luminie Text Secondary */
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b; /* Matches Luminie Text Primary */
  --gray-900: #0f172a;

  /* Spacing Scale */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Typography Scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Font Weights */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-base: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Luminie Brand Gradients */
  --gradient-primary: linear-gradient(
    135deg,
    var(--luminie-primary),
    var(--luminie-secondary)
  );
  --gradient-success: linear-gradient(135deg, var(--luminie-success), #059669);
  --gradient-warning: linear-gradient(135deg, var(--luminie-warning), #d97706);
  --gradient-error: linear-gradient(135deg, var(--luminie-error), #dc2626);
  --gradient-blue-purple: linear-gradient(
    135deg,
    var(--primary-500),
    var(--secondary-500)
  );
  --gradient-hero: linear-gradient(
    135deg,
    var(--primary-600),
    var(--secondary-600)
  );

  /* Shadows - Aligned with Existing Luminie */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* Transitions */
  --transition-none: none;
  --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-Index Scale */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
}

/* ===== BASE STYLES ===== */
.modern-content-detail {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: var(--leading-normal);
  color: var(--gray-800);
  background-color: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== LAYOUT COMPONENTS ===== */
.modern-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

@media (min-width: 640px) {
  .modern-container {
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .modern-container {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
}

/* Modern Grid System */
.modern-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .modern-grid {
    grid-template-columns: 2fr 1fr;
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .modern-grid {
    grid-template-columns: 3fr 1fr;
    gap: var(--space-10);
  }
}

/* ===== CARD SYSTEM ===== */
.modern-card {
  background-color: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: var(--transition-normal);
}

.modern-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.modern-card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--gray-200);
  background-color: var(--gray-50);
}

.modern-card-body {
  padding: var(--space-6);
}

.modern-card-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--gray-200);
  background-color: var(--gray-50);
}

/* ===== CONTENT HEADER ===== */
.content-header {
  margin-bottom: var(--space-8);
}

.content-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.breadcrumb-link {
  color: var(--primary-600);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  transition: var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--primary-700);
}

.breadcrumb-separator {
  color: var(--gray-400);
}

.breadcrumb-current {
  color: var(--gray-600);
}

.content-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  color: var(--gray-900);
  margin-bottom: var(--space-4);
}

.content-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--gray-600);
}

.meta-item.premium {
  color: var(--warning-600);
  font-weight: var(--font-semibold);
}

.meta-item i {
  font-size: var(--text-xs);
}

/* ===== CONTENT SLIDER ===== */
.content-slider-container {
  position: relative;
  margin-bottom: var(--space-8);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

.content-swiper {
  width: 100%;
  height: 500px;
}

.slider-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ Resmi tam göster */
  object-position: center;
}

.content-swiper .swiper-pagination {
  bottom: var(--space-4);
}

.content-swiper .swiper-pagination-bullet {
  background-color: white;
  opacity: 0.7;
  width: 12px;
  height: 12px;
}

.content-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--primary-500);
}

.content-swiper .swiper-button-next,
.content-swiper .swiper-button-prev {
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-full);
  width: 48px;
  height: 48px;
  margin-top: -24px;
  backdrop-filter: blur(4px);
  transition: var(--transition-fast);
}

.content-swiper .swiper-button-next:hover,
.content-swiper .swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

/* ===== FILM STRIP THUMBNAILS ===== */
.filmstrip-container {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
}

.filmstrip-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-secondary);
}

.filmstrip-title i {
  color: var(--luminie-primary);
}

.filmstrip-swiper {
  width: 100%;
  height: 80px;
  padding: var(--space-1);
}

.filmstrip-swiper .swiper-slide {
  width: auto;
  height: 100%;
  cursor: pointer;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition-fast);
  border: 2px solid transparent;
  position: relative;
}

.filmstrip-swiper .swiper-slide:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.filmstrip-swiper .swiper-slide.active {
  border-color: var(--luminie-primary);
  box-shadow: 0 0 0 1px var(--luminie-primary);
}

.filmstrip-swiper .swiper-slide.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    var(--luminie-primary),
    var(--luminie-secondary)
  );
  opacity: 0.1;
  pointer-events: none;
}

.filmstrip-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-fast);
}

.filmstrip-swiper .swiper-slide:hover .filmstrip-thumbnail {
  transform: scale(1.05);
}

.filmstrip-swiper .swiper-button-next,
.filmstrip-swiper .swiper-button-prev {
  color: var(--luminie-primary);
  background-color: white;
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  margin-top: -16px;
  box-shadow: var(--shadow-md);
  transition: var(--transition-fast);
  border: 1px solid var(--border-light);
}

.filmstrip-swiper .swiper-button-next:hover,
.filmstrip-swiper .swiper-button-prev:hover {
  background-color: var(--luminie-primary);
  color: white;
  transform: scale(1.1);
  box-shadow: var(--shadow-lg);
}

.filmstrip-swiper .swiper-button-next::after,
.filmstrip-swiper .swiper-button-prev::after {
  font-size: 12px;
  font-weight: bold;
}

/* Filmstrip responsive */
@media (max-width: 768px) {
  .filmstrip-swiper {
    height: 60px;
  }

  .filmstrip-swiper .swiper-button-next,
  .filmstrip-swiper .swiper-button-prev {
    width: 28px;
    height: 28px;
    margin-top: -14px;
  }

  .filmstrip-swiper .swiper-button-next::after,
  .filmstrip-swiper .swiper-button-prev::after {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .filmstrip-container {
    margin-top: var(--space-3);
    padding: var(--space-3);
  }

  .filmstrip-swiper {
    height: 50px;
  }

  .filmstrip-swiper .swiper-button-next,
  .filmstrip-swiper .swiper-button-prev {
    display: none; /* Mobile'da navigation butonlarını gizle */
  }
}

/* ===== FLOATING ACTION BUTTONS ===== */
.floating-actions {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-20);
}

.fab-primary,
.fab-secondary {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  transition: var(--transition-normal);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-lg);
}

.fab-primary {
  background: var(--gradient-primary);
  color: white;
}

.fab-primary:hover {
  background: var(--gradient-hero);
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

.fab-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.fab-secondary:hover {
  background: rgba(255, 255, 255, 0.95);
  color: var(--luminie-primary);
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

.fab-primary.loading,
.fab-secondary.loading {
  pointer-events: none;
  opacity: 0.7;
}

.fab-primary.loading i,
.fab-secondary.loading i {
  animation: spin 1s linear infinite;
}

/* ===== PREMIUM GATE ===== */
.premium-gate {
  background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius-2xl);
  padding: var(--space-12);
  text-align: center;
  margin-bottom: var(--space-8);
}

.premium-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-6);
  font-size: var(--text-3xl);
  color: white;
  box-shadow: var(--shadow-lg);
}

.premium-gate h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  color: var(--gray-800);
  margin-bottom: var(--space-4);
}

.premium-gate p {
  font-size: var(--text-lg);
  color: var(--gray-600);
  margin-bottom: var(--space-6);
}

.premium-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

/* ===== CONTENT SECTIONS ===== */
.content-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--gray-800);
  margin-bottom: var(--space-4);
}

.content-section-title i {
  color: var(--primary-500);
  font-size: var(--text-lg);
}

.content-description {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--gray-700);
}

.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--gray-800);
  margin: 0;
}

.card-title i {
  color: var(--primary-500);
}

/* ===== DOWNLOAD GRID ===== */
.download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
}

.download-option {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: var(--transition-fast);
  text-align: left;
  width: 100%;
}

.download-option:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.download-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--text-xl);
  flex-shrink: 0;
}

.download-info h4 {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--gray-800);
  margin: 0 0 var(--space-1) 0;
}

.download-info p {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin: 0;
}

/* ===== BUTTON SYSTEM ===== */
.btn-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  transition: var(--transition-fast);
  text-decoration: none;
  min-height: 44px;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn-modern:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.3);
}

.btn-modern:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Sizes */
.btn-sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  min-height: 36px;
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-lg);
  min-height: 52px;
}

.btn-xl {
  padding: var(--space-5) var(--space-10);
  font-size: var(--text-xl);
  min-height: 60px;
}

/* Button Variants - Luminie Brand Aligned */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-700), var(--secondary-700));
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: white;
}

.btn-secondary {
  background-color: white;
  color: var(--text-primary);
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  background-color: var(--bg-secondary);
  border-color: var(--border-medium);
  color: var(--text-primary);
  transform: translateY(-1px);
}

.btn-success {
  background: var(--gradient-success);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-success:hover {
  background: linear-gradient(135deg, var(--success-600), var(--success-700));
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: white;
}

.btn-warning {
  background: var(--gradient-warning);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-warning:hover {
  background: linear-gradient(135deg, var(--warning-600), var(--warning-700));
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: white;
}

.btn-danger {
  background: var(--gradient-error);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-danger:hover {
  background: linear-gradient(135deg, var(--error-600), var(--error-700));
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
  color: white;
}

/* Button States */
.btn-modern.loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-modern.loading .btn-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== HERO SECTION ===== */
.hero-section {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: white;
  padding: var(--space-8);
  border-radius: var(--radius-2xl);
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  opacity: 0.1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: var(--z-10);
}

.hero-title {
  font-size: var(--text-4xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-6);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
  opacity: 0.9;
}

.hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

/* ===== ACTION HIERARCHY ===== */
.action-hierarchy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ===== CONTENT SLIDER ===== */
.content-swiper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.content-swiper .swiper-slide img {
  width: 100%;
  height: auto; /* ✅ Dinamik yükseklik */
  object-fit: contain; /* ✅ Resmi tam göster */
  object-position: center;
}

.content-swiper .swiper-pagination-bullet {
  background-color: white;
  opacity: 0.5;
}

.content-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}

.content-swiper .swiper-button-next,
.content-swiper .swiper-button-prev {
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
}

.content-swiper .swiper-button-next:hover,
.content-swiper .swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .modern-container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .content-title {
    font-size: var(--text-3xl);
  }

  .content-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .content-swiper {
    height: 350px;
  }

  .floating-actions {
    top: var(--space-3);
    right: var(--space-3);
    gap: var(--space-1-5);
  }

  .fab-primary,
  .fab-secondary {
    width: 48px;
    height: 48px;
    font-size: var(--text-base);
  }

  .download-grid {
    grid-template-columns: 1fr;
  }

  .premium-gate {
    padding: var(--space-8);
  }

  .premium-icon {
    width: 64px;
    height: 64px;
    font-size: var(--text-2xl);
  }

  .premium-actions {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .content-title {
    font-size: var(--text-2xl);
  }

  .content-swiper {
    height: 280px;
  }

  .floating-actions {
    position: static;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--space-4);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    padding: var(--space-3);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
  }

  .fab-primary,
  .fab-secondary {
    width: 44px;
    height: 44px;
    font-size: var(--text-sm);
  }

  .download-option {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }

  .download-info h4 {
    font-size: var(--text-sm);
  }

  .download-info p {
    font-size: var(--text-xs);
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.btn-modern:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  .btn-modern {
    min-height: 48px;
    padding: var(--space-4) var(--space-6);
  }

  .btn-sm {
    min-height: 40px;
  }

  .btn-lg {
    min-height: 56px;
  }

  .modern-card:hover {
    transform: none;
    box-shadow: var(--shadow-md);
  }

  .btn-modern:hover {
    transform: none;
  }
}

/* ===== UTILITY CLASSES ===== */
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: var(--space-1);
}
.mb-2 {
  margin-bottom: var(--space-2);
}
.mb-3 {
  margin-bottom: var(--space-3);
}
.mb-4 {
  margin-bottom: var(--space-4);
}
.mb-6 {
  margin-bottom: var(--space-6);
}
.mb-8 {
  margin-bottom: var(--space-8);
}

.p-4 {
  padding: var(--space-4);
}
.p-6 {
  padding: var(--space-6);
}
.p-8 {
  padding: var(--space-8);
}

.rounded {
  border-radius: var(--radius-base);
}
.rounded-lg {
  border-radius: var(--radius-lg);
}
.rounded-xl {
  border-radius: var(--radius-xl);
}
.rounded-2xl {
  border-radius: var(--radius-2xl);
}

.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}

.text-muted {
  color: var(--gray-500);
}
.text-warning {
  color: var(--warning-600);
}
.text-success {
  color: var(--success-600);
}
.text-danger {
  color: var(--error-600);
}

/* ===== EXTRACTED INLINE CSS FROM content-detail.php ===== */
/* Content Detail Page Specific Styles */
.content-hero {
  background: linear-gradient(
    135deg,
    var(--primary-blue) 0%,
    var(--primary-purple) 100%
  );
  color: white;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.content-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 255, 255, 0.1) 1px,
      transparent 1px
    );
  background-size: 50px 50px;
  opacity: 0.3;
}

.content-image {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  position: relative;
}

.content-image:hover {
  transform: translateY(-5px);
}

/* SLIDER STİLLERİ */
.slider-wrapper {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

.content-slider {
  width: 100% !important;
  height: 450px !important;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  touch-action: pan-y pinch-zoom;
}

.swiper.content-slider {
  width: 100% !important;
  height: 450px !important;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  touch-action: pan-y pinch-zoom;
}

.swiper-wrapper {
  width: 100%;
  height: 100%;
  touch-action: pan-y pinch-zoom;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ Resmi tam göster */
  object-position: center;
  display: block;
}

/* ===== MODERN LAYOUT STYLES ===== */

/* Modern Hero Section */
.modern-content-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--primary-500) 0%,
    var(--secondary-500) 100%
  );
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.hero-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.9) 0%,
    rgba(139, 92, 246, 0.8) 50%,
    rgba(16, 185, 129, 0.7) 100%
  );
}

.hero-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(
      circle at 25% 25%,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(255, 255, 255, 0.05) 0%,
      transparent 50%
    );
  background-size: 100px 100px;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(1deg);
  }
}

/* Modern Breadcrumb */
.modern-breadcrumb {
  position: relative;
  z-index: 10;
}

.breadcrumb-modern {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item-modern {
  display: flex;
  align-items: center;
}

.breadcrumb-item-modern:not(:last-child)::after {
  content: "/";
  margin-left: 1rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 300;
}

.breadcrumb-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}

.breadcrumb-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.breadcrumb-item-modern.active span {
  color: white;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Hero Grid Layout */
.hero-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center; /* İlk bakışta her şey optimizasyonu için ortalama */
  min-height: calc(
    100vh - 120px
  ); /* Üstteki breadcrumb ve boşluklar için pay bırak */
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
}

/* === DİREKTİF 1: ESNEK SÜTUN YAPISI === */

/* Sol sütunu dikey bir flex konteynerine dönüştür */
.hero-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: white;
}

/* Ana içerik alanının esnemesini ve taşarsa kaydırılmasını sağla */
.hero-content-main {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 1em; /* Kaydırma çubuğu için boşluk */
}

/* Eylem (buton) alanının asla küçülmemesini sağla */
.hero-content-actions {
  flex-shrink: 0;
  padding-top: 1.5rem;
}

/* Kaydırma çubuğu için estetik stiller */
.hero-content-main::-webkit-scrollbar {
  width: 8px;
}
.hero-content-main::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.hero-content-main::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.4);
  border-radius: 4px;
}

.content-header {
  margin-bottom: 2rem;
}

.content-badges {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.modern-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.modern-badge.premium {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.3);
}

.modern-badge.free {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.3);
}

.modern-badge.featured {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.3);
}

.modern-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* ===== MODERN ICON IMPROVEMENTS ===== */
/* Better eye icon for view stats */
.compact-meta-item .fa-eye,
.card-stats .fa-eye {
  font-size: 0.9em;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.compact-meta-item:hover .fa-eye,
.card-stats:hover .fa-eye {
  opacity: 1;
}

/* Modern view counter styling */
.compact-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.compact-meta-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.content-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.content-description {
  font-size: 1.25rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  max-width: 600px;
}

/* === DİREKTİF 2A: İSTATİSTİKLERİN YENİDEN KONUMLANDIRILMASI === */

/* İstatistiklerin yeni konumu için stiller - Optimized */
.hero-visual .compact-meta-grid {
  display: flex;
  justify-content: center; /* Ortalanmış bir görünüm için */
  gap: 1rem;
  margin-top: 1.5rem; /* Thumbnail şeridi ile arasına daha fazla boşluk koy */
  flex-wrap: wrap;
}

.hero-visual .compact-meta-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: white;
  backdrop-filter: blur(10px);
  padding: 0.75rem 1.25rem;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.hero-visual .compact-meta-item:hover {
  background: rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

/* Compact Content Meta Grid - Sol sütundaki eski konum için */
.compact-meta-grid {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.compact-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  min-width: fit-content;
}

.compact-meta-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.compact-meta-item i {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

.compact-meta-item .meta-value {
  white-space: nowrap;
}

/* Legacy Content Meta Grid - Keep for compatibility */
.content-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.meta-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.meta-item i {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  width: 24px;
  text-align: center;
}

.meta-content {
  flex: 1;
}

.meta-label {
  display: block;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 0.25rem;
}

.meta-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: white;
}

/* Swiper container genişlik düzeltmeleri */
.swiper-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

.swiper-slide {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

/* Swiper navigasyon okları için stil */
.swiper-button-next,
.swiper-button-prev {
  color: white !important;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
}
.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 18px !important;
  font-weight: bold;
}

/* Swiper sayfalama noktaları için stil */
.swiper-pagination-bullet-active {
  background-color: white !important;
}

/* Slider Responsive Design */
/* ===== RESPONSIVE SLIDER OPTIMIZATION ===== */

/* Tablet Design */
@media (max-width: 1024px) {
  .content-swiper {
    height: 400px;
    max-height: 60vh;
    min-height: 280px;
  }
}

/* Mobile Design */
@media (max-width: 768px) {
  .content-swiper {
    height: 300px;
    max-height: 50vh;
    min-height: 250px;
    border-radius: 12px;
  }

  .modern-slider-container {
    border-radius: 16px;
    margin-bottom: 1.5rem;
  }
}

/* Small Mobile Design */
@media (max-width: 480px) {
  .content-swiper {
    height: 250px;
    max-height: 45vh;
    min-height: 200px;
    border-radius: 8px;
  }

  .modern-slider-container {
    border-radius: 12px;
    margin-bottom: 1rem;
  }

  .slide-content {
    padding: 0.5rem;
  }

  /* Navigation controls for mobile */
  .content-swiper .swiper-button-next,
  .content-swiper .swiper-button-prev {
    width: 36px;
    height: 36px;
    margin-top: -18px;
  }

  .swiper-btn {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }

  .swiper-btn {
    width: 36px;
    height: 36px;
    font-size: 0.875rem;
  }

  .modern-thumbnail-strip {
    padding: 0.75rem;
    margin-top: 0.75rem;
  }

  .modern-thumbnail {
    width: 60px;
    height: 45px;
  }
}

@media (max-width: 480px) {
  .content-swiper {
    min-height: 200px;
    max-height: 300px;
    border-radius: 8px;
  }

  .swiper-btn {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
  }

  .modern-thumbnail {
    width: 50px;
    height: 38px;
  }

  .thumbnail-container {
    gap: 0.5rem;
  }
}

/* ===== MODERN ACTION BUTTONS ===== */

/* Modern Actions Section */
.modern-actions-section {
  margin-top: 2rem;
}

.modern-download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.modern-action-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.modern-action-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.modern-action-btn:hover::before {
  left: 100%;
}

.modern-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}

.modern-action-btn .btn-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.modern-action-btn .btn-content {
  flex: 1;
}

.modern-action-btn .btn-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.modern-action-btn .btn-subtitle {
  display: block;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
}

/* Single Action Button */
.modern-action-btn-single {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  justify-content: center;
  min-width: 280px;
}

.modern-action-btn-single:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-4px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.5);
}

.modern-action-btn-single .btn-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  font-size: 1.5rem;
}

/* Login Prompt */
.modern-login-prompt {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.modern-login-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.2),
    rgba(5, 150, 105, 0.3)
  );
  backdrop-filter: blur(10px);
  border: 2px solid rgba(16, 185, 129, 0.4);
  border-radius: 20px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.125rem;
  font-weight: 600;
}

.modern-login-btn:hover {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.3),
    rgba(5, 150, 105, 0.4)
  );
  transform: translateY(-4px);
  box-shadow: 0 15px 50px rgba(16, 185, 129, 0.3);
  border-color: rgba(16, 185, 129, 0.6);
}

/* ===== MODERN VISUAL SECTION ===== */

.hero-visual {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.modern-slider-container {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  max-width: 100%;
  margin-bottom: 2rem; /* Proper spacing from other elements */
}

.modern-content-slider {
  position: relative;
}

.content-swiper {
  border-radius: 20px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  /* Responsive height optimization */
  height: 500px; /* Desktop default */
  max-height: 70vh; /* Prevent excessive height */
  min-height: 300px; /* Minimum for readability */
}

.slide-content {
  position: relative;
  height: 100%; /* Fill container height */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Contain within bounds */
  background: #f8f9fa; /* Subtle background for better contrast */
}

.slide-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* ✅ Keep full image display */
  object-position: center;
  transition: transform 0.3s ease;
  display: block;
  margin: 0 auto; /* Center horizontally */
}

/* Add a toggle button for users to switch between contain/cover */
.image-fit-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 10;
}

.slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  padding: 2rem;
  color: white;
}

.slide-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slide-number {
  font-size: 0.875rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Modern Navigation */
.swiper-navigation {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  padding: 0 1rem;
  pointer-events: none;
}

.swiper-btn {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 50%;
  color: var(--primary-500);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.swiper-btn:hover {
  background: white;
  transform: scale(1.1);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.swiper-btn:active {
  transform: scale(0.95);
}

/* Modern Pagination */
.modern-pagination {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.modern-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
}

.modern-pagination .swiper-pagination-bullet-active {
  background: white;
  transform: scale(1.2);
}

/* Modern Thumbnail Strip - Zero gap positioning */
.modern-thumbnail-strip {
  margin-top: 1rem; /* Slider ile arasında görsel ayrım için boşluk */
  padding: 1rem; /* İç boşluğu artır */
  background: rgba(255, 255, 255, 0.1); /* Daha görünür arka plan */
  backdrop-filter: blur(10px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Daha belirgin border */
  position: relative;
  z-index: 10;
  width: 100%;
  display: block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Görsel derinlik için gölge */
}

.thumbnail-container {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.thumbnail-container::-webkit-scrollbar {
  height: 4px;
}

.thumbnail-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

.thumbnail-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.modern-thumbnail {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.modern-thumbnail.active {
  border-color: #3b82f6; /* Luminie mavi rengi */
  background: rgba(59, 130, 246, 0.1); /* Hafif mavi arka plan */
  transform: scale(1.1); /* Daha belirgin büyütme */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2); /* Glow efekti */
}

.modern-thumbnail:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.6);
}

.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumbnail-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px 0 0 0;
}

/* Modern Placeholder */
.modern-placeholder {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.placeholder-content {
  text-align: center;
  color: white;
}

.placeholder-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}

.placeholder-text h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.placeholder-text p {
  font-size: 1rem;
  opacity: 0.8;
}

/* Premium Overlay */
.modern-premium-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  z-index: 20;
}

.premium-content {
  text-align: center;
  color: white;
  padding: 2rem;
}

.premium-icon {
  font-size: 3rem;
  color: #fbbf24;
  margin-bottom: 1rem;
}

.premium-text h4 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.premium-text p {
  font-size: 1rem;
  opacity: 0.9;
}

/* ===== MODERN CONTENT SECTION ===== */

.modern-content-section {
  padding: 2rem 0; /* 4rem'den 2rem'e düşür */
  background: linear-gradient(
    180deg,
    var(--bg-secondary) 0%,
    var(--bg-primary) 100%
  );
  position: relative;
}

.modern-content-grid {
  display: grid;
  grid-template-columns: 1fr; /* Sidebar kaldırıldığı için tek sütun */
  gap: 2rem;
  max-width: 1200px; /* Maksimum genişliği azalt */
  margin: 0 auto;
}

/* Responsive breakpoint'ler artık gerekli değil çünkü zaten tek sütun */

/* Main Content Area */
.main-content-area {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.modern-content-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
}

.modern-content-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.modern-content-card .card-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
}

.modern-content-card .card-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.modern-content-card .card-title i {
  color: var(--primary-500);
  font-size: 1.25rem;
}

.modern-content-card .card-content {
  padding: 2rem;
}

.content-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* Modern Actions Card */
.modern-actions-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  padding: 2rem;
  transition: all 0.3s ease;
}

.modern-actions-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.actions-header {
  text-align: center;
  margin-bottom: 2rem;
}

.actions-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.actions-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Unified Actions Grid */
.unified-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.unified-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.unified-action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(59, 130, 246, 0.1),
    transparent
  );
  transition: left 0.5s ease;
}

.unified-action-card:hover::before {
  left: 100%;
}

.unified-action-card:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.15);
}

.unified-action-card .action-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-size: 1.75rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

/* Icon Color Variations */
.unified-action-card .action-icon.pdf {
  background: var(--error-100);
  color: var(--error-600);
}

.unified-action-card .action-icon.image {
  background: var(--success-100);
  color: var(--success-600);
}

.unified-action-card .action-icon.gallery {
  background: var(--secondary-100);
  color: var(--secondary-600);
}

.unified-action-card .action-icon.all {
  background: var(--warning-100);
  color: var(--warning-600);
}

.unified-action-card .action-icon.print {
  background: var(--primary-100);
  color: var(--primary-600);
}

.unified-action-card .action-icon.instagram {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(188, 24, 136, 0.3);
}

.unified-action-card .action-icon.editor {
  background: var(--secondary-100);
  color: var(--secondary-600);
}

.unified-action-card .action-icon.share {
  background: var(--success-100);
  color: var(--success-600);
}

.unified-action-card .action-icon.login {
  background: var(--warning-100);
  color: var(--warning-600);
}

.unified-action-card .action-icon.single {
  background: var(--primary-100);
  color: var(--primary-600);
}

.unified-action-card .action-icon.posteminie {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.unified-action-card:hover .action-icon {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.unified-action-card:hover .action-icon.pdf {
  background: var(--error-500);
  color: white;
}

.unified-action-card:hover .action-icon.image {
  background: var(--success-500);
  color: white;
}

.unified-action-card:hover .action-icon.gallery {
  background: var(--secondary-500);
  color: white;
}

.unified-action-card:hover .action-icon.all {
  background: var(--warning-500);
  color: white;
}

.unified-action-card:hover .action-icon.print {
  background: var(--primary-500);
  color: white;
}

.unified-action-card:hover .action-icon.instagram {
  background: linear-gradient(45deg, #e6683c 0%, #dc2743 25%, #cc2366 50%, #bc1888 75%, #a91a7a 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(188, 24, 136, 0.4);
  transform: translateY(-1px);
}

.unified-action-card:hover .action-icon.editor {
  background: var(--secondary-500);
  color: white;
}

.unified-action-card:hover .action-icon.share {
  background: var(--success-500);
  color: white;
}

.unified-action-card:hover .action-icon.login {
  background: var(--warning-500);
  color: white;
}

.unified-action-card:hover .action-icon.single {
  background: var(--primary-500);
  color: white;
}

.unified-action-card:hover .action-icon.posteminie {
  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  color: white;
  transform: scale(1.1);
}

.unified-action-card .action-content {
  position: relative;
  z-index: 1;
}

.unified-action-card .action-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.unified-action-card .action-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Legacy Actions Grid - Keep for compatibility */
.actions-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modern-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.modern-action-card:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}

.modern-action-card .action-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-100);
  color: var(--primary-600);
  border-radius: 16px;
  font-size: 1.5rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.modern-action-card:hover .action-icon {
  background: var(--primary-500);
  color: white;
  transform: scale(1.1);
}

.modern-action-card .action-content {
  flex: 1;
}

.modern-action-card .action-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}

.modern-action-card .action-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.modern-action-card .action-arrow {
  color: var(--text-tertiary);
  font-size: 1rem;
  transition: all 0.3s ease;
}

.modern-action-card:hover .action-arrow {
  color: var(--primary-500);
  transform: translateX(4px);
}

/* Premium Gate */
.modern-premium-gate {
  background: linear-gradient(135deg, var(--warning-50), var(--warning-100));
  border: 2px solid var(--warning-200);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  margin: 2rem 0;
}

.modern-premium-gate.upgrade-required {
  background: linear-gradient(135deg, var(--warning-50), var(--secondary-50));
  border-color: var(--warning-300);
}

.gate-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.gate-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--warning-100);
  color: var(--warning-600);
  border-radius: 50%;
  font-size: 2rem;
}

.modern-premium-gate.upgrade-required .gate-icon {
  background: var(--warning-200);
  color: var(--warning-700);
}

.gate-text h4 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.gate-text p {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0;
}

.modern-gate-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: var(--primary-500);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.modern-gate-btn:hover {
  background: var(--primary-600);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.modern-gate-btn.premium {
  background: var(--warning-500);
}

.modern-gate-btn.premium:hover {
  background: var(--warning-600);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
}

/* ===== MODERN SIDEBAR ===== */

.sidebar-area {
  display: none; /* Sidebar'ı tamamen gizle */
}

.modern-sidebar-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  overflow: hidden;
  transition: all 0.3s ease;
}

.modern-sidebar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.sidebar-header {
  padding: 2rem 2rem 1rem;
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  border-bottom: 1px solid var(--border-light);
}

.sidebar-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.sidebar-title i {
  color: var(--primary-500);
  font-size: 1.125rem;
}

.sidebar-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.related-content-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.modern-related-card {
  display: flex;
  align-items: flex-start; /* center yerine flex-start - daha iyi hizalama */
  gap: 1.25rem; /* 1rem'den 1.25rem'e artır */
  padding: 1.25rem; /* 1rem'den 1.25rem'e artır */
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: 16px; /* 12px'den 16px'e artır */
  transition: all 0.3s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 100px; /* Minimum yükseklik belirle */
}

.modern-related-card:hover {
  background: var(--primary-50);
  border-color: var(--primary-200);
  transform: translateY(-3px); /* -2px'den -3px'e artır */
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15); /* Gölgeyi artır */
}

.related-image {
  width: 80px; /* 60px'den 80px'e artır */
  height: 80px; /* 60px'den 80px'e artır */
  border-radius: 12px; /* 8px'den 12px'e artır */
  overflow: hidden;
  flex-shrink: 0;
}

.related-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.related-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-100), var(--secondary-100));
  color: var(--primary-500);
  font-size: 1.25rem;
}

.related-content {
  flex: 1;
  min-width: 0;
}

.related-title {
  font-size: 1rem; /* 0.875rem'den 1rem'e artır */
  font-weight: 700; /* 600'den 700'e artır */
  color: var(--text-primary);
  margin: 0 0 0.5rem 0; /* 0.25rem'den 0.5rem'e artır */
  line-height: 1.4; /* 1.3'den 1.4'e artır */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-category {
  font-size: 0.8rem; /* 0.75rem'den 0.8rem'e artır */
  color: var(
    --primary-600
  ); /* text-secondary yerine primary-600 - daha belirgin */
  font-weight: 500; /* Font weight ekle */
  margin: 0 0 0.75rem 0; /* 0.5rem'den 0.75rem'e artır */
}

.related-badges {
  display: flex;
  gap: 0.75rem; /* 0.5rem'den 0.75rem'e artır */
  margin-bottom: 0.75rem; /* Alt boşluk ekle */
}

.related-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 0.25rem'den 0.375rem'e artır */
  padding: 0.375rem 0.75rem; /* 0.25rem 0.5rem'den artır */
  border-radius: 8px; /* 6px'den 8px'e artır */
  font-size: 0.8rem; /* 0.75rem'den 0.8rem'e artır */
  font-weight: 600; /* 500'den 600'e artır */
}

.related-badge.premium {
  background: linear-gradient(
    135deg,
    var(--warning-100),
    var(--warning-200)
  ); /* Gradient ekle */
  color: var(--warning-800); /* Daha koyu renk */
  border: 1px solid var(--warning-300); /* Border ekle */
}

.related-badge.free {
  background: linear-gradient(
    135deg,
    var(--success-100),
    var(--success-200)
  ); /* Gradient ekle */
  color: var(--success-800); /* Daha koyu renk */
  border: 1px solid var(--success-300); /* Border ekle */
}

/* İstatistikler için yeni stil */
.related-stats {
  display: flex;
  gap: 1rem; /* Boşluğu artır */
  margin-top: 0.5rem; /* Üst boşluk ekle */
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem; /* Biraz büyüt */
  color: var(--text-secondary);
  font-weight: 500;
}

.stat-item i {
  color: var(--primary-500);
  font-size: 0.8rem;
}

.related-arrow {
  color: var(--text-tertiary);
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.modern-related-card:hover .related-arrow {
  color: var(--primary-500);
  transform: translateX(2px);
}

/* ===== RESPONSIVE DESIGN FOR MODERN LAYOUT ===== */

@media (max-width: 768px) {
  /* Hero Section Mobile */
  .modern-content-hero {
    min-height: 100vh;
    padding: 2rem 0;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    min-height: auto;
  }

  .content-title {
    font-size: 2rem;
  }

  .content-description {
    font-size: 1rem;
  }

  /* Compact Meta Mobile */
  .compact-meta-grid {
    gap: 0.5rem;
    justify-content: flex-start;
  }

  .compact-meta-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
  }

  /* Mobile Thumbnail Strip Optimizations */
  .modern-thumbnail-strip {
    margin-top: 0; /* Mobile'da hiç boşluk yok - tamamen yapışık */
    padding: 0.5rem; /* Daha kompakt padding */
    background: rgba(255, 255, 255, 0.08); /* Biraz daha görünür */
    border-radius: 12px; /* Daha küçük border radius */
  }

  .modern-thumbnail {
    width: 70px; /* Mobile'da daha küçük */
    height: 50px;
    border-radius: 6px;
  }

  .thumbnail-container {
    gap: 0.5rem; /* Daha az gap */
    padding: 0.25rem 0;
  }

  .thumbnail-indicator {
    font-size: 0.7rem; /* Daha küçük font */
    padding: 0.2rem 0.4rem;
  }

  /* Mobile Slider Container Adjustments */
  .modern-content-slider {
    padding-bottom: 0; /* Mobile'da hiç padding yok - tamamen yapışık */
  }

  .modern-slider-container {
    border-radius: 16px; /* Mobile'da daha küçük border radius */
  }

  .compact-meta-item i {
    font-size: 0.875rem;
  }

  /* Legacy Meta Mobile */
  .content-meta-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .meta-item {
    padding: 0.75rem;
  }

  /* Unified Actions Mobile */
  .unified-actions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .unified-action-card {
    padding: 1rem;
  }

  .unified-action-card .action-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .unified-action-card .action-title {
    font-size: 0.875rem;
  }

  .unified-action-card .action-description {
    font-size: 0.75rem;
  }

  /* Modern Actions Mobile */
  .modern-download-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .modern-action-btn {
    padding: 1rem;
  }

  .modern-action-btn .btn-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .modern-action-btn-single {
    padding: 1.25rem 1.5rem;
    min-width: auto;
    font-size: 1rem;
  }

  .modern-action-btn-single .btn-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  /* Visual Section Mobile */
  .content-swiper {
    height: 300px; /* Eski değer 350px idi - mobil için orantılı azaltma */
  }

  .swiper-btn {
    width: 40px;
    height: 40px;
    font-size: 0.875rem;
  }

  .modern-thumbnail {
    width: 60px;
    height: 45px;
  }

  .thumbnail-container {
    gap: 0.5rem;
  }

  /* Content Section Mobile */
  .modern-content-section {
    padding: 1rem 0; /* Mobile'da daha da az padding */
  }

  .modern-content-card .card-header,
  .modern-content-card .card-content {
    padding: 1.5rem;
  }

  .modern-actions-card {
    padding: 1.5rem;
  }

  .modern-action-card {
    padding: 1rem;
  }

  .modern-action-card .action-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  /* Premium Gate Mobile */
  .modern-premium-gate {
    padding: 2rem 1.5rem;
  }

  .gate-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }

  /* Sidebar Mobile */
  .sidebar-header {
    padding: 1.5rem;
  }

  .related-content-list {
    padding: 0.75rem;
  }

  .modern-related-card {
    padding: 0.75rem;
  }

  .related-image {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  .modern-content-hero {
    padding: 1rem 0;
  }

  .content-title {
    font-size: 1.75rem;
  }

  /* Extra Small Compact Meta */
  .compact-meta-grid {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .compact-meta-item {
    min-width: 120px;
    justify-content: center;
  }

  /* Extra Small Legacy Meta */
  .content-meta-grid {
    grid-template-columns: 1fr;
  }

  /* Extra Small Unified Actions */
  .unified-actions-grid {
    grid-template-columns: 1fr;
  }

  .content-swiper {
    height: 250px; /* Eski değer 280px idi - küçük ekranlar için orantılı azaltma */
  }

  .modern-thumbnail-strip {
    padding: 0.75rem;
  }

  .modern-content-card .card-header,
  .modern-content-card .card-content,
  .modern-actions-card {
    padding: 1rem;
  }

  .modern-premium-gate {
    padding: 1.5rem 1rem;
  }

  .gate-text h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .content-slider,
  .swiper.content-slider {
    height: 250px !important;
    border-radius: 10px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 32px;
    height: 32px;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 12px !important;
  }

  /* Extra Small Thumbnail Strip */
  .modern-thumbnail-strip {
    margin-top: 0; /* Çok küçük ekranlar için hiç boşluk yok */
    padding: 0.4rem;
    border-radius: 10px;
  }

  .modern-thumbnail {
    width: 60px; /* Çok küçük ekranlar için daha da küçük */
    height: 45px;
    border-radius: 5px;
  }

  .thumbnail-container {
    gap: 0.4rem;
  }

  .thumbnail-indicator {
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
  }

  /* Extra Small Slider Container */
  .modern-content-slider {
    padding-bottom: 0; /* Çok küçük ekranlar için hiç padding yok */
  }

  .modern-slider-container {
    border-radius: 12px;
  }
}

/* MODERN THUMBNAIL NAVIGATION STİLLERİ */
.thumbnail-navigation {
  width: 100%;
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-sm);
}

.thumbnail-wrapper {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 8px 4px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.thumbnail-wrapper::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.thumbnail-item {
  position: relative;
  flex-shrink: 0;
  width: 90px;
  height: 68px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.thumbnail-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-lg);
  border-color: rgba(59, 130, 246, 0.3);
}

/* Active thumbnail styling */
.thumbnail-item.active {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), var(--shadow-md);
  background: rgba(255, 255, 255, 1);
}

.thumbnail-item.active::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-purple)
  );
  border-radius: 14px;
  z-index: -1;
  opacity: 0.8;
}

/* Thumbnail image styling */
.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 10px;
}

.thumbnail-item:hover .thumbnail-image {
  transform: scale(1.08);
}

/* Thumbnail overlay styling */
.thumbnail-overlay {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--primary-purple)
  );
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(10px);
  opacity: 0.95;
}

.thumbnail-number {
  line-height: 1;
  font-family: system-ui, -apple-system, sans-serif;
}

/* ===== HERO DOWNLOAD BUTTONS ===== */
.hero-download-section {
  margin-top: 2rem;
}

.hero-download-grid {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn-hero-download {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  text-align: center;
}

.btn-hero-download:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.btn-hero-download-single {
  background: linear-gradient(135deg, #28a745, #20c997);
  border: none;
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
  min-width: 200px;
}

.btn-hero-download-single:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(40, 167, 69, 0.4);
}

.btn-hero-login {
  background: linear-gradient(135deg, #007bff, #0056b3);
  border: none;
  color: white;
  padding: 1rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
  text-decoration: none;
  display: inline-block;
  min-width: 200px;
  text-align: center;
}

.btn-hero-login:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
  text-decoration: none;
}

/* Specific button colors */
.btn-pdf:hover {
  background: rgba(220, 53, 69, 0.2) !important;
  border-color: rgba(220, 53, 69, 0.5) !important;
}

.btn-image:hover {
  background: rgba(0, 123, 255, 0.2) !important;
  border-color: rgba(0, 123, 255, 0.5) !important;
}

.btn-gallery:hover {
  background: rgba(40, 167, 69, 0.2) !important;
  border-color: rgba(40, 167, 69, 0.5) !important;
}

.btn-all:hover {
  background: rgba(255, 193, 7, 0.2) !important;
  border-color: rgba(255, 193, 7, 0.5) !important;
}

/* ===== CONTENT ACTION BUTTONS ===== */
.btn-success {
  background: linear-gradient(135deg, var(--success-green), #059669);
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #059669, var(--success-green));
}

.btn-outline-primary {
  border: 2px solid var(--primary-blue);
  color: var(--primary-blue);
  border-radius: 12px;
  padding: 10px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-outline-primary:hover {
  background: var(--primary-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

.text-editor-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.text-editor-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
  color: white;
}

/* ===== ALERT STYLES ===== */
.alert {
  border-radius: 12px;
  border: none;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.alert-warning {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
}

/* ===== RELATED CONTENT CARDS ===== */
.related-card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.related-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* ===== BREADCRUMB ===== */
.breadcrumb {
  background: transparent;
  padding: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.7);
}

/* ===== BADGES ===== */
.badge {
  border-radius: 20px;
  padding: 8px 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.bg-warning {
  background: linear-gradient(
    135deg,
    var(--warning-orange),
    #d97706
  ) !important;
}

.bg-success {
  background: linear-gradient(135deg, var(--success-green), #059669) !important;
}

/* ===== RESPONSIVE HERO DOWNLOADS ===== */
@media (max-width: 768px) {
  .hero-download-grid {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .btn-hero-download,
  .btn-hero-download-single,
  .btn-hero-login {
    width: 100%;
    min-width: auto;
  }

  .hero-download-section {
    margin-top: 1.5rem;
  }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  .btn-hero-download:hover,
  .btn-hero-download-single:hover,
  .btn-hero-login:hover {
    transform: none;
  }

  .btn-hero-download:active,
  .btn-hero-download-single:active,
  .btn-hero-login:active {
    transform: scale(0.98);
  }
}

/* ===== HERO ACTION BUTTONS - YENİ PROFESYONEL LAYOUT ===== */

/* 1. Ana 'İşlemler' kartını hero alanına uygun hale getir - Optimized */
.hero-content .modern-actions-card {
  background: transparent; /* Arka planı kaldır */
  border: none; /* Kenarlığı kaldır */
  box-shadow: none; /* Gölgeyi kaldır */
  padding: 0; /* İç boşluğu sıfırla */
  margin-top: 1.5rem; /* Açıklama yazısı ile arasına boşluk koy - azaltıldı */
}

/* 2. 'İşlemler' başlığını sola hizala ve rengini değiştir */
.hero-content .modern-actions-card .actions-header {
  text-align: left; /* Başlığı sola hizala */
  padding: 0;
  margin-bottom: 1.5rem;
}

.hero-content .modern-actions-card .actions-title,
.hero-content .modern-actions-card .actions-subtitle {
  color: #ffffff; /* Başlık rengini beyaz yap */
}

.hero-content .modern-actions-card .actions-title {
  opacity: 0.9;
  font-size: 1.25rem; /* Başlık fontunu biraz küçültebiliriz */
}

.hero-content .modern-actions-card .actions-subtitle {
  opacity: 0.7;
  font-size: 0.875rem;
}

/* 3. Eylem butonlarının kendisini hero arayüzüne uyarla */
.hero-content .unified-actions-grid {
  grid-template-columns: repeat(
    auto-fit,
    minmax(150px, 1fr)
  ); /* Butonları biraz daha daraltabiliriz */
  gap: 0.75rem;
}

.hero-content .unified-action-card {
  background: rgba(0, 0, 0, 0.2); /* Yarı saydam koyu arka plan */
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px); /* Hafif bir bulanıklık efekti */
  padding: 1rem;
  border-radius: 12px;
}

/* 4. Butonların içindeki ikon ve metin renklerini düzenle */
.hero-content .unified-action-card .action-title {
  color: #ffffff;
  opacity: 0.95;
  font-size: 0.875rem;
}

.hero-content .unified-action-card .action-description {
  color: #ffffff;
  opacity: 0.7;
  font-size: 0.75rem;
}

/* İkonların arka planlarını standartlaştır ve saydam yap */
.hero-content .unified-action-card .action-icon {
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  background: rgba(
    255,
    255,
    255,
    0.1
  ); /* Tüm ikon arka planları için standart görünüm */
  color: #ffffff; /* İkon rengi beyaz */
  border-radius: 10px;
}

/* 5. Hover (üzerine gelme) efektlerini yeni tasarıma uyarla */
.hero-content .unified-action-card:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-3px); /* Hafif yukarı kalkma efekti */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-content .unified-action-card:hover .action-icon {
  transform: scale(1.1); /* İkon hover'da hafifçe büyüsün */
}

/* 6. Mobil uyumluluk için küçük bir ayar */
@media (max-width: 1024px) {
  /* hero-grid zaten tek sütuna düştüğü için işlemler kartı
       otomatik olarak slider'ın üstünde konumlanacaktır.
       Bu profesyonel bir mobil görünüm için zaten idealdir.
       Sadece boşlukları ayarlayalım. */

  .hero-content .modern-actions-card {
    margin-top: 2rem;
    margin-bottom: 2rem; /* Slider ile arasına boşluk koy */
    padding: 0 1rem; /* Kenarlardan hafif boşluk */
  }
}

/* ===== HERO İSTATİSTİK (META) YENİDEN KONUMLANDIRMA ===== */

.content-header .compact-meta-grid {
  margin-top: 1.5rem; /* Başlıkla arasına boşluk koy */
  margin-bottom: 1.5rem; /* Açıklama ile arasına boşluk koy */
  justify-content: flex-start; /* Sola hizalı kalmasını garantile */
  gap: 0.75rem; /* Öğeler arası boşluğu biraz azalt */
}

.content-header .compact-meta-item {
  padding: 0.5rem 1rem; /* Daha kompakt bir görünüm için iç boşluk */
  font-size: 0.8rem; /* Yazı boyutunu küçülterek meta verisi olduğunu vurgula */
  border-radius: 16px; /* Daha yuvarlak kenarlar */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.content-header .compact-meta-item i {
  font-size: 0.875rem; /* İkon boyutunu ayarla */
}

/* ===== THUMBNAIL NAVİGASYONUNUN GÖRÜNÜR HALE GETİRİLMESİ ===== */

/* Ana slider sarmalayıcısını pozisyonlandırma için hazırla */
.modern-content-slider {
  position: relative;
  padding-bottom: 0; /* Hiç padding yok - thumbnail'lar tamamen yapışık */
}

/* Absolute positioning kuralı kaldırıldı - artık normal flow'da konumlanıyor */

/* Thumbnail'ların içindeki kaydırma çubuğunu gizle */
.modern-thumbnail-strip .thumbnail-container {
  scrollbar-width: none; /* Firefox */
}
.modern-thumbnail-strip .thumbnail-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* ===== YENİ İYİLEŞTİRİLMİŞ İLGİLİ İÇERİKLER BÖLÜMÜ ===== */
.improved-related-content-section {
  padding: 1.5rem 0; /* 4rem'den 1.5rem'e düşür - hero ile daha yakın */
  background: linear-gradient(
    135deg,
    var(--bg-primary) 0%,
    var(--bg-secondary) 100%
  );
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: 2rem; /* 3rem'den 2rem'e düşür */
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.section-title i {
  color: var(--primary-500);
  font-size: 1.75rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
}

/* Grid Layout - Responsive */
.improved-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .improved-related-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 480px) {
  .improved-related-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* İyileştirilmiş Kart Tasarımı */
.improved-related-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--border-light);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.improved-related-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border-color: var(--primary-200);
}

.improved-related-card .card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

/* Kart Görseli */
.improved-related-card .card-image {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, var(--gray-100), var(--gray-200));
  overflow: hidden;
}

.improved-related-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.improved-related-card:hover .card-image img {
  transform: scale(1.05);
}

.improved-related-card .image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary-50), var(--secondary-50));
  color: var(--primary-400);
  font-size: 3rem;
}

.improved-related-card .premium-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
  color: white;
  padding: 0.5rem;
  border-radius: 50%;
  font-size: 0.875rem;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
  z-index: 2;
}

/* Kart İçeriği */
.improved-related-card .card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: calc(100% - 200px);
}

.improved-related-card .card-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-600);
  background: var(--primary-100);
  padding: 0.375rem 0.875rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: fit-content;
}

.improved-related-card .card-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.improved-related-card .card-description {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.improved-related-card .card-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.improved-related-card .stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.improved-related-card .stat i {
  color: var(--primary-500);
  font-size: 0.75rem;
}

/* View More Button */
.view-more-section {
  text-align: center;
  margin-top: 3rem;
}

.view-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
}

.view-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(59, 130, 246, 0.4);
  background: linear-gradient(135deg, var(--primary-600), var(--secondary-600));
}

.view-more-btn .btn-icon {
  transition: transform 0.3s ease;
}

.view-more-btn:hover .btn-icon {
  transform: translateY(2px);
}

/* Gizli kartlar için başlangıç stili */
.improved-related-card:nth-child(n + 7) {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

/* Responsive iyileştirmeler */
@media (max-width: 768px) {
  .section-title {
    font-size: 1.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .improved-related-card .card-content {
    padding: 1.25rem;
  }

  .improved-related-card .card-title {
    font-size: 1rem;
  }

  .improved-related-card .card-description {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .improved-related-content-section {
    padding: 1rem 0; /* Mobile'da çok minimal padding */
  }

  .section-header {
    margin-bottom: 1.5rem; /* Mobile'da daha az margin */
  }

  .section-title {
    font-size: 1.25rem;
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  .improved-related-card .card-image {
    height: 160px;
  }

  .view-more-btn {
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }
}

/* ESKİ YATAY İLGİLİ İÇERİKLER BÖLÜMÜ - Artık kullanılmıyor ama uyumluluk için bırakıldı */
.related-content-section {
  padding: 3rem 0;
  background: var(--bg-secondary);
  position: relative;
  display: none; /* Artık kullanılmıyor */
}

.related-section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
}

.related-swiper {
  overflow: visible; /* Kartların gölgelerinin kesilmemesi için */
}

.related-swiper .swiper-slide {
  width: 280px; /* Her bir kartın genişliği */
}

.related-card-link {
  display: block;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
}

.related-card-link:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.related-card-image {
  height: 160px;
  background-color: var(--gray-100);
}

.related-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.related-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--gray-300);
}

.related-card-content {
  padding: 1rem;
}

.related-card-category {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-600);
  background-color: var(--primary-100);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
}

.related-card-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 0;
  /* İki satırla sınırla */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* İlgili içerikler navigasyon butonları */
.swiper-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.swiper-nav-btn:hover {
  background: var(--primary-500);
  color: white;
  transform: translateY(-50%) scale(1.1);
}
.related-swiper-button-prev {
  left: 1rem;
}
.related-swiper-button-next {
  right: 1rem;
}

/* ===== İYİLEŞTİRİLMİŞ İLGİLİ İÇERİKLER KARTLARI ===== */

.related-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.related-card-badge.premium {
  background: linear-gradient(135deg, var(--warning-500), var(--warning-600));
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.related-card-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0.5rem 0;
}

.related-card-stats {
  display: flex;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-light);
}

.related-stat {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.related-stat i {
  font-size: 0.625rem;
  opacity: 0.8;
}

/* ===== SIDEBAR POPÜLER İÇERİKLER STİLLERİ ===== */

.related-stats {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-weight: 500;
}

.stat-item i {
  font-size: 0.625rem;
  opacity: 0.7;
}

/* Responsive iyileştirmeler */
@media (max-width: 768px) {
  .related-card-stats {
    gap: 0.75rem;
  }

  .related-stat {
    font-size: 0.7rem;
  }

  .related-card-description {
    font-size: 0.8rem;
  }
}

/* ===== PRINT MENU STYLES ===== */
.print-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease-out;
}

.print-menu-content {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 320px;
  width: 90%;
  animation: slideUp 0.3s ease-out;
}

.print-menu-content h3 {
  margin: 0 0 20px 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #1f2937);
  text-align: center;
}

.print-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--bg-secondary, #f8fafc);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  color: var(--text-primary, #1f2937);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.print-option:hover {
  background: var(--primary-50, #eff6ff);
  border-color: var(--primary-300, #93c5fd);
  color: var(--primary-700, #1d4ed8);
  transform: translateY(-1px);
}

.print-option i {
  margin-right: 12px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.print-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  margin-top: 12px;
  background: transparent;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 8px;
  color: var(--text-secondary, #6b7280);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.print-menu-close:hover {
  background: var(--bg-secondary, #f8fafc);
  color: var(--text-primary, #1f2937);
}

.print-menu-close i {
  margin-right: 8px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}