/* ─── variables ─────────────────────────────────────── */
:root {
    --c1: #222;
    --c2: #444;
    --c3: #777;
    --c4: #bbb;
    --cf: #222222;
    --bg: #eeeeee;
    --pattern-color: #cccccc;
    --surface: #f0f0f0;
    --surface-hover: #fafafa;
    --border: #d0d0d0;
    --accent: rgb(51, 204, 255);
    --accent-dim: rgba(51, 204, 255, .18);
    --accent-text: #0088b4;
    --text: #222;
    --text-muted: #888;
    --muted: #888;
    --row-h: 36px;
    --content-w: 1100px;
    --gap: 12px;
    --radius: 2px;
}

/* ─── dark theme ────────────────────────────────────── */
[data-theme="dark"] {
    /* --c1..c4 değiştirilmedi: header bg'leri olduğu gibi koyu kalıyor */
    --cf: #1e2530;
    --bg: #181818;
    --pattern-color: #242424;
    --surface: #1e1e1e;
    --surface-hover: #252525;
    --border: #2a2a2a;
    --text: #c8c8c8;
    --text-muted: #585858;
    --accent-text: var(--accent);
    --muted: #555;
}

/* İçerik metin renkleri (header bg değil, yazı olarak kullanılan yerler) */
[data-theme="dark"] body { color: var(--text); }
[data-theme="dark"] body::before { background-color: #444444; opacity: 0.3; }

[data-theme="dark"] .profile-title,
[data-theme="dark"] .single-title,
[data-theme="dark"] .list-section-title { color: #ccc; }

[data-theme="dark"] .profile-aside .section-title,
[data-theme="dark"] .single-aside .single-date { color: #555; }

[data-theme="dark"] .profile-body,
[data-theme="dark"] .single-body { color: #aaa; border-left-color: var(--accent); }

[data-theme="dark"] .listen-track { color: #ccc; }
[data-theme="dark"] .listen-cover-empty { background: #333; }
[data-theme="dark"] .music-section-title { color: var(--muted); }
[data-theme="dark"] .stats-cover-empty { background: #333; }

[data-theme="dark"] .home-tagline p { color: #888; }
[data-theme="dark"] .home-intro { border-left-color: var(--accent); }

/* ─── reset ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: 'Josefin Sans', system-ui, sans-serif;
    font-weight: 300;
    background: var(--bg);
    color: var(--text);
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.45;
    background-color: var(--pattern-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpolygon points='24,4 44,24 24,44 4,24' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Cpolygon points='24,14 34,24 24,34 14,24' fill='none' stroke='%23fff' stroke-width='0.6'/%3E%3Ccircle cx='24' cy='4' r='2' fill='%23fff'/%3E%3Ccircle cx='44' cy='24' r='2' fill='%23fff'/%3E%3Ccircle cx='24' cy='44' r='2' fill='%23fff'/%3E%3Ccircle cx='4' cy='24' r='2' fill='%23fff'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpolygon points='24,4 44,24 24,44 4,24' fill='none' stroke='%23fff' stroke-width='1'/%3E%3Cpolygon points='24,14 34,24 24,34 14,24' fill='none' stroke='%23fff' stroke-width='0.6'/%3E%3Ccircle cx='24' cy='4' r='2' fill='%23fff'/%3E%3Ccircle cx='44' cy='24' r='2' fill='%23fff'/%3E%3Ccircle cx='24' cy='44' r='2' fill='%23fff'/%3E%3Ccircle cx='4' cy='24' r='2' fill='%23fff'/%3E%3C/svg%3E");
    -webkit-mask-size: 48px 48px;
    mask-size: 48px 48px;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { color: var(--accent); background: #333; }

/* ─── layout ─────────────────────────────────────────── */
#wrapper {
    height: 100vh;
    overflow-y: hidden;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
}

/* ─── header ─────────────────────────────────────────── */
header {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 90;
}

.hrow {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: var(--row-h);
    padding: 0 2.5em;
}

.hrow .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 2em;
}

.hrow .logo h1 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
    color: rgba(255,255,255,.55);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.hrow .logo h1 a {
    color: var(--accent);
    transition: color 200ms ease;
}
.hrow .logo h1 a:hover { color: rgba(255,255,255,.9); }

.hrow nav { flex: 1; display: flex; justify-content: flex-end; }
.hrow nav ul { list-style: none; display: flex; height: 100%; }

.hrow nav ul li {
    display: flex;
    align-items: stretch;
    border-left: 1px solid rgba(255,255,255,.1);
}
.hrow nav ul li:last-child { border-right: 1px solid rgba(255,255,255,.1); }

.hrow nav ul li a {
    display: flex;
    align-items: center;
    padding: 0 1em;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.8em;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: rgba(255,255,255,.55);
    height: 100%;
    transition: color 180ms ease, background 180ms ease;
}

.hrow nav ul li:hover a { color: #fff; background: rgba(255,255,255,.08); }
.hrow nav ul li.active a { color: rgba(255,255,255,.9); }
.hrow nav ul li.active { border-bottom: 2px solid var(--accent); }

.hrow-1 { background: var(--c1); }
.hrow-2 { background: var(--c2); }
.hrow-3 { background: var(--c3); }

/* ─── main margin (dynamic per header height) ────────── */
main {
    margin-top: var(--row-h);
    margin-bottom: var(--row-h);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;
}

header:has(.hrow-2) ~ main { margin-top: calc(var(--row-h) * 2); }
header:has(.hrow-3) ~ main { margin-top: calc(var(--row-h) * 3); }

/* ─── page content (single pages: about, blog post…) ── */
.page-content {
    width: 100%;
    max-width: 720px;
    padding: 4em 2em 6em;
}

.page-header {
    margin-bottom: 2.5em;
    padding-bottom: 1.4em;
    border-bottom: 1px solid var(--border);
}

.page-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.6em;
    font-weight: 600;
    color: var(--c1);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.page-date {
    display: block;
    margin-top: 0.6em;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.72em;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.page-cover {
    margin-bottom: 2.5em;
    border-radius: var(--radius);
    overflow: hidden;
}

.page-cover img { width: 100%; }

/* ─── prose ──────────────────────────────────────────── */
.prose {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.05em;
    font-weight: 300;
    color: #3a3a3a;
    line-height: 1.9;
}

.prose p { margin-bottom: 1.3em; }
.prose p:last-child { margin-bottom: 0; }

.prose h2 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.5em;
    font-weight: 600;
    color: var(--c1);
    margin: 2.5em 0 0.7em;
    letter-spacing: -0.01em;
}

.prose h3 {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: var(--c2);
    margin: 2em 0 0.5em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.prose a {
    color: var(--text);
    border-bottom: 1px solid var(--accent);
    transition: color 150ms ease, border-color 150ms ease;
}
.prose a:hover { color: var(--accent); }

.prose strong { font-weight: 600; color: var(--c2); }
.prose em { font-style: italic; }

.prose ul, .prose ol { margin: 0.8em 0 1.3em 1.6em; }
.prose li { margin-bottom: 0.35em; }

.prose blockquote {
    border-left: 2px solid var(--accent);
    padding: 0.4em 0 0.4em 1.4em;
    color: var(--text-muted);
    font-style: italic;
    margin: 1.8em 0;
}

.prose code {
    font-family: ui-monospace, monospace;
    font-size: 0.85em;
    background: #ddd;
    padding: 0.15em 0.45em;
    border-radius: 2px;
}

.prose pre {
    background: var(--c1);
    color: #ddd;
    padding: 1.4em;
    overflow-x: auto;
    margin: 1.4em 0;
    border-radius: var(--radius);
}
.prose pre code { background: none; padding: 0; font-size: 0.88em; }

.prose img { margin: 2em auto; border-radius: var(--radius); }
.prose hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }

/* ─── list pages (portfolio, blog) ───────────────────── */
.list-header {
    width: 100%;
    max-width: var(--content-w);
    padding: 3em 2.5em 2em 2em;
    margin-left: auto;
    margin-right: 0;
}

.list-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2.2em;
    font-weight: 600;
    color: var(--c1);
    letter-spacing: -0.01em;
}

.list-desc {
    margin-top: 0.8em;
    max-width: 560px;
}

/* ─── masonry item grid ──────────────────────────────── */
.item-grid {
    width: 100%;
    max-width: var(--content-w);
    padding: 0 2.5em 5em 2em;
    columns: 3 280px;
    column-gap: var(--gap);
    margin-left: auto;
    margin-right: 0;
}

.item-card {
    break-inside: avoid;
    display: block;
    margin-bottom: var(--gap);
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.item-card:hover {
    background: var(--surface-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

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

.item-body {
    padding: 1.1em 1.3em 1.3em;
}

.item-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1em;
    font-weight: 600;
    color: var(--c1);
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.item-desc {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.85em;
    font-weight: 300;
    font-style: italic;
    color: var(--text-muted);
    margin-top: 0.4em;
    line-height: 1.55;
}

.item-date {
    display: block;
    margin-top: 0.8em;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.68em;
    font-weight: 300;
    color: #aaa;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── portfolio landing: section cards ───────────────── */
.section-grid {
    width: 100%;
    max-width: var(--content-w);
    padding: 1em 2em 5em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--gap);
}

.section-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 120px;
    padding: 1.4em 1.5em;
    background: var(--c2);
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.06);
    transition: background 200ms ease, transform 200ms ease;
    color: rgba(255,255,255,.85);
}

.section-card:hover {
    background: var(--c1);
    transform: translateY(-2px);
}

.section-card-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.01em;
}

.section-card-desc {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.8em;
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,.45);
    margin-top: 0.3em;
    line-height: 1.5;
}

.section-card .arrow {
    font-size: 0.75em;
    color: var(--accent);
    margin-top: 1em;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: letter-spacing 200ms ease;
}

.section-card:hover .arrow { letter-spacing: 0.14em; }

/* ─── single page layout ─────────────────────────────── */
.single-layout {
    width: 60%;
    max-width: 920px;
    margin: 0 0 0 auto;
    padding: 5em 2.5em 7em 2em;
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start;
    gap: 0 2em;
}

.single-aside {
    position: sticky;
    top: calc(var(--row-h) + 3em);
    text-align: right;
}

.single-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2em;
    font-weight: 600;
    color: var(--c1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.single-date {
    display: block;
    margin-top: 0.8em;
    font-size: 0.62em;
    font-weight: 300;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.single-body {
    border-left: 2px solid var(--accent);
    padding-left: 4em;
    font-size: 0.92em;
    color: var(--c3);
}

.single-cover {
    margin-bottom: 2.5em;
    border-radius: var(--radius);
    overflow: hidden;
}

.single-cover img { width: 100%; display: block; }

@media (max-width: 600px) {
    .single-layout {
        grid-template-columns: 1fr;
        gap: 2em 0;
        width: 100%;
        padding: 2.5em 1.2em 4em;
    }
    .single-aside { position: static; text-align: left; }
    .single-body { border-left: none; padding-left: 0; border-top: 2px solid var(--accent); padding-top: 2em; }
}

/* ─── list section layout ────────────────────────────── */
.list-layout {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 0 0 auto;
    padding: 5em 2.5em 0 2em;
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: start;
    gap: 0 2em;
}

.list-aside {
    position: sticky;
    top: calc(var(--row-h) + 3em);
    text-align: right;
}

.list-section-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2em;
    font-weight: 600;
    color: var(--c1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.list-body {
    border-left: 2px solid var(--accent);
}

.list-body .item-grid {
    max-width: none;
    margin: 0;
    padding: 0 0 5em 2em;
    columns: unset;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--gap);
}

.list-body .item-card { margin-bottom: 0; }

.list-body .empty-state { padding-left: 2em; }

@media (max-width: 900px) {
    .list-body .item-grid { columns: 2 220px; }
}

@media (max-width: 600px) {
    .list-layout {
        grid-template-columns: 1fr;
        gap: 2em 0;
        padding: 2.5em 1.2em 0;
    }
    .list-aside { position: static; text-align: left; }
    .list-body { border-left: none; border-top: 2px solid var(--accent); }
    .list-body .item-grid { columns: 1; padding: 2em 0 3.5em; }
}

/* ─── homepage ───────────────────────────────────────── */
.home-hero {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 5em 2.5em 5em 2em;
}

.home-intro {
    max-width: 460px;
    border-left: 2px solid var(--accent);
    padding-left: 1.6em;
}

.home-tagline p {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.92em;
    font-weight: 300;
    color: var(--c3);
    line-height: 1.9;
}

@media (max-width: 600px) {
    .home-hero { padding: 3em 1.2em; }
}

/* ─── profile page ───────────────────────────────────── */
.profile-layout {
    flex: 1;
    min-height: 0;
    align-self: stretch;
    width: 100%;
    max-width: 920px;
    margin: 0 0 0 auto;
    padding: 3em 2.5em 3em 2em;
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: stretch;
    gap: 0 4em;
    overflow: hidden;
}

.profile-aside {
    align-self: start;
    position: sticky;
    top: calc(var(--row-h) + 3em);
    text-align: right;
}

.profile-title {
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2em;
    font-weight: 600;
    color: var(--c1);
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.profile-body {
    height: 100%;
    border-left: 2px solid var(--accent);
    padding-left: 4em;
    font-size: 0.92em;
    color: var(--c3);
    overflow: hidden;
}

.profile-body p {
    margin-bottom: 1.6em;
}

.profile-body p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .profile-layout {
        grid-template-columns: 1fr;
        gap: 2em 0;
        padding: 2.5em 1.2em 4em;
    }
    .profile-aside { position: static; text-align: left; }
    .profile-layout { padding-right: 1.2em; }
    .profile-body { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 2em; }
}

/* ─── empty state ────────────────────────────────────── */
.empty-state {
    font-family: 'Josefin Sans', sans-serif;
    font-style: italic;
    color: var(--text-muted);
    padding: 4em 2em;
    text-align: center;
    width: 100%;
    opacity: .6;
}

/* ─── footer ─────────────────────────────────────────── */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 90;
    background: #222222;
    height: var(--row-h);
}

footer > div {
    display: flex;
    align-items: stretch;
    height: 100%;
    padding: 0 2.5em;
}

.footer-version {
    margin-left: 0.8em;
    opacity: 0.45;
}

.footer-left {
    display: flex;
    align-items: center;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.68em;
    font-weight: 300;
    color: rgba(255,255,255,.3);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
}

footer nav { flex: 1; display: flex; justify-content: flex-end; }
footer nav ul { list-style: none; display: flex; height: 100%; }

footer nav ul li {
    display: flex;
    align-items: stretch;
    border-left: 1px solid rgba(255,255,255,.1);
    transition: background 180ms ease;
}

footer nav ul li:last-child { border-right: 1px solid rgba(255,255,255,.1); }
.theme-li + .theme-li { border-left: none; }

footer nav ul li a {
    display: flex;
    align-items: center;
    padding: 0 0.9em;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 0.68em;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    height: 100%;
    transition: color 150ms ease;
}

footer nav ul li:hover { background: rgba(255,255,255,.08); }
footer nav ul li:hover a { color: rgba(255,255,255,.9); }

/* ─── responsive ─────────────────────────────────────── */
@media (max-width: 900px) {
    .item-grid { columns: 2 220px; }
    .section-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 768px) {
    #wrapper { height: auto; min-height: 100vh; overflow: visible; }
    main { flex: none; height: auto; overflow: visible; }
    .profile-layout { overflow: visible; }
    .profile-body { height: auto; overflow: visible; }
}

@media (max-width: 600px) {
    .hrow { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .hrow .logo { flex-shrink: 0; padding-left: 1.2em; position: sticky; left: 0; z-index: 1; background-color: inherit; }
    .hrow nav { flex-shrink: 0; }
    .hrow nav ul { flex-shrink: 0; padding-right: 1.2em; }
    .item-grid { columns: 1; padding: 0 1.2em 3.5em; }
    .list-header { padding: 2.5em 1.2em 1.5em; }
    .page-content { padding: 2.5em 1.2em 4em; }
    .page-title { font-size: 2em; }
    .section-grid { padding: 0.5em 1.2em 3.5em; }
    footer > div { padding: 0 1.2em; }
    .footer-left { display: none; }
}

/* ─── theme toggle ───────────────────────────────────── */
.theme-btn {
    display: flex;
    align-items: center;
    padding: 0 0.7em;
    font-size: 0.85em;
    color: rgba(255,255,255,.45);
    height: 100%;
    transition: color 150ms ease;
    line-height: 1;
}

.theme-btn:hover { color: rgba(255,255,255,.9); }
.theme-btn.active { color: var(--accent); }

/* ─── music widget ───────────────────────────────────── */
.music-section { margin-bottom: 2.5em; }

.music-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.listen-list { display: block; }

.listen-item {
    display: grid;
    grid-template-columns: 14px 14px 1fr 1fr auto;
    align-items: center;
    gap: 0 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
    break-inside: avoid;
}

.listen-item:last-child { border-bottom: none; }

.listen-cover {
    width: 14px;
    height: 14px;
    object-fit: cover;
    border-radius: 1px;
    display: block;
}

.listen-cover-empty {
    width: 14px;
    height: 14px;
    background: var(--border);
    border-radius: 1px;
}

.listen-loved {
    font-size: 10px;
    color: var(--border);
    text-align: center;
    line-height: 1;
}

.listen-loved.is-loved { color: #e33; }

.listen-track {
    font-size: 13px;
    font-weight: 600;
    color: var(--c1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listen-artist {
    font-size: 13px;
    color: var(--accent-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listen-time {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.state-msg {
    font-size: 12px;
    color: var(--muted);
    padding: 12px 0;
}

.state-msg.err { color: #c33; }

.load-more-btn {
    margin-top: 0;
    background: none;
    border: 1px solid var(--border);
    padding: 6px 16px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c3);
    cursor: pointer;
    border-radius: 1px;
    transition: background 150ms, color 150ms;
}

.load-more-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ─── muzik dashboard ───────────────────────────────────── */
.dash-more-link {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-text);
    text-decoration: none;
    padding-top: 8px;
}

.dash-more-link:hover { text-decoration: underline; }

.dash-section-link {
    color: var(--c2);
    text-decoration: none;
    transition: color 120ms;
}

.dash-section-link:hover { color: var(--accent-text); }

.dash-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
    align-items: flex-end;
    padding-bottom: 4px;
}

.dash-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-stat-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.dash-stat-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.dash-milestone {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.dash-milestone-bar-wrap {
    height: 2px;
    background: var(--border);
    border-radius: 1px;
}

.dash-milestone-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 1px;
    min-width: 2px;
}

.dash-milestone-label {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.06em;
}

/* ─── stats period nav ───────────────────────────────────── */
.period-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.period-btn {
    background: none;
    border: 1px solid var(--border);
    padding: 3px 10px;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    cursor: pointer;
    border-radius: 1px;
    transition: background 120ms, color 120ms, border-color 120ms;
}

.period-btn:hover {
    color: var(--text);
    border-color: var(--text);
}

.period-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ─── stats summary ──────────────────────────────────────── */
.stats-summary-row {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    align-items: center;
}

.stats-summary-row em { font-style: normal; }
.stats-sum-sep { color: var(--border); }

/* ─── stats tags ─────────────────────────────────────────── */
.stats-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding-top: 2px;
}

.stats-tag {
    font-size: 11px;
    color: var(--text);
    letter-spacing: 0.04em;
}

.stats-tag em {
    font-style: normal;
    color: var(--muted);
    font-size: 10px;
}

/* ─── dağılım grafikleri ─────────────────────────────────── */
.dist-chart {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.dist-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 48px;
}

.dist-col {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
    cursor: default;
}

.dist-bar {
    width: 100%;
    background: var(--accent);
    opacity: 0.6;
    border-radius: 1px 1px 0 0;
    min-height: 1px;
    transition: opacity .12s;
}

.dist-col:hover .dist-bar {
    opacity: 1;
}

.dist-tooltip {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    background: var(--c1);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--radius);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .1s;
}

.dist-tooltip.visible {
    opacity: 1;
}

.dist-labels {
    display: flex;
    gap: 2px;
}

.dist-label {
    flex: 1;
    min-width: 0;
    font-size: 9px;
    color: var(--muted);
    text-align: center;
    line-height: 1;
    overflow: hidden;
}

.dist-chart-monthly .dist-scroll {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-bottom: 2px;
}

.dist-chart-monthly .dist-bars,
.dist-chart-monthly .dist-labels {
    min-width: max-content;
    flex-wrap: nowrap;
}

.dist-chart-monthly .dist-col,
.dist-chart-monthly .dist-label {
    flex: 0 0 10px;
    width: 10px;
}

/* ─── stats sayfası ─────────────────────────────────────── */
.stats-period-label {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.6em;
}

.stats-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.stats-item {
    display: grid;
    grid-template-columns: 20px 16px 1fr auto;
    grid-template-rows: 3px auto auto;
    align-items: center;
    column-gap: 8px;
    row-gap: 1px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
}

.stats-item:last-child { border-bottom: none; }

.stats-bar-wrap {
    grid-column: 3;
    grid-row: 1;
    height: 3px;
    background: var(--border);
    border-radius: 1px;
    align-self: center;
}

.stats-bar {
    height: 100%;
    background: var(--accent);
    border-radius: 1px;
    min-width: 2px;
}

.stats-rank {
    grid-column: 1;
    grid-row: 1 / 4;
    font-size: 10px;
    color: var(--muted);
    text-align: right;
    align-self: center;
}

.stats-cover {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 16px;
    height: 16px;
    object-fit: cover;
    border-radius: 1px;
    display: block;
    align-self: center;
}

.stats-cover-empty {
    grid-column: 2;
    grid-row: 1 / 4;
    width: 16px;
    height: 16px;
    background: var(--border);
    border-radius: 1px;
    align-self: center;
}

.stats-name {
    grid-column: 3;
    grid-row: 2;
    font-size: 13px;
    font-weight: 600;
    color: var(--c1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.stats-name:hover { color: var(--accent-text); }

.stats-sub {
    grid-column: 3;
    grid-row: 3;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.stats-sub:hover { color: var(--accent-text); }

.stats-count {
    grid-column: 4;
    grid-row: 1 / 4;
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    align-self: center;
}