/* style.css (V32 - Burger Menü ve İndex Sayfası Güncellemesi) */

:root {
    --color-blue: #2563eb;
    --color-blue-dark: #1d4ed8;
    --color-blue-light: #dbeafe;
    --color-blue-text: #1d4ed8;
    --color-green-light: #dcfce7;
    --color-green-text: #166534;
    --color-yellow-light: #fef9c3;
    --color-yellow-text: #854d0e;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #b91c1c;
    --color-danger-border: #fecaca;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #b45309;
    --color-warning-border: #fde68a;
    --color-success-bg: #dcfce7;
    --color-success-text: #15803d;
    --color-success-border: #bbf7d0;
    --color-dark: #111827;
    --color-gray: #4b5563;
    --color-light-gray: #f3f4f6;
    --color-border: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --speed-fast: 200ms;
    --speed-normal: 300ms;
    --speed-card-flip: 600ms;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, sans-serif;
    background-color: #f9fafb;
    color: var(--color-dark);
    margin: 0;
    padding-top: 70px; /* Sabit header için boşluk (mobilde değişebilir) */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}
.hidden { display: none !important; }

/* ---------------- */
/* GENEL ELEMENTLER */
/* ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 12px 24px; font-size: 1rem; font-weight: 600;
    text-decoration: none; border-radius: 8px; border: none; cursor: pointer;
    transition: all 0.2s ease-in-out; white-space: nowrap;
}
.btn:active { transform: scale(0.96); box-shadow: var(--shadow-sm); }
.btn-primary {
    background-color: var(--color-blue);
    color: white;
    box-shadow: var(--shadow-md);
    /* YENİ: Butona hafif gradient */
    background-image: linear-gradient(to bottom, var(--color-blue), #1e40af);
}
.btn-primary:hover {
    background-color: var(--color-blue-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    /* YENİ: Hover gradient */
    background-image: linear-gradient(to bottom, #1e40af, #1c3faa);
}
.btn-secondary { background-color: white; color: var(--color-dark); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background-color: var(--color-light-gray); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-large { width: 100%; padding: 16px 32px; font-size: 1.125rem; }
.btn-small { padding: 8px 12px; font-size: 0.875rem; }

.section-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 60px;
    color: var(--color-dark);
}

.icon-wrapper {
    width: 48px; height: 48px; border-radius: 9999px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.icon-wrapper.bg-green { background-color: var(--color-green-light); color: var(--color-green-text); }
.icon-wrapper.bg-blue  { background-color: var(--color-blue-light); color: var(--color-blue-text); }
.icon-wrapper.bg-yellow{ background-color: var(--color-yellow-light); color: var(--color-yellow-text); }
.icon-wrapper svg { width: 24px; height: 24px; }


/* ---------------- */
/* NAVİGASYON ÇUBUĞU (BURGER GÜNCELLEMESİ) */
/* ---------------- */
.main-header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: var(--shadow-sm);
}

.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.nav-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-dark);
    text-decoration: none;
    flex-shrink: 0;
}

.nav-burger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 28px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}
.nav-burger-btn span {
    width: 100%;
    height: 3px;
    background: var(--color-dark);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
}
.nav-burger-btn.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}
.nav-burger-btn.is-active span:nth-child(2) {
    opacity: 0;
}
.nav-burger-btn.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

.nav-mobile-menu {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
    margin-top: 10px;
}
.nav-mobile-menu.is-active {
    display: flex;
}

.nav-links {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
     overflow-x: visible;
     padding-bottom: 0;
     margin-left: 0;
}
.nav-link {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-gray);
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
    transition: background-color var(--speed-fast) ease;
    white-space: nowrap;
    width: 100%;
}
.nav-link:hover {
    background-color: var(--color-light-gray);
    color: var(--color-dark);
}

.nav-auth {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
    width: 100%;
}
.nav-score, .nav-streak {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.95rem;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    width: auto;
}
.nav-score { color: var(--color-dark); background-color: var(--color-yellow-light); border: 1px solid var(--color-warning-border); }
.nav-streak { color: #b91c1c; background-color: #fee2e2; border: 1px solid #fecaca; }


/* ----------------------- */
/* ANA SAYFA (index.html) */
/* ----------------------- */
.hero-section.new-hero {
    display: flex;
    align-items: center;
    justify-content: center; /* İllüstrasyon yoksa ortala */
    gap: 40px;
    padding: 60px 20px;
    flex-direction: column;
    text-align: center;
}
/* YENİ: İllüstrasyon olmadığında içerik */
.hero-section.new-hero.no-image .hero-content {
    max-width: 700px; /* Biraz daha geniş olabilir */
}
.hero-content {
    max-width: 100%;
}
.hero-content h1 { font-size: clamp(2.5rem, 6vw, 4rem); margin-bottom: 20px; }
.hero-content h1 .text-blue {
    background: linear-gradient(45deg, var(--color-blue), #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.new-subtitle { font-size: 1.15rem; color: var(--color-gray); max-width: none; }
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 32px;
    justify-content: center;
}
.hero-btn { padding: 14px 28px; font-size: 1rem; }
/* .hero-image kaldırıldı */
.tag {
    display: inline-flex; align-items: center;
    padding: 6px 16px; background-color: var(--color-blue-light);
    color: var(--color-blue-text); font-size: 14px;
    font-weight: 600; border-radius: 9999px; margin-bottom: 20px;
}
.tag svg { width: 16px; height: 16px; margin-right: 8px; }

/* Özellikler Seksiyonu */
.features-section.new-features {
    background-color: #ffffff;
    padding: 60px 20px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.feature-card {
    background-color: white; padding: 24px; border-radius: 12px;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
    text-align: left; transition: all 0.2s ease-in-out;
}
.feature-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-5px);
}
.new-feature-card { border: none; box-shadow: var(--shadow-lg); }
.new-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.feature-card .icon-wrapper { margin-bottom: 20px; }
.feature-card h3 { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px 0; }
.feature-card p { font-size: 0.95rem; color: var(--color-gray); margin: 0; line-height: 1.6; }

/* CTA Seksiyonu */
.cta-section {
    background-color: var(--color-blue); color: white; border-radius: 12px;
    padding: 24px 30px; display: flex; justify-content: space-between;
    align-items: center; margin: 40px auto; box-shadow: var(--shadow-md);
    flex-direction: column;
    text-align: center;
    gap: 15px;
}
.cta-content h3 { font-size: 1.5rem; margin: 0 0 6px 0; }
.cta-content p { font-size: 0.95rem; opacity: 0.9; margin: 0; max-width: 450px; }
.cta-section .btn-primary {
    margin-left: 0;
    background-color: #fff; /* Beyaz arka plan */
    color: var(--color-blue-dark); /* Koyu mavi metin */
    flex-shrink: 0;
    background-image: none; /* DÜZELTME: Gradient'i kaldır */
}
.cta-section .btn-primary:hover {
    background-color: var(--color-light-gray); /* Hover rengi */
    background-image: none; /* DÜZELTME: Hover gradient'ini de kaldır */
}

/* Desteler Seksiyonu */
.courses-section { padding: 60px 20px 80px; }
.courses-section .section-title { margin-bottom: 30px; font-size: 2rem; }
.course-block { margin-bottom: 40px; }
.course-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 10px 0; padding-bottom: 8px; border-bottom: 2px solid var(--color-border); color: var(--color-dark); }
.course-description { font-size: 0.95rem; color: var(--color-gray); margin: 0 0 20px 0; }
.deck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.deck-card {
    background-color: white; border: 1px solid var(--color-border);
    border-radius: 10px; padding: 20px;
    color: var(--color-dark); box-shadow: var(--shadow-md);
    transition: all 0.2s ease-in-out;
    display: flex; flex-direction: column;
}
.deck-card:hover {
    box-shadow: var(--shadow-lg); border-color: var(--color-blue);
    transform: translateY(-3px);
}
.deck-card h3 { font-size: 1.15rem; font-weight: 600; margin: 0 0 6px 0; color: var(--color-blue); }
.deck-card p { color: var(--color-gray); margin: 0 0 15px 0; font-size: 0.9rem; flex-grow: 1; }
.deck-card-actions { margin-top: auto; display: grid; grid-template-columns: 1fr; gap: 8px; }
.deck-card-actions .btn-secondary { background-color: var(--color-light-gray); }

/* Footer (index.html için özel - GÜNCELLENDİ) */
.main-footer-content {
    text-align: center;
    padding: 30px 0;
    border-top: 1px solid var(--color-border);
    margin-top: 40px;
}
.main-footer-content p { color: var(--color-gray); margin: 0 0 10px 0; font-size: 0.85rem; }
.reset-btn { background-color: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-border); margin-bottom: 5px; }


/* ----------------------------- */
/* ÇALIŞMA EKRANI (study.html) */
/* ----------------------------- */

/* YENİ: Çalışma alanına hafif desen */
.study-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px 40px;
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 15px 15px;
    background-color: #fdfdff; /* Arka planı biraz daha beyaza yakın yap */
}

.study-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 0;
}
.study-header-content {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1024px; margin: 0 auto; padding: 0 15px;
}
.back-link {
    font-weight: 600; color: var(--color-gray); text-decoration: none;
    padding: 6px 10px; border-radius: 6px; font-size: 0.9rem;
}
.back-link:hover { background-color: var(--color-light-gray); }
.study-header h2 { font-size: 1.2rem; font-weight: 700; margin: 0; text-transform: capitalize; text-align: right; flex-grow: 1; }
#progress-info {
    width: 100%; max-width: 1024px; margin: 0 auto;
    padding: 10px 15px 0; display: flex; align-items: center; gap: 10px;
    transition: opacity var(--speed-normal) ease;
}
#progress-text { font-size: 0.85rem; font-weight: 600; color: var(--color-gray); flex-shrink: 0; }
#progress-container { width: 100%; height: 6px; background-color: var(--color-border); border-radius: 99px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background-color: var(--color-blue); border-radius: 99px; transition: width var(--speed-normal) ease-out; }

.hint-wrapper {
    width: 100%;
    max-width: 700px;
    margin-bottom: 12px;
    display: flex;
    justify-content: flex-end;
}
.hint-btn {
    font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600;
    color: var(--color-gray); background-color: var(--color-light-gray);
    border: 1px solid var(--color-border); border-radius: 6px;
    padding: 5px 10px; cursor: pointer; transition: all var(--speed-fast) ease;
}
.hint-btn:hover { background-color: var(--color-border); color: var(--color-dark); }
.hint-box {
    width: 100%; background-color: var(--color-yellow-light); border: 1px solid var(--color-warning-border);
    color: var(--color-yellow-text); font-weight: 500; padding: 10px 14px;
    border-radius: 8px; font-size: 0.9rem;
}

.card-wrapper {
    width: 100%; max-width: 700px;
    margin-bottom: 24px;
    transition: opacity var(--speed-normal) ease, transform var(--speed-normal) ease;
}
.card-wrapper.anim-out { opacity: 0; transform: translateY(20px) scale(0.95); }
.card-wrapper.anim-in { opacity: 0; transform: translateY(-20px) scale(0.95); }

/* Metin Kartı (Flashcard) */
#text-card-container { height: 350px; perspective: 1200px; }
#card {
    width: 100%; height: 100%; position: relative;
    transform-style: preserve-3d;
    transition: transform var(--speed-card-flip) cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
#card.is-flipped { transform: rotateY(180deg); }
.card-face {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    /* YENİ: Daha belirgin gölge */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    display: flex; align-items: center; justify-content: center;
    padding: 25px;
    font-size: clamp(1.1rem, 5vw, 1.6rem);
    font-weight: 600; text-align: center; overflow-y: auto;
    /* YENİ: Üst kenar vurgusu */
    border-top: 4px solid var(--color-blue);
}
.card-answer {
    transform: rotateY(180deg);
    align-items: flex-start;
    /* YENİ: Cevap kartı için farklı renk vurgusu */
    border-top-color: var(--color-green-text);
}
#answer-text {
    font-size: 1rem; font-weight: 500; text-align: center;
    align-self: center; width: 100%; line-height: 1.7;
    margin-bottom: 15px;
}
#answer-text ul { padding-left: 20px; margin: 0; text-align: left; }
#answer-text li { margin-bottom: 8px; }
#answer-text .danger {
    color: var(--color-danger-text); background-color: var(--color-danger-bg);
    padding: 2px 6px; border-radius: 4px; font-weight: 600;
}

/* MCQ Kartı */
.mcq-card {
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    /* YENİ: Daha belirgin gölge */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 24px;
    /* YENİ: Üst kenar vurgusu */
    border-top: 4px solid var(--color-yellow-text);
}
.mcq-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.mcq-card h3 {
    font-size: 1.3rem; font-weight: 600; line-height: 1.4;
    margin: 0; text-align: left; flex-grow: 1;
}
.high-yield-indicator { font-size: 1.5rem; margin-left: 10px; color: gold; }

.mcq-options-wrapper { display: flex; flex-direction: column; gap: 10px; }
.mcq-option {
    display: block; width: 100%; font-family: 'Inter', sans-serif;
    font-size: 0.95rem; font-weight: 500; text-align: left;
    padding: 12px 16px; border: 2px solid var(--color-border);
    border-radius: 8px; background-color: #ffffff; cursor: pointer;
    transition: all var(--speed-fast) ease;

    /* --- YENİ VE KESİN ÇÖZÜM --- */
    white-space: normal;      /* 1. Metnin alt satıra inmesine İZİN VER */
    overflow-wrap: break-word; /* 2. Sığmayan uzun kelimeleri BÖL (Standart) */
    word-break: break-word;     /* 3. 'overflow-wrap' için alternatif/destek */
    height: auto;               /* 4. Butonun yüksekliğinin metne göre UZAMASINI sağla */
    line-height: 1.5;         /* 5. Alt satıra inen metnin okunaklı olmasını sağla */
}
.mcq-option:not([disabled]):hover { border-color: var(--color-blue); background-color: var(--color-blue-light); }
.mcq-option[disabled] { cursor: not-allowed; opacity: 0.9; }
.mcq-option.correct { background-color: var(--color-success-bg); border-color: var(--color-success-text); color: var(--color-success-text); font-weight: 700; }
.mcq-option.incorrect { background-color: var(--color-danger-bg); border-color: var(--color-danger-text); color: var(--color-danger-text); font-weight: 700; }
.mcq-explanation { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--color-border); font-size: 0.9rem; color: var(--color-gray); line-height: 1.6; }
.mcq-explanation b { color: var(--color-dark); }

.mcq-helper-text {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-gray);
    text-align: center;
    margin-top: 10px;
    transition: opacity var(--speed-fast) ease;
  /* display: none;*/
}

/* Bulanık MCQ Seçenekleri (Sadece masaüstünde JS ile eklenecek) */
.mcq-options-blurry .mcq-option { color: transparent; text-shadow: 0 0 8px rgba(0,0,0,0.6); transition: all var(--speed-fast) ease, color 0s, text-shadow var(--speed-fast) ease; }
.mcq-options-wrapper:not(.mcq-options-blurry) .mcq-option { color: var(--color-dark); text-shadow: none; }
.mcq-options-wrapper .mcq-option.correct { color: var(--color-success-text) !important; text-shadow: none !important; }
.mcq-options-wrapper .mcq-option.incorrect { color: var(--color-danger-text) !important; text-shadow: none !important; }

/* Cümle Tamamlama (Cloze) Kartı */
.cloze-inputs-wrapper { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.cloze-input-group { display: flex; align-items: center; gap: 10px; }
.cloze-input-group span { font-size: 1.1rem; font-weight: 700; color: var(--color-blue); }
.cloze-input { flex-grow: 1; font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 500; padding: 12px 16px; border: 2px solid var(--color-border); border-radius: 8px; transition: all var(--speed-fast) ease; }
.cloze-input:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 3px var(--color-blue-light); }
.cloze-input.correct { background-color: var(--color-success-bg); border-color: var(--color-success-text); color: var(--color-success-text); }
.cloze-input.incorrect { background-color: var(--color-danger-bg); border-color: var(--color-danger-text); color: var(--color-danger-text); }
#cloze-question-text .cloze-blank { display: inline-block; padding: 2px 8px; background-color: var(--color-blue-light); color: var(--color-blue-dark); font-weight: 700; border-radius: 4px; font-size: 1.25rem; }
/* YENİ: Cloze kartına da üst vurgu */
#cloze-card-container .mcq-card {
     border-top-color: var(--color-blue-dark);
}


/* Study Sayfası Ortak Elemanları */
.related-cards { margin-top: 20px; padding-top: 12px; border-top: 1px dashed var(--color-border); text-align: left; }
.related-cards h4 { font-size: 0.85rem; font-weight: 600; color: var(--color-gray); margin: 0 0 8px 0; }
.related-cards ul { list-style: none; padding: 0; margin: 0; }
.related-cards li { margin-bottom: 4px; }
.related-cards a { font-size: 0.85rem; color: var(--color-blue); text-decoration: none; transition: color var(--speed-fast) ease; }
.related-cards a:hover { color: var(--color-blue-dark); text-decoration: underline; }

.video-container { margin-top: 20px; padding-top: 12px; border-top: 1px dashed var(--color-border); text-align: left; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
.video-container h4 { font-size: 0.85rem; font-weight: 600; color: var(--color-gray); margin: 0 0 10px 0; text-align: center; }
.video-wrapper { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow-md); background-color: #000; }
.video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.card-face.card-answer .video-container, .mcq-card .video-container, .cloze-card .video-container { margin-left: 0; margin-right: 0; max-width: 100%; padding: 0 5px; }

.controls-wrapper { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 700px; margin-top: 20px; }
#answer-buttons {
    width: 100%; max-width: 700px;
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 24px;
}
#answer-buttons .btn {
    text-align: center; font-size: 0.9rem; padding: 12px 8px;
    border: 2px solid transparent; box-shadow: var(--shadow-md);
    /* YENİ: Daha belirgin hover */
    transition: all 0.15s ease-in-out;
}
#answer-buttons .btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--shadow-lg);
}
#answer-buttons .btn:active { transform: scale(0.96); box-shadow: var(--shadow-sm); }
#answer-buttons small { font-size: 0.75rem; font-weight: 500; display: block; opacity: 0.9; }
.btn-danger { background-color: var(--color-danger-bg); color: var(--color-danger-text); border-color: var(--color-danger-border); }
.btn-danger:hover { background-color: #fecaca; border-color: var(--color-danger-text); }
.btn-warning { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.btn-warning:hover { background-color: #fde68a; border-color: var(--color-warning-text); }
.btn-success { background-color: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.btn-success:hover { background-color: #bbf7d0; border-color: var(--color-success-text); }

/* YENİ: Seans Tamamlama Ekranı İyileştirmeleri */
.session-complete-card {
    background-color: white;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 700px;
    /* YENİ: Gradient Border */
    border: 4px solid transparent;
    background-clip: padding-box; /* Önemli */
    border-image: linear-gradient(135deg, var(--color-blue), var(--color-green-text)) 1;
}
.session-complete-card h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-dark);
    margin: 16px 0;
    /* YENİ: Gradient Text */
    background: linear-gradient(135deg, var(--color-blue), var(--color-green-text));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.session-complete-card p { font-size: 1.1rem; color: var(--color-gray); margin-bottom: 32px; }
.checkmark-wrapper {
    width: 80px; /* Büyüttük */
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-success-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: scale-in var(--speed-normal) ease-out;
    box-shadow: 0 4px 10px rgba(21, 128, 61, 0.4); /* Yeşil gölge */
}
@keyframes scale-in { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.checkmark {
    width: 40px; /* Büyüttük */
    height: 20px; /* Büyüttük */
    border-left: 8px solid white; /* Kalınlaştırdık */
    border-bottom: 8px solid white; /* Kalınlaştırdık */
    transform: rotate(-45deg) translate(-5px, 5px);
    animation: draw-check var(--speed-normal) 100ms ease-out forwards;
    opacity: 0;
}
@keyframes draw-check { 0% { width: 0; height: 0; opacity: 0; } 50% { width: 0px; height: 20px; opacity: 1; } 100% { width: 40px; height: 20px; opacity: 1; } }
/* Ana sayfaya dön butonuna da gradient */
.session-complete-card .btn-primary {
     background-image: linear-gradient(to bottom, var(--color-blue), #1e40af);
}
.session-complete-card .btn-primary:hover {
     background-image: linear-gradient(to bottom, #1e40af, #1c3faa);
}

/* Modallar (İlgili Kart, Konsept Kartı, Takvim Günü) */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity var(--speed-fast) ease; padding: 15px; }
.modal-overlay:not(.hidden) { opacity: 1; }
.modal-content { background-color: #fff; padding: 20px; border-radius: 12px; width: 100%; max-width: 550px; position: relative; transform: scale(0.95); opacity: 0; transition: all var(--speed-normal) ease; max-height: 90vh; overflow-y: auto; }
.modal-overlay:not(.hidden) .modal-content { transform: scale(1); opacity: 1; }
.modal-close-btn { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 26px; color: var(--color-gray); cursor: pointer; z-index: 10; }
.modal-card-wrapper { height: 300px; perspective: 1500px; }
.card-in-modal { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform var(--speed-card-flip) cubic-bezier(0.68, -0.55, 0.27, 1.55); cursor: pointer; }
.card-in-modal.is-flipped { transform: rotateY(180deg); }
.modal-helper-text { font-size: 0.8rem; font-style: italic; text-align: center; color: var(--color-gray); margin-top: 12px; }
#concept-modal-title { font-size: 1.3rem; margin-bottom: 10px; color: var(--color-blue); }
#concept-modal-card { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--color-border); }
.modal-card-question, .modal-card-answer { font-size: 0.95rem; line-height: 1.6; }
.modal-card-question strong, .modal-card-answer strong { color: var(--color-blue); }

/* ---------------- */
/* TAKVİM (calendar.html) */
/* ---------------- */
.calendar-container { background-color: #ffffff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg); margin: 30px auto; overflow: hidden; max-width: 1024px; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid var(--color-border); }
.calendar-header h2 { margin: 0; font-size: 1.3rem; color: var(--color-blue); }
.calendar-header button { background-color: var(--color-light-gray); border: 1px solid var(--color-border); color: var(--color-dark); font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; transition: background-color 0.2s; }
.calendar-header button:hover { background-color: var(--color-border); }
.calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background-color: var(--color-light-gray); font-weight: 700; color: var(--color-gray); font-size: 0.8rem; }
.calendar-weekdays div { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--color-border); }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); min-height: 500px; }
.calendar-day { min-height: 90px; padding: 6px; border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border); }
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day .day-number { font-weight: 600; font-size: 0.85rem; }
.calendar-day.not-current-month { background-color: #f9fafb; }
.calendar-day.not-current-month .day-number { color: var(--color-gray); opacity: 0.5; }
.calendar-day.has-events { background-color: var(--color-blue-light); cursor: pointer; transition: background-color 0.2s; }
.calendar-day.has-events:hover { background-color: #d0e0fb; }
.event-count { display: block; margin-top: 6px; font-size: 0.75rem; font-weight: 700; color: var(--color-blue-dark); background: white; padding: 3px 5px; border-radius: 4px; text-align: center; }
/* Takvim Modal */
#day-modal-content h3 { font-size: 1.2rem; }
#modal-card-list { list-style: none; padding: 0; margin: 15px 0 0 0; }
#modal-card-list li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
#modal-card-list li:last-child { border-bottom: none; }
#modal-card-list li strong { display: block; font-size: 0.8rem; color: var(--color-blue); margin-bottom: 4px; }
#modal-card-list li p { margin: 0; font-size: 0.95rem; font-weight: 500; }
#modal-card-list .btn { margin-bottom: 15px !important; }

/* ---------------- */
/* USTALIK PANELİ (dashboard.html) */
/* ---------------- */
.dashboard-container { max-width: 900px; margin: 30px auto; padding: 25px; }
.dashboard-header { font-size: 2rem; font-weight: 800; color: var(--color-blue); margin: 0 0 8px 0; }
.dashboard-subtitle { font-size: 1.05rem; color: var(--color-gray); margin-bottom: 30px; }
.mastery-course-block { margin-bottom: 30px; }
.mastery-course-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 15px 0; padding-bottom: 8px; border-bottom: 2px solid var(--color-border); }

.mastery-item {
    display: flex;
    gap: 15px;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: #fff;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    flex-direction: column;
    align-items: stretch;
}
.mastery-info { flex-grow: 1; margin-bottom: 4px; }
.mastery-title { font-size: 1rem; font-weight: 600; color: var(--color-dark); }
.mastery-score { font-size: 0.85rem; font-weight: 700; margin-left: 8px; padding: 2px 6px; border-radius: 4px; }
.mastery-bar-container { flex-grow: 2; height: 10px; background-color: var(--color-light-gray); border-radius: 5px; overflow: hidden; border: 1px solid var(--color-border); }
.mastery-bar { height: 100%; border-radius: 5px; transition: width 0.5s ease-out; }
.mastery-study-btn {
    flex-shrink: 0;
    width: 100%;
    margin-top: 10px;
}
.mastery-bar.low { background-color: var(--color-danger-text); }
.mastery-score.low { color: var(--color-danger-text); background-color: var(--color-danger-bg); }
.mastery-bar.medium { background-color: var(--color-warning-text); }
.mastery-score.medium { color: var(--color-warning-text); background-color: var(--color-warning-bg); }
.mastery-bar.high { background-color: var(--color-success-text); }
.mastery-score.high { color: var(--color-success-text); background-color: var(--color-success-bg); }

/* ---------------- */
/* KLİNİK VAKALAR (cases.html) - Önceki güncelleme */
/* ---------------- */
.case-page-container {
    padding-top: 30px;
    padding-bottom: 50px;
}
.case-selection-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.case-selection-container h1 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-blue);
    margin-bottom: 10px;
}
.case-selection-subtitle {
    font-size: 1.1rem;
    color: var(--color-gray);
    margin-bottom: 40px;
}
.case-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.case-selection-card {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.case-selection-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-blue);
}
.case-selection-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-blue-dark);
    margin: 0 0 10px 0;
}
.case-selection-card p {
    font-size: 0.9rem;
    color: var(--color-gray);
    margin: 0;
    flex-grow: 1;
    margin-bottom: 15px;
}
.case-selection-card .btn {
     width: 100%;
     margin-top: auto;
}
.active-case-container {
    max-width: 800px;
    margin: 0 auto;
}
.active-case-container h1 {
    font-size: 1.8rem;
    color: var(--color-blue);
    margin: 0 0 30px 0;
    text-align: center;
    border-bottom: 2px solid var(--color-light-gray);
    padding-bottom: 15px;
}
.case-step-card {
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 25px 30px;
    box-shadow: var(--shadow-lg);
    margin-bottom: 20px;
}
.case-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #374151;
}
.case-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.case-option-btn {
    width: 100%;
    text-align: left;
    padding: 14px 18px;
    font-size: 1rem;
    font-weight: 500;
    background-color: var(--color-light-gray);
    border: 1px solid var(--color-border);
    color: var(--color-dark);
    transition: all 0.15s ease;

    /* YENİ EKLENEN SATIRLAR (Sığmama Sorunu İçin) */
    white-space: normal;      /* 1. Metnin alt satıra inmesine İZİN VER */
    overflow-wrap: break-word; /* 2. Sığmayan uzun kelimeleri BÖL */
    word-break: break-word;     /* 3. 'overflow-wrap' için destek */
    height: auto;               /* 4. Butonun yüksekliğinin metne göre UZAMASINI sağla */
    line-height: 1.5;         /* 5. Alt satıra inen metnin okunaklı olmasını sağla */
}
.case-option-btn:hover:not(:disabled) {
    background-color: var(--color-blue-light);
    border-color: var(--color-blue);
    color: var(--color-blue-dark);
    transform: none;
    box-shadow: var(--shadow-sm);
}
.case-option-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--color-light-gray);
}
.case-feedback {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 1rem;
    border-left-width: 5px;
    border-left-style: solid;
}
.case-feedback.correct {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-text);
    color: var(--color-success-text);
}
.case-feedback.incorrect {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-text);
    color: var(--color-danger-text);
}
.reveal-next-btn {
    width: 100%;
    margin-top: 20px;
    background-color: #fff;
}
.case-loading {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-gray);
    margin-top: 40px;
}
.case-text .weak-concept {
    background-color: var(--color-blue-light);
    color: var(--color-blue-dark);
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 6px;
    cursor: pointer;
    border-bottom: 2px dotted var(--color-blue);
    transition: background-color var(--speed-fast) ease;
    white-space: nowrap;
}
.case-text .drug-link {
    background-color: var(--color-warning-bg); /* Hafif sarı/turuncu arka plan */
    color: var(--color-warning-text); /* Koyu turuncu metin */
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 6px;
    cursor: pointer;
    border-bottom: 2px dotted var(--color-warning-text);
    transition: background-color var(--speed-fast) ease;
    white-space: nowrap;
}
.case-text .drug-link:hover {
    background-color: #fce8a6; /* Hover rengi */
    box-shadow: var(--shadow-sm);
}
.case-text .weak-concept:hover {
    background-color: #d0e0fb;
    box-shadow: var(--shadow-sm);
}
.concept-help-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    background-color: var(--color-blue-dark);
    color: white;
    border-radius: 50%;
    margin-left: 5px;
    transform: translateY(-1px);
    user-select: none;
}


/* ---------------- */
/* LOGIN / REGISTER SAYFALARI */
/* ---------------- */
body.auth-page { padding-top: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.auth-card {
    background-color: white; border: 1px solid var(--color-border); border-radius: 16px;
    padding: 30px; box-shadow: var(--shadow-lg); width: 100%; max-width: 400px;
    text-align: center; margin: 20px;
}
.auth-card h2 { font-size: 1.5rem; margin-top: 0; margin-bottom: 20px; }
.form-group { margin-bottom: 16px; text-align: left; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.9rem; }
.form-group input { width: 100%; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.95rem; }
.auth-card p { margin-top: 20px; font-size: 0.9rem; }
#error-msg, #success-msg { font-weight: 600; display: none; font-size: 0.9rem; }
#error-msg { color: var(--color-danger-text); }
#success-msg { color: var(--color-success-text); }


/* ------------------------------ */
/* MEDYA SORGULARI (MOBİL ÖNCELİKLİ) */
/* ------------------------------ */

/* Orta Boy Ekranlar (Tabletler >= 768px) */
@media (min-width: 768px) {
    body { padding-top: 75px; }
    .container { padding: 0 30px; }

    /* GÜNCELLENDİ: Hero section stilleri (no-image dahil) */
    .hero-section.new-hero {
        padding: 80px 30px;
    }
    .hero-section.new-hero.no-image {
        justify-content: center; /* Ortalamaya devam et */
        text-align: center; /* Ortalamaya devam et */
    }
    .hero-section.new-hero.no-image .hero-content {
         max-width: 700px; /* Ortalama için max genişlik */
    }
    /* Eğer resimli versiyon geri gelirse: */
    /* .hero-section.new-hero:not(.no-image) { flex-direction: row; text-align: left; } */
    /* .hero-section.new-hero:not(.no-image) .hero-content { max-width: 55%; } */
    /* .hero-section.new-hero:not(.no-image) .hero-image { max-width: 40%; margin-top: 0; } */

    .button-group { justify-content: center; } /* Ortala */
    .hero-section.new-hero:not(.no-image) .button-group { justify-content: flex-start; } /* Resimliyse sola */

    .features-grid { grid-template-columns: repeat(2, 1fr); }

    .cta-section {
        flex-direction: row;
        text-align: left;
        padding: 32px 40px;
        gap: 0;
    }
    .cta-content p { max-width: 450px; }
    .cta-section .btn-primary { margin-left: 20px; width: auto; margin-top: 0; }

    .deck-grid { grid-template-columns: repeat(3, 1fr); }
    .study-header-content { padding: 0 30px; }
    #progress-info { padding: 12px 30px 0; }
    .study-container { padding: 30px 30px 50px; }
    .card-wrapper { max-width: 700px; }
    .mcq-card { padding: 32px 40px; }
    .mcq-card h3 { font-size: 1.5rem; }


    .mcq-options-blurry .mcq-option {
        color: transparent;
        text-shadow: 0 0 8px rgba(0,0,0,0.6);
        transition: all var(--speed-fast) ease, color 0s, text-shadow var(--speed-fast) ease;
    }
    .mcq-options-blurry .mcq-option:hover,
    .mcq-options-blurry .mcq-option:focus,
    .mcq-options-blurry .mcq-option:active {
        color: var(--color-dark);
        text-shadow: none;
        border-color: var(--color-blue);
        background-color: var(--color-blue-light);
    }

    .cloze-card .mcq-card { padding: 32px 40px; }
    #answer-buttons { gap: 16px; }
    .calendar-container { margin: 30px auto; }
    .calendar-weekdays { display: grid; }
    .calendar-grid { grid-template-columns: repeat(7, 1fr); }
    .calendar-day { display: block; border-right: 1px solid var(--color-border); padding: 8px; min-height: 100px; }
    .calendar-day:nth-child(7n) { border-right: none; }
    .calendar-day.not-current-month { display: block; background-color: #f9fafb; }
    .dashboard-container { margin: 30px auto; padding: 25px; max-width: 900px; }

    .mastery-item {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    .mastery-info { margin-bottom: 4px; }
    .mastery-study-btn { margin-top: 0; width: auto; }

    .case-container { margin: 30px auto; padding: 25px 35px; max-width: 800px; }
    body.auth-page { align-items: center; }
    .auth-card { max-width: 400px; margin: 40px auto; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); }

    
   .case-page-container {
    padding-top: 30px;
    padding-bottom: 50px;
    /* BURADAN BAŞLAYARAK YENİ STİLLERİ EKLEYİN */
    background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
    background-size: 15px 15px;
    background-color: #fdfdff; /* Study ekranı rengi */
}
    .case-selection-container h1 {
        font-size: 2rem;
    }
    .active-case-container h1 {
        font-size: 1.8rem;
        margin-bottom: 30px;
        padding-bottom: 15px;
    }
    .case-step-card {
        padding: 25px 30px;
    }
    .case-text {
        font-size: 1.1rem;
        line-height: 1.8;
    }
    .case-option-btn {
        padding: 14px 18px;
        font-size: 1rem;
    }

    /* YENİ: Site Footer (Masaüstü) */
    .site-footer-content {
        flex-direction: row; /* Yan yana getir */
        justify-content: space-between;
    }
    .footer-copyright {
        text-align: right; /* Sağa yasla */
    }
}

/* Geniş Ekranlar (>= 1024px) */
@media (min-width: 1024px) {
    /* Header'ı yatay hale getir */
    .nav-bar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: nowrap;
    }
    .nav-burger-btn {
        display: none;
    }
    .nav-mobile-menu {
        display: flex !important;
        flex-direction: row;
        width: auto;
        align-items: center;
        padding-top: 0;
        border-top: none;
        margin-top: 0;
    }
    .nav-links {
        flex-direction: row;
        align-items: center;
        margin-left: 20px;
        padding-bottom: 0;
        gap: 15px;
        width: auto;
        overflow-x: visible; /* Kaydırmayı kaldır */
    }
    .nav-link {
        font-size: 0.95rem;
        font-weight: 600;
        width: auto;
    }
    .nav-auth {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: nowrap;
        width: auto;
        gap: 15px;
    }

    .features-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Daha Geniş Ekranlar (>= 1200px) */
@media (min-width: 1200px) {
    .deck-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Çok Geniş Ekranlar (>= 1400px) */
@media (min-width: 1400px) {
    .container { max-width: 1360px; padding: 0 30px; }
}


/* ================= */
/* YENİ - SİTE FOOTER (Tüm Sayfalar İçin) */
/* ================= */
.site-footer {
    padding: 40px 20px; /* Mobilde kenar boşlukları için padding */
    margin-top: 60px; /* İçerikle arasına boşluk koyar */
    border-top: 1px solid var(--color-border);
    background-color: #ffffff; /* Arka planı beyaz yapar */
    width: 100%;
}
.site-footer-content {
    max-width: 1280px; /* .container genişliği ile eşleşir */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}
.footer-links {
    display: flex;
    flex-wrap: wrap; /* Mobilde alt alta gelmesi için */
    justify-content: center;
    gap: 15px 25px; /* Dikey ve yatay boşluk */
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-links a {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover {
    color: var(--color-blue);
}
.footer-copyright {
    font-size: 0.85rem;
    color: var(--color-gray);
    text-align: center;
    margin: 0; /* Ekstra p marjını kaldır */
}

/* Medya sorgusunu (768px) style.css'in en sonuna değil,
   diğer @media (min-width: 768px) bloğunun içine taşıdık.
   Eğer oraya eklemediyseniz, bu bloğu kullanabilirsiniz: */
/*
@media (min-width: 768px) {
    .site-footer {
         padding: 40px 30px;
    }
    .site-footer-content {
        flex-direction: row;
        justify-content: space-between;
        gap: 20px;
    }
    .footer-copyright {
        text-align: right;
    }
}
*/

/* ================= */
/* YENİ - User Dashboard (Index Sayfası) */
/* ================= */
.user-dashboard {
    /* padding: 40px 20px; */ /* container'dan geliyor */
    margin-top: 40px;
    margin-bottom: 20px;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.quick-link-card {
    display: block;
    background-color: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: var(--color-dark);
    box-shadow: var(--shadow-md);
    transition: all 0.2s ease-in-out;
}
.quick-link-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-blue);
}
.quick-link-card .icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 15px;
}
.quick-link-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--color-blue-dark);
}
.quick-link-card p {
    font-size: 0.95rem;
    color: var(--color-gray);
    margin: 0;
    line-height: 1.6;
}

/* Header'daki Puan/Seri'nin doğru gösterilmesi için (app.js'den gelen)*/
.nav-score, .nav-streak {
    display: flex; /* hidden sınıfı kaldırılınca görünmesi için */
}
/* =========================================== */
/* YENİ: INDEX SAYFASI YAYIMA HAZIRLAMA STILLERİ */
/* =========================================== */

/* 1. YENİ HERO (ANLATI) BÖLÜMÜ */
.hero-section.new-hero-v2 {
    padding: 60px 0;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 40px;
}
.hero-title-v2 {
    font-size: clamp(2.5rem, 6vw, 3.5rem); 
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}
.hero-section.new-hero-v2 .hero-content {
    text-align: center;
}
.hero-section.new-hero-v2 .button-group {
    justify-content: center; /* Mobilde ortalı kalsın */
}

/* 2. YENİ HERO ÜRÜN MAKEDİ (KORUNAN) */
.hero-product-mockup {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1500px;
}
.mockup-card {
    position: absolute;
    width: 280px;
    height: 180px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    padding: 12px;
    font-family: 'Inter', sans-serif;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.mockup-card-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-blue-text);
    padding-bottom: 6px;
    border-bottom: 2px solid var(--color-blue-light);
}
.mockup-card-body {
    padding-top: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.5;
}
.mockup-progress-bar {
    height: 8px;
    width: 100%;
    background: var(--color-light-gray);
    border-radius: 4px;
    margin-top: 10px;
    overflow: hidden;
}
.mockup-progress-bar div {
    height: 100%;
    background: var(--color-success-text);
}
.mockup-card.card-1 {
    z-index: 2;
    transform: rotate(-8deg) translate(-20%, -10%) scale(0.95);
}
.mockup-card.card-2 {
    z-index: 3;
    transform: rotate(0deg) scale(1);
}
.mockup-card.card-3 {
    z-index: 1;
    transform: rotate(5deg) translate(30%, 20%) scale(0.9);
}
.hero-product-mockup:hover .card-1 {
    transform: rotate(-10deg) translate(-50%, -15%) scale(1);
}
.hero-product-mockup:hover .card-2 {
    transform: rotate(2deg) scale(1.05);
}
.hero-product-mockup:hover .card-3 {
    transform: rotate(8deg) translate(55%, 25%) scale(1);
}


/* 3. YENİ "NASIL ÇALIŞIR?" BÖLÜMÜ */
.how-it-works-section {
    padding: 60px 20px; /* Mobilde padding ekle */
    background-color: #fff; /* Arka planı ayırır */
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin: 60px 0;
}
.how-it-works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}
.step-card {
    text-align: center;
    padding: 20px;
}
.step-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    display: inline-block;
    line-height: 1;
}
.step-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 10px;
}
.step-card p {
    font-size: 1rem;
    color: var(--color-gray);
    margin: 0;
}


/* 4. GİRİŞ YAPAN KULLANICI PANELİ */
.user-dashboard-header {
    text-align: center;
    padding: 40px 0 30px 0;
}
.user-dashboard-header h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.1;
}
.user-dashboard-header h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-blue);
    margin: 5px 0 10px 0;
}
.user-dashboard-header p {
    font-size: 1.1rem;
    color: var(--color-gray);
    max-width: 500px;
    margin: 0 auto;
}

.quick-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}
.quick-link-card.v2 {
    display: block;
    background-color: #fff;
    border: 2px solid var(--color-border); /* Kalınlığı 2px yaptık */
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: var(--color-dark);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease-in-out;
}
.quick-link-card.v2:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-blue);
}
.quick-link-card.v2 .icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 15px;
}
.quick-link-card.v2 h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--color-blue-dark);
}
.quick-link-card.v2 p {
    font-size: 0.95rem;
    color: var(--color-gray);
    margin: 0;
    line-height: 1.6;
}

/* VAKA KARTI ÖNCELİĞİ (Giriş Yapmış) */
.quick-link-card.v2.primary {
    border-color: var(--color-blue);
    background-color: var(--color-blue-light);
}
.quick-link-card.v2.primary:hover {
    background-color: #fff; /* Hover'da normale dönsün */
}
.quick-link-card.v2.primary h3 {
    color: var(--color-blue-dark);
}


/* 5. GİRİŞ YAPINCA DESTE BAŞLIĞINI AYARLAMA */
#user-view + #courses-section-wrapper #courses-section-title {
    margin-top: 60px;
    font-size: 2rem; 
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 30px;
}


/* 6. RESPONSIVE DÜZENLEMELER */
@media (min-width: 768px) {
    .how-it-works-section {
        padding: 60px 0; /* Padding'i sıfırla */
    }
    .hero-section.new-hero-v2 .hero-content {
        text-align: left;
    }
     .hero-section.new-hero-v2 .button-group {
        justify-content: flex-start;
    }
    
    .how-it-works-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .user-dashboard-header {
        padding: 60px 0 40px 0;
    }
}

@media (min-width: 992px) {
     .hero-section.new-hero-v2 {
        grid-template-columns: 1fr 1fr;
        padding: 80px 0;
        gap: 60px;
    }
    .hero-product-mockup {
        height: 400px;
    }
    .mockup-card {
        width: 320px;
        height: 200px;
    }
}

/* --- index.html Gizli Desteler ve Yükle Butonu (Kullanıcı İsteği) --- */
.deck-card.hidden-deck {
    display: none;
}

.btn-load-more {
    margin-top: 20px;
    width: 100%;
    max-width: 300px; /* Butonun çok geniş olmasını engeller */
    margin-left: auto; /* Ortalamak için */
    margin-right: auto; /* Ortalamak için */
    display: block; /* Ortalamak için */
    background-color: var(--color-light-gray);
    font-weight: 700;
    border-color: var(--color-border);
}

.btn-load-more:hover {
    background-color: var(--color-border);
}
/* ----------------------------------------------------------------- */


/* htdocs/style.css dosyasının sonuna ekleyin */

.case-option-btn.correct,
.case-option-btn.correct:disabled {
    background-color: var(--color-success-bg);
    border-color: var(--color-success-text);
    color: var(--color-success-text);
    font-weight: 700;
    opacity: 1; /* Devre dışı kalsa bile net görünsün */
}

.case-option-btn.incorrect,
.case-option-btn.incorrect:disabled {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-text);
    color: var(--color-danger-text);
    font-weight: 700;
    opacity: 1; /* Devre dışı kalsa bile net görünsün */
}

/* Diğer devre dışı bırakılmış ama işaretlenmemiş butonlar soluk kalsın */
.case-option-btn:disabled:not(.correct):not(.incorrect) {
    opacity: 0.6;
}

/* ... (Dosyanın sonuna ekleyin veya mevcut Medya Sorgularının hemen altına) ... */


/* =========================================== */
/* YENİ: BALBAL MASKOT STİLLERİ */
/* =========================================== */
.balbal-mascot {
    position: absolute;
    z-index: 5;
    pointer-events: none; /* Üstteki elementlere tıklamayı engellemesin */
    display: none; /* Varsayılan olarak gizle */
}

/* Ana Sayfa Hero Maskotu (Ürün Maketinin Yanında) */
.balbal-hero {
    width: 300px; 
    height: auto;
    bottom: -100px; 
    right: -50px; 
    transform: rotate(10deg); 
    opacity: 0.9;
    transition: all 0.3s ease;
}

/* Ders Anlatan Maskot (Kurs Listesi Başlığında) */
.balbal-explainer {
    width: 150px; 
    height: auto;
    position: relative;
    float: right; /* Başlık metnini sola itmek için */
    margin-left: 20px;
    margin-top: -30px;
}

/* Geniş Ekranlar için Görünür Yapma */
@media (min-width: 1024px) {
    .balbal-mascot {
        display: block; 
    }
    
    /* Explainer'a yer açmak için başlığa sağdan boşluk ekle */
    #user-view + #courses-section-wrapper #courses-section-title {
        padding-right: 180px; 
    }
}
@media (max-width: 1023px) {
     /* Mobilde yer kaplamaması için gizle */
     .balbal-explainer {
        display: none !important; 
     }
}

/* Ek Stil İyileştirmeleri */
.hero-product-mockup {
    position: relative; /* İçindeki absolute balbal'ı tutması için */
}

.course-block {
     clear: both; /* Explainer'ın kurs bloklarını bozmaması için */
}