:root {
      --bg:          #0b0d10;
      --bg-elev:     #0f1216;
      --rule:        #1c2026;
      --rule-strong: #2a2f37;
      --text:        #e6e8eb;
      --text-body:   #c8ccd1;
      --text-dim:    #8b9098;
      --text-faint:  #5a6068;
      --link:        #9ab6ff;
    }

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

    ::selection { background: var(--rule-strong); color: var(--text); }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--rule-strong); }

    html, body { background: var(--bg); }

    body {
      color: var(--text-body);
      font-family: 'IBM Plex Sans', system-ui, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.75;
      -webkit-font-smoothing: antialiased;
      max-width: 900px;
      margin: 0 auto;
      padding: 32px 36px 100px;
    }

    /* ═══ ARŞİVLER ══════════════════════════════ */
    .archives {
      margin-bottom: 40px;
    }
    .archives .sec-label {
      display: block;
      margin-bottom: 14px;
    }
    .archive-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .archive-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 18px;
      border: 1px solid var(--rule-strong);
      background: var(--bg-elev);
      text-decoration: none;
      transition: border-color 0.14s;
    }
    .archive-card:hover { border-color: var(--link); }
    .archive-card:hover .archive-name { color: var(--link); }
    .archive-card:hover .archive-cta  { color: var(--link); }
    .archive-card:hover .archive-arrow { transform: translateX(3px); }
    .archive-name {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      letter-spacing: 0.01em;
      transition: color 0.14s;
    }
    .archive-desc {
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--text-dim);
      margin: 0;
      flex: 1;
    }
    .archive-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-dim);
      transition: color 0.14s;
      margin-top: 2px;
    }
    .archive-arrow {
      display: inline-block;
      transition: transform 0.14s;
    }
    .archive-card.is-soon {
      cursor: default;
      border-color: var(--rule);
    }
    .archive-card.is-soon:hover { border-color: var(--rule); }
    .archive-card.is-soon .archive-name { color: var(--text-dim); }
    .archive-card.is-soon:hover .archive-name { color: var(--text-dim); }
    .archive-card.is-soon .archive-desc { color: var(--text-faint); }
    .archive-card.is-soon .archive-cta  { color: var(--text-faint); }
    .archive-card.is-soon:hover .archive-cta { color: var(--text-faint); }

    /* ═══ PLATFORM STATS ════════════════════════ */
    .deck-stats {
      display: flex;
      margin-top: 14px;
      border: 1px solid var(--rule);
    }
    .deck-stat {
      flex: 1;
      padding: 16px 18px;
      border-right: 1px solid var(--rule);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .deck-stat:last-child { border-right: none; }
    .deck-stat-n {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 24px;
      font-weight: 500;
      color: var(--text);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .deck-stat-l {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-faint);
    }
    @media (max-width: 720px) {
      .deck-stats { flex-wrap: wrap; }
      .deck-stat  { flex: 1 1 33%; border-bottom: 1px solid var(--rule); }
      .deck-stat:nth-child(3) { border-right: none; }
    }

    a { color: inherit; text-decoration: none; }
    a:hover { color: var(--link); }

    strong, b { font-weight: 500; color: var(--text); }

    /* ═══ HERO ══════════════════════════════════ */
    .hero {
      margin-bottom: 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--rule);
    }

    h1 {
      font-family: 'IBM Plex Serif', serif;
      font-size: clamp(28px, 4vw, 40px);
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: -0.01em;
      color: var(--text);
      margin-bottom: 18px;
    }

    .role-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 8px;
    }
    .role-card {
      padding-left: 14px;
      border-left: 2px solid var(--rule-strong);
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .role-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.35;
    }
    .role-inst {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-dim);
      line-height: 1.4;
      margin-top: 2px;
    }
    .role-period {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      color: var(--text-faint);
      letter-spacing: 0.04em;
      margin-top: 3px;
    }
    .degree {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 12.5px;
      color: var(--text-dim);
      font-style: italic;
      margin-bottom: 5px;
    }
    .degree-label {
      font-family: 'IBM Plex Mono', monospace;
      font-style: normal;
      font-size: 9.5px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text);
      padding: 3px 8px;
      border: 1px solid var(--rule-strong);
    }

    .location { font-size: 12px; color: var(--text-faint); margin-bottom: 5px; }

    .contact {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      font-size: 12px;
      color: var(--text-dim);
    }
    .contact a { color: var(--text-dim); transition: color 0.12s; }
    .contact a:hover { color: var(--link); }
    .contact-sep { margin: 0 12px; color: var(--rule-strong); }

    /* ═══ TIMELINE GRAPH ════════════════════════ */
    .timeline {
      margin-bottom: 40px;
    }

    .tl-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .tl-head .sec-label { margin-bottom: 0; }

    .tl-head .tl-range {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--text-faint);
      letter-spacing: 0.04em;
    }

    .tl-wrap {
      border: 1px solid var(--rule);
      background: var(--bg-elev);
      padding: 22px 24px 18px;
      overflow: hidden;
    }

    .tl-grid {
      position: relative;
      width: 100%;
    }

    .tl-years {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      color: var(--text-faint);
      padding-bottom: 8px;
      border-bottom: 1px solid var(--rule);
      letter-spacing: 0.04em;
    }
    .tl-years span { padding-left: 2px; }

    .tl-rows { display: flex; flex-direction: column; gap: 3px; padding-top: 6px; }

    .tl-row { position: relative; }

    .tl-track {
      position: relative;
      height: 20px;
      background: transparent;
    }

    .tl-track.stacked { height: 44px; }
    .tl-track.stacked.has-ext-labels { height: 44px; overflow: visible; padding-bottom: 16px; }

    /* Year gridlines */
    .tl-track::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(12.5% - 1px),
        var(--rule) calc(12.5% - 1px),
        var(--rule) 12.5%
      );
      pointer-events: none;
    }

    .tl-bar {
      position: absolute;
      top: 1px;
      height: 18px;
      border-radius: 1px;
      display: flex;
      align-items: center;
      overflow: hidden;
      cursor: pointer;
      transition: filter 0.1s;
    }
    .tl-bar:hover { filter: brightness(1.3); outline: 1px solid rgba(255,255,255,0.15); outline-offset: 1px; }
    .tl-bar.cat-edu:hover  { filter: brightness(1.2); }
    .tl-bar.cat-proj:hover { filter: brightness(1.5); }

    /* Stacking offsets — bars touch with 2px gap */
    .tl-bar.stack-a { top: 1px; }
    .tl-bar.stack-b { top: 23px; }

    /* Label-below bars — dar staj barları: L şeklinde callout çizgisi, ucunda ok + label */
    .tl-bar.label-below { overflow: visible; }
    .tl-bar.label-below::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 100%;
      width: 8px;
      height: 10px;
      border-left: 1px solid var(--text-dim);
      border-bottom: 1px solid var(--text-dim);
      pointer-events: none;
    }
    .tl-bar.label-below .tl-bar-text {
      position: absolute;
      top: calc(100% + 4px);
      left: calc(50% + 14px);
      white-space: nowrap;
      font-size: 9px;
      padding: 0;
      color: var(--text-dim);
    }
    .tl-bar.label-below .tl-bar-text::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 3px;
      width: 0;
      height: 0;
      border-left: 4px solid var(--text-dim);
      border-top: 3px solid transparent;
      border-bottom: 3px solid transparent;
    }
    /* Baykar bir satır daha aşağı — Aselsan'ın L vertical'ı Baykar label'ının üstünden geçmesin. */
    .tl-bar[data-name="Baykar"].label-below::after { height: 22px; }
    .tl-bar[data-name="Baykar"].label-below .tl-bar-text { top: calc(100% + 16px); }
    /* Track: overflow visible + label'lar için alt boşluk */
    .tl-track.has-ext-labels { overflow: visible; padding-bottom: 30px; }
    .tl-track.stacked.has-ext-labels { height: 44px; overflow: visible; padding-bottom: 30px; }

    /* Category visual encoding */
    .tl-bar.cat-research { background: var(--text); }
    .tl-bar.cat-work     { background: var(--text-dim); }
    .tl-bar.cat-intern   { background: transparent; border: 1px solid var(--text-dim); }
    .tl-bar.cat-comp     { background: var(--link); border-radius: 2px; }
    .tl-bar.cat-club     { background: transparent; border: 1px dashed var(--text-faint); }
    .tl-bar.cat-proj     { background: transparent; border: 1px dotted var(--text-faint); }
    .tl-bar.cat-edu      { background: #162030; border: 1px solid #2d4860; }

    .tl-bar-text {
      font-size: 10px;
      font-family: 'IBM Plex Mono', monospace;
      padding: 0 6px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1;
      user-select: none;
      pointer-events: none;
    }
    .cat-research .tl-bar-text { color: #0b0d10; }
    .cat-work     .tl-bar-text { color: #0b0d10; }
    .cat-intern   .tl-bar-text { color: var(--text-dim); }
    .cat-comp     .tl-bar-text { color: #0b0d10; }
    .cat-club     .tl-bar-text { color: var(--text-faint); }
    .cat-proj     .tl-bar-text { color: var(--text-faint); }
    .cat-edu      .tl-bar-text { color: #5a88b5; }

    .tl-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 28px;
      padding-top: 12px;
      border-top: 1px solid var(--rule);
      font-size: 10px;
      color: var(--text-faint);
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: 0.03em;
    }
    .tl-legend-item { display: flex; align-items: center; gap: 8px; }
    .tl-legend-swatch {
      display: inline-block;
      width: 22px;
      height: 7px;
      border-radius: 1px;
    }
    .tl-legend-swatch.cat-research { background: var(--text); }
    .tl-legend-swatch.cat-work     { background: var(--text-dim); }
    .tl-legend-swatch.cat-intern   { background: transparent; border: 1px solid var(--text-dim); }
    .tl-legend-swatch.cat-comp     { background: var(--link); }
    .tl-legend-swatch.cat-club     { background: transparent; border: 1px dashed var(--text-faint); }
    .tl-legend-swatch.cat-proj     { background: transparent; border: 1px dotted var(--text-faint); }
    .tl-legend-swatch.cat-edu      { background: #162030; border: 1px solid #2d4860; }

    /* ── Bar tooltip ─────────────────────────── */
    #tl-tip {
      position: fixed;
      z-index: 500;
      background: var(--bg);
      border: 1px solid var(--rule-strong);
      padding: 11px 14px 12px;
      min-width: 190px;
      max-width: 270px;
      display: none;
      pointer-events: none;
      box-shadow: 0 6px 24px rgba(0,0,0,0.55);
    }
    #tl-tip.show { display: block; }
    .tt-kind   { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--rule-strong); padding: 1px 5px; margin-bottom: 8px; }
    .tt-name   { font-family: 'IBM Plex Serif', serif; font-size: 13.5px; color: var(--text); margin-bottom: 3px; line-height: 1.3; }
    .tt-period { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--text-dim); margin-bottom: 8px; letter-spacing: 0.03em; }
    .tt-desc   { font-family: 'IBM Plex Sans', sans-serif; font-size: 11.5px; color: var(--text-body); line-height: 1.55; }

    /* ── Expand button ───────────────────────── */
    .tl-expand-btn {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: 0.06em;
      color: var(--text-faint);
      background: none;
      border: 1px solid var(--rule-strong);
      padding: 4px 9px;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s;
      line-height: 1;
    }
    .tl-expand-btn:hover { color: var(--text); border-color: var(--text-faint); }

    /* ── Modal ───────────────────────────────── */
    .tl-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(11, 13, 16, 0.92);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
      overflow-y: auto;
    }
    .tl-modal-overlay.open { display: flex; }
    .tl-modal-box {
      background: var(--bg-elev);
      border: 1px solid var(--rule-strong);
      width: 100%;
      max-width: 1440px;
      padding: 24px 28px 22px;
    }
    .tl-modal-hdr {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      margin-bottom: 20px;
    }
    .tl-modal-title {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-faint);
    }
    .tl-modal-close {
      font-family: 'IBM Plex Sans', sans-serif;
      font-size: 13px;
      color: var(--text-dim);
      background: none;
      border: 1px solid var(--rule-strong);
      padding: 4px 12px;
      cursor: pointer;
      transition: color 0.12s, border-color 0.12s;
      line-height: 1.4;
    }
    .tl-modal-close:hover { color: var(--text); border-color: var(--text-faint); }
    .tl-modal-scroll { overflow-x: auto; }
    .tl-modal-inner { min-width: 1000px; }

    /* ═══ SECTION ═══════════════════════════════ */
    section { margin-bottom: 84px; }

    .sec-head { margin-bottom: 36px; }

    .sec-label {
      display: block;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-faint);
      letter-spacing: 0.16em;
      text-transform: uppercase;
      margin-bottom: 7px;
    }

    .sec-title {
      font-family: 'IBM Plex Serif', serif;
      font-size: 24px;
      font-weight: 400;
      color: var(--text);
      letter-spacing: -0.01em;
      line-height: 1.25;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--rule);
    }

    /* ═══ LOGO BADGE ════════════════════════════ */
    .logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 22px;
      padding: 0 9px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: var(--text);
      background: transparent;
      border: 1px solid var(--text-dim);
      white-space: nowrap;
      vertical-align: middle;
      margin-right: 10px;
      text-transform: uppercase;
    }
    .logo-aselsan,
    .logo-baykar,
    .logo-tubitak  { border: none; padding: 0; height: auto; }
    .logo-aselsan img,
    .logo-baykar img,
    .logo-tubitak img {
      display: block;
      height: 22px;
      width: auto;
      filter: brightness(0) invert(1);
      opacity: 0.80;
    }
    .logo-teknofest { letter-spacing: 0.08em; font-size: 9px; }
    .logo-ieee {
      font-family: 'IBM Plex Serif', serif;
      font-style: italic;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 0 11px;
    }
    .logo-medipol { letter-spacing: 0.06em; font-size: 9px; }

    /* ═══ CURRENT POSITIONS ═════════════════════ */
    .positions { display: flex; flex-direction: column; gap: 40px; }

    .position-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px 0;
      margin-bottom: 4px;
    }

    .position-role {
      font-family: 'IBM Plex Serif', serif;
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.3;
    }
    .position-inst { font-size: 13px; color: var(--text-dim); margin-top: 3px; }
    .position-meta { font-size: 11px; color: var(--text-faint); margin-top: 8px; margin-bottom: 14px; }

    .position-desc {
      font-size: 13px;
      color: var(--text-dim);
      line-height: 1.85;
      max-width: 680px;
    }
    .position-desc p + p { margin-top: 10px; }

    .position-note {
      margin-top: 16px;
      padding: 14px 18px;
      border-left: 2px solid var(--rule-strong);
      font-size: 12px;
      color: var(--text-faint);
      line-height: 1.9;
    }
    .position-note b { font-weight: 500; color: var(--text-dim); }

    /* ═══ EXPERIENCE LIST ════════════════════════ */
    .experience { display: flex; flex-direction: column; }

    .exp-item {
      display: grid;
      grid-template-columns: 112px 1fr;
      gap: 0 28px;
      padding: 24px 0;
      border-bottom: 1px solid var(--rule);
    }
    .exp-item:first-child { padding-top: 0; }
    .exp-item:last-child  { border-bottom: none; padding-bottom: 0; }

    .exp-date {
      font-size: 11px;
      color: var(--text-faint);
      padding-top: 4px;
      line-height: 1.5;
    }

    .exp-head {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px 0;
      margin-bottom: 2px;
    }

    .exp-title {
      font-family: 'IBM Plex Serif', serif;
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.3;
    }

    .exp-role {
      font-size: 12px;
      color: var(--text-dim);
      margin-bottom: 9px;
    }

    .exp-desc {
      font-size: 12.5px;
      color: var(--text-dim);
      line-height: 1.8;
      max-width: 620px;
    }

    /* ═══ PROJECTS ══════════════════════════════ */
    .projects { display: flex; flex-direction: column; }

    .proj-item {
      display: grid;
      grid-template-columns: 112px 1fr auto;
      gap: 0 28px;
      padding: 22px 0;
      border-bottom: 1px solid var(--rule);
      align-items: baseline;
    }
    .proj-item:first-child { padding-top: 0; }
    .proj-item:last-child  { border-bottom: none; padding-bottom: 0; }

    .proj-date { font-size: 11px; color: var(--text-faint); padding-top: 2px; }
    .proj-body { max-width: 600px; }

    .proj-title {
      font-family: 'IBM Plex Serif', serif;
      font-size: 16px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.3;
      margin-bottom: 5px;
    }

    .proj-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.8; }

    .proj-link {
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-faint);
      white-space: nowrap;
      padding: 5px 10px;
      border: 1px solid var(--rule-strong);
      transition: color 0.12s, border-color 0.12s;
    }
    .proj-link:hover { color: var(--link); border-color: var(--link); }

    /* ═══ SKILLS ════════════════════════════════ */
    .skills { display: flex; flex-direction: column; }

    .skill-row {
      display: grid;
      grid-template-columns: 168px 1fr;
      gap: 0 24px;
      align-items: baseline;
      padding: 16px 0;
      border-bottom: 1px solid var(--rule);
    }
    .skill-row:first-child { padding-top: 0; }
    .skill-row:last-child  { border-bottom: none; padding-bottom: 0; }

    .skill-key {
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-dim);
    }

    .skill-val { font-size: 12.5px; color: var(--text-dim); line-height: 1.9; }
    .skill-val b { font-weight: 500; color: var(--text); }

    /* ═══ CONTACT ═══════════════════════════════ */
    .contact-grid { display: flex; flex-direction: column; }

    .contact-item {
      display: grid;
      grid-template-columns: 120px 1fr;
      gap: 0 24px;
      align-items: baseline;
      padding: 13px 0;
      border-bottom: 1px solid var(--rule);
    }
    .contact-item:first-child { padding-top: 0; }
    .contact-item:last-child  { border-bottom: none; padding-bottom: 0; }

    .contact-key {
      font-size: 10px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.16em;
      color: var(--text-dim);
    }
    .contact-val { font-size: 13px; color: var(--text); }
    a.contact-val:hover { color: var(--link); }

    /* ═══ FOOTER ════════════════════════════════ */
    .footer {
      margin-top: 96px;
      padding-top: 28px;
      border-top: 1px solid var(--rule);
      text-align: center;
      font-size: 11px;
      color: var(--text-faint);
    }

    /* ═══ RESPONSIVE ════════════════════════════ */
    @media (max-width: 720px) {
      body { padding: 36px 20px 72px; }
      .hero { margin-bottom: 28px; padding-bottom: 20px; }
      .role-grid { grid-template-columns: 1fr; gap: 14px; }
      section { margin-bottom: 64px; }
      .exp-item   { grid-template-columns: 1fr; gap: 8px; }
      .proj-item  { grid-template-columns: 1fr; gap: 8px; }
      .proj-link  { justify-self: start; margin-top: 10px; }
      .skill-row  { grid-template-columns: 1fr; gap: 4px; }
      .contact-item { grid-template-columns: 1fr; gap: 2px; }
      .logo { margin-bottom: 6px; }
      .archives { margin-bottom: 64px; }
      .archive-grid { grid-template-columns: 1fr; gap: 10px; }
      .archive-card { padding: 16px 18px; }
      .archive-name { font-size: 13px; }
      .archive-desc { font-size: 12px; }
      /* ── Timeline: yatay kaydırmalı tek satır ── */
      .tl-wrap {
        overflow-x: auto;
        overflow-y: visible;
        padding: 14px 14px 18px;
        -webkit-overflow-scrolling: touch;
      }
      .tl-grid { min-width: 580px; }
      .tl-head { align-items: center; }
      .tl-years { font-size: 9px; }
    }