/* ============================================================
   Semih Akcay Webdesign — Design System
   Tokens (Farben, Typografie, Abstände, Texturen) + Component-Styles.
   Quelle: Figma „Portfolio Semih" → Seite „Webseite" / Frame „Web".
   ============================================================ */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-Variable.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/Satoshi-VariableItalic.ttf") format("truetype-variations");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Afacad Flux";
  src: url("../fonts/AfacadFlux-300.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad Flux";
  src: url("../fonts/AfacadFlux-400.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad Flux";
  src: url("../fonts/AfacadFlux-500.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Afacad Flux";
  src: url("../fonts/AfacadFlux-700.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Farben ---------- */
:root {
  /* Basis: Schwarz/Grau-Skala (fast monochrom) */
  --color-black: #000000;        /* reines Schwarz – Text, feine Linien */
  --color-ink: #1b1b1b;          /* Haupt-Tinte: Headlines, dunkle Buttons */
  --color-night: #161616;        /* dunkelste Fläche (Timeline-Knoten) */
  --color-charcoal: #303030;     /* dunkle Hero-Karte */
  --color-graphite: #38393a;     /* Browser-Mockup-Chrome */
  --color-steel: #4f4f4f;        /* dunkles Grau, Füllungen */
  --color-gray: #797979;         /* mittleres Grau */

  /* Helle Flächen */
  --color-white: #ffffff;        /* Seitenhintergrund */
  --color-surface: #f3f3f3;      /* Pills, helle Karten */
  --color-mist: #ededed;         /* Hero-Sektion hinter der Karte */
  --color-border: #dfdfdf;       /* Pill-Konturen (3px inset) */
  --color-silver: #d9d9d9;       /* Hero-Headline auf Dunkel, Logo-Platzhalter */

  /* Text */
  --color-text: var(--color-ink);
  --color-text-secondary: #3c3c3c;  /* Fließtext unter Headlines */
  --color-text-tertiary: #999c9f;   /* Captions unter Mockups */
  --color-text-on-dark: #f3f3f3;    /* Text auf dunklen Buttons/Karten */
  --color-text-on-dark-muted: #d9d9d9;

  /* Akzent: genau EIN Orange */
  --color-accent: #f57f30;          /* CTA-Buttons, Timeline-Strang */
  --color-accent-ink: #1b1b1b;      /* Text auf Orange ist dunkel, nie weiß */

  /* Signalfarben (nur als 10px-Statuspunkte) */
  --color-signal-red: #d35b52;      /* „Heute" / vorher */
  --color-signal-green: #63c655;    /* „Mit mir" / nachher */

  /* Semantische Aliasse */
  --surface-page: var(--color-white);
  --surface-hero: var(--color-mist);
  --surface-card-dark: var(--color-charcoal);
  --surface-pill: var(--color-surface);
  --border-pill: var(--color-border);
  --border-step: var(--color-gray);
  --text-heading: var(--color-ink);
  --text-body: var(--color-text-secondary);
  --text-caption: var(--color-text-tertiary);
}

/* ---------- Typografie ---------- */
:root {
  --font-sans: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-accent: "Afacad Flux", var(--font-sans);

  /* Skala (Desktop 1440) */
  --text-hero: clamp(64px, 9.3vw, 134px);   /* Hero-Headline, Satoshi Light */
  --text-display: 50px;                     /* Sektions-Headline, Satoshi Medium */
  --text-subhero: 48px;                     /* Hero-Subline, Afacad Flux Light */
  --text-step: 40px;                        /* Timeline-Schritt, Satoshi Regular */
  --text-label: 30px;                       /* Sektions-Label, Afacad Flux Medium */
  --text-body-lg: 30px;                     /* Fließtext unter Headlines */
  --text-step-body: 28px;                   /* Timeline-Beschreibung, Satoshi Italic */
  --text-body: 25px;                        /* Vergleichs-Labels, Satoshi Medium */
  --text-button: 23px;                      /* Hero-CTA */
  --text-nav: 20px;                         /* Navigation + Navbar-CTA */
  --text-caption: 14px;                     /* Bildunterschriften */

  /* Gewichte (Satoshi Variable) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Zeilenhöhen */
  --leading-hero: 1.18;
  --leading-tight: 1.0;
  --leading-heading: 1.3;
  --leading-accent: 1.2;

  /* Laufweite */
  --tracking-button: 0.02em;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.text-hero {
  font: var(--weight-light) var(--text-hero) / var(--leading-hero) var(--font-sans);
  color: var(--color-silver);
}
.text-display {
  font: var(--weight-medium) var(--text-display) / var(--leading-heading) var(--font-sans);
  color: var(--text-heading);
}
.text-subhero {
  font: var(--weight-light) var(--text-subhero) / var(--leading-accent) var(--font-accent);
  color: var(--color-white);
}
.text-body-lg {
  font: var(--weight-regular) var(--text-body-lg) / var(--leading-heading) var(--font-sans);
  color: var(--text-body);
}
.text-step-title {
  font: var(--weight-regular) var(--text-step) / var(--leading-tight) var(--font-sans);
  color: var(--color-black);
}
.text-step-body {
  font: italic var(--weight-regular) var(--text-step-body) / 1.3 var(--font-sans);
  color: var(--color-text-secondary);
}
.text-caption {
  font: var(--weight-regular) var(--text-caption) / 1.4 var(--font-sans);
  color: var(--text-caption);
}

/* ---------- Radien, Schatten, Abstände ---------- */
:root {
  --radius-button: 22px;
  --radius-button-lg: 26px;
  --radius-card: 33px;
  --radius-card-lg: 40px;
  --radius-pill: 70px;
  --radius-track: 21px;
  --radius-browser: 8px;
  --radius-round: 50%;

  --stroke-pill: 3px;
  --stroke-button-outline: 2.5px;
  --stroke-tag: 2px;
  --stroke-step-card: 2px;

  --shadow-browser:
    0 0 0.5px 0 rgba(0, 0, 0, 0.7),
    0 10px 15px 0 rgba(0, 0, 0, 0.3),
    0 5px 25px 0 rgba(0, 0, 0, 0.2);

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --page-margin: 80px;
  --content-margin: 143px;
  --page-max: 1440px;

  --button-pad-y: 16px;
  --button-pad-x: 32px;
  --button-pad-y-lg: 19px;
  --button-pad-x-lg: 38px;

  --ease-out: cubic-bezier(0.25, 0.8, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
}

/* ---------- Texturen & Oberflächen ---------- */
:root {
  --noise-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.surface-grain-light {
  position: relative;
  background-color: var(--surface-hero);
}
.surface-grain-light::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-url);
  opacity: 0.16;
  pointer-events: none;
  border-radius: inherit;
}

.surface-grain-dark {
  position: relative;
  background-color: var(--surface-card-dark);
}
.surface-grain-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise-url);
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
  border-radius: inherit;
}

/* ============================================================
   Component-Styles
   ============================================================ */

/* ---------- Button ---------- */
.sa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-tight);
  border-radius: var(--radius-button);
  padding: var(--button-pad-y) var(--button-pad-x);
  font-size: var(--text-nav);
  transition: filter var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}
.sa-btn--lg {
  border-radius: var(--radius-button-lg);
  padding: var(--button-pad-y-lg) var(--button-pad-x-lg);
  font-size: var(--text-button);
  gap: 20px;
}
.sa-btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
.sa-btn--dark    { background: var(--color-ink); color: var(--color-text-on-dark-muted); }
.sa-btn--outline {
  background: transparent;
  color: var(--color-text-on-dark);
  box-shadow: inset 0 0 0 var(--stroke-button-outline) var(--color-silver);
}
.sa-btn--outline-dark {
  background: transparent;
  color: var(--color-ink);
  box-shadow: inset 0 0 0 var(--stroke-button-outline) var(--color-ink);
}
.sa-btn:hover { filter: brightness(0.94); }
.sa-btn--outline:hover { filter: none; background: rgba(255, 255, 255, 0.08); }
.sa-btn:active { transform: scale(0.985); filter: brightness(0.9); }
.sa-btn__arrow { flex: none; transition: transform var(--duration-fast) var(--ease-out); }
.sa-btn:hover .sa-btn__arrow { transform: translateX(3px); }

/* ---------- Pill (Logos / Nachweise) ---------- */
.sa-pill {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 79px;
  padding: 23px 42px;
  border-radius: var(--radius-pill);
  background: var(--surface-pill);
  box-shadow: inset 0 0 0 var(--stroke-pill) var(--border-pill);
  white-space: nowrap;
  box-sizing: border-box;
}
.sa-pill img { display: block; height: 33px; width: auto; }
.sa-pill--sm { height: 66px; }
.sa-pill--sm img { height: 22px; }
.sa-pill__text {
  font-family: var(--font-accent);
  font-weight: var(--weight-medium);
  font-size: 32px;
  line-height: var(--leading-accent);
  color: var(--color-black);
}

/* ---------- SectionTag (Sektions-Label) ---------- */
.sa-tag {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  box-shadow: inset 0 0 0 var(--stroke-tag) var(--border-pill);
  font-family: var(--font-accent);
  font-weight: var(--weight-medium);
  font-size: var(--text-label);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-button);
  color: var(--color-ink);
}

/* ---------- StatusDot ---------- */
.sa-status {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  line-height: var(--leading-heading);
  color: var(--color-ink);
}
.sa-status__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sa-status--red .sa-status__dot { background: var(--color-signal-red); }
.sa-status--green .sa-status__dot { background: var(--color-signal-green); }

/* ---------- NavBar ---------- */
.sa-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px var(--page-margin);
  background: var(--surface-page);
  box-sizing: border-box;
}
.sa-nav__logo {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: var(--color-silver);
  flex: none;
  overflow: hidden;
}
.sa-nav__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-nav__links {
  display: flex;
  align-items: center;
  gap: 54px;
}
.sa-nav__link {
  font-family: var(--font-sans);
  font-size: var(--text-nav);
  letter-spacing: var(--tracking-button);
  line-height: var(--leading-tight);
  color: var(--color-ink);
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}
.sa-nav__link:hover { opacity: 0.6; }

/* ---------- BrowserFrame (Safari Big Sur, dunkel) ---------- */
.sa-browser {
  position: relative;
  border-radius: var(--radius-browser);
  background: var(--color-graphite);
  box-shadow: inset 0 0 0 0.5px #070707, var(--shadow-browser);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sa-browser__bar {
  flex: none;
  height: 38px;
  display: grid;
  grid-template-columns: 1fr minmax(120px, 220px) 1fr;
  align-items: center;
  padding: 0 14px;
  background: var(--color-graphite);
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
}
.sa-browser__lights { display: flex; gap: 7px; }
.sa-browser__lights span { width: 11px; height: 11px; border-radius: 50%; }
.sa-browser__lights span:nth-child(1) { background: #ed6a5e; }
.sa-browser__lights span:nth-child(2) { background: #f4bf4f; }
.sa-browser__lights span:nth-child(3) { background: #61c454; }
.sa-browser__url {
  height: 22px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--color-text-tertiary);
  overflow: hidden;
}
.sa-browser__body {
  flex: 1;
  min-height: 0;
  background: var(--color-graphite);
  position: relative;
}
.sa-browser__body img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ---------- Timeline (Prozess-Strang) ---------- */
.sa-timeline {
  display: grid;
  grid-template-columns: 1fr 37px 1fr;
  column-gap: 56px;
  position: relative;
}
.sa-timeline__track {
  grid-column: 2;
  grid-row: 1 / -1;
  justify-self: center;
  width: 16px;
  border-radius: var(--radius-track);
  background: var(--color-accent);
}
.sa-timeline__step { padding-bottom: 96px; position: relative; }
.sa-timeline__step--left { grid-column: 1; text-align: left; }
.sa-timeline__step--right { grid-column: 3; }
.sa-timeline__node {
  grid-column: 2;
  justify-self: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-night);
  border: 1px solid var(--color-black);
  box-sizing: border-box;
  z-index: 1;
}
.sa-timeline__title {
  font-family: var(--font-sans);
  font-size: var(--text-step);
  line-height: var(--leading-tight);
  color: var(--color-black);
  margin: 0 0 24px;
  font-weight: var(--weight-regular);
}
.sa-timeline__title em { font-style: italic; }
.sa-timeline__card {
  border-radius: var(--radius-card);
  box-shadow: inset 0 0 0 var(--stroke-step-card) var(--border-step);
  padding: 26px 32px;
  background: var(--color-white);
}
.sa-timeline__body {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-step-body);
  line-height: 1.35;
  color: var(--color-text-secondary);
  margin: 0;
  white-space: pre-line;
}
.sa-timeline__list {
  font-family: var(--font-sans);
  font-style: italic;
  font-size: var(--text-step-body);
  line-height: 1.35;
  color: var(--color-text-secondary);
  margin: 10px 0 0;
  padding-left: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sa-timeline__list li { padding-left: 4px; }