/* Mooli — Local Fonts */
@font-face {
  font-family: 'Mooli';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mooli-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Mooli';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/mooli-latin.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;
}

@layer reset, base, layout, components, states, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  img, video { display: block; max-width: 100%; height: auto; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
  button, input, textarea, select { font: inherit; }
  button { cursor: pointer; border: none; background: none; }
  table { border-collapse: collapse; }
  :focus-visible { outline: 2px solid var(--pas); outline-offset: 3px; }
}

@layer base {
  :root {
    --kagit:  #F4EFE6;
    --yuzey:  #E8E0CF;
    --sahil:  #D3C9B3;
    --murekkep: #1C1916;
    --sis:    #7A7469;
    --pas:    #A85B20;
    --orman:  #3D6B58;
    --isik:   #F9F6F0;
    --gece:   #0F0D0B;

    --govde: 'Mooli', system-ui, sans-serif;

    --olcu-1: 0.25rem;
    --olcu-2: 0.5rem;
    --olcu-3: 0.75rem;
    --olcu-4: 1rem;
    --olcu-5: 1.25rem;
    --olcu-6: 1.5rem;
    --olcu-8: 2rem;
    --olcu-10: 2.5rem;
    --olcu-12: 3rem;
    --olcu-16: 4rem;
    --olcu-20: 5rem;
    --olcu-24: 6rem;
    --olcu-32: 8rem;

    --radius-s: 3px;
    --radius-m: 6px;
    --radius-l: 12px;

    --gecis: 200ms ease;
    --gecis-yav: 400ms ease;

    --max-genislik: 1280px;
    --kenar: clamp(1rem, 4vw, 3rem);
  }

  html, body {
    background-color: var(--kagit);
    color: var(--murekkep);
    font-family: var(--govde);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.55;
    min-height: 100dvh;
  }

  h1 { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.1; letter-spacing: -0.02em; }
  h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1.2; letter-spacing: -0.015em; }
  h3 { font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1.25; }
  h4 { font-size: clamp(0.95rem, 1.4vw, 1.15rem); line-height: 1.3; }
  p { max-width: 68ch; }
  strong { font-weight: 600; }
  small { font-size: 0.8rem; }

  ::selection { background: var(--pas); color: var(--isik); }
}

@layer layout {
  .merkez {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .izgara-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--olcu-8); }
  .izgara-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--olcu-6); }
  .izgara-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--olcu-5); }
  .asimetrik { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--olcu-10); }
  .asimetrik-ters { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--olcu-10); }

  @media (max-width: 900px) {
    .izgara-2, .izgara-3, .izgara-4, .asimetrik, .asimetrik-ters {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 600px) {
    .izgara-2, .izgara-3 { grid-template-columns: 1fr; }
  }

  .dikey { display: flex; flex-direction: column; }
  .yatay { display: flex; align-items: center; }
  .bosluk-oto { margin-inline-start: auto; }
  .bol { flex: 1; }
}

@layer components {

  /* ── Masthead / Navigation ── */
  .baslik-seridi {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--murekkep);
    color: var(--kagit);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .baslik-ic {
    display: flex;
    align-items: center;
    gap: var(--olcu-6);
    padding-block: var(--olcu-4);
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .marka {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--olcu-3);
    line-height: 1.1;
    flex-shrink: 0;
  }

  .marka-metin {
    display: flex;
    flex-direction: column;
  }

  .marka-ad {
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .header-logo {
    height: 42px;
    width: auto;
    display: block;
  }

  .marka-etiket {
    font-size: 0.65rem;
    color: var(--sis);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2px;
  }

  .gezinti {
    display: flex;
    align-items: center;
    gap: var(--olcu-1);
    margin-inline-start: auto;
  }

  .gezinti-baglanti {
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: var(--sahil);
    padding: var(--olcu-2) var(--olcu-3);
    border-radius: var(--radius-s);
    transition: color var(--gecis), background-color var(--gecis);
    white-space: nowrap;
  }

  .gezinti-baglanti:hover,
  .gezinti-baglanti[aria-current="page"] {
    color: var(--kagit);
    background-color: rgba(255,255,255,0.1);
  }

  .gezinti-baglanti[aria-current="page"] {
    color: var(--pas);
  }

  .hamburger-dugme {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    margin-inline-start: auto;
    border-radius: var(--radius-s);
    background: rgba(255,255,255,0.07);
    transition: background var(--gecis);
    flex-shrink: 0;
  }

  .hamburger-dugme:hover { background: rgba(255,255,255,0.15); }

  .hamburger-cizgi {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--kagit);
    transition: transform var(--gecis), opacity var(--gecis);
  }

  .hamburger-dugme[aria-expanded="true"] .hamburger-cizgi:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  .hamburger-dugme[aria-expanded="true"] .hamburger-cizgi:nth-child(2) {
    opacity: 0;
  }
  .hamburger-dugme[aria-expanded="true"] .hamburger-cizgi:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .mobil-gezinti {
    display: none;
    background: var(--gece);
    padding-block: var(--olcu-4);
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .mobil-gezinti.acik { display: block; }

  .mobil-gezinti-liste {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: flex;
    flex-direction: column;
    gap: var(--olcu-1);
  }

  .mobil-gezinti-baglanti {
    display: block;
    font-size: 0.9rem;
    padding: var(--olcu-3) var(--olcu-4);
    color: var(--sahil);
    border-radius: var(--radius-m);
    transition: background var(--gecis), color var(--gecis);
  }

  .mobil-gezinti-baglanti:hover { background: rgba(255,255,255,0.06); color: var(--kagit); }
  .mobil-gezinti-baglanti[aria-current="page"] { color: var(--pas); }

  @media (max-width: 860px) {
    .gezinti { display: none; }
    .hamburger-dugme { display: flex; }
  }

  /* ── Manifesto Slab ── */
  .manifesto-levha {
    background-color: var(--murekkep);
    color: var(--kagit);
    padding-block: clamp(3rem, 8vw, 7rem);
    position: relative;
    overflow: hidden;
  }

  .manifesto-levha::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../media/texture-01.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.07;
    pointer-events: none;
  }

  .manifesto-ic {
    position: relative;
    z-index: 1;
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
  }

  .manifesto-baslik {
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--kagit);
  }

  .manifesto-baslik em {
    font-style: normal;
    color: var(--pas);
  }

  .manifesto-metin p {
    color: var(--sahil);
    line-height: 1.65;
    max-width: 52ch;
  }

  .manifesto-metin p + p { margin-top: var(--olcu-4); }

  .manifesto-sinyal {
    margin-top: var(--olcu-8);
    display: flex;
    align-items: center;
    gap: var(--olcu-4);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sis);
  }

  .manifesto-sinyal::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--pas);
    flex-shrink: 0;
  }

  @media (max-width: 760px) {
    .manifesto-ic { grid-template-columns: 1fr; }
  }

  /* ── Spectrum Board (CSS-only) ── */
  .spektrum-paneli {
    background-color: var(--yuzey);
    padding-block: clamp(2.5rem, 5vw, 5rem);
    overflow: hidden;
  }

  .spektrum-baslik-alani {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    margin-bottom: var(--olcu-10);
  }

  .bolum-etiket {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pas);
    display: flex;
    align-items: center;
    gap: var(--olcu-3);
    margin-bottom: var(--olcu-4);
  }

  .bolum-etiket::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: var(--pas);
  }

  .spektrum-ray {
    display: flex;
    gap: 2px;
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--sahil) transparent;
  }

  .spektrum-band {
    flex: 1;
    min-width: 80px;
    display: flex;
    flex-direction: column;
    gap: var(--olcu-2);
  }

  .band-cubuk {
    height: 6px;
    border-radius: 2px;
    background: var(--pas);
    animation: band-titreme 3s ease-in-out infinite;
    transform-origin: left;
  }

  .band-cubuk-2 {
    height: 4px;
    border-radius: 2px;
    background: var(--orman);
    animation: band-titreme 4s ease-in-out infinite 0.5s;
    transform-origin: left;
  }

  @keyframes band-titreme {
    0%, 100% { transform: scaleX(1); opacity: 1; }
    50% { transform: scaleX(0.6); opacity: 0.5; }
  }

  .band-ad {
    font-size: 0.72rem;
    color: var(--murekkep);
    padding-block: var(--olcu-3);
    writing-mode: initial;
    line-height: 1.3;
  }

  .band-frekans {
    font-size: 0.6rem;
    color: var(--sis);
    letter-spacing: 0.05em;
  }

  .spektrum-band:nth-child(2) .band-cubuk { animation-delay: 0.3s; }
  .spektrum-band:nth-child(3) .band-cubuk { animation-delay: 0.6s; height: 10px; }
  .spektrum-band:nth-child(4) .band-cubuk { animation-delay: 0.9s; height: 8px; }
  .spektrum-band:nth-child(5) .band-cubuk { animation-delay: 1.2s; height: 12px; }
  .spektrum-band:nth-child(6) .band-cubuk { animation-delay: 1.5s; height: 5px; }
  .spektrum-band:nth-child(7) .band-cubuk { animation-delay: 1.8s; height: 9px; }
  .spektrum-band:nth-child(8) .band-cubuk { animation-delay: 2.1s; height: 7px; }

  /* ── Signal Register (Material Grid) ── */
  .sinyal-kaydedici {
    padding-block: clamp(2.5rem, 6vw, 6rem);
    background-color: var(--kagit);
  }

  .sinyal-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .sinyal-baslik-satiri {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--olcu-10);
    gap: var(--olcu-6);
    flex-wrap: wrap;
  }

  .sinyal-izgara {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--olcu-3);
  }

  @media (max-width: 900px) {
    .sinyal-izgara { grid-template-columns: repeat(2, 1fr); }
  }

  @media (max-width: 500px) {
    .sinyal-izgara { grid-template-columns: 1fr; }
  }

  .sinyal-kart {
    background: var(--yuzey);
    border-radius: var(--radius-m);
    padding: var(--olcu-6);
    display: flex;
    flex-direction: column;
    gap: var(--olcu-3);
    border: 1px solid var(--sahil);
    transition: border-color var(--gecis), transform var(--gecis);
    position: relative;
    overflow: hidden;
  }

  .sinyal-kart::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--pas);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--gecis-yav);
  }

  .sinyal-kart:hover { border-color: var(--pas); transform: translateY(-2px); }
  .sinyal-kart:hover::before { transform: scaleY(1); }

  .sinyal-kart-numara {
    font-size: 0.65rem;
    color: var(--sis);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .sinyal-kart-ad { font-size: 1rem; color: var(--murekkep); line-height: 1.2; }
  .sinyal-kart-tanim { font-size: 0.8rem; color: var(--sis); line-height: 1.5; max-width: none; }

  .sinyal-kart-frekans {
    margin-top: auto;
    font-size: 0.7rem;
    color: var(--pas);
    letter-spacing: 0.08em;
  }

  /* ── Quote Corridor ── */
  .alintilar-koridoru {
    background-color: var(--murekkep);
    color: var(--kagit);
    padding-block: clamp(2.5rem, 6vw, 6rem);
    position: relative;
  }

  .alintilar-koridoru::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../media/texture-02.jpg');
    background-size: cover;
    opacity: 0.05;
    pointer-events: none;
  }

  .alintilar-ic {
    position: relative;
    z-index: 1;
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .alinti-dizisi {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--olcu-8);
    align-items: start;
  }

  @media (max-width: 860px) {
    .alinti-dizisi { grid-template-columns: 1fr; }
  }

  .alinti-ogesi {
    display: flex;
    flex-direction: column;
    gap: var(--olcu-4);
    padding-top: var(--olcu-6);
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  .alinti-metni {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    line-height: 1.5;
    color: var(--kagit);
    max-width: 45ch;
  }

  .alinti-kaynak {
    font-size: 0.75rem;
    color: var(--sis);
    letter-spacing: 0.05em;
  }

  .alinti-kaynak strong { color: var(--pas); }

  /* ── Protocol Mesh ── */
  .protokol-agi {
    background-color: var(--yuzey);
    padding-block: clamp(2.5rem, 6vw, 6rem);
  }

  .protokol-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .protokol-izgara {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--olcu-4);
  }

  @media (max-width: 900px) {
    .protokol-izgara { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 560px) {
    .protokol-izgara { grid-template-columns: 1fr; }
  }

  .protokol-karti {
    display: block;
    background: var(--kagit);
    border-radius: var(--radius-l);
    padding: var(--olcu-8);
    border: 1px solid var(--sahil);
    transition: background var(--gecis), border-color var(--gecis), transform var(--gecis-yav);
    position: relative;
    overflow: hidden;
  }

  .protokol-karti::after {
    content: '→';
    position: absolute;
    right: var(--olcu-6);
    top: 50%;
    transform: translateY(-50%) translateX(0);
    font-size: 1.2rem;
    color: var(--pas);
    transition: transform var(--gecis);
  }

  .protokol-karti:hover {
    background: var(--murekkep);
    border-color: var(--murekkep);
    color: var(--kagit);
    transform: translateY(-3px);
  }

  .protokol-karti:hover::after { transform: translateY(-50%) translateX(4px); }

  .protokol-karti-kodu {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pas);
    margin-bottom: var(--olcu-3);
  }

  .protokol-karti:hover .protokol-karti-kodu { color: var(--pas); }

  .protokol-karti-baslik {
    font-size: 1rem;
    line-height: 1.25;
    margin-bottom: var(--olcu-3);
  }

  .protokol-karti-ozet {
    font-size: 0.8rem;
    color: var(--sis);
    line-height: 1.5;
    max-width: none;
    padding-right: var(--olcu-8);
  }

  .protokol-karti:hover .protokol-karti-ozet { color: var(--sahil); }

  /* ── Field Fragment Mosaic ── */
  .alan-mozaigi {
    padding-block: clamp(2.5rem, 6vw, 6rem);
    background: var(--kagit);
  }

  .alan-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .mozaik-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: var(--olcu-4);
  }

  .mozaik-ogesi {
    border-radius: var(--radius-m);
    overflow: hidden;
    position: relative;
  }

  .mozaik-ogesi-buyuk {
    grid-column: span 2;
    grid-row: span 2;
  }

  .mozaik-gorsel {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
    transition: transform var(--gecis-yav);
  }

  .mozaik-ogesi:hover .mozaik-gorsel { transform: scale(1.03); }

  .mozaik-kapak {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28,25,22,0.8) 0%, transparent 55%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--olcu-6);
  }

  .mozaik-etiket {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pas);
    margin-bottom: var(--olcu-2);
  }

  .mozaik-baslik {
    font-size: 1.05rem;
    color: var(--kagit);
    line-height: 1.25;
  }

  .mozaik-metin-ogesi {
    background: var(--yuzey);
    padding: var(--olcu-6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--olcu-3);
  }

  .mozaik-metin-ogesi p {
    font-size: 0.82rem;
    color: var(--sis);
    line-height: 1.6;
    max-width: none;
  }

  @media (max-width: 760px) {
    .mozaik-izgara { grid-template-columns: 1fr 1fr; }
    .mozaik-ogesi-buyuk { grid-column: span 2; grid-row: span 1; }
    .mozaik-gorsel { min-height: 200px; }
  }

  @media (max-width: 480px) {
    .mozaik-izgara { grid-template-columns: 1fr; }
    .mozaik-ogesi-buyuk { grid-column: span 1; }
  }

  /* ── Quiet Systems Explainer ── */
  .sessiz-sistemler {
    background: var(--murkkep, #1C1916);
    background-color: var(--murekkep);
    color: var(--kagit);
    padding-block: clamp(2.5rem, 6vw, 6rem);
  }

  .sessiz-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .sessiz-izgara {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  @media (max-width: 760px) {
    .sessiz-izgara { grid-template-columns: 1fr; }
  }

  .sessiz-bas p { color: var(--sahil); line-height: 1.7; margin-top: var(--olcu-5); max-width: 52ch; }

  .sessiz-liste {
    display: flex;
    flex-direction: column;
    gap: var(--olcu-5);
  }

  .sessiz-madde {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--olcu-4);
    align-items: start;
    padding-bottom: var(--olcu-5);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .sessiz-madde:last-child { border-bottom: none; padding-bottom: 0; }

  .sessiz-madde-no {
    font-size: 0.7rem;
    color: var(--pas);
    letter-spacing: 0.1em;
    padding-top: 3px;
  }

  .sessiz-madde-icerik h4 { color: var(--kagit); margin-bottom: var(--olcu-2); font-size: 0.95rem; }
  .sessiz-madde-icerik p { color: var(--sis); font-size: 0.82rem; max-width: none; line-height: 1.55; }

  /* ── Contribution Form Zone ── */
  .katki-formu-alani {
    padding-block: clamp(2.5rem, 6vw, 6rem);
    background: var(--yuzey);
  }

  .katki-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  @media (max-width: 760px) {
    .katki-ic { grid-template-columns: 1fr; }
  }

  .katki-bilgi p {
    color: var(--sis);
    line-height: 1.65;
    margin-top: var(--olcu-5);
    max-width: 48ch;
  }

  .form-alani {
    display: flex;
    flex-direction: column;
    gap: var(--olcu-4);
  }

  .form-satir {
    display: flex;
    flex-direction: column;
    gap: var(--olcu-2);
  }

  .form-etiket {
    font-size: 0.78rem;
    color: var(--murekkep);
    letter-spacing: 0.04em;
  }

  .form-girdi,
  .form-alan {
    width: 100%;
    background: var(--kagit);
    border: 1px solid var(--sahil);
    border-radius: var(--radius-m);
    padding: var(--olcu-3) var(--olcu-4);
    color: var(--murekkep);
    font-size: 0.9rem;
    transition: border-color var(--gecis), box-shadow var(--gecis);
  }

  .form-girdi:focus,
  .form-alan:focus {
    border-color: var(--pas);
    box-shadow: 0 0 0 3px rgba(168,91,32,0.15);
    outline: none;
  }

  .form-girdi.hata,
  .form-alan.hata { border-color: #c0392b; }

  .form-alan { resize: vertical; min-height: 120px; }

  .form-hata-mesaj {
    font-size: 0.72rem;
    color: #c0392b;
    display: none;
  }

  .form-hata-mesaj.gorunur { display: block; }

  .form-gondur-dugme {
    background: var(--murekkep);
    color: var(--kagit);
    padding: var(--olcu-4) var(--olcu-8);
    border-radius: var(--radius-m);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--gecis), transform var(--gecis);
    align-self: flex-start;
  }

  .form-gondur-dugme:hover {
    background: var(--pas);
    transform: translateY(-1px);
  }

  .form-gondur-dugme:active { transform: translateY(0); }

  .form-gondur-dugme:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
  }

  /* ── Disclosure Strip ── */
  .aciklama-seridi {
    background: var(--sahil);
    padding-block: var(--olcu-5);
  }

  .aciklama-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: flex;
    align-items: center;
    gap: var(--olcu-6);
    flex-wrap: wrap;
  }

  .aciklama-metin {
    font-size: 0.75rem;
    color: var(--murekkep);
    opacity: 0.7;
    line-height: 1.5;
    flex: 1;
    max-width: none;
  }

  .aciklama-baglanti {
    font-size: 0.75rem;
    color: var(--pas);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--gecis);
    white-space: nowrap;
  }

  .aciklama-baglanti:hover { opacity: 0.7; }

  /* ── Footer ── */
  .sayfa-alti {
    background: var(--gece);
    color: var(--kagit);
    padding-block: clamp(2rem, 4vw, 3.5rem);
  }

  .sayfa-alti-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr;
    gap: var(--olcu-8);
    align-items: start;
  }

  @media (max-width: 800px) {
    .sayfa-alti-ic { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 480px) {
    .sayfa-alti-ic { grid-template-columns: 1fr; }
  }

  .sayfa-alti-sutun { display: flex; flex-direction: column; gap: var(--olcu-3); }

  .sayfa-alti-marka-ad {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kagit);
    margin-bottom: 0;
  }

  .sayfa-alti-baslik-alani {
    display: flex;
    align-items: center;
    gap: var(--olcu-4);
    margin-bottom: var(--olcu-2);
  }

  .footer-logo {
    height: 36px;
    width: auto;
    display: block;
  }

  .sayfa-alti-marka-tanim {
    font-size: 0.75rem;
    color: var(--sis);
    line-height: 1.55;
    max-width: 30ch;
  }

  .sayfa-alti-baslik {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sis);
    margin-bottom: var(--olcu-2);
  }

  .sayfa-alti-baglanti {
    font-size: 0.8rem;
    color: var(--sahil);
    padding-block: var(--olcu-1);
    display: block;
    transition: color var(--gecis);
  }

  .sayfa-alti-baglanti:hover { color: var(--kagit); }

  .sayfa-alti-telif {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    padding-top: var(--olcu-6);
    margin-top: var(--olcu-6);
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--olcu-4);
  }

  .sayfa-alti-telif-metin {
    font-size: 0.72rem;
    color: var(--sis);
    max-width: none;
  }

  /* ── Cookie Banner ── */
  .cerez-banneri {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--gece);
    color: var(--kagit);
    padding-block: var(--olcu-5);
    border-top: 2px solid var(--pas);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .cerez-banneri.gorunur { transform: translateY(0); }

  .cerez-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: flex;
    align-items: center;
    gap: var(--olcu-6);
    flex-wrap: wrap;
  }

  .cerez-metin {
    flex: 1;
    font-size: 0.82rem;
    color: var(--sahil);
    line-height: 1.55;
    max-width: none;
  }

  .cerez-metin a {
    color: var(--pas);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .cerez-dugmeler {
    display: flex;
    gap: var(--olcu-3);
    flex-shrink: 0;
  }

  .cerez-kabul {
    background: var(--pas);
    color: var(--isik);
    padding: var(--olcu-3) var(--olcu-6);
    border-radius: var(--radius-m);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: none;
    transition: background var(--gecis);
  }

  .cerez-kabul:hover { background: #8F4E1A; }

  .cerez-reddet {
    background: transparent;
    color: var(--sis);
    padding: var(--olcu-3) var(--olcu-6);
    border-radius: var(--radius-m);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15);
    transition: border-color var(--gecis), color var(--gecis);
  }

  .cerez-reddet:hover { border-color: rgba(255,255,255,0.4); color: var(--kagit); }

  /* ── Hero cover sections ── */
  .kapak-gorsel-alani {
    width: 100%;
    height: clamp(280px, 45vw, 540px);
    position: relative;
    overflow: hidden;
    background: var(--murekkep);
  }

  .kapak-gorsel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
  }

  .kapak-bardak {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(28,25,22,0.3) 0%, rgba(28,25,22,0.7) 100%);
  }

  .kapak-yazi {
    position: absolute;
    bottom: clamp(1.5rem, 4vw, 3rem);
    left: var(--kenar);
    right: var(--kenar);
  }

  .kapak-yazi h1 { color: var(--kagit); }

  .kapak-yazi .bolum-etiket { margin-bottom: var(--olcu-3); }

  /* ── Page section blocks used on inner pages ── */
  .bolum-blok {
    padding-block: clamp(2rem, 5vw, 4.5rem);
  }

  .bolum-blok.koyu {
    background: var(--murekkep);
    color: var(--kagit);
  }

  .bolum-blok.orta { background: var(--yuzey); }
  .bolum-blok.acik { background: var(--kagit); }

  .bolum-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .bolum-ic h2 { margin-bottom: var(--olcu-6); }
  .bolum-ic h3 { margin-bottom: var(--olcu-4); }
  .bolum-ic p { line-height: 1.65; }
  .bolum-ic p + p { margin-top: var(--olcu-4); }

  .bolum-blok.koyu p { color: var(--sahil); }
  .bolum-blok.koyu h2, .bolum-blok.koyu h3 { color: var(--kagit); }

  .kart-dizisi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--olcu-5);
    margin-top: var(--olcu-8);
  }

  @media (max-width: 860px) {
    .kart-dizisi { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 520px) {
    .kart-dizisi { grid-template-columns: 1fr; }
  }

  .bilgi-karti {
    background: var(--kagit);
    border: 1px solid var(--sahil);
    border-radius: var(--radius-m);
    padding: var(--olcu-6);
    display: flex;
    flex-direction: column;
    gap: var(--olcu-3);
  }

  .bilgi-karti-no {
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--pas);
  }

  .bilgi-karti h4 { font-size: 0.95rem; color: var(--murekkep); }
  .bilgi-karti p { font-size: 0.8rem; color: var(--sis); line-height: 1.55; max-width: none; }

  .bolum-blok.koyu .bilgi-karti {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
  }

  .bolum-blok.koyu .bilgi-karti h4 { color: var(--kagit); }
  .bolum-blok.koyu .bilgi-karti p { color: var(--sahil); }

  .akim-listesi {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--olcu-8);
    border: 1px solid var(--sahil);
    border-radius: var(--radius-m);
    overflow: hidden;
  }

  .akim-satir {
    display: grid;
    grid-template-columns: 3rem 1fr auto;
    gap: var(--olcu-5);
    padding: var(--olcu-5) var(--olcu-6);
    border-bottom: 1px solid var(--sahil);
    align-items: center;
    transition: background var(--gecis);
  }

  .akim-satir:last-child { border-bottom: none; }
  .akim-satir:hover { background: var(--yuzey); }

  .akim-satir-no {
    font-size: 0.7rem;
    color: var(--pas);
    letter-spacing: 0.1em;
  }

  .akim-satir-icerik h4 { font-size: 0.9rem; margin-bottom: 2px; }
  .akim-satir-icerik span { font-size: 0.75rem; color: var(--sis); }

  .akim-satir-etiket {
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sis);
    background: var(--yuzey);
    padding: var(--olcu-1) var(--olcu-3);
    border-radius: 99px;
    border: 1px solid var(--sahil);
  }

  .gorsel-blok {
    width: 100%;
    border-radius: var(--radius-l);
    overflow: hidden;
    margin-block: var(--olcu-8);
  }

  .gorsel-blok img {
    width: 100%;
    object-fit: cover;
    height: clamp(200px, 35vw, 440px);
  }

  .iki-sutun-metin {
    column-count: 2;
    column-gap: clamp(2rem, 4vw, 4rem);
    margin-top: var(--olcu-6);
  }

  .iki-sutun-metin p { break-inside: avoid; max-width: none; }

  @media (max-width: 640px) {
    .iki-sutun-metin { column-count: 1; }
  }

  .vurgu-kutusu {
    background: var(--yuzey);
    border-left: 3px solid var(--pas);
    border-radius: 0 var(--radius-m) var(--radius-m) 0;
    padding: var(--olcu-5) var(--olcu-6);
    margin-block: var(--olcu-6);
  }

  .vurgu-kutusu p { font-size: 1.05rem; max-width: none; color: var(--murekkep); }

  .bolum-blok.koyu .vurgu-kutusu { background: rgba(255,255,255,0.07); }
  .bolum-blok.koyu .vurgu-kutusu p { color: var(--kagit); }

  /* ── Success page ── */
  .sinyal-kayit-sayfasi {
    min-height: 80dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--olcu-10) var(--kenar);
    background: var(--kagit);
  }

  .sinyal-kayit-ic {
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--olcu-6);
  }

  .sinyal-kayit-sembol {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--yuzey);
    border: 2px solid var(--pas);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .sinyal-kayit-sembol::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--pas);
    display: block;
    box-shadow: 0 -6px 0 var(--pas), 0 6px 0 var(--pas);
  }

  .sinyal-kayit-ic p { color: var(--sis); max-width: 40ch; text-align: center; line-height: 1.65; }

  .geri-dugme {
    display: inline-block;
    margin-top: var(--olcu-4);
    padding: var(--olcu-3) var(--olcu-7);
    background: var(--murekkep);
    color: var(--kagit);
    border-radius: var(--radius-m);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: background var(--gecis);
  }

  .geri-dugme:hover { background: var(--pas); }

  /* ── Privacy / Terms ── */
  .metin-sayfasi {
    padding-block: clamp(2rem, 5vw, 5rem);
    background: var(--kagit);
  }

  .metin-sayfasi-ic {
    max-width: 800px;
    margin-inline: auto;
    padding-inline: var(--kenar);
  }

  .metin-sayfasi h1 { margin-bottom: var(--olcu-5); }
  .metin-sayfasi h2 { font-size: 1.2rem; margin-top: var(--olcu-10); margin-bottom: var(--olcu-4); color: var(--murekkep); }
  .metin-sayfasi h3 { font-size: 1rem; margin-top: var(--olcu-6); margin-bottom: var(--olcu-3); }
  .metin-sayfasi p { color: var(--sis); line-height: 1.75; }
  .metin-sayfasi p + p { margin-top: var(--olcu-4); }
  .metin-sayfasi ul { margin-top: var(--olcu-3); margin-left: var(--olcu-6); list-style: disc; }
  .metin-sayfasi ul li { color: var(--sis); font-size: 0.9rem; line-height: 1.65; padding-block: var(--olcu-1); }

  .metin-zaman {
    font-size: 0.75rem;
    color: var(--sis);
    margin-bottom: var(--olcu-10);
    letter-spacing: 0.05em;
  }

  .bolum-atlama {
    display: flex;
    flex-wrap: wrap;
    gap: var(--olcu-3);
    margin-bottom: var(--olcu-10);
    padding: var(--olcu-5) var(--olcu-6);
    background: var(--yuzey);
    border-radius: var(--radius-m);
  }

  .bolum-atlama a {
    font-size: 0.78rem;
    color: var(--pas);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity var(--gecis);
  }

  .bolum-atlama a:hover { opacity: 0.7; }

  /* ── Contact loop page ── */
  .iletisim-sayfasi {
    padding-block: clamp(2rem, 6vw, 5rem);
    background: var(--kagit);
  }

  .iletisim-ic {
    max-width: var(--max-genislik);
    margin-inline: auto;
    padding-inline: var(--kenar);
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  @media (max-width: 760px) {
    .iletisim-ic { grid-template-columns: 1fr; }
  }

  .iletisim-bilgileri { display: flex; flex-direction: column; gap: var(--olcu-6); }
  .iletisim-bilgileri p { color: var(--sis); line-height: 1.65; }

  .iletisim-kalem {
    display: flex;
    flex-direction: column;
    gap: var(--olcu-2);
    padding: var(--olcu-5) var(--olcu-6);
    background: var(--yuzey);
    border-radius: var(--radius-m);
  }

  .iletisim-kalem-etiket {
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pas);
  }

  .iletisim-kalem-deger {
    font-size: 0.9rem;
    color: var(--murekkep);
  }

  .iletisim-kalem-alt {
    font-size: 0.75rem;
    color: var(--sis);
  }

  /* ── Active nav link (explicit class) ── */
  .gezinti-aktif {
    color: var(--pas) !important;
    background-color: rgba(255,255,255,0.07);
  }

  .mobil-gezinti-baglanti.gezinti-aktif { color: var(--pas); }

  /* ── Legal pages (privacy / terms) ── */
  .yasal-icerik {
    max-width: 780px;
  }

  .yasal-icerik h1 { margin-bottom: var(--olcu-4); }

  .yasal-icerik h2 {
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    margin-top: var(--olcu-10);
    margin-bottom: var(--olcu-3);
    color: var(--murekkep);
    padding-bottom: var(--olcu-2);
    border-bottom: 1px solid var(--sahil);
  }

  .yasal-icerik p { color: var(--sis); line-height: 1.75; }
  .yasal-icerik p + p { margin-top: var(--olcu-4); }

  .yasal-icerik ul {
    list-style: disc;
    margin-left: var(--olcu-6);
    margin-top: var(--olcu-3);
    display: flex;
    flex-direction: column;
    gap: var(--olcu-2);
  }

  .yasal-icerik ul li { color: var(--sis); font-size: 0.9rem; line-height: 1.65; }

  .yasal-tarih {
    font-size: 0.75rem;
    color: var(--sis);
    letter-spacing: 0.05em;
    margin-bottom: var(--olcu-10);
    display: block;
  }

  .yasal-iletisim-kutusu {
    margin-top: var(--olcu-10);
    padding: var(--olcu-6);
    background: var(--yuzey);
    border-radius: var(--radius-m);
    border-left: 3px solid var(--pas);
  }

  .yasal-iletisim-kutusu p {
    font-size: 0.88rem;
    color: var(--murekkep);
    line-height: 1.75;
    max-width: none;
  }

  /* ── Contact loop two-column layout ── */
  .bolum-blok-genis { padding-block: clamp(3rem, 7vw, 6rem); }

  .iletisim-izgara {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }

  @media (max-width: 800px) {
    .iletisim-izgara { grid-template-columns: 1fr; }
  }

  .iletisim-sol { display: flex; flex-direction: column; gap: var(--olcu-5); }
  .iletisim-sol > p { color: var(--sis); line-height: 1.7; }

  .iletisim-kart-dizisi {
    display: flex;
    flex-direction: column;
    gap: var(--olcu-3);
    margin-top: var(--olcu-2);
  }

  .iletisim-kart {
    padding: var(--olcu-4) var(--olcu-5);
    background: var(--yuzey);
    border-radius: var(--radius-m);
    display: flex;
    flex-direction: column;
    gap: var(--olcu-2);
    border: 1px solid var(--sahil);
  }

  .iletisim-kart-etiket {
    font-size: 0.63rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pas);
  }

  .iletisim-kart-deger {
    font-size: 0.88rem;
    color: var(--murekkep);
    line-height: 1.5;
  }

  /* ── Checkbox / consent row ── */
  .form-onay-satir {
    display: flex;
    gap: var(--olcu-3);
    align-items: flex-start;
    cursor: pointer;
  }

  .form-onay-satir input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    accent-color: var(--pas);
    cursor: pointer;
  }

  .form-onay-metin {
    font-size: 0.8rem;
    color: var(--sis);
    line-height: 1.55;
  }

  /* ── Three-column card grid used in afterlife-protocols ── */
  .uc-sutun { margin-top: var(--olcu-8); }

  .kart-dizisi-ic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--olcu-5);
  }

  @media (max-width: 860px) {
    .kart-dizisi-ic { grid-template-columns: 1fr 1fr; }
  }

  @media (max-width: 520px) {
    .kart-dizisi-ic { grid-template-columns: 1fr; }
  }

  /* ── Success / confirmation page ── */
  .basari-alani {
    min-height: 75dvh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .basari-ic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--olcu-5);
    text-align: center;
  }

  .basari-sinyal {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: var(--olcu-3);
  }

  .basari-halka {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--pas);
    animation: pulsa 2.5s ease-out infinite;
    opacity: 0;
  }

  .basari-halka-1 { animation-delay: 0s; }
  .basari-halka-2 { animation-delay: 0.7s; }
  .basari-halka-3 { animation-delay: 1.4s; }

  @keyframes pulsa {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  .basari-nokta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--pas);
  }

  .basari-baglanti-grubu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--olcu-4);
    margin-top: var(--olcu-4);
  }

  /* ── akim-satir: support both h3 and h4 inside ── */
  .akim-satir-icerik h3 { font-size: 0.9rem; margin-bottom: 2px; }

}

@layer states {
  .gizli { display: none !important; }
  .gorsel-gizli { visibility: hidden; opacity: 0; }
  .yukluyor { pointer-events: none; opacity: 0.6; }
}

@layer utilities {
  .metin-merkez { text-align: center; }
  .metin-ust { text-align: start; }
  .yuz-tam { width: 100%; }
  .bosluk-ust-8 { margin-top: var(--olcu-8); }
  .bosluk-ust-6 { margin-top: var(--olcu-6); }
  .bosluk-ust-4 { margin-top: var(--olcu-4); }
  .renk-pas { color: var(--pas); }
  .renk-sis { color: var(--sis); }
}