/* ============================================================
   Akademik + Projeler sayfaları (herkese açık, statik içerik)
   Sayfa iskeleti: başlık → özet kutuları → gruplanmış paneller (neu-page.css).
   • Genişlik sınırı yoktur. Yerleşim pencereye değil kapsayıcıya bakar (kenar çubuğu açıkken içerik daha dardır):
     dar = tek sütun · ≥60rem = 2 · ≥90rem = 3 · ≥160rem = Akademik 4 / Projeler 6 sütun.
     Sütun sayısı genişlikle arttığı için her sütun ~25–60rem kalır: 49" ekranda tüm sayfa tek bakışta görünür.
   • Paneller kendi genişliğine göre de düzen değiştirir (container: crpanel): gruplar yan yana ya da alt alta dizilir.
   • Yazı boyutları sitenin normal ölçüsündedir (genişlikle büyümez); ikincil metin renkleri tema değişkenlerinden
     türetilir ve açık/koyu temada ≥4.5:1 kontrast verir (genel --text-secondary açık temada bu sayfalar için fazla soluktu).
   ============================================================ */

.career-wrap {
    container: career / inline-size;
    width: 100%;
    /* Okunaklı ikincil renkler: ana metin renginin zemine karışımı */
    --cr-text: color-mix(in srgb, var(--text-primary) 86%, var(--bg-primary));
    --cr-soft: color-mix(in srgb, var(--text-primary) 80%, var(--bg-primary));
    --cr-faint: color-mix(in srgb, var(--text-primary) 60%, var(--bg-primary));
}

.career-stack {
    min-width: 0;
    font-size: 1rem;
}

/* ---------- Site bileşenlerinin bu sayfalardaki ölçeği ---------- */
.career-stack .neu-page-header__title { font-size: 1.45em; }
.career-stack .neu-page-header__subtitle { font-size: 0.95em; line-height: 1.55; color: var(--cr-text); }
.career-stack .neu-page-header__icon { width: 2.6em; height: 2.6em; font-size: 1.15em; }

.career-stack .neu-stat { padding: 1.05em 1.2em; gap: 1em; }
.career-stack .neu-stat__icon { width: 2.7em; height: 2.7em; font-size: 1.1em; }
.career-stack .neu-stat__value { font-size: 1.85em; }
.career-stack .neu-stat__value--compact { font-size: 1.15em; }
.career-stack .neu-stat__label { font-size: 0.76em; color: var(--cr-text); }
.career-stack .neu-stat__meta { font-size: 0.84em; color: var(--cr-soft); }

.career-stack .neu-panel__head { padding: 1em 1.4em 0.85em; }
.career-stack .neu-panel__body { padding: 0.4em 1.4em 1.3em; }
.career-stack .neu-panel__title { font-size: 1.1em; }
.career-stack .neu-panel__icon { width: 2.3em; height: 2.3em; font-size: 0.95em; }

.career-stack .neu-badge.neu-badge:not(.neu-badge--raw) { font-size: 0.82em; padding: 0.32em 0.8em; }
/* Rozetler: vurgu renginde yazı + aynı rengin hafif tonunda zemin (hepsi: panel sayaçları, grup sayaçları, yayın rozetleri) */
.career-stack .neu-badge:not(.neu-badge--raw) {
    --cr-badge: var(--accent-primary);
    font-weight: 700;
    color: color-mix(in srgb, var(--cr-badge) 50%, var(--text-primary));
    background: color-mix(in srgb, var(--cr-badge) 16%, var(--bg-primary));
    box-shadow: none;
}

.career-stack .neu-badge--success:not(.neu-badge--raw) { --cr-badge: var(--accent-success); color: color-mix(in srgb, var(--accent-success) 40%, var(--text-primary)); }
.career-stack .neu-badge--warning:not(.neu-badge--raw) { --cr-badge: var(--accent-warning); color: color-mix(in srgb, var(--accent-warning) 35%, var(--text-primary)); }

/* Grup sayaçları: yuvarlak */
.career-stack .cr-cat__title .neu-badge:not(.neu-badge--raw) {
    min-width: 2.1em;
    justify-content: center;
}

/* ---------- Üst bant: başlık + özet kutuları ----------
   Dar/orta kapta alt alta; çok genişte yan yana (başlık solda, kutular sağda). */
.career-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem;
}

.career-top > .neu-page-header {
    margin: 0 !important;
}

@container career (min-width: 150rem) {
    .career-top {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        align-items: stretch;
    }
}

/* ---------- Özet kutuları: 1 · 2 · 4 sütun (3+1 artık satır olmaz) ---------- */
.career-stats {
    grid-template-columns: minmax(0, 1fr);
}

@container career (min-width: 34rem) {
    .career-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container career (min-width: 60rem) {
    .career-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.career-stats .neu-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.career-stats .neu-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-shadow-lg, var(--neu-surface-raised, var(--neu-shadow-md)));
}

/* ---------- Izgara ----------
   Alanlar grid-area ile yerleşir. Aynı satırdaki paneller aynı yüksekliğe uzar (altlarında boşluk kalmaz). */
.career-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem;
    align-items: stretch;
}

.career-grid > .neu-panel {
    container: crpanel / inline-size;
    margin: 0 !important;
    min-width: 0;
}

.career-grid > .neu-panel > .neu-panel__body {
    display: flex;
    flex-direction: column;
}

/* Uzayan panelde içerik de panele yayılır */
.career-grid > .neu-panel > .neu-panel__body > .cr-pubs,
.career-grid > .neu-panel > .neu-panel__body > .cr-cats {
    flex: 1 1 auto;
}

.career-grid--academic {
    grid-template-areas:
        "duties"
        "education"
        "article"
        "papers"
        "patent";
}

.career-grid--projects {
    grid-template-areas:
        "role"
        "scooter"
        "projects"
        "notes"
        "tech";
}

.cr-area-duties { grid-area: duties; }
.cr-area-education { grid-area: education; }
.cr-area-article { grid-area: article; }
.cr-area-papers { grid-area: papers; }
.cr-area-patent { grid-area: patent; }
.cr-area-role { grid-area: role; }
.cr-area-scooter { grid-area: scooter; }
.cr-area-projects { grid-area: projects; }
.cr-area-notes { grid-area: notes; }
.cr-area-tech { grid-area: tech; }

@container career (min-width: 60rem) {
    .career-grid--academic {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
        grid-template-areas:
            "duties    papers"
            "education papers"
            "article   patent";
    }

    .career-grid--projects {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        grid-template-areas:
            "role     tech"
            "scooter  tech"
            "projects projects"
            "notes    notes";
    }
}

@container career (min-width: 90rem) {
    .career-grid--academic {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "duties    article papers"
            "education patent  papers";
    }

    .career-grid--projects {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas:
            "role     scooter tech"
            "projects projects projects"
            "notes    notes    notes";
    }
}

/* Çok geniş ekran (ör. 49"): her şey iki satırda, sütun sayısı genişlikle birlikte artar */
@container career (min-width: 160rem) {
    .career-grid--academic {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas:
            "duties    article papers papers"
            "education patent  papers papers";
    }

    .career-grid--projects {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "role     scooter  tech     notes notes notes"
            "projects projects projects notes notes notes";
    }
}

/* ---------- Zaman çizgisi (görev / öğrenim) ---------- */
.cr-timeline {
    display: flex;
    flex-direction: column;
    gap: 1.4em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cr-timeline > li {
    position: relative;
    padding: 0.15em 0.5em 0.15em 1.95em;
}

.cr-timeline > li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.4em;
    width: 0.95em;
    height: 0.95em;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 2px solid var(--cr-faint);
    box-shadow: var(--neu-shadow-xs);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.cr-timeline > li.is-current::before {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
}

/* Noktalar arasındaki çizgi */
.cr-timeline > li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(0.2em + 0.475em - 1px);
    top: calc(0.4em + 1.15em);
    bottom: calc(-1.4em + 0.15em);
    width: 2px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--cr-faint) 40%, transparent);
}

.cr-timeline > li:hover::before {
    border-color: var(--accent-primary);
    background: var(--accent-primary);
    transform: scale(1.15);
}

.cr-timeline > li:hover .cr-timeline__title {
    color: color-mix(in srgb, var(--accent-primary) 50%, var(--text-primary));
}

.cr-timeline__period {
    display: block;
    margin-bottom: 0.25em;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent-primary) 50%, var(--text-primary));
}

.cr-timeline__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em 0.6em;
    margin: 0 0 0.2em;
    font-size: 1.05em;
    font-weight: 650;
    line-height: 1.4;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.cr-timeline__org,
.cr-timeline__detail {
    margin: 0;
    font-size: 0.92em;
    line-height: 1.55;
    color: var(--cr-text);
}

.cr-timeline__org {
    font-weight: 650;
    color: var(--text-primary);
}

/* ---------- Yayın kartları (makale / patent) ---------- */
.cr-pubs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.15em;
}

.cr-pub {
    display: flex;
    flex-direction: column;
    gap: 0.55em;
    min-width: 0;
    padding: 1.1em 1.2em;
    border-radius: var(--neu-page-radius, 16px);
    background: var(--bg-primary);
    box-shadow: var(--neu-shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cr-pub:hover {
    transform: translateY(-3px);
    box-shadow: var(--neu-surface-raised, var(--neu-shadow-md));
}

.cr-pub__title {
    margin: 0;
    font-size: 1.04em;
    font-weight: 650;
    line-height: 1.5;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.cr-pub:hover .cr-pub__title {
    color: color-mix(in srgb, var(--accent-primary) 50%, var(--text-primary));
}

.cr-pub__authors {
    margin: 0;
    font-size: 0.92em;
    font-weight: 500;
    line-height: 1.55;
    color: var(--cr-soft);
}

.cr-pub__venue {
    margin: 0;
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--cr-text);
}

.cr-pub__venue strong {
    font-weight: 650;
    color: var(--text-primary);
}

/* Rozetler her zaman kartın altına yaslı: yanyana kartlar hizalı biter */
.cr-pub__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55em;
    margin-top: auto;
    padding-top: 0.2em;
}

.cr-facts {
    display: grid;
    gap: 0.85em;
    margin: 0.2em 0 0;
}

.cr-facts dt {
    margin: 0 0 0.15em;
    font-size: 0.76em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cr-soft);
}

.cr-facts dd {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--text-primary);
}

/* ---------- Projeler: metinler ---------- */
.cr-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.75em;
    margin: 0 0 0.8em;
    font-size: 1.1em;
    font-weight: 650;
    color: var(--text-primary);
}

.cr-text {
    margin: 0;
    font-size: 0.97em;
    line-height: 1.75;
    color: var(--cr-text);
}

.cr-text strong {
    color: var(--text-primary);
}

.cr-text--lead {
    margin-bottom: 1.15em;
}

/* Öne çıkan panel: solda vurgu şeridi */
.cr-highlight {
    position: relative;
}

.cr-highlight::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    bottom: 1.1rem;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-secondary, var(--accent-primary)));
}

/* ---------- Gruplar (kategori / kongre / not grubu) ----------
   Grup kartları panelin genişliğine göre yan yana ya da alt alta dizilir; .cr-cats--2 = iki, --3 = üç grup. */
.cr-cats {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.3em;
}

@container crpanel (min-width: 46rem) {
    .cr-cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container crpanel (min-width: 54rem) {
    .cr-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cr-cat {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.15em 1.2em 1.2em;
    border-radius: var(--neu-page-radius, 16px);
    background: var(--bg-primary);
    box-shadow: var(--neu-shadow-xs);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cr-cat:hover,
.cr-cat:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--neu-surface-raised, var(--neu-shadow-md));
}

.cr-cat__title {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 0 0 1em;
    font-size: 1.06em;
    font-weight: 650;
    line-height: 1.4;
    color: var(--text-primary);
}

.cr-cat__title .neu-badge {
    margin-left: auto;
    flex: 0 0 auto;
}

.cr-cat__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Uzun grup adı (kongre): biraz küçük; altında tarih */
.cr-cat__name--long {
    font-size: 0.92em;
    letter-spacing: 0.01em;
}

.cr-cat__name small {
    display: block;
    margin-top: 0.25em;
    font-size: 0.9em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--cr-soft);
}

.cr-cat__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.2em;
    height: 2.2em;
    border-radius: 11px;
    font-size: 0.95em;
    color: var(--accent-primary);
    background: var(--bg-primary);
    box-shadow: var(--neu-page-inset);
    transition: transform 0.2s ease;
}

.cr-cat:hover .cr-cat__icon {
    transform: scale(1.08);
}

.cr-cat__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: -0.2em 0 1em;
}

.cr-cat__list {
    display: flex;
    flex-direction: column;
    gap: 0.9em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Satır (proje / bildiri / not): içe basık; üzerine gelince yükselir, başlık vurgu rengine döner, solda şerit belirir */
.cr-proj {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    padding: 0.8em 0.95em;
    border-radius: 12px;
    box-shadow: var(--neu-page-inset);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cr-proj::before {
    content: "";
    position: absolute;
    top: 0.7em;
    bottom: 0.7em;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent-primary);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cr-proj:hover {
    transform: translateX(3px);
    box-shadow: var(--neu-shadow-xs);
}

.cr-proj:hover::before {
    opacity: 1;
}

.cr-proj strong {
    font-size: 1em;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.cr-proj:hover strong {
    color: color-mix(in srgb, var(--accent-primary) 50%, var(--text-primary));
}

.cr-proj small {
    font-size: 0.88em;
    line-height: 1.6;
    color: var(--cr-text);
}

/* Kongre içindeki bildiri: başlık biraz küçük, yazarlar soluk */
.cr-proj--paper strong {
    font-size: 0.94em;
}

.cr-proj--paper small {
    font-weight: 500;
    color: var(--cr-soft);
}

/* Teknoloji etiketleri */
.cr-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
}

.cr-tag {
    padding: 0.42em 0.95em;
    border-radius: 999px;
    font-size: 0.86em;
    font-weight: 650;
    color: color-mix(in srgb, var(--accent-primary) 50%, var(--text-primary));
    background: var(--bg-primary);
    box-shadow: var(--neu-page-inset);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cr-tag:hover {
    transform: translateY(-2px);
    box-shadow: var(--neu-shadow-xs);
}

@media (prefers-reduced-motion: reduce) {
    .career-stats .neu-stat,
    .cr-pub,
    .cr-pub__title,
    .cr-cat,
    .cr-cat__icon,
    .cr-proj,
    .cr-proj strong,
    .cr-proj::before,
    .cr-tag,
    .cr-timeline > li::before {
        transition: none;
    }

    .career-stats .neu-stat:hover,
    .cr-pub:hover,
    .cr-cat:hover,
    .cr-cat:focus-within,
    .cr-cat:hover .cr-cat__icon,
    .cr-proj:hover,
    .cr-tag:hover,
    .cr-timeline > li:hover::before {
        transform: none;
    }
}