/* ==========================================================================
   19MBT - Make Better Things
   Statik prototip. Derleme adımı yok.

   Mimari wegrow.design'dan ölçülerek alındı:
     gövde koyu marka rengi -> 32px yuvarlak açık kabuk -> 30px beyaz paneller
     -> 24px pastel renk blokları. Menü yüzen pill. Butonlar 48px pill.
   Tipografi brief §10: Montserrat, H1 ExtraBold.
   Renkler MBT_logo_SON.pdf'ten ölçüldü.
   ========================================================================== */

:root {
  --plum:    #520345;
  --plum-d:  #3B0231;
  --blue:    #B9D6FE;
  --orange:  #FD6500;
  --cream:   #F7F4EE;
  --white:   #FFFFFF;

  --ink:      #520345;          /* açık zeminde metin */
  --ink-dim:  rgba(82, 3, 69, 0.66);
  --light:    #F7F4EE;          /* koyu zeminde metin */
  --light-dim: rgba(247, 244, 238, 0.68);
  --hair:     rgba(82, 3, 69, 0.14);
  --hair-l:   rgba(247, 244, 238, 0.20);

  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Referans: reveal opacity 400ms ease, hover 220ms ease */
  --t-hover:  220ms;
  --t-reveal: 400ms;

  --shell-pad: clamp(1.15rem, 4vw, 5rem);
  --gap:       clamp(1rem, 2vw, 1.5rem);
  --band:      clamp(3rem, 6vw, 5.5rem);

  --r-shell: 32px;
  --r-panel: 30px;
  --r-block: 24px;
  --r-media: 16px;

  /* Emil: yerleşik easing'ler zayıf */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

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

body {
  margin: 0;
  padding: 8px 8px 0;
  background: var(--plum);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--orange); color: var(--plum); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  padding: 0.9rem 1.4rem; background: var(--orange); color: var(--plum);
  font-weight: 700; border-radius: 0 0 14px 0;
}
.skip:focus { left: 8px; }

/* --------------------------------------------------------------------------
   Kabuk: gövde plum, içerik krem yuvarlak panelde
   -------------------------------------------------------------------------- */

.shell {
  background: var(--cream);
  border-radius: var(--r-shell);
  padding: 0 var(--shell-pad) var(--shell-pad);
  /* overflow: hidden KULLANMA: position:sticky olan menüyü bozar.
     Köşe kırpması gerektiren çocuklar kendi overflow'unu taşıyor. */
}

.panel {
  background: var(--white);
  border-radius: var(--r-panel);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.panel + .panel { margin-top: var(--gap); }

.block { border-radius: var(--r-block); padding: clamp(1.4rem, 2.6vw, 2.25rem); }
.block--blue   { background: var(--blue);   color: var(--plum); }
.block--orange { background: var(--orange); color: var(--plum); }
.block--plum   { background: var(--plum);   color: var(--light); }
.block--cream  { background: var(--cream);  color: var(--plum); }

.band { padding-block: var(--band); }

/* --------------------------------------------------------------------------
   Tipografi  (brief §10)
   -------------------------------------------------------------------------- */

.h1, .h2, .h3 { font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; text-wrap: balance; }

.h1 { font-size: clamp(3.1rem, 7.6vw, 6.75rem); }
.h2 { font-size: clamp(2.4rem, 5vw, 4.25rem); line-height: 1.0; }
.h3 { font-size: clamp(1.6rem, 2.7vw, 2.4rem); font-weight: 700; line-height: 1.06; }

.h4 { font-size: 1.2rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

.lead {
  font-size: clamp(1.2rem, 1.7vw, 1.6rem);
  line-height: 1.45;
  font-weight: 400;
  max-width: 40ch;
}

.copy { font-size: 1.15rem; line-height: 1.65; max-width: 54ch; }
.copy + .copy { margin-top: 1rem; }
.copy b, .copy strong { font-weight: 700; }

.dim { opacity: 0.7; }

.label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* --------------------------------------------------------------------------
   Butonlar  (referans: 48px, pill, 12x24 dolgu)
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 54px;
  padding: 0.85rem 1.75rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-hover) ease, color var(--t-hover) ease,
              border-color var(--t-hover) ease, transform 130ms var(--ease-out);
}

.btn svg { flex: none; transition: transform var(--t-hover) ease; }
/* Emil: basma geri bildirimi */
.btn:active { transform: scale(0.97); }

.btn--fill  { background: var(--plum);   color: var(--cream); }
.btn--pop   { background: var(--orange); color: var(--plum); }
.btn--line  { border: 1.5px solid var(--hair); color: var(--plum); }
.btn--light { background: var(--cream);  color: var(--plum); }

/* --------------------------------------------------------------------------
   Menü  (referans: yüzen pill, açık zemin)
   -------------------------------------------------------------------------- */

.nav { position: sticky; top: 8px; z-index: 100; padding-top: 8px; }

.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 84px;
  padding: 0.6rem 0.6rem 0.6rem 1.5rem;
  border-radius: 999px;
  background: rgba(247, 244, 238, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

/* Logo belirgin olmalı */
.nav__logo img { width: clamp(84px, 9vw, 116px); height: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(1.25rem, 2.2vw, 2.25rem); }
.nav__links a { font-size: 1.05rem; font-weight: 600; padding-block: 0.6rem; }
.nav__links a[aria-current='page'] { color: var(--orange); }

.nav__side { display: flex; align-items: center; gap: 0.9rem; }

/* --------------------------------------------------------------------------
   Dil anahtari

   Eskisi uc dili yan yana yaziyordu: 122px, ve dil basina ~41px buyuyordu.
   Alti dil olsa 244px ederdi, yan blok toplam 291px ve icinde "Let's Talk"
   butonu da var -> cubuk patlardi. Ayrica dokunma alanlari 35x45'ti (min 44).

   Yeni hali acilir bir liste: tetikleyici kac dil olursa olsun ayni
   genislikte kaliyor, liste asagi dogru uzuyor.
   -------------------------------------------------------------------------- */

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

.lang { position: relative; }

.lang__btn {
  display: flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0 0.7rem;        /* dokunma alani 44px */
  font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--plum);
  background: none; border: 1.5px solid transparent; border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              transform 160ms var(--ease-out);
}
.lang__btn:active { transform: scale(0.97); }   /* basma geri bildirimi */

@media (hover: hover) and (pointer: fine) {
  .lang__btn:hover { background: rgba(82, 3, 69, 0.06); }
}
.lang[data-open] .lang__btn { background: rgba(82, 3, 69, 0.08); border-color: var(--hair); }

.lang__chev {
  /* Acikken ok yukari doner: menunun acik oldugunu renkten bagimsiz soyler */
  transition: transform 200ms var(--ease-out);
  opacity: 0.55;
}
.lang[data-open] .lang__chev { transform: rotate(180deg); opacity: 1; }

.lang__menu {
  position: absolute; top: calc(100% + 0.5rem); right: 0;
  z-index: 10;
  min-width: 12.5rem;
  padding: 0.35rem;
  border-radius: 18px;
  border: 1px solid var(--hair);
  background: rgba(247, 244, 238, 0.94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 18px 44px rgba(59, 2, 49, 0.16);

  /* Hicbir sey yoktan var olmaz: scale(0) degil, 0.96'dan geliyor.
     Tetikleyiciye yaslandigi icin origin sag ust. */
  transform-origin: top right;
  transform: scale(0.96) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  /* Cikis girisden hizli: 120ms - 160ms */
  transition: opacity 120ms var(--ease-out),
              transform 120ms var(--ease-out),
              visibility 0s linear 120ms;
}

.lang[data-open] .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 160ms var(--ease-out),
              transform 160ms var(--ease-out),
              visibility 0s;
}

.lang__item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: 0 0.85rem;
  border-radius: 12px;
  font-size: 0.95rem; font-weight: 500;
  color: var(--plum);
  transition: background-color var(--t-hover) ease, transform 160ms var(--ease-out);
}
.lang__item:active { transform: scale(0.98); }
.lang__item i { font-style: normal; font-size: 0.75rem; font-weight: 700;
                letter-spacing: 0.1em; opacity: 0.4; }

@media (hover: hover) and (pointer: fine) {
  .lang__item:hover { background: rgba(82, 3, 69, 0.07); }
}
.lang__item:focus-visible { background: rgba(82, 3, 69, 0.07); }

.lang__item[aria-current='true'] { font-weight: 700; }
.lang__item[aria-current='true'] i { color: var(--orange); opacity: 1; }

/* Hareket azaltmada yalnizca sonme kalir, hareket kalkar */
@media (prefers-reduced-motion: reduce) {
  .lang__menu { transform: none; }
  .lang[data-open] .lang__menu { transform: none; }
  .lang__chev { transition: none; }
}



.nav__cta { display: none; }

.burger { display: none; position: relative; width: 48px; height: 48px; }
.burger span {
  position: absolute; left: 12px; width: 24px; height: 2px;
  background: var(--plum); border-radius: 2px;
  transition: transform 340ms var(--ease-out), opacity 180ms linear;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.burger span:nth-child(3) { top: 29px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Hero  (referans: tam kanama görsel + cam kart)
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88vh, 880px);
  display: flex;
  align-items: flex-end;
  margin-top: var(--gap);
  padding: clamp(1rem, 2.5vw, 2rem);
  border-radius: var(--r-panel);
  overflow: hidden;
  /* app.js dongu dikisinde videoyu %60 opakliga dusuruyor. Arka plan mor
     kalirsa bu dusus her dongude mor bir parlama oluyordu; yeni video safir,
     panel de safir olunca dusus sadece hafif bir kararma olarak okunuyor. */
  background: #070B14;
}

.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.hero__bg img,
.hero__bg video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) brightness(1.06); }
/* Iki kopya ust uste: app.js dongunun dikisinde birinden digerine geciyor. */
.hero__bg video {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 700ms linear;
}
.hero__bg video.on { opacity: 1; }
/* Bu klip zaten bizim icin kadrajlandi: olctugumuzde tasin merkezi karenin
   %69'unda duruyor ve sol ucte hicbir sey yok. Itmeye gerek yok; ustelik
   kaynak 1280x720, buyutmek gereksiz yere yumusatiyordu. */
.hero__bg video { transform: none; }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  /* Kart kalktı, metni artık perde taşıyor. Tam ekran bir örtü videoyu
     öldürüyordu; bunun yerine sadece metnin oturduğu sol alt köşede
     yoğunlaşan bir küre. Kayanın ve amber yarığın üstü açık kalıyor. */
  background:
    radial-gradient(120% 90% at 6% 92%,
      rgba(5, 8, 16, 0.92) 0%,
      rgba(5, 8, 16, 0.55) 38%,
      rgba(5, 8, 16, 0) 70%),
    linear-gradient(to top, rgba(5, 8, 16, 0.55) 0%, rgba(5, 8, 16, 0) 45%);
}

/* Cam kart kalktı. Kutu hero'nun %56'sını kaplıyor, videonun en iyi yeri
   (amber yarık) kenarda kalıyordu; üstelik mor cam ile safir/amber video iki
   ayrı renk dünyasıydı. Metni tutan şey artık filmin kendi hareketi:
   taş yarılıyor, içinden amber ışık çıkıyor. */
.hero__card {
  position: relative;
  width: min(100%, 52rem);
  margin-left: clamp(0.6rem, 1.6vw, 1.6rem);
  padding: clamp(0.4rem, 1vw, 1rem) 0
           clamp(0.6rem, 1.6vw, 1.4rem) clamp(1.4rem, 2.6vw, 2.4rem);
  color: var(--light);
}

/* Yarık: metin bloğunun sol kenarında duran amber çatlak */
.hero__card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg,
    rgba(253, 101, 0, 0) 0%, var(--orange) 14%,
    #FFCB94 48%, var(--orange) 84%, rgba(253, 101, 0, 0) 100%);
  box-shadow: 0 0 22px 1px rgba(253, 101, 0, 0.65),
              0 0 90px 16px rgba(253, 101, 0, 0.20);
}

.hero__card > * + * { margin-top: 1.1rem; }
/* Logo zaten menüde duruyor; kartta ikinci kez göstermek tekrar oluyordu.
   Markup'ta kalsın, geri almak tek satır. */
.hero__mark { display: none; }
.hero__card .lead { color: var(--light-dim); max-width: 30rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   Bölüm başlığı
   -------------------------------------------------------------------------- */

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.head .h2 { max-width: 20ch; }

/* --------------------------------------------------------------------------
   Renk bloğu ızgarası  (referans: pastel kartlar, kademeli)
   -------------------------------------------------------------------------- */

.blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.blocks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Kademeli hizalama: hepsi aynı hizada durmasın */
.blocks > *:nth-child(2) { margin-top: clamp(0.75rem, 2vw, 2rem); }
.blocks > *:nth-child(3) { margin-top: clamp(1.5rem, 4vw, 4rem); }

.block__mark {
  width: 56px; height: 56px;
  border-radius: 999px;
  border: 7px solid currentColor;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}
.block__mark--solid { background: currentColor; }
.block__mark--half  { border-width: 16px; }

.block__no {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: 0.7rem;
}
.block__no::after { content: ''; flex: 1; height: 1.5px; background: currentColor; opacity: 0.5; }

.block p { margin-top: 0.8rem; font-size: 1.1rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   İş  (referans: 2 sütun, büyük görsel, başlık solda çipler sağda)
   -------------------------------------------------------------------------- */

.work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 3rem) var(--gap); }

/* İş kartı: yatay görsel, köşede ok rozeti, hover'da görsel yakınlaşır */
.work__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-media);
  background: var(--blue);
  aspect-ratio: 4 / 3;
}

.work__media img { width: 100%; height: 100%; object-fit: cover; }

/* Kategori etiketi görselin üstünde */
.work__cat {
  position: absolute; top: 0.9rem; left: 0.9rem;
  padding: 0.4rem 0.9rem; border-radius: 999px;
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.8rem; font-weight: 600; color: var(--plum);
}

/* Ok rozeti: hover'da büyüyerek gelir */
.work__go {
  position: absolute; top: 0.9rem; right: 0.9rem;
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--orange); color: var(--plum);
  transform: scale(0.6); opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 220ms ease;
}

.work__item:hover .work__go { transform: none; opacity: 1; }

.work__foot { margin-top: 1.1rem; }
.work__foot .tags { margin-top: 0.7rem; }

/* Disiplin çipleri */
.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tag {
  padding: 0.35rem 0.85rem;
  border: 1.5px solid var(--hair);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

/* Boş yuva */
.slot {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3rem;
  padding: 1.25rem;
  border: 2px dashed rgba(82, 3, 69, 0.22);
  border-radius: var(--r-media);
  background: rgba(185, 214, 254, 0.35);
  aspect-ratio: 4 / 5;
}

.slot b { font-size: 1.05rem; font-weight: 700; }
.slot span { font-size: 0.8rem; opacity: 0.7; }

/* Filtreler */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: clamp(1.75rem, 3vw, 2.5rem); }
.filter {
  min-height: 40px; padding: 0.5rem 1.1rem;
  border: 1.5px solid var(--hair); border-radius: 999px;
  font-size: 0.95rem; font-weight: 600;
  transition: background var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}
.filter[aria-pressed='true'] { background: var(--plum); border-color: var(--plum); color: var(--cream); }
.work__item[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Hizmet listesi
   -------------------------------------------------------------------------- */

.list { border-top: 1.5px solid var(--hair); }
.list__item { border-bottom: 1.5px solid var(--hair); }

.list__btn {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
  width: 100%; padding-block: clamp(1rem, 1.8vw, 1.5rem); text-align: left;
  transition: color var(--t-hover) ease;
}
.list__btn h3 { font-size: clamp(1.5rem, 2.9vw, 2.4rem); font-weight: 800; letter-spacing: -0.025em; }

.list__sign { position: relative; width: 18px; height: 18px; flex: none; }
.list__sign::before, .list__sign::after {
  content: ''; position: absolute; background: currentColor;
  transition: transform 340ms var(--ease-out);
}
.list__sign::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.list__sign::after  { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.list__item[data-open='true'] .list__sign::after { transform: scaleY(0); }

.list__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-out); }
.list__item[data-open='true'] .list__panel { grid-template-rows: 1fr; }
.list__panel > div { overflow: hidden; }
.list__panel .tags { padding-bottom: clamp(1.1rem, 2vw, 1.75rem); }

/* --------------------------------------------------------------------------
   Sektörler ve bölgeler
   -------------------------------------------------------------------------- */

.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }

.sectors { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sectors a {
  padding: 0.6rem 1.15rem;
  border: 1.5px solid var(--hair);
  border-radius: 999px;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: background var(--t-hover) ease, color var(--t-hover) ease, border-color var(--t-hover) ease;
}

.regions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.regions li { padding: 0.45rem 0.95rem; border-radius: 999px; background: rgba(82,3,69,0.07); font-size: 0.85rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Vaka çalışması
   -------------------------------------------------------------------------- */

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.fact { padding: clamp(1rem, 2vw, 1.5rem); border-radius: var(--r-block); background: rgba(185,214,254,0.45); }
.fact dt { font-size: 0.75rem; font-weight: 600; opacity: 0.65; }
.fact dd { margin: 0.35rem 0 0; font-size: 1.25rem; font-weight: 700; }

.chapter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(1rem, 3vw, 3rem); padding-block: clamp(1.5rem, 3vw, 2.5rem); border-top: 1.5px solid var(--hair); }
.chapter h2 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 800; letter-spacing: -0.025em; }

.steps-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-radius: var(--r-block); overflow: hidden; }
.steps-row > div { background: var(--white); padding: clamp(1rem, 2vw, 1.4rem); }
.steps-row b { display: block; font-size: 0.8rem; font-weight: 700; opacity: 0.5; }
.steps-row span { display: block; margin-top: 0.4rem; font-size: 0.95rem; font-weight: 600; }

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form { display: grid; gap: 1.4rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-size: 1rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 1rem;
  border: 1.5px solid var(--hair); border-radius: 14px;
  background: var(--white); color: var(--ink);
  font-family: inherit; font-size: 1rem;
  transition: border-color 180ms var(--ease-out);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); }
.field__help { font-size: 0.82rem; opacity: 0.65; }
.field__error { font-size: 0.82rem; font-weight: 600; color: #B3260A; }


/* --------------------------------------------------------------------------
   Hakkimizda

   Eskiden sayfanin en buyuk ogesi (823px) stok bir supermarket fotografiydi:
   bulanik bir alisverisci.  Ajansla ilgisi yoktu ve en cok yer kaplayan sey
   en az sey soyleyen seydi.  Yerine markanin kendi goruntusu geldi ve tek
   basina degil, anlattigi blogun yanina yerlestirildi.
   -------------------------------------------------------------------------- */

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--gap);
  align-items: stretch;
}

.about-figure {
  margin: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: #070B14;
}
/* Kup kaynak karede cercevenin ortasinda kucuk duruyor; panelde nefes
   almasi icin degil, dolmasi icin hafifce yakinlastiriyoruz. */
.about-figure img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 48% 56%;
  transform: scale(1.18);
}

.about-pair { display: grid; gap: var(--gap); align-content: stretch; }
.about-pair .block { display: flex; flex-direction: column; justify-content: center; }

/* --------------------------------------------------------------------------
   19 ilke
   Liste doldurulunca cikar.  auto-fill: ilke sayisi degisirse izgara kendi
   kendine yeniden dagilir.
   -------------------------------------------------------------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.principle { display: flex; gap: 1rem; align-items: baseline; }

.principle__no {
  flex: none;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  /* Numaralar farkli genislikte olmasin: 01 ile 19 ayni kolona otursun */
  min-width: 2ch;
}

.principle__text { margin: 0; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Iletisim: yan blok
   Eskiden <dl> idi ve Studio/Regions ayni agirlikta gorunuyordu.  Artik
   e-posta tek basina one cikiyor, sosyal ikon sirasi footer'dakiyle ayni.
   -------------------------------------------------------------------------- */

.info { display: grid; gap: 1.75rem; }
.info__label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; opacity: 0.55;
  margin: 0 0 0.5rem;
}

.info__mail {
  position: relative; display: inline-block;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--plum);
  transition: transform 160ms var(--ease-out);
}
.info__mail::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -0.12em;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.info__mail:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .info__mail:hover::after { transform: scaleX(1); }
}
.info__mail:focus-visible::after { transform: scaleX(1); }

.info__regions { margin: 0; font-size: 1.1rem; font-weight: 500; line-height: 1.5; }

/* Acik zeminde sosyal ikonlar: footer'daki ile ayni olcu, ters renk */
.social { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; }
.social a {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  /* --hair (0.14 alfa) halkayi 1.33 kontrastta birakiyordu; arayuz siniri
     icin esik 3:1.  Beyaz zeminde hesapladik: 0.48 alfa 3.13 veriyor. */
  border: 1px solid rgba(82, 3, 69, 0.48);
  color: var(--ink-dim);
  transition: color var(--t-hover) ease, border-color var(--t-hover) ease,
              background-color var(--t-hover) ease, transform 160ms var(--ease-out);
}
.social a:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .social a:hover { color: var(--plum); background: var(--orange); border-color: var(--orange); }
}
.social a:focus-visible { color: var(--plum); background: var(--orange); border-color: var(--orange); }

/* --------------------------------------------------------------------------
   Ofisler
   auto-fit izgara: dorduncu ofis acilinca liste kendi kendine sariyor,
   CSS'e dokunmak gerekmiyor.
   -------------------------------------------------------------------------- */

.offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0; list-style: none;
}

.office {
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border-radius: var(--r-block);
  border: 1.5px solid var(--hair);
  background: var(--white);
}

.office__tag {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0 0 0.75rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.office__tag::before {
  content: ''; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}

.office__city { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; letter-spacing: -0.02em; }
.office__country { margin: 0.25rem 0 0; font-size: 0.95rem; font-weight: 500; color: var(--ink-dim); }

/* Merkez: yalnizca nokta amber.  Etiketin kendisi amber oldugunda beyaz
   uzerinde 2.98 kontrast veriyordu (11.5px kucuk metin, esik 4.5) ve amber
   beyazda bu esige hicbir tonda ulasmiyor.  Metin koyu kaliyor; zaten
   "Headquarters" yaziyor, yani ayrim renge bagli degil. */
.office--hq .office__tag::before { background: var(--orange); }

/* Henuz acilmamis ofis acik olanla ayni gorunmemeli.  Kesik cerceve ve ici
   bos nokta, metni okumadan once farki soyluyor. */
.office--soon {
  border-style: dashed;
  background: transparent;
}
.office--soon .office__tag::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.office--soon .office__city { opacity: 0.75; }

/* --------------------------------------------------------------------------
   Kapanış ve altbilgi
   -------------------------------------------------------------------------- */

.closer { text-align: left; }
.closer .h1 { max-width: 14ch; }
.closer .lead { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Footer

   Eskisi uc kolon link listesiydi: Navigate / Social / Language.  Her ajans
   sitesinde ayni sey, ve footer'in asil isi olan "size nasil ulasirim"
   sorusunun cevabi (hello@19mbt.com) hic yoktu -- ziyaretcinin iletisim
   sayfasina gitmesi gerekiyordu.

   Yeni duzen: solda marka, sagda tek bir buyuk e-posta baglantisi ve ikon
   sirasi.  Gezinti asagida yatay bir seride.  Ayirici cizginin ilk parcasi
   amber: hero kartindaki dikey catlagin yatiya yatmis hali.
   -------------------------------------------------------------------------- */

.foot {
  padding: clamp(1.75rem, 3vw, 2.5rem) var(--shell-pad) clamp(1.5rem, 2.5vw, 2rem);
  color: var(--light);
}

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.foot__mark { width: clamp(130px, 16vw, 190px); margin-bottom: 1.25rem; }
.foot__brand .label { margin-top: 1rem; }

/* Sag blok: sayfanin en altindaki tek eylem */
.foot__reach { justify-self: end; text-align: right; max-width: 24rem; }
.foot__kicker {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--orange);
  margin-bottom: 0.75rem;
}

.foot__mail {
  position: relative;
  display: inline-block;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--light);
  transition: transform 160ms var(--ease-out);
}
.foot__mail::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -0.15em;
  height: 2px; background: var(--orange);
  /* Altini cizgi tetikleyicinin solundan aciliyor; scale(0) degil scaleX,
     cunku cizginin kendisi zaten bir cizgi -- yoktan var olmuyor. */
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.foot__mail:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
  .foot__mail:hover::after { transform: scaleX(1); }
}
.foot__mail:focus-visible::after { transform: scaleX(1); }

.foot__reach .label { margin-top: 0.9rem; }

/* Sosyal: metin listesi degil, ikon sirasi */
.foot__social {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  list-style: none; padding: 0;
}
.foot__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;              /* dokunma alani */
  border-radius: 50%;
  /* --hair-l (0.20) halkayi 1.65 kontrastta birakiyordu; arayuz siniri icin
     esik 3:1.  Mor zeminde hesapladik: 0.40 alfa 3.02 veriyor. */
  border: 1px solid rgba(247, 244, 238, 0.40);
  color: var(--light-dim);
  transition: color var(--t-hover) ease,
              border-color var(--t-hover) ease,
              background-color var(--t-hover) ease,
              transform 160ms var(--ease-out);
}
.foot__social a:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
  .foot__social a:hover {
    color: var(--plum); background: var(--orange); border-color: var(--orange);
  }
}
.foot__social a:focus-visible {
  color: var(--plum); background: var(--orange); border-color: var(--orange);
}

/* Ayirici: solda amber baslayip sicak olmayan hairline'a geciyor */
.foot__rule {
  height: 1px;
  background: linear-gradient(90deg,
    var(--orange) 0, var(--orange) 72px,
    rgba(247, 244, 238, 0.20) 148px, rgba(247, 244, 238, 0.20) 100%);
}

.foot__base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem;
  justify-content: space-between; align-items: center;
  padding-top: 1.25rem;
}

.foot__nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; }
.foot__nav a {
  padding-block: 0.4rem;
  font-size: 1.05rem; font-weight: 600;
}

.foot__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.8rem; opacity: 0.6; }

.foot__line {
  margin-top: 1rem;
  font-size: 0.8rem;
  /* 0.45'te kontrast 3.50 idi, kucuk metin esigi 4.5.  0.62'de olcum 4.58. */
  opacity: 0.62;
}

/* --------------------------------------------------------------------------
   Hero girişi  (tek animasyon; kaydırma reveal'i yok)
   -------------------------------------------------------------------------- */

@keyframes lift { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.hero__card { animation: cardIn 620ms var(--ease-out) backwards; }
@keyframes cardIn { from { opacity: 0; transform: translateY(24px) scale(0.985); } to { opacity: 1; transform: none; } }

/* Yarık açılışı: çatlak ortadan yukarı-aşağı doğru yarılıyor, metin sonra geliyor */
@keyframes seamOpen { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.hero__card::before {
  transform-origin: 50% 50%;
  animation: seamOpen 900ms var(--ease-out) 100ms backwards;
}

.hero__card > * { animation: lift 520ms var(--ease-out) backwards; }
.hero__card > *:nth-child(1) { animation-delay: 140ms; }
.hero__card > *:nth-child(2) { animation-delay: 210ms; }
.hero__card > *:nth-child(3) { animation-delay: 280ms; }
.hero__card > *:nth-child(4) { animation-delay: 350ms; }

/* Hero görseli yavaşça yakınlaşır: sahneyi canlı tutar, dikkat çalmaz */
@keyframes heroDrift { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__bg img { animation: heroDrift 2400ms var(--ease-out) backwards; }

/* ------------------------------------------------------------------------
   Kaydırma ile beliren öğeler
   Referans ölçümü: opacity 400ms ease + hafif yukarı kayma.
   Yalnızca bölüm ve kart düzeyinde; her metne uygulanmaz.
   ------------------------------------------------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-reveal) ease, transform var(--t-reveal) ease;
  will-change: transform, opacity;
}

[data-reveal].in { opacity: 1; transform: none; }

[data-reveal][data-d='1'] { transition-delay:  70ms; }
[data-reveal][data-d='2'] { transition-delay: 140ms; }
[data-reveal][data-d='3'] { transition-delay: 210ms; }
[data-reveal][data-d='4'] { transition-delay: 280ms; }

/* Animasyon bitince will-change kalkmalı, yoksa katman boşuna açık kalır */
[data-reveal].done { will-change: auto; }

/* Sayı sayacı ve açılır liste satırları */
.list__item { transition: background var(--t-hover) ease; }

/* --------------------------------------------------------------------------
   Hover  (dokunmatikte takılmasın diye kapı ardında)
   -------------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn--fill:hover  { background: var(--orange); color: var(--plum); }
  .btn--pop:hover   { background: var(--plum);   color: var(--cream); }
  .btn--line:hover  { background: var(--plum);   border-color: var(--plum); color: var(--cream); }
  .btn--light:hover { background: var(--orange); }
  .btn:hover svg    { transform: translateX(3px); }

  .nav__links a:hover { color: var(--text); }
  .lang a:hover { opacity: 1; }
  .list__btn:hover { color: var(--orange); }
  .filter:hover { border-color: var(--plum); }
  .sectors a:hover { background: var(--plum); border-color: var(--plum); color: var(--cream); }
  .work__item:hover .work__media img { transform: scale(1.03); }
  .foot__nav a:hover { color: var(--orange); }
}

/* --------------------------------------------------------------------------
   Duyarlı
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .blocks, .blocks--4, .facts, .steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .chapter, .foot__top, .about-split { grid-template-columns: 1fr; }
  /* Tek kolona dusunce gorsel kendi yuksekligini kaybediyor (stretch kalkiyor);
     oran veriyoruz ki serit gibi degil, gorsel gibi dursun.  Dar kutuda
     masaustundeki yakinlastirma kupun yarisini kirpiyordu: burada kalkiyor. */
  .about-figure { aspect-ratio: 16 / 10; }
  .about-figure img { transform: none; object-position: center; }
  .blocks > *:nth-child(2), .blocks > *:nth-child(3) { margin-top: 0; }
}

@media (max-width: 760px) {
  body { padding: 6px 6px 0; }

  .nav__links {
    position: fixed; inset: 0;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 0.35rem; padding: 1.5rem;
    background: var(--cream);
    transform: translateY(-101%);
    transition: transform 420ms var(--ease-out);
    z-index: 1;
  }
  body.menu-open .nav__links { transform: none; }
  .nav__links a { font-size: clamp(2rem, 9vw, 2.75rem); font-weight: 800; letter-spacing: -0.03em; }

  /* backdrop-filter, position:fixed çocuklar için kapsayıcı blok yaratıyor.
     Mobilde kaldırılmazsa açılır menü viewport'a değil çubuğa hizalanır. */
  .nav__bar {
    position: relative;
    min-height: 72px;
    padding-left: 1rem;
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .nav__logo, .nav__side { position: relative; z-index: 2; }
  .burger { display: block; }
  .nav__side .btn { display: none; }
  .nav__cta { display: block; color: var(--orange); }

  /* 72vh'de kart hero'nun neredeyse tamamini kapliyordu, videodan sadece
     kenarda birkac piksel goruluyordu. Yukarida videoya nefes birakiyoruz. */
  .hero { min-height: 86vh; }
  /* Dar ekranda metin blogu genisligin tamamini kapliyor; kose kuresi yerine
     asagidan yukari duz perde daha guvenli okunuyor. */
  /* Olctuk: eski egride baslik en parlak pikselin uzerinde 2.0-2.5:1 kontrasta
     dusuyordu (buyuk metin icin esik 3:1) ve bu her klipte oluyordu, sadece
     kristalde degil. Asagidaki egri uc klipte de 3.2-3.9:1 veriyor; daha agir
     bir perde gereksiz yere videoyu karartiyordu. */
  .hero__bg::after {
    background: linear-gradient(to top,
      rgba(5, 8, 16, 0.94) 0%, rgba(5, 8, 16, 0.74) 34%,
      rgba(5, 8, 16, 0.22) 72%, rgba(5, 8, 16, 0.02) 100%);
  }
  /* Dar ekranda cover kirpmasi zaten cok yakinlastiriyor, ustune buyutmuyoruz.
     Ama kirpma karenin ortasini tutuyor ve tas %69'da duruyor -> telefonda
     tas tamamen disarida kaliyordu, ekranda sadece gri kaya vardi.
     Olctuk: 341px'lik kutuda cizilen genislik 1290, tasma 949; pencereyi
     tasin uzerine ortalamak icin object-position %76 gerekiyor. */
  .hero__bg video { transform: none; object-position: 76% center; }

  .work, .work--all, .blocks, .blocks--4, .facts, .steps-row, .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blocks, .facts, .steps-row, .form__row { grid-template-columns: 1fr; }
  /* Dar ekranda marka ve iletisim alt alta; iletisim bloguu sola yasliyoruz. */
  .foot__top { grid-template-columns: 1fr; }
  .foot__reach { justify-self: start; text-align: left; max-width: none; }
  .foot__social { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Hareket azaltma tercihinde her şey sabit gelir */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__card, .hero__card::before, .hero__card > *, .hero__bg img { animation: none !important; }
}

/* Hero başlığı: kart kalkınca kutu sınırı da kalktı, başlık büyüyebildi.
   1440'ta 89px, iki satır; CTA'lar hâlâ ekranda. */
.hero .h1 {
  font-size: clamp(2.8rem, 6.2vw, 5.6rem);
  line-height: 1.0;
  letter-spacing: -0.032em;
}

/* ==========================================================================
   Etkileşim katmanı
   ========================================================================== */

/* --- Sayaç şeridi -------------------------------------------------------- */

.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

.count { padding: clamp(1.25rem, 2.4vw, 2rem); border-radius: var(--r-block); background: var(--cream); }
.count b {
  display: block;
  font-size: clamp(2.6rem, 5vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.count span { display: block; margin-top: 0.5rem; font-size: 0.95rem; font-weight: 600; opacity: 0.65; }

/* --- Marka şeridi (sayfada tek marquee) ---------------------------------- */

.strip { overflow: hidden; padding-block: clamp(1rem, 2vw, 1.5rem); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip__track { display: flex; gap: clamp(2rem, 4vw, 4rem); width: max-content; animation: slide 38s linear infinite; }
.strip:hover .strip__track { animation-play-state: paused; }
.strip__track span { font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-weight: 700; letter-spacing: -0.02em; opacity: 0.45; white-space: nowrap; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Vaka çalışması düzeni ---------------------------------------------- */

.case-hero { position: relative; border-radius: var(--r-panel); overflow: hidden; aspect-ratio: 16 / 9; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; }

.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.case-grid figure { margin: 0; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 4 / 3; background: var(--blue); }
.case-grid img { width: 100%; height: 100%; object-fit: cover; }
.case-grid--wide { grid-template-columns: 1fr; }
.case-grid--wide figure { aspect-ratio: 16 / 9; }

@media (max-width: 760px) {
  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .strip__track { animation: none; }
}

/* --------------------------------------------------------------------------
   Marka dünyası bandı  (brief §12)
   Tam genişlik video şeridi, üzerinde tek satır marka ifadesi.
   Panel ritmini kırar ve ana sayfaya ikinci bir hareket anı verir.
   -------------------------------------------------------------------------- */

.vband {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #080b12;
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
}

.vband video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Video döngüye uygun üretildi: son kare ilk kareyle eşleşiyor, dikiş
     farkı normal kare hareketinin 1.3 katı. Ek numaraya gerek yok. */
  opacity: 0;
  transition: opacity 400ms ease;
}

.vband::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Perde artık safir görsele göre: nötr koyu lacivert, erik değil. Görsel
     kendisi zaten koyu olduğu için sol tarafta metni taşıyacak kadar tutuyor,
     sağ tarafta taş ve amber ışık açıkta kalıyor. */
  background:
    linear-gradient(100deg,
      rgba(6, 9, 16, 0.86) 0%,
      rgba(6, 9, 16, 0.62) 46%,
      rgba(6, 9, 16, 0.18) 74%,
      rgba(6, 9, 16, 0.00) 100%);
}

/* Başlık banda yayılıyor: dar sütunda alt alta yığılması kötü duruyordu.
   ch birimi üst öğenin font boyutuna göre hesaplandığı için sabit ölçü. */
.vband__text { position: relative; z-index: 1; color: var(--light); max-width: 64rem; }
/* Slogan: iki satır, bandın en büyük öğesi. Satır sonu HTML'de sabit,
   text-wrap: balance onunla çakışacağı için kullanılmıyor. */
.vband__slogan {
  color: var(--light);
  font-size: clamp(1.65rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.vband__text p {
  margin-top: 1.1rem;
  color: var(--light-dim);
  font-size: clamp(1.1rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  max-width: 38rem;
}

@media (max-width: 760px) {
  .vband { aspect-ratio: 4 / 5; align-items: flex-end; padding: 1.25rem; }
  .vband::after {
    background: linear-gradient(to top, rgba(6, 9, 16, 0.92) 38%, rgba(6, 9, 16, 0.30));
  }
}

/* --------------------------------------------------------------------------
   Tam genişlik buton  (referans: 1280x91, radius pill, metin ortada)
   İş ızgarasının altında tek başına duruyor; panelin kenarlarına kadar
   uzandığı için bölümü kapatan güçlü bir hareket oluyor.
   -------------------------------------------------------------------------- */

.btn--wide {
  display: flex;
  width: 100%;
  min-height: 88px;
  justify-content: center;
  padding: 1.5rem 2rem;
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

@media (max-width: 760px) {
  .btn--wide { min-height: 68px; padding: 1.1rem 1.5rem; }
}

/* --------------------------------------------------------------------------
   Bildiri bloğu
   Beyaz panel ritmini kırar. Başlık bölümün tamamını taşır; yanına
   paragraf konmaz, altına kısa bir satır ve disiplin şeridi gelir.
   -------------------------------------------------------------------------- */

.say { padding: clamp(1.75rem, 3.6vw, 3.25rem) clamp(1.5rem, 4vw, 4rem); }

.say__head {
  font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.03em;
  max-width: 24ch;
}

.say__sub {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.35vw, 1.3rem);
  line-height: 1.55;
  max-width: 46ch;
  opacity: 0.72;
}

/* Disiplin şeridi
   Fotoğraf kartı yerine obje: orionix.framer.website'de her hizmetin yanında
   kutusuz, zeminde süzülen bir 3B obje var. Aynı yaklaşım burada bölümü
   bantdaki videoya bağlıyor - objeler o videonun malzemesiyle üretildi.
   Dikey saç teli çizgileri dört disiplini "tek düşünce biçimi"ne bağlıyor. */
.disciplines {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.25rem);
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  padding-top: clamp(1.1rem, 2vw, 1.6rem);
  border-top: 1px solid var(--hair-l);
}

.disc { position: relative; }

/* Sahne: tek bir oyulmuş taş ikon, zemine oturmadan duruyor. Kutu yok;
   arkadaki yumuşak ışık taşı erik zeminden ayırıyor. */
/* Sahne: arka plan silindi, taş doğrudan erik zeminde duruyor. Kesim sırasında
   nesnenin etrafındaki amber parıltı da gittiği için onu drop-shadow ile geri
   veriyoruz; ikinci gölge taşı zeminden ayırıyor. */
.disc__stage {
  position: relative;
  margin: 0 0 clamp(0.5rem, 1vw, 0.75rem);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}

.disc__stage img {
  width: 86%;
  height: auto;
  /* Emil: transform ve opacity dışına çıkmıyoruz — filter de kompozit
     katmanda kalıyor, layout'a dokunmuyor. */
  transform: translateZ(0);
  filter:
    drop-shadow(0 0 34px rgba(253, 101, 0, 0.30))
    drop-shadow(0 18px 34px rgba(20, 0, 16, 0.55));
  transition: transform 460ms var(--ease-out), filter var(--t-hover) ease;
}

/* Taşlar zeminden kesildiği için havada duruyorlar: yavaş süzülme ve içeriden
   gelen ışığın nefes alması bunu bir duruşa çeviriyor. Dördü aynı anda
   hareket etmesin diye her biri --i ile farklı fazda başlıyor. */
@media (prefers-reduced-motion: no-preference) {
  .disc__stage img {
    animation:
      disc-float 7.5s ease-in-out infinite,
      disc-glow 5.5s ease-in-out infinite;
    animation-delay:
      calc(var(--i) * -1.9s),
      calc(var(--i) * -1.3s);
  }
}

@keyframes disc-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -11px, 0); }
}

@keyframes disc-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 30px rgba(253, 101, 0, 0.26))
      drop-shadow(0 18px 34px rgba(20, 0, 16, 0.55));
  }
  50% {
    filter:
      drop-shadow(0 0 48px rgba(253, 101, 0, 0.44))
      drop-shadow(0 22px 38px rgba(20, 0, 16, 0.48));
  }
}

.disciplines h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.disciplines p { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.5; opacity: 0.66; }

/* Dokunmatikte :hover yanlış tetikleniyor. */
@media (hover: hover) and (pointer: fine) {
  .disc:hover .disc__stage img {
    /* Üzerine gelince süzülme durur, taş sabitlenip öne çıkar. */
    animation-play-state: paused, paused;
    transform: translate3d(0, -9px, 0) scale(1.04);
    filter:
      drop-shadow(0 0 52px rgba(253, 101, 0, 0.5))
      drop-shadow(0 26px 42px rgba(20, 0, 16, 0.6));
  }
}

/* Beliriş: dördü aynı anda gelmesin, 70ms arayla. */
.disciplines .disc {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity var(--t-reveal) var(--ease-out),
              transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i) * 70ms);
}

.say.in .disc { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .disciplines .disc { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.25rem; }
  /* Iki sutunda kare sahne 388px'e cikiyor ve bolumu gereksiz uzatiyordu. */
  .disc__stage { max-width: 230px; margin-right: auto; }
}

@media (max-width: 520px) {
  /* Tek sütunda obje kareyi doldurup bölümü gereksiz uzatıyor:
     obje sola, yazı sağa. */
  .disciplines { grid-template-columns: 1fr; row-gap: 1.25rem; }
  .disc {
    display: grid;
    grid-template-columns: 96px 1fr;
    column-gap: 1.25rem;
    align-items: center;
    padding-top: 1rem;
  }
  .disc__stage { margin: 0; grid-row: 1 / span 2; }
  .disciplines h3, .disciplines p { grid-column: 2; }
}

/* ==========================================================================
   Çerez onayı
   Avrupa kuralı: reddetmek kabul etmek kadar kolay olmalı. Bu yüzden iki
   buton birebir aynı görünüyor - biri turuncu diğeri soluk değil. "Choose"
   düz bir bağlantı, çünkü bir karar değil bir kapı.
   ========================================================================== */

.cc {
  position: fixed;
  /* Hero kartı sol altta duruyor; banner solda olunca başlığı kapatıyordu. */
  right: max(16px, 2vw);
  bottom: max(16px, 2vw);
  z-index: 60;
  width: min(calc(100vw - 32px), 30rem);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border-radius: var(--r-block);
  border: 1px solid rgba(247, 244, 238, 0.16);
  background: rgba(45, 1, 37, 0.94);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  color: var(--light);
  box-shadow: 0 18px 50px rgba(20, 0, 16, 0.45);

  /* Emil: scale(0) yok. Aşağıdan gelir, çıkışı da aynı yolu izler. */
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}

.cc.is-in { opacity: 1; transform: none; }

.cc__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.cc__title:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

.cc__text {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--light-dim);
}

.cc__text a { color: var(--light); text-decoration: underline; text-underline-offset: 3px; }

.cc__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.15rem;
}

.cc__acts .btn { flex: 1 1 9rem; justify-content: center; }

.cc__more {
  flex: none;
  padding: 0.5rem 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--light-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cc__more:hover { color: var(--light); }

.cc__panel {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair-l);
}

.cc__row {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.45;
  cursor: pointer;
}

.cc__row input { margin-top: 0.2rem; flex: none; accent-color: var(--orange); }
.cc__row input:disabled { cursor: default; }
/* Devre disi satiri ayrica soluklastirinca kontrast 3.99'a dusuyordu (4.5
   gerekiyor). "Always on." ifadesi ve pasif kutucuk zaten anlami tasiyor. */
.cc__row strong { display: block; font-weight: 700; }
.cc__row span { color: var(--light-dim); }
.cc__row strong { color: var(--light); }

.cc__panel .btn { width: 100%; justify-content: center; margin-top: 0.35rem; }

@media (max-width: 560px) {
  .cc { left: 8px; right: 8px; bottom: 8px; width: auto; }
  .cc__acts .btn { flex: 1 1 100%; }
  .cc__more { width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cc { transition: opacity 160ms ease; transform: none; }
  .cc.is-in { transform: none; }
}

/* Footer yasal satırı */
.foot__legal { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.foot__legal a { color: inherit; opacity: 0.7; }
.foot__legal a:hover { opacity: 1; }

/* ==========================================================================
   Yasal metin sayfası
   ========================================================================== */

/* max-width paneli daraltiyordu; beyaz kart diger sayfalardaki gibi tam
   genislikte kalsin, olcuyu icerideki metin tutsun. */
.legal > * { max-width: 62ch; }
.legal h2 {
  margin: clamp(2rem, 3.5vw, 2.75rem) 0 0.6rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.legal h2:first-child { margin-top: 0; }
.legal p { margin: 0 0 0.9rem; line-height: 1.65; }
.legal ul { margin: 0 0 0.9rem; padding-left: 1.1rem; }
.legal li { margin-bottom: 0.55rem; line-height: 1.6; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: rgba(82, 3, 69, 0.08);
  font-size: 0.9em;
}

/* Tablo dar ekranda taşıyordu. */
.legal__table { overflow-x: auto; margin: 0 0 0.9rem; }
.legal table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.93rem; }
.legal th, .legal td {
  padding: 0.7rem 0.9rem 0.7rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hair);
}
.legal th { font-weight: 700; white-space: nowrap; }