/* ============================================================
   physiotr.com.tr — home.css (v20260728a)
   Akademik-editoryal tasarım, "hassas enstrüman" katmanıyla:
   mono künye detayları, cetvel çizgileri, kesim işaretleri,
   scroll-driven animasyonlar, view-transition tema geçişi,
   komut paleti, container queries, print/CV katmanı.
   ============================================================ */

:root {
    /* E-kitap paleti: nötr sıcak kâğıt, mürekkep-siyahı metin,
       fosforlu-kalem (highlight) vurgusu, mercan not kalemi. */
    --paper: #f4f4f3;
    --paper-deep: #e9e9e7;
    --surface: #fcfcfb;
    --ink: #1c1d1f;
    --ink-soft: #5c5e62;
    --line: rgba(28, 29, 31, 0.15);
    --line-faint: rgba(28, 29, 31, 0.06);
    --line-strong: rgba(28, 29, 31, 0.4);
    --acid: #e8e8e5;
    --acid-ink: #2b2c2e;
    --coral: #ff6846;
    --coral-text: #c8391a; /* küçük metinde AA kontrastlı koral */
    /* Lacivert "blueprint" katmanı: teknik çizim mavisi ana vurgu.
       Açık kâğıt üstünde #1d3fa0 ~8.2:1 kontrastla AA/AAA sağlar. */
    --navy: #1d3fa0;
    --navy-deep: #152d75;
    --navy-ink: #1a3891; /* metin üstünde lacivert */
    --navy-on: #ffffff;  /* lacivert zemin üstündeki metin */
    --navy-bright: #8aa7ff; /* koyu zemin (iletişim bandı) üstünde açık lacivert */
    --navy-faint: rgba(29, 63, 160, 0.07);
    --navy-grid: rgba(29, 63, 160, 0.055);
    --navy-line: rgba(29, 63, 160, 0.16);
    --navy-line-strong: rgba(29, 63, 160, 0.42);
    --sage: #d6d6d3;
    --shadow: 0 24px 70px rgba(28, 29, 31, 0.1);
    --serif: "Newsreader", Georgia, serif;
    --sans: "Onest", "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;
    --shell: min(1240px, calc(100vw - 64px));
    --header-height: 88px;
    --radius: 22px;
    --tick: 14px; /* kesim işareti uzunluğu */
    color-scheme: light;
}

[data-theme="dark"] {
    /* E-ink gece modu: nötr koyu kâğıt, sıcak beyaz mürekkep. */
    --acid: #2c2e31;
    --acid-ink: #e4e5e6;
    --coral-text: #ff6846; /* koyu zeminde koral zaten AA geçiyor */
    /* Gece modunda lacivert, sinyal mavisi olarak açılır */
    --navy: #8aa7ff;
    --navy-deep: #b3c6ff;
    --navy-ink: #9db4ff;
    --navy-on: #0d1526;
    --navy-bright: #8aa7ff;
    --navy-faint: rgba(138, 167, 255, 0.1);
    --navy-grid: rgba(138, 167, 255, 0.065);
    --navy-line: rgba(138, 167, 255, 0.18);
    --navy-line-strong: rgba(138, 167, 255, 0.45);
    --paper: #17181a;
    --paper-deep: #1e1f22;
    --surface: #232427;
    --ink: #ececed;
    --ink-soft: #a3a5a9;
    --line: rgba(236, 237, 237, 0.13);
    --line-faint: rgba(236, 237, 237, 0.06);
    --line-strong: rgba(236, 237, 237, 0.34);
    --sage: #34363a;
    --shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 20px);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    transition: background-color 240ms ease, color 240ms ease;
}

html,
body {
    overflow-x: clip;
}

/* Kâğıt dokusu */
body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
    content: "";
    pointer-events: none;
}

/* Blueprint ızgarası: tüm sayfada üstten aşağı eriyen teknik çizim düzlemi.
   Çizgiler yalnızca lacivertin %5'inde — okunaklılığı bozmaz. */
body::after {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    background-image:
        linear-gradient(90deg, var(--navy-grid) 1px, transparent 1px),
        linear-gradient(0deg, var(--navy-grid) 1px, transparent 1px);
    background-size: 128px 128px;
    mask-image: radial-gradient(ellipse 130% 95% at 50% 0%, #000 25%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 130% 95% at 50% 0%, #000 25%, transparent 78%);
    pointer-events: none;
}

/* Teknik görünümde ince lacivert kaydırma çubuğu */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--navy-line-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--navy-line);
    border: 2px solid var(--paper);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--navy);
}

::selection {
    background: var(--navy);
    color: var(--navy-on);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    color: inherit;
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--navy);
    outline-offset: 4px;
    border-radius: 2px;
}

kbd {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--surface);
    color: var(--ink-soft);
}

.mono {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.shell {
    width: var(--shell);
    margin-inline: auto;
}

/* ---------------------------------------------------- Scroll ilerleme çizgisi */

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: 100%;
    height: 2px;
    background: var(--navy);
    transform: scaleX(var(--scroll-p, 0));
    transform-origin: 0 50%;
}

@supports (animation-timeline: scroll()) {
    .scroll-progress {
        animation: progress-grow linear both;
        animation-timeline: scroll(root);
    }

    @keyframes progress-grow {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
}

/* ------------------------------------------------------------------ Skip link */

.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1300;
    padding: 12px 16px;
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-150%);
    transition: transform 180ms ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* --------------------------------------------------------------------- Header */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    border-bottom: 1px solid transparent;
    transition: background-color 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}

.site-header.is-scrolled {
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom-color: var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    height: var(--header-height);
}

.brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.brand-wordmark {
    width: 158px;
    height: auto;
}

.wordmark-dark {
    display: none;
}

[data-theme="dark"] .wordmark-light {
    display: none;
}

[data-theme="dark"] .wordmark-dark {
    display: block;
}

.desktop-nav {
    display: flex;
    gap: 26px;
}

.desktop-nav a {
    position: relative;
    padding: 10px 2px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--ink-soft);
    transition: color 160ms ease;
}

/* Alt çizgi soldan çizilir — mürekkep kalemi hissi */
.desktop-nav a::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4px;
    height: 1.5px;
    background: var(--navy);
    content: "";
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 220ms cubic-bezier(0.6, 0, 0.2, 1);
}

.desktop-nav a:hover,
.desktop-nav a.is-active {
    color: var(--ink);
}

.desktop-nav a:hover::after,
.desktop-nav a.is-active::after {
    transform: scaleX(1);
}

.desktop-nav .nav-museum,
.mobile-nav .nav-museum {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.desktop-nav .nav-museum::before,
.mobile-nav .nav-museum::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bd7d32;
    box-shadow: 0 0 0 4px rgba(189, 125, 50, 0.12);
    content: "";
    flex: 0 0 auto;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-button,
.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.control-button:hover,
.menu-toggle:hover {
    border-color: var(--line-strong);
    background: var(--surface);
}

.control-button:active,
.menu-toggle:active {
    transform: scale(0.96);
}

.cmdk-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.cmdk-button kbd {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-soft);
    white-space: nowrap;
}

.language-toggle {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.moon-icon {
    display: none;
}

[data-theme="dark"] .sun-icon {
    display: none;
}

[data-theme="dark"] .moon-icon {
    display: block;
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
}

.menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ink);
    transition: transform 220ms ease;
}

.menu-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(4px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-4px) rotate(-45deg);
}

.mobile-nav {
    display: none;
}

/* ----------------------------------------------------------------------- Hero */

.hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 6vw, 84px);
    align-items: center;
    padding-top: calc(var(--header-height) + clamp(40px, 8vh, 88px));
    padding-bottom: clamp(36px, 6vh, 72px);
    min-height: 92svh;
}

/* WebGL akış alanı: hero arkasında, kenarları eriyen canlı kontur haritası */
.hero-field {
    position: absolute;
    inset: 0 calc((100vw - var(--shell)) / -2);
    z-index: -1;
    width: 100vw;
    height: 100%;
    opacity: 0.55;
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 84%, transparent 100%);
    pointer-events: none;
}

[data-theme="dark"] .hero-field {
    opacity: 0.5;
}

/* Blueprint ızgarası: hero'da iki eksenli teknik çizim düzlemi */
.hero::before {
    position: absolute;
    inset: 0 -8vw;
    z-index: -2;
    content: "";
    background-image:
        linear-gradient(90deg, var(--navy-line) 1px, transparent 1px),
        linear-gradient(0deg, var(--navy-line) 1px, transparent 1px);
    background-size: clamp(72px, 8vw, 120px) clamp(72px, 8vw, 120px);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
    pointer-events: none;
}

/* Köşelerde artı işaretleri (registration marks) */
.hero::after {
    position: absolute;
    inset: 0 -8vw;
    z-index: -1;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' fill='none' stroke='%231d3fa0' stroke-opacity='.5' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 18px 18px;
    background-position:
        left 6px top calc(var(--header-height) + 18px),
        right 6px top calc(var(--header-height) + 18px),
        left 6px bottom 10px,
        right 6px bottom 10px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 86%, transparent 100%);
    pointer-events: none;
}

[data-theme="dark"] .hero::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v18M3 12h18' fill='none' stroke='%238aa7ff' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E");
}

.hero-copy {
    max-width: 640px;
}

.eyebrow,
.section-index,
.project-type,
.project-meta {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--ink-soft);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 22px;
}

.eyebrow::before {
    display: inline-block;
    width: 34px;
    height: 1.5px;
    background: var(--navy);
    content: "";
}

.hero-title {
    margin: 0 0 24px;
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: clamp(2.7rem, 6.2vw, 4.7rem);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.hero-title em,
.statement em,
.section-heading h2 em,
.path-title em {
    font-style: italic;
    font-weight: 400;
    color: var(--navy-ink);
}

/* İletişim bandı koyu zeminde: lacivert burada açık tona döner */
.contact-copy h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--navy-bright);
}

.hero-lead {
    margin: 0 0 34px;
    max-width: 46ch;
    font-size: 1.08rem;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    background: transparent;
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 180ms ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:hover svg {
    transform: translateX(4px);
}

.button-primary {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--navy-on);
}

.button-primary:hover {
    background: var(--navy-deep);
    border-color: var(--navy-deep);
    color: var(--navy-on);
}

.button-quiet:hover {
    background: var(--surface);
}

.hero-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    font-size: 0.9rem;
}

.hero-links > span {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}

.hero-links a {
    padding: 6px 0;
    color: var(--ink-soft);
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

.hero-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--navy);
}

/* Portre: enstrüman çerçevesi + kesim işaretleri */

.hero-portrait {
    position: relative;
    justify-self: end;
    width: min(100%, 380px);
}

.portrait-backdrop {
    position: absolute;
    inset: 26px -26px -26px 26px;
    background: var(--acid);
    border-radius: var(--radius);
    z-index: -1;
    transition: background-color 240ms ease;
}

.portrait-frame {
    position: relative;
    margin: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
}

.portrait-frame img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.portrait-frame figcaption {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.portrait-frame figcaption span {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.portrait-frame figcaption strong {
    font-family: var(--serif);
    font-size: 1.05rem;
    font-weight: 600;
}

/* Kesim işaretleri (crop marks) */
.hero-portrait::before,
.hero-portrait::after {
    position: absolute;
    width: var(--tick);
    height: var(--tick);
    content: "";
    border: 0 solid var(--line-strong);
    pointer-events: none;
}

.hero-portrait::before {
    top: -10px;
    left: -10px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

.hero-portrait::after {
    bottom: -10px;
    right: -10px;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
}

/* Portre hafif scroll-parallax (destekleyen tarayıcıda) */
@supports (animation-timeline: view()) {
    .portrait-frame img {
        animation: portrait-drift linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 100%;
    }

    @keyframes portrait-drift {
        from { transform: translateY(-2.5%) scale(1.06); }
        to { transform: translateY(2.5%) scale(1.06); }
    }
}

/* Künye + enstrüman şeridi */
.hero-footer {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    margin-top: clamp(8px, 2vh, 22px);
}

.live-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--navy);
    animation: live-pulse 2.2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.live-cell strong a {
    border-bottom: 1px solid var(--line-strong);
    transition: border-color 160ms ease, color 160ms ease;
}

.live-cell strong a:hover {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

.hero-footer div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 20px 22px 4px 0;
}

.hero-footer div + div {
    border-left: 1px solid var(--line);
    padding-left: 22px;
}

.hero-footer span {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.hero-footer strong {
    font-weight: 600;
    font-size: 0.98rem;
}

/* Yükleme koreografisi */
.hero-animate {
    animation: hero-in 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-title.hero-animate { animation-delay: 80ms; }
.hero-lead.hero-animate { animation-delay: 150ms; }
.hero-actions.hero-animate { animation-delay: 220ms; }
.hero-links.hero-animate { animation-delay: 290ms; }
.hero-portrait.hero-animate { animation-delay: 140ms; }
.hero-footer.hero-animate { animation-delay: 340ms; }

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------------- Bölümler */

.section {
    padding: clamp(64px, 11vh, 128px) 0;
}

.section.about,
.section.path {
    display: grid;
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.section-index {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
}

.section-index::after {
    display: inline-block;
    width: 30px;
    height: 1px;
    background: var(--line-strong);
    content: "";
}

.section-aside {
    position: sticky;
    top: calc(var(--header-height) + 28px);
}

.aside-note {
    margin: 0;
    max-width: 26ch;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.statement,
.section-heading h2,
.path-title,
.contact-copy h2 {
    margin: 0;
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: clamp(2rem, 4.4vw, 3.3rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: clamp(28px, 4vw, 56px);
    margin-top: clamp(28px, 4vh, 44px);
}

.about-intro {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* Künye defteri */
.bio-facts dl {
    margin: 0;
    border-top: 1px solid var(--line);
}

.bio-facts dl > div {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.bio-facts dt {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-top: 3px;
}

.bio-facts dd {
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
}

.bio-facts dd a {
    border-bottom: 1px solid var(--line-strong);
    transition: border-color 160ms ease, color 160ms ease;
}

.bio-facts dd a:hover {
    color: var(--acid-ink);
    border-bottom-color: var(--navy);
}

[data-theme="dark"] .bio-facts dd a:hover {
    color: var(--acid);
}

/* -------------------------------------------------------------------- Araştırma */

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: clamp(30px, 5vh, 52px);
}

.section-heading > p {
    margin: 0 0 6px;
    max-width: 34ch;
    text-align: right;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.focus-list {
    border-top: 1px solid var(--line);
}

.focus-item {
    position: relative;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 26px 18px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

/* Hover: mürekkep dolgu soldan */
.focus-item::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--acid);
    content: "";
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 320ms cubic-bezier(0.6, 0, 0.2, 1);
}

.focus-item:hover::before {
    transform: scaleX(1);
}

.focus-number {
    font-family: var(--mono);
    font-size: 0.85rem;
    color: var(--ink-soft);
    transition: color 200ms ease;
}

.focus-item:hover .focus-number {
    color: var(--navy);
}

.focus-item h3 {
    margin: 0 0 6px;
    font-family: var(--serif);
    font-size: 1.45rem;
    font-weight: 600;
    line-height: 1.2;
}

.focus-item p {
    margin: 0;
    max-width: 60ch;
    color: var(--ink-soft);
    font-size: 0.95rem;
    transition: color 200ms ease;
}

.focus-item:hover h3,
.focus-item:hover p {
    color: var(--acid-ink);
}

[data-theme="dark"] .focus-item:hover h3,
[data-theme="dark"] .focus-item:hover p {
    color: var(--acid-ink);
}

.focus-tag {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    padding: 7px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
    transition: border-color 200ms ease, color 200ms ease;
}

.focus-item:hover .focus-tag {
    border-color: var(--acid-ink);
    color: var(--acid-ink);
}

/* ------------------------------------------------------------------- Yayınlar */

.section.publications {
    background: var(--paper-deep);
    border-block: 1px solid var(--line);
    transition: background-color 240ms ease;
}

/* Panel: ölçüm aleti çerçevesi */
.pub-panel {
    position: relative;
    container-type: inline-size;
}

/* Panel: ölçüm aleti çerçevesi + blueprint köşe işaretleri */
.pub-metrics {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
    padding: 22px 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.pub-metrics::before,
.pub-metrics::after {
    position: absolute;
    width: var(--tick);
    height: var(--tick);
    content: "";
    border: 0 solid var(--navy-line-strong);
    pointer-events: none;
}

.pub-metrics::before {
    top: -9px;
    left: -9px;
    border-top-width: 1.5px;
    border-left-width: 1.5px;
}

.pub-metrics::after {
    bottom: -9px;
    right: -9px;
    border-bottom-width: 1.5px;
    border-right-width: 1.5px;
}

.pub-metrics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 36px;
    margin: 0;
}

.pub-metrics-list > div {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.pub-metrics-list dt {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.pub-metrics-list dd {
    margin: 0;
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.1;
}

/* Yıllara göre yayın sparkline'ı (home.js doldurur) */
.pub-spark {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    min-height: 52px;
}

.pub-spark:empty {
    display: none;
}

.pub-spark .spark-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.pub-spark .spark-bar {
    width: 14px;
    border-radius: 3px 3px 0 0;
    background: var(--sage);
    transition: height 420ms cubic-bezier(0.2, 0.7, 0.2, 1), background-color 160ms ease;
}

.pub-spark .spark-col:last-child .spark-bar {
    background: var(--navy);
}

.pub-spark .spark-year {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--ink-soft);
}

.pub-metrics-links {
    display: flex;
    gap: 18px;
    margin: 0;
    font-size: 0.88rem;
}

.pub-metrics-links a {
    color: var(--ink-soft);
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

.pub-metrics-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--navy);
}

.pub-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 26px 0 4px;
}

.pub-filters:empty {
    display: none;
}

.pub-chip {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.pub-chip:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}

.pub-chip.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--navy-on);
}

/* Defter listesi: asılı yıl sütunu */
.pub-list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
    counter-reset: pub;
}

.pub-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-areas:
        "head title"
        "head authors"
        "head venue"
        "head badges";
    column-gap: 26px;
    padding: 24px 4px;
    border-bottom: 1px solid var(--line);
    transition: background-color 180ms ease;
}

.pub-item:hover {
    background: color-mix(in srgb, var(--surface) 60%, transparent);
}

.pub-item-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.pub-year {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.02rem;
    font-weight: 500;
}

.pub-type {
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-soft);
}

.pub-title {
    grid-area: title;
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: pretty;
}

.pub-title a {
    background-image: linear-gradient(var(--navy), var(--navy));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1.5px;
    transition: background-size 260ms cubic-bezier(0.6, 0, 0.2, 1);
}

.pub-title a:hover {
    background-size: 100% 1.5px;
}

.pub-authors {
    grid-area: authors;
    margin: 0 0 5px;
    font-size: 0.92rem;
    color: var(--ink-soft);
}

.pub-authors strong {
    color: var(--ink);
    font-weight: 600;
}

.pub-venue {
    grid-area: venue;
    margin: 0 0 8px;
    font-size: 0.88rem;
    font-style: italic;
    font-family: var(--serif);
    color: var(--ink-soft);
}

.pub-badges {
    grid-area: badges;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
}

.pub-badge {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-soft);
}

.pub-badge-cite {
    border-color: color-mix(in srgb, var(--navy) 55%, transparent);
    color: var(--navy-ink);
}

.pub-badge-oa {
    background: var(--acid);
    border-color: transparent;
    color: var(--acid-ink);
}

.pub-empty {
    padding: 26px 4px;
    color: var(--ink-soft);
}

.pub-note {
    margin: 18px 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
}

/* Yıllara göre atıf çubukları (publications.js doldurur) */
.pub-citebars {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: min(280px, 100%);
}

.pub-citebars-label {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.pub-citebars-row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    gap: 12px;
    align-items: center;
}

.pub-citebars-year,
.pub-citebars-val {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    color: var(--ink-soft);
}

.pub-citebars-val {
    text-align: right;
    color: var(--navy-ink);
    font-weight: 500;
}

.pub-citebars-track {
    height: 6px;
    border-radius: 4px;
    background: var(--navy-faint);
    overflow: hidden;
}

.pub-citebars-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--navy);
    transition: width 640ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* BibTeX kopyalama düğmesi: kesikli çizgi = teknik çizim detayı */
.pub-bibtex {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    border: 1px dashed var(--navy-line-strong);
    border-radius: 999px;
    background: transparent;
    color: var(--navy-ink);
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pub-bibtex:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--navy-on);
}

.pub-bibtex.is-copied {
    background: var(--navy-faint);
    border-style: solid;
}

/* CV / PDF düğmesi (hakkımda bölümü) */
.cv-print {
    margin-top: 22px;
}

.cv-print .button svg {
    width: 16px;
    height: 16px;
}

/* Dar kapsayıcıda defter düzeni dikeyleşir */
@container (max-width: 640px) {
    .pub-item {
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "title"
            "authors"
            "venue"
            "badges";
        row-gap: 6px;
    }

    .pub-item-head {
        flex-direction: row;
        align-items: center;
    }
}

/* ------------------------------------------------------------------- Projeler */

.featured-project {
    display: block;
    margin-bottom: 22px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.featured-project:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.featured-copy {
    padding: clamp(26px, 4vw, 44px);
}

.project-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 18px;
}

.featured-copy h3 {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 600;
}

.featured-copy p {
    margin: 0 0 20px;
    max-width: 52ch;
    color: var(--ink-soft);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border-bottom: 1.5px solid var(--navy);
    padding-bottom: 3px;
}

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

.project-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: transparent;
    transition: border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.project-card:hover {
    border-color: var(--line-strong);
    background: var(--surface);
    transform: translateY(-3px);
}

.project-top {
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.project-arrow {
    transition: transform 200ms ease;
}

.project-card:hover .project-arrow {
    transform: translate(3px, -3px);
}

.project-card h3 {
    margin: 6px 0 8px;
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 600;
}

.project-card p:last-child {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.93rem;
}

.project-type {
    margin: 0;
}

/* Araştırma müzesi: ana sayfanın editoryal dilini koruyan sinematik sergi kartı. */
.project-card-museum {
    position: relative;
    isolation: isolate;
    min-height: 286px;
    overflow: hidden;
    color: #f5eee2;
    border-color: rgba(218, 167, 94, 0.48);
    background: #0b1011;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

.project-card-museum::before {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(180deg, rgba(5, 9, 11, 0.18) 0%, rgba(7, 10, 11, 0.64) 48%, rgba(7, 9, 10, 0.96) 100%),
        url("../muze/assets/images/muze-hero.webp") center 42% / cover no-repeat;
    content: "";
    transform: scale(1.015);
    transition: transform 700ms cubic-bezier(0.2, 0.75, 0.2, 1), filter 350ms ease;
}

.project-card-museum::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 88% 14%, rgba(130, 211, 214, 0.2), transparent 34%),
        linear-gradient(115deg, rgba(215, 159, 79, 0.1), transparent 46%);
    content: "";
    pointer-events: none;
}

.project-card-museum:hover {
    color: #fff8ec;
    border-color: rgba(226, 176, 103, 0.86);
    background: #0b1011;
    box-shadow: 0 18px 46px rgba(7, 10, 11, 0.24);
}

.project-card-museum:hover::before {
    transform: scale(1.07);
    filter: saturate(1.08) contrast(1.03);
}

.project-card-museum .project-top {
    color: rgba(245, 238, 226, 0.74);
}

.project-card-museum .project-type {
    color: #e1aa61;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
}

.project-card-museum h3 {
    max-width: 15ch;
    font-size: clamp(1.55rem, 2.7vw, 2.15rem);
    line-height: 1.05;
}

.project-card-museum p:last-child {
    max-width: 46ch;
    color: rgba(245, 238, 226, 0.78);
}

/* Canlı hava kartı */
.weather-now {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--paper-deep);
    transition: background-color 240ms ease;
}

.weather-now img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.weather-now-read {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#weatherNowTemp {
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.1;
}

#weatherNowDesc {
    font-size: 0.88rem;
    color: var(--ink-soft);
}

.weather-now-meta {
    margin: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* ---------------------------------------------------------------------- Eğitim */

.timeline {
    margin: clamp(28px, 4vh, 44px) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.timeline li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 22px;
    padding: 20px 4px;
    border-bottom: 1px solid var(--line);
}

.timeline time {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--ink-soft);
    padding-top: 2px;
}

.timeline div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.timeline strong {
    font-weight: 600;
    font-size: 1.02rem;
}

.timeline span {
    color: var(--ink-soft);
    font-size: 0.9rem;
}

.timeline-now time {
    color: var(--navy-ink);
}

/* --------------------------------------------------------------------- İletişim */

.contact {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(64px, 11vh, 128px) 0;
    transition: background-color 240ms ease;
}

[data-theme="dark"] .contact {
    background: var(--paper-deep);
    color: var(--ink);
}

.contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 84px);
    align-items: start;
}

.contact .section-index {
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.contact .section-index::after {
    background: color-mix(in srgb, currentColor 45%, transparent);
}

.contact-copy h2 {
    margin-bottom: 18px;
}

.contact-copy > p:not(.section-index) {
    margin: 0 0 26px;
    max-width: 44ch;
    color: color-mix(in srgb, currentColor 72%, transparent);
}

.contact-mail {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--serif);
    font-size: clamp(1.3rem, 2.6vw, 1.8rem);
    font-weight: 600;
    border-bottom: 1.5px solid var(--navy);
    padding-bottom: 4px;
    transition: gap 180ms ease;
}

.contact-mail:hover {
    gap: 16px;
}

.contact-affiliation {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 30px 0 0;
}

.contact-affiliation span {
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

.contact-affiliation strong {
    font-weight: 500;
    font-size: 0.95rem;
    max-width: 48ch;
    color: color-mix(in srgb, currentColor 85%, transparent);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: color-mix(in srgb, currentColor 65%, transparent);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-form input,
.contact-form textarea {
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 7%, transparent);
    font-family: var(--sans);
    font-size: 0.98rem;
    letter-spacing: normal;
    text-transform: none;
    resize: vertical;
    transition: border-color 160ms ease, background-color 160ms ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--navy);
    background: color-mix(in srgb, currentColor 4%, transparent);
}

.form-submit {
    align-self: flex-start;
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink);
    letter-spacing: normal;
    text-transform: none;
}

[data-theme="dark"] .form-submit {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.form-submit:hover {
    background: var(--acid);
    border-color: var(--acid);
    color: var(--acid-ink);
}

.form-note {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.82rem;
    letter-spacing: normal;
    text-transform: none;
    color: color-mix(in srgb, currentColor 60%, transparent);
}

/* ----------------------------------------------------------------------- Footer */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 40px 0;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
}

.footer-brand {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;
}

.footer-inner > div:first-child p {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    font-size: 0.88rem;
}

.footer-links a {
    color: var(--ink-soft);
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 160ms ease, border-color 160ms ease;
}

.footer-links a:hover {
    color: var(--ink);
    border-bottom-color: var(--navy);
}

.footer-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--ink-soft);
}

.copyright {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--ink-soft);
}

/* ------------------------------------------------------- Hava Atlası modalı */

.atlas-modal {
    width: min(1240px, calc(100vw - 28px));
    height: calc(100svh - 44px);
    margin: auto;
    padding: 0;
    display: none;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 40px 110px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.atlas-modal[open] {
    display: flex;
    animation: cmdk-in 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.atlas-modal::backdrop {
    background: color-mix(in srgb, var(--ink) 36%, transparent);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

.atlas-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 12px 10px 20px;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}

.atlas-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.atlas-close {
    font-size: 1.2rem;
    line-height: 1;
}

.atlas-modal iframe {
    flex: 1;
    width: 100%;
    border: 0;
    background: var(--paper);
}

@media (max-width: 580px) {
    .atlas-modal {
        width: calc(100vw - 12px);
        height: calc(100svh - 12px);
        border-radius: 14px;
    }
}

/* -------------------------------------------------------------- Komut paleti */

.cmdk {
    width: min(640px, calc(100vw - 32px));
    margin: 12vh auto auto;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 18px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.cmdk::backdrop {
    background: color-mix(in srgb, var(--ink) 32%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* dialog açılış animasyonu */
.cmdk[open] {
    animation: cmdk-in 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes cmdk-in {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.cmdk-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--line);
}

.cmdk-head svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 2;
    stroke-linecap: round;
}

.cmdk-head input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 1.02rem;
    color: var(--ink);
}

.cmdk-head input:focus {
    outline: none;
}

.cmdk-head input::placeholder {
    color: var(--ink-soft);
}

.cmdk-list {
    max-height: min(46vh, 420px);
    overflow-y: auto;
    padding: 8px;
}

.cmdk-group-label {
    padding: 10px 12px 4px;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cmdk-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    padding: 11px 12px;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    font-size: 0.95rem;
    cursor: pointer;
}

.cmdk-option .cmdk-option-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-option .cmdk-kind {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.cmdk-option[aria-selected="true"] {
    background: var(--acid);
    border-left-color: var(--navy);
    color: var(--acid-ink);
}

.cmdk-option[aria-selected="true"] .cmdk-kind {
    color: var(--acid-ink);
}

.cmdk-empty {
    padding: 26px 12px;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.cmdk-foot {
    display: flex;
    gap: 20px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    font-size: 0.78rem;
    color: var(--ink-soft);
}

.cmdk-foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* ------------------------------------------------------------- Bölüm rayı */

.section-rail {
    position: fixed;
    right: 18px;
    top: 50%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: translateY(-50%);
}

.section-rail a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 34px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    color: var(--ink-soft);
    opacity: 0.55;
    transition: opacity 160ms ease, color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.section-rail a:hover {
    opacity: 1;
    background: var(--surface);
}

.section-rail a.is-active {
    opacity: 1;
    color: var(--navy);
    transform: scale(1.12);
}

@media (max-width: 1240px) {
    .section-rail {
        display: none;
    }
}

/* --------------------------------------- Kalıcı hava+saat köşe widget'ı */

.weather-pop {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1140;
    display: flex;
    align-items: stretch;
    gap: 6px;
    animation: pop-in 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes pop-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.weather-pop-main {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease;
}

.weather-pop-main:hover {
    transform: translateY(-2px);
    border-color: var(--navy);
}

.weather-pop-main img {
    width: 40px;
    height: 40px;
}

.weather-pop-read {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

#weatherPopTemp {
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.1;
}

.weather-pop-city {
    font-size: 0.56rem;
    letter-spacing: 0.14em;
    color: var(--ink-soft);
}

.weather-pop-clock {
    padding-left: 12px;
    border-left: 1px solid var(--line);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
    align-self: center;
}

.weather-pop-close {
    align-self: flex-start;
    width: 24px;
    height: 24px;
    margin-left: -14px;
    margin-top: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: color 160ms ease, border-color 160ms ease;
}

.weather-pop-close:hover {
    color: var(--navy);
    border-color: var(--navy);
}

@media (max-width: 580px) {
    .weather-pop {
        left: 12px;
        bottom: 84px; /* install çubuğunun üstünde kalsın */
    }
}

@media (prefers-reduced-motion: reduce) {
    .weather-pop {
        animation: none;
    }
}

/* -------------------------------------------------------------- Install prompt */

.install-prompt {
    position: fixed;
    left: 50%;
    bottom: 22px;
    z-index: 1150;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 20px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    transform: translate(-50%, calc(100% + 30px));
    transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.install-prompt.is-visible {
    transform: translate(-50%, 0);
}

.install-prompt button {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--navy);
    border-radius: 999px;
    background: var(--navy);
    color: var(--navy-on);
    font-weight: 600;
    cursor: pointer;
}

.install-prompt #installClose {
    background: transparent;
    border-color: var(--line);
    color: var(--ink-soft);
    min-width: 40px;
    padding: 0;
}

/* ------------------------------------------------------------------ Reveal'lar */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 640ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 640ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ------------------------------------------------------ View transition (tema) */

::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* --------------------------------------------------------------------- Duyarlı */

@media (max-width: 1120px) {
    .hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }

    .hero-portrait {
        width: min(100%, 330px);
    }

    .hero-footer {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: 6px;
    }

    .hero-footer div:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 860px) {
    :root {
        --header-height: 72px;
        --shell: calc(100vw - 40px);
    }

    .desktop-nav,
    .cmdk-button kbd {
        display: none;
    }

    .cmdk-button {
        padding: 0;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .mobile-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        z-index: 1090;
        display: flex;
        flex-direction: column;
        padding: 10px 20px 22px;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 200ms ease, transform 200ms ease;
    }

    .mobile-nav.is-open {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .mobile-nav a {
        padding: 14px 4px;
        min-height: 48px;
        font-size: 1.05rem;
        font-weight: 500;
        border-bottom: 1px solid var(--line);
    }

    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding-top: calc(var(--header-height) + 40px);
    }

    .hero-portrait {
        justify-self: start;
        order: -1;
        width: min(72vw, 300px);
    }

    .portrait-backdrop {
        inset: 18px -18px -18px 18px;
    }

    .hero-footer {
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .hero-footer div {
        padding: 14px 0 0;
        border-top: 1px solid var(--line);
    }

    .hero-footer div + div {
        border-left: 0;
        padding-left: 0;
    }

    .section.about,
    .section.path {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .section-aside {
        position: static;
    }

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

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }

    .section-heading > p {
        text-align: left;
    }

    .focus-item {
        grid-template-columns: 44px minmax(0, 1fr);
        row-gap: 14px;
    }

    .focus-tag {
        grid-column: 2;
        justify-self: start;
    }

    .contact-inner {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 580px) {
    body {
        font-size: 15px;
    }

    .field-row {
        grid-template-columns: 1fr;
    }

    .pub-metrics {
        padding: 18px;
    }

    .pub-metrics-list {
        gap: 12px 24px;
    }

    .pub-metrics-list dd {
        font-size: 1.55rem;
    }

    .install-prompt {
        width: calc(100vw - 28px);
        justify-content: space-between;
        border-radius: 20px;
    }

    .cmdk {
        margin-top: 8vh;
    }
}

/* ---------------------------------------------------------------------- Baskı */

@media print {
    :root {
        --paper: #fff;
        --paper-deep: #fff;
        --surface: #fff;
        --ink: #000;
        --ink-soft: #333;
        --line: #bbb;
        --line-strong: #666;
    }

    body::before,
    body::after,
    .scroll-progress,
    .site-header,
    .skip-link,
    .hero-field,
    .hero-actions,
    .hero-links,
    .portrait-backdrop,
    .contact-form,
    .install-prompt,
    .cmdk,
    .atlas-modal,
    .weather-pop,
    .section-rail,
    .cv-print,
    .pub-bibtex,
    .pub-citebars,
    .pub-spark,
    .footer-hint,
    .footer-links,
    .pub-filters {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .hero {
        min-height: auto;
        padding-top: 0;
    }

    .hero-animate,
    .reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .section {
        padding: 18pt 0;
        break-inside: avoid-page;
    }

    .pub-item {
        break-inside: avoid;
    }

    .pub-title a::after {
        content: "";
    }

    .contact {
        background: #fff;
        color: #000;
        padding: 18pt 0;
    }

    .portrait-frame {
        box-shadow: none;
    }

    a {
        color: #000;
    }
}

/* ------------------------------------------------------------ Azaltılmış hareket */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero-animate {
        animation: none;
    }

    .portrait-frame img {
        animation: none !important;
    }
}