@layer base {
  /* Archivo Variable — latin */
  @font-face {
    font-family: "Archivo Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* Archivo Variable — latin-ext (Turkce: g-breve, s-cedilla, noktali buyuk I) */
  @font-face {
    font-family: "Archivo Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("../fonts/archivo-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* JetBrains Mono Variable — latin */
  @font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  /* JetBrains Mono Variable — latin-ext */
  @font-face {
    font-family: "JetBrains Mono Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 800;
    src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

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

  * {
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    /* Turkce aksanlar (Ü Ö İ Ç Ğ Ş) 0.92'de ust satira giriyor; 1.02 sikiligi
       korurken carpismalari onler. Ingilizce icin uygun olan deger burada calismaz. */
    line-height: 1.02;
    text-wrap: balance;
  }

  h1 { font-size: var(--step-6); }
  h2 { font-size: var(--step-5); }
  h3 { font-size: var(--step-3); }
  h4 { font-size: var(--step-2); }

  p { text-wrap: pretty; }

  a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
  }

  img,
  svg,
  video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--radius);
    box-shadow: none;
  }

  button { cursor: pointer; }

  hr {
    border: 0;
    border-top: var(--hairline) solid var(--line);
  }

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

  :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    box-shadow: none;
  }

  /* Grain — gomulu feTurbulence SVG (data URI), harici istek yok */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 140px 140px;
  }

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

@layer utilities {
  .u-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .u-skip {
    position: absolute;
    left: var(--space-4);
    top: var(--space-4);
    z-index: 10000;
    transform: translateY(-200%);
    background-color: var(--lime);
    color: var(--on-lime);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
  }

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

  .u-mono {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    /* utilities katmani sections'tan sonra geldigi icin duz bir color bildirimi
       bolum renklerini ezer. Renk custom property uzerinden alinir ki bolumler
       kendi baglamlarina gore gecersiz kilabilsin. */
    color: var(--u-mono-color, var(--ink-muted));
  }

  .u-rule {
    display: block;
    width: 100%;
    height: var(--hairline);
    background-color: var(--line);
  }
}

@layer base {
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-4) var(--gutter);
    border-bottom: var(--hairline) solid var(--line);
  }

  .site-header__brand {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    font-size: var(--step-1);
    text-decoration: none;
  }

  .site-footer {
    max-width: var(--container);
    margin-inline: auto;
    padding: var(--space-7) var(--gutter);
    border-top: var(--hairline) solid var(--line);
  }

  /* Ikonik tema dugmesi: gunes/ay. Gorunur metin yok, erisilebilir ad var. */
  .theme-toggle {
    display: inline-grid;
    place-items: center;
    inline-size: var(--icon-tile);
    block-size: var(--icon-tile);
    color: var(--ink);
    background-color: transparent;
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--radius);
    font-size: 16px;
    transition: background-color 120ms linear, color 120ms linear;
  }

  .theme-toggle > * {
    grid-area: 1 / 1;
  }

  /* Acik temada ay (koyuya gecis teklifi), koyu temada gunes gosterilir. */
  /* Ozgulluk FA'nin `.fa-solid { display: inline-block }` kuralini yenmeli:
     fa-subset.css base.css'ten sonra yuklendigi icin esit ozgullukte o kazanir. */
  .theme-toggle .theme-toggle__icon--moon { display: block; }
  .theme-toggle .theme-toggle__icon--sun { display: none; }

  :root[data-theme="dark"] .theme-toggle .theme-toggle__icon--moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .theme-toggle__icon--sun { display: block; }

  .theme-toggle:hover {
    background-color: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
  }

  /* Mobil menu dugmesi de ikonik */
  .l-header__toggle .fa-solid {
    font-size: 16px;
  }

  .l-header__toggle .fa-solid.l-header__icon--close { display: none; }
  .l-header__toggle[aria-expanded="true"] .fa-solid.l-header__icon--close { display: inline-block; }
  .l-header__toggle[aria-expanded="true"] .fa-solid.l-header__icon--open { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .theme-toggle {
      transition: none;
    }
  }
}

@layer utilities {
  /* =========================================================================
     AKSAN SISTEMI
     Limon (#CDF03A) acik zeminde metin/ikon rengi olarak KULLANILMAZ; kontrast
     orani 1.5:1 civarindadir. Asagidaki roller limonu ya dolgu olarak ya da
     koyu zemin uzerinde kullanir; her ikisi de WCAG AA'yi karsilar.
     ========================================================================= */

  /* 1. Isaret — bolum etiketlerinin onundeki kucuk limon kare */
  .u-marker {
    display: inline-block;
    inline-size: 10px;
    block-size: 10px;
    background-color: var(--accent);
    margin-inline-end: var(--space-2);
    vertical-align: baseline;
  }

  /* 2. Vurgu — basliktaki kelimenin arkasindaki limon highlight */
  .u-mark {
    background-color: var(--accent);
    color: var(--on-accent);
    padding-inline: 0.12em;
    padding-block: 0.02em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  /* 3. Ikon karosu — limon dolgu, koyu ikon */
  .u-icon-tile {
    display: inline-grid;
    place-items: center;
    inline-size: var(--icon-tile);
    block-size: var(--icon-tile);
    background-color: var(--accent);
    color: var(--on-accent);
    border-radius: var(--radius);
    font-size: 18px;
    flex: 0 0 auto;
  }

  .u-icon-tile--sm {
    inline-size: var(--icon-tile-sm);
    block-size: var(--icon-tile-sm);
    font-size: 14px;
  }

  /* 4. Konturlu ikon karosu — notr baglamda, hairline cerceve */
  .u-icon-tile--outline {
    background-color: transparent;
    color: var(--ink);
    border: var(--hairline) solid var(--line-strong);
  }

  /* 5. Aksan cizgi — bolum ustundeki kalin limon ayrac */
  .u-accent-rule {
    display: block;
    inline-size: 64px;
    block-size: 4px;
    background-color: var(--accent);
    border: 0;
  }

  /* 6. Koyu blok — ters cevrilmis bolum. Icinde limon METIN olarak serbest,
     cunku zemin --ink. */
  .u-invert {
    background-color: var(--surface-dark);
    color: var(--on-surface-dark);
    --u-mono-color: var(--on-surface-dark);
    --line: color-mix(in srgb, var(--on-surface-dark) 22%, transparent);
    --line-strong: color-mix(in srgb, var(--on-surface-dark) 42%, transparent);
    border-block: var(--hairline) solid color-mix(in srgb, var(--on-surface-dark) 16%, transparent);
  }

  .u-invert .u-accent-text {
    color: var(--accent);
  }

  .u-invert .u-icon-tile--outline {
    color: var(--paper);
  }

  /* Ikonlar dekoratiftir; ekran okuyucudan gizlenir ve metinle hizalanir. */
  .fa-solid,
  .fa-brands {
    vertical-align: -0.08em;
  }

  /* Baglantilarin sonundaki ok — hover'da kayar */
  .u-arrow {
    display: inline-block;
    margin-inline-start: var(--space-2);
    transition: transform 160ms ease;
  }

  a:hover > .u-arrow,
  a:focus-visible > .u-arrow {
    transform: translateX(4px);
  }

  @media (prefers-reduced-motion: reduce) {
    .u-arrow {
      transition: none;
    }
  }
}

@layer utilities {
  /* =========================================================================
     FOTOGRAF ISLEMESI
     Renkli stok fotograflar bu tasarim diliyle catisiyor: kagit zemin, tek
     aksan ve keskin geometri. Fotograflari notrlestirip aksani biz veriyoruz.
     Hover'da renk geri geliyor — dikkat cekiyor ama sayfa sakin kaliyor.
     ========================================================================= */
  .u-photo,
  .s-works__media img,
  .s-journal__media img,
  .s-case__img,
  .s-agency__photo img {
    filter: grayscale(1) contrast(1.06) brightness(0.98);
    transition: filter 220ms ease;
  }

  a:hover .s-works__media img,
  a:focus-visible .s-works__media img,
  a:hover .s-journal__media img,
  a:focus-visible .s-journal__media img,
  .s-case__img:hover,
  .u-photo:hover {
    filter: grayscale(0) contrast(1) brightness(1);
  }

  /* Koyu blok icindeki fotograflar biraz daha karanlik durur */
  .u-invert .u-photo,
  .u-invert .s-works__media img {
    filter: grayscale(1) contrast(1.1) brightness(0.82);
  }

  @media (prefers-reduced-motion: reduce) {
    .u-photo,
    .s-works__media img,
    .s-journal__media img,
    .s-case__img,
    .s-agency__photo img {
      transition: none;
    }
  }
}