/* Caner Engin · Design & Umsetzung: Xir. */
/* Theme surfaces stay static: no blur effects, image filters or animation loops. */
:root {
  color-scheme: light;
  --surface: #fff;
  --surface-line: #e6e6e2;
  --nav-hover: #edf2ff;
  --button-bg: #2557d6;
  --button-ink: #fff;
  --button-hover: #1745bc;
  --portrait-panel: #e5eee3;
  --portrait-ink: #344d3c;
  --focus-panel: #eaf0fc;
  --region-panel: #e7f1eb;
  --opportunity-panel: #fff0e5;
  --blue-label: #405c94;
  --green-label: #38654d;
  --warm-label: #984b29;
  --green: #397455;
  --option-bg: #ffffff88;
  --option-border: #bdcae1;
  --band: #f0f3fa;
  --band-border: #e0e6f2;
  --credential-bg: #ffffffb8;
  --credential-border: #dde3ed;
  --strong-copy: #354155;
  --workshop-bg: #f5f3ee;
  --workshop-line: #dedbd4;
  --warm-line: #e4cbb9;
  --warm-ink: #793b26;
  --warm-hover: #fff9f4;
  --contact-bg: linear-gradient(120deg,#e8edfc,#eeeafa 65%,#f8ece4);
  --contact-line: #d8dff1;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111821;
  --ink: #f0f4fa;
  --muted: #c4cfdd;
  --blue: #91b2ff;
  --coral: #efa58d;
  --mint: #1a302a;
  --line: #334152;
  --surface: #1b2532;
  --surface-line: #3b495b;
  --nav-hover: #283957;
  --button-bg: #91b2ff;
  --button-ink: #101b30;
  --button-hover: #b2c9ff;
  --portrait-panel: #1c302a;
  --portrait-ink: #d0e4d7;
  --focus-panel: #1b2a43;
  --region-panel: #1b3029;
  --opportunity-panel: #352820;
  --blue-label: #acc4ff;
  --green-label: #acd4b8;
  --warm-label: #edb592;
  --green: #93d5ac;
  --option-bg: #202f48;
  --option-border: #667c9d;
  --band: #161f2c;
  --band-border: #344254;
  --credential-bg: #1b2736;
  --credential-border: #3c4c61;
  --strong-copy: #e1e9f3;
  --workshop-bg: #141c25;
  --workshop-line: #344254;
  --warm-line: #6f5544;
  --warm-ink: #f1bc9b;
  --warm-hover: #4a3328;
  --contact-bg: linear-gradient(120deg,#1c2a43,#27243c 65%,#352820);
  --contact-line: #45516a;
}
.header nav { background: var(--surface); border-color: var(--surface-line); }
.header nav a:hover { background: var(--nav-hover); }
.header-contact, .primary { background: var(--button-bg); color: var(--button-ink); }
.header-contact:hover, .primary:hover { background: var(--button-hover); }
.header-contact { justify-content: center; min-height: 46px; }
.button { justify-content: center; min-height: 48px; }
.text-link { padding-block: 9px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: transparent; transition: color .18s, text-decoration-color .18s; }
.text-link:hover, .text-link:focus-visible { text-decoration-color: currentColor; }
.contact-symbol { display: block; width: 27px; height: 27px; flex: 0 0 27px; }
.status-dot { background: var(--green); }
.hero-visual { background: var(--portrait-panel); }
.image-meta, .image-footer { color: var(--portrait-ink); }
.focus-signal { background: var(--focus-panel); }
.region-signal { background: var(--region-panel); }
.opportunity { background: var(--opportunity-panel); }
.signal-top { color: var(--blue-label); }
.region-signal .signal-top { color: var(--green-label); }
.opportunity .signal-top { color: var(--warm-label); }
.signal p { color: var(--muted); }
.focus-options { flex-wrap: wrap; }
.focus-options button { background: var(--option-bg); border-color: var(--option-border); min-height: 36px; }
.focus-options button.active, .focus-options button:hover { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-ink); }
.signal-rule { background: var(--blue); }
.region-signal .signal-rule { background: var(--green); }
.opportunity .signal-rule { background: var(--coral); }
.radar, .radar:before { border-color: var(--green-label); }
.radar:after { background: var(--green); }
.profile-text p:first-child { color: var(--strong-copy); }
.approach article:nth-child(2) .approach-number { color: var(--green); }
.credentials-band { background: var(--band); border-color: var(--band-border); }
.credential { background: var(--credential-bg); border-color: var(--credential-border); }
.cert-status, .cert-status>span { color: var(--green-label); }
.shield { background: var(--region-panel); }
.shield svg { color: var(--green); }
.timeline { border-color: var(--line); }
.organization { color: var(--muted); }
.tags span { background: var(--surface); border-color: var(--surface-line); color: var(--muted); }
.contact { background: var(--contact-bg); border-color: var(--contact-line); }
.availability { color: var(--green-label); }
.contact-grid p, .contact-bottom { color: var(--muted); }
.contact-bottom { border-color: var(--contact-line); }
.lab-section { background: var(--workshop-bg); border-color: var(--workshop-line); }
.lab-note { background: var(--opportunity-panel); border-color: var(--warm-line); }
.lab-eyebrow .micro, .lab-status { color: var(--warm-label); }
.lab-status { background: var(--surface); border-color: var(--warm-line); }
.lab-note p { color: var(--muted); }
.lab-link { background: var(--surface); color: var(--warm-ink); border-color: var(--warm-line); justify-content: center; min-height: 46px; text-align: center; }
.lab-link:hover { background: var(--warm-hover); border-color: var(--warm-label); }
:root[data-theme="dark"] ::selection { background: #355891; color: #fff; }
:root[data-theme="dark"] .credential.aws .credential-mark { background: #f4f6fa; border-radius: 12px; }
:root[data-theme="dark"] .signal:hover { border-color: #6983a5; }
:root[data-theme="dark"] .approach article { border-color: #5774a5; }
:root[data-theme="dark"] .approach article:nth-child(2) { border-color: #4f8064; }
:root[data-theme="dark"] .approach article:nth-child(3) { border-color: #a17558; }

/* One native button: mouse, touch, Space and Enter use the same state. */
.theme-switch { position: relative; flex: 0 0 80px; width: 80px; height: 44px; padding: 0; border: 1px solid #c6cfda; border-radius: 999px; background: #e2e8ef; color: #526078; isolation: isolate; }
.theme-thumb { position: absolute; z-index: -1; width: 36px; height: 36px; left: 3px; top: 3px; border-radius: 50%; background: white; box-shadow: 0 2px 5px #202b3e26; transition: transform .22s ease; }
.theme-switch svg { position: absolute; top: 13px; width: 16px; height: 16px; pointer-events: none; }
.theme-sun { left: 13px; color: #2557d6; }
.theme-moon { right: 13px; }
:root[data-theme="dark"] .theme-switch { background: #26364e; border-color: #52647e; color: #b9c9e0; }
:root[data-theme="dark"] .theme-thumb { transform: translateX(36px); background: #e5edff; }
:root[data-theme="dark"] .theme-sun { color: #b9c9e0; }
:root[data-theme="dark"] .theme-moon { color: #1a2b4d; }
.eyebrow { line-height: 1.7; }
.eyebrow .kinetic { max-width: 100%; }

/* Theme changes must never animate dark text over a dark background. */
.header nav a { color: var(--ink); transition: none; }
.header-contact { transition: none; }
.button { transition: transform .2s; }
.text-link { color: var(--ink); transition: text-decoration-color .18s; }
.lab-link { transition: border-color .18s; }
.skip { background: var(--button-bg); color: var(--button-ink); }
.micro, .image-meta, .timeline-date { font-weight: 500; }
.header-caption span { font-size: 11px; }
.image-meta { font-size: 10px; }
.credential .micro, .lab-eyebrow .micro { font-size: 11px; }
.signal p, .credential p { font-size: 14px; }
.contact-bottom, .availability { font-size: 11px; }
.footer, .footer button { font-size: 11px; }
:root[data-theme="dark"] .header-caption span,
:root[data-theme="dark"] .footer,
:root[data-theme="dark"] .footer button,
:root[data-theme="dark"] .credential .micro { color: var(--muted); }

@media (max-width: 1100px) and (min-width: 761px) {
  .header { gap: 12px; }
  .header nav a { font-size: 14px; padding: 10px; }
  .header-contact { padding-inline: 16px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .header { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; min-height: 0; padding-block: 12px; gap: 6px 10px; }
  .header .brand { font-size: 36px; }
  .header nav { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: flex-start; gap: 24px; border: 0; border-radius: 0; padding: 0; background: transparent; }
  .header nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 14px; border-radius: 0; }
  .header nav a:hover { background: transparent; color: var(--blue); }
  .header-caption { font-size: 10px; letter-spacing: .3px; line-height: 1.3; }
  .header-caption span { display: none; }
  .header-contact { margin-left: 0; min-height: 44px; font-size: 13px; padding: 11px 13px; }
  .theme-switch { margin: 0; }

  /* A compact editorial hero: portrait beside the name, copy below. */
  .hero { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); padding: 28px 0 30px; column-gap: 18px; row-gap: 20px; align-items: start; }
  .hero-copy { display: contents; }
  .eyebrow { grid-column: 1 / -1; grid-row: 1; font-size: 10px; letter-spacing: .65px; gap: 9px; }
  .hero h1 { grid-column: 1; grid-row: 2; font-size: clamp(42px,13vw,60px); line-height: .98; letter-spacing: -3px; margin: 0; }
  .hero-statement { grid-column: 1; grid-row: 3; font-size: clamp(18px,5vw,23px); line-height: 1.35; letter-spacing: -.5px; margin: 0; }
  .hero-visual { grid-column: 2; grid-row: 2 / 4; width: 100%; min-width: 0; max-width: 220px; justify-self: end; align-self: center; margin: 0; padding: 6px; border-radius: 17px; }
  .portrait { height: auto; aspect-ratio: 3 / 4; border-radius: 12px; }
  .portrait>img { height: 100%; object-position: 50% 34%; }
  .image-meta, .image-footer { display: none; }
  .intro { grid-column: 1 / -1; grid-row: 4; max-width: none; font-size: 16px; line-height: 1.7; margin: 0; }
  .actions { grid-column: 1 / -1; grid-row: 5; gap: 20px; flex-wrap: wrap; margin: 0; }
  .actions .button { padding: 15px 18px; font-size: 14px; }
  .actions .text-link { display: inline-flex; min-height: 48px; align-items: center; font-size: 14px; }

  .signals { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .signal { min-width: 0; padding: 18px 16px; border-radius: 13px; }
  .focus-signal { grid-column: 1 / -1; }
  .signal-top { height: auto; min-height: 24px; margin-bottom: 14px; gap: 8px; align-items: flex-start; }
  .signal-top .micro { min-width: 0; line-height: 1.45; }
  .signal-glyph { font-size: 22px; line-height: 1; }
  .radar { width: 23px; height: 23px; flex: 0 0 23px; }
  .radar:before { inset: 5px; }
  .radar:after { inset: 9px; }
  .contact-symbol { width: 23px; height: 23px; flex-basis: 23px; }
  .micro { font-size: 11px; letter-spacing: .55px; }
  .signal h2 { font-size: 19px; line-height: 1.35; letter-spacing: -.5px; }
  .signal p { font-size: 14px; line-height: 1.65; margin-top: 11px; }
  .focus-options { margin: 0 0 14px; gap: 7px; }
  .focus-options button { min-height: 44px; font-size: 13px; padding: 9px 13px; }
  .focus-content h2 { font-size: 21px; }
  .focus-content p { margin-top: 7px; }
  :root[data-theme="dark"] .signals .signal.is-scroll-focused { border-color: #6983a5; }

  .section { padding-block: 44px; }
  .section-heading { margin-bottom: 24px; }
  .section-heading .dim { display: none; }
  h2 { font-size: 32px; letter-spacing: -1.1px; }
  .profile-grid, .career-grid { gap: 23px; }
  .profile-text p { font-size: 16px; line-height: 1.75; }
  .approach { margin-top: 22px; gap: 20px; }
  .approach article { padding-top: 17px; padding-left: 35px; }
  .approach-number { top: 21px; }
  .approach h3 { font-size: 21px; margin-bottom: 8px; }
  .approach p { font-size: 15px; line-height: 1.7; }
  .profile.section { padding-bottom: 0; }
  .lab-section { padding: 28px 0 42px; background: var(--bg); }
  .lab-note { padding: 20px; gap: 18px; border-color: var(--warm-line); border-radius: 13px; }
  .lab-eyebrow .micro { font-size: 11px; }
  .lab-note h2 { font-size: 23px; margin: 12px 0; }
  .lab-note p { font-size: 15px; line-height: 1.75; }
  .lab-link { font-size: 14px; padding: 12px 15px; }
  .credentials-intro p { margin-top: 17px; font-size: 15px; }
  .credentials { margin-top: 23px; gap: 12px; }
  .credential { min-width: 0; padding: 19px 17px; gap: 16px; border-radius: 13px; }
  .credential>div:last-child { min-width: 0; }
  .credential-mark { width: 62px; flex-basis: 62px; }
  .credential-mark img { width: 62px; height: 77px; }
  .shield { height: 77px; border-radius: 12px; }
  .shield svg { width: 44px; height: 58px; }
  .credential .micro { font-size: 11px; letter-spacing: .4px; }
  .credential h3 { font-size: 21px; line-height: 1.3; margin: 9px 0; }
  .credential p { font-size: 14px; }
  .cert-status { font-size: 12px; margin-top: 13px; }
  .career-intro { margin-top: 17px; font-size: 15px; }
  .timeline h3 { font-size: 22px; }
  .timeline p { font-size: 15px; line-height: 1.75; }
  .timeline-date { font-size: 12px; }
  .organization { font-size: 14px; line-height: 1.6; }
  .tags span { font-size: 12px; }
  .contact { padding: 23px 20px; border-radius: 16px; }
  .contact-top { gap: 12px; }
  .availability { font-size: 11px; letter-spacing: .3px; }
  .contact-grid { margin-block: 24px; gap: 22px; }
  .contact h2 { font-size: clamp(28px,8vw,36px); line-height: 1.2; letter-spacing: -1px; }
  .contact-grid p { font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
  .contact .button { width: 100%; }
  .contact-bottom { font-size: 11px; letter-spacing: .2px; gap: 7px; padding-top: 18px; }
  .footer { gap: 10px 18px; padding-block: 24px; }
  .footer>span { font-size: 11px; }
  .footer button, .footer>a:last-child { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; }
}
@media (max-width: 420px) {
  .signals { grid-template-columns: minmax(0,1fr); }
  .region-signal, .opportunity { padding: 16px 18px; }
  .region-signal .signal-top, .opportunity .signal-top { margin-bottom: 10px; }
  .region-signal h2, .opportunity h2 { font-size: 20px; }
  .region-signal h2 br, .opportunity h2 br { display: none; }
  .region-signal h2 .muted, .opportunity h2 .muted { display: block; font-size: 16px; line-height: 1.5; font-weight: 400; letter-spacing: 0; }
}
@media (max-width: 370px) {
  .header { grid-template-columns: auto 1fr auto; }
  .header-caption { display: none; }
  .theme-switch { justify-self: end; }
  .header-contact { padding-inline: 14px; }
  .eyebrow { font-size: 10px; letter-spacing: .25px; }
  .credential { gap: 13px; }
  .credential-mark { width: 52px; flex-basis: 52px; }
  .credential-mark img { width: 52px; height: 68px; }
  .credential h3 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .theme-thumb { transition: none; } }