:root {
    --primary: #2c3e50;
    --accent: #e67e22;
    --accent-hover: #d35400;
    --python-green: #306998;
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --locked-bg: #f1f3f5;
    --locked-text: #adb5bd;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg);
    color: var(--primary);
    line-height: 1.6;
  }
  header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .logo {
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .back-link {
    text-decoration: none;
    color: white;
    background: rgba(255,255,255,0.1);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    transition: background 0.2s;
  }
  .back-link:hover { background: var(--accent); }
  .hero {
    background: linear-gradient(135deg, var(--python-green) 0%, #204a6f 100%);
    color: white;
    padding: 3rem 1rem;
    text-align: center;
  }
  .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
  .hero-subtitle { font-size: 1.2rem; opacity: 0.95; max-width: 700px; margin: 0 auto; }
  .container { max-width: 1100px; margin: 0 auto; padding: 2rem 1rem; }
  .section {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
  }
  .section-title {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 3px solid var(--accent);
  }
  .chapter-item {
    background: #f8f9fa;
    border-left: 4px solid var(--python-green);
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    transition: all 0.2s;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }
  .chapter-item:hover {
    background: #e8f4f8;
    border-left-color: var(--accent);
    transform: translateX(5px);
  }
  .chapter-number {
    background: var(--python-green);
    color: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
  }
  .chapter-content { flex: 1; }
  .chapter-content h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
  .chapter-description {
    font-size: 0.95rem;
    color: #7f8c8d;
    line-height: 1.5;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-bottom: 0.5rem;
  }
  .chapter-description.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 3em;
  }
  .chapter-description.expanded {
    display: block;
    max-height: none;
  }
  .read-more-btn {
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.3rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: color 0.2s;
  }
  .read-more-btn:hover {
    color: var(--accent-hover);
    text-decoration: underline;
  }
  .chapter-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 2px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
  }
  .badge-pdf { background: #e3f2fd; color: #1976d2; border-color: #1976d2; }
  .badge-pdf:hover { background: #1976d2; color: white; }
  .badge-video { background: #ffebee; color: #d32f2f; border-color: #d32f2f; }
  .badge-video:hover { background: #d32f2f; color: white; }
  .badge-podcast { background: #f3e5f5; color: #7b1fa2; border-color: #7b1fa2; }
  .badge-podcast:hover { background: #7b1fa2; color: white; }
  .badge-app { background: #e8f5e9; color: #388e3c; border-color: #388e3c; }
  .badge-app:hover { background: #388e3c; color: white; }


  /* Mevcut .media-container stilini tamamen değiştirin */
.media-container {
display: none;
margin-top: 1.5rem;
padding: 2rem;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 16px;
border: 2px solid #e0e0e0;
animation: fadeIn 0.3s ease;
width: 100%;
}

/* Video player için özel ayar */
.media-container video {
width: 100%;
max-height: 400px;
border-radius: 12px;
background: #000;
outline: none;
}

/* Audio player için geniş ve belirgin stil */
.media-container audio {
width: 100%;
height: 70px !important; /* Daha yüksek kontrol çubuğu */
border-radius: 15px;
outline: none;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
background: rgb(255, 255, 255);
}

/* image için geniş ve belirgin stil Yeni eklendi*/
/* Poster/Image Container */
.poster-container {
display: none;
width: 100%;
max-width: 600px;
margin: 0 auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
background: white;
}

.poster-image {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}

/* Badge için yeni stil */
.badge-poster { 
background: #fff3e0; 
color: #f57c00; 
border-color: #f57c00; 
}
.badge-poster:hover { 
background: #f57c00; 
color: white; 
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245,124,0,0.3);
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
.poster-container {
  max-width: 100%;
}
}
/* Buraya kadar yeni eklendi image için poster yani*/



/* Badge'ler için container */
.chapter-meta {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
margin-top: 1rem;
}

/* Badge stilleri */
.badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.2rem;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
border: 2px solid;
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
}

.badge-pdf { 
background: #e3f2fd; 
color: #1976d2; 
border-color: #1976d2; 
}
.badge-pdf:hover { 
background: #1976d2; 
color: white; 
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(25,118,210,0.3);
}

.badge-video { 
background: #ffebee; 
color: #d32f2f; 
border-color: #d32f2f; 
}
.badge-video:hover { 
background: #d32f2f; 
color: white; 
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(211,47,47,0.3);
}

.badge-podcast { 
background: #f3e5f5; 
color: #7b1fa2; 
border-color: #7b1fa2; 
}
.badge-podcast:hover { 
background: #7b1fa2; 
color: white; 
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(123,31,162,0.3);
}

.badge-app { 
background: #e8f5e9; 
color: #388e3c; 
border-color: #388e3c; 
}
.badge-app:hover { 
background: #388e3c; 
color: white; 
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(56,142,60,0.3);
}

/* Kapat butonu */
.close-media {
background: none;
border: none;
color: var(--accent, #e67e22);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
margin-top: 1rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s;
}

.close-media:hover { 
color: var(--accent-hover, #d35400);
transform: translateX(-3px);
}

/* Fade in animasyonu */
@keyframes fadeIn {
from { 
  opacity: 0; 
  transform: translateY(-10px); 
}
to { 
  opacity: 1; 
  transform: translateY(0); 
}
}

/* Mobil uyumluluk */
@media (max-width: 768px) {
.media-container {
  padding: 1.5rem;
}

.media-container audio {
  height: 70px !important;
}

.badge {
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}
}

.btn-toggle {
    background: linear-gradient(135deg, var(--accent), #f39c12);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(230,126,34,0.3);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

.btn-toggle:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,126,34,0.4); }







  .hidden-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    opacity: 0;
  }
  .hidden-content.show {
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.8s ease-in, opacity 0.5s ease-in;
  }
  .hidden-wrapper {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    margin-top: 1rem;
    box-shadow: 0 3px 15px rgba(0,0,0,0.08);
  }
  .future-chapter {
    background: var(--locked-bg);
    border-left: 4px solid var(--locked-text);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.8;
  }
  .future-chapter .chapter-number {
    background: var(--locked-text);
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .future-chapter h3 {
    font-size: 1.05rem;
    color: var(--locked-text);
    margin: 0;
  }
  .coming-badge {
    margin-left: auto;
    background: #fff3cd;
    color: #856404;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
  }
  .btn-close {
    background: #6c757d;
    color: white;
    border: none;
    padding: 0.8rem 2rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 1rem;
  }
  .btn-close:hover { background: #5a6268; transform: translateY(-2px); }
  footer {
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 3rem;
    color: #7f8c8d;
    font-size: 0.9rem;
    border-top: 1px solid #dee2e6;
  }
  footer a { color: var(--accent); text-decoration: none; }
  @media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .chapter-item { flex-direction: column; }
    .chapter-meta { justify-content: flex-start; }
  }

/* Iframe için özel stil */
.media-container iframe {
width: 100%;
height: 650px; /* Varsayılan yükseklik, ihtiyaca göre değiştirebilirsiniz */
border: 1px solid #e0e0e0;
border-radius: 12px;
background: white;
display: none;
}

/* Flashcard/Quiz badge rengi */
.badge-flashcard { 
background: #e0f7fa; 
color: #00838f; 
border-color: #00838f; 
}
.badge-flashcard:hover { 
background: #00838f; 
color: white; 
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,131,143,0.3);
}

/* Mobilde iframe yüksekliğini küçült */
@media (max-width: 768px) {
.media-container iframe { height: 400px; }
}