/* =====================================================================
   M8 CREATIVE — style.css
   ---------------------------------------------------------------------
   ÖLÇÜ SİSTEMİ: Tasarımlar masaüstünde 1586px, mobilde 941px genişlikte
   çizildi. "--u" = tasarımdaki 1px. Yani calc(var(--u) * 120) yazınca
   tasarımdaki 120px'i her ekranda orantılı olarak verir. Sahne
   görsellerindeki nesneler bu sayede metinlerle hep hizalı kalır.
   Okunabilirlik için yazılarda max(…px, …) ile alt sınır var.
   ===================================================================== */

/* Montserrat (değişken font, 100–900) — siteye gömülü, Google'a bağlanmaz. Lisans: SIL OFL */
@font-face {
  font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../assets/fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("../assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations"), url("../assets/fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Marka renkleri */
  --cream: #FDFAEF;          /* sahne fonlarıyla birebir aynı ton */
  --cream-brand: #FFFCE8;
  --cream-2: #F4EEDD;
  --navy: #153084;
  --navy-ink: #0E2470;
  --navy-dark: #132B6B;      /* footer */
  --blue-text: #1C3DBF;      /* alt sayfa açıklama metinleri */
  --maroon: #750000;
  --maroon-hover: #8E0A0A;
  --red: #B3121B;
  --line-soft: rgba(21, 48, 132, .22);

  /* Fontlar — başlık fontunu değiştirmek istersen sadece burayı değiştir */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Sayfa geneli ölçü birimi (sahne dışı bölümler için) */
  --u: calc(min(100vw, 1920px) / 1586);
  --hh: max(64px, calc(var(--u) * 87));   /* header yüksekliği */
  --gx: calc(var(--u) * 76);               /* yan boşluk */
}
@media (max-width: 899px) {
  :root {
    --u: calc(100vw / 941);
    --hh: max(64px, calc(var(--u) * 107));
    --gx: max(18px, calc(var(--u) * 68));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hh); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--cream);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899px) { .only-desktop { display: none !important; } }

/* =====================================================================
   TİPOGRAFİ
   ===================================================================== */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -.035em;
  line-height: .95;
}
.eyebrow {
  font-weight: 700;
  font-size: max(12px, calc(var(--u) * 16));
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow .navy { color: var(--navy); }
.eyebrow .sep { margin: 0 .6em; }
.num { color: var(--red); font-weight: 700; font-size: max(13px, calc(var(--u) * 19)); letter-spacing: .02em; }
.lead { font-weight: 500; color: var(--navy); line-height: 1.25; }

/* =====================================================================
   BUTONLAR
   ===================================================================== */
.btn {
  --h: 58;
  display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--u) * 26);
  height: max(46px, calc(var(--u) * var(--h)));
  padding: 0 max(18px, calc(var(--u) * 32));
  border: 2px solid transparent;
  border-radius: max(5px, calc(var(--u) * 6));
  font-weight: 700;
  font-size: max(15px, calc(var(--u) * 20));
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg.arrow-r { transform: translateX(5px); }
.btn--primary { background: var(--maroon); color: #fff; }
.btn--primary:hover { background: var(--maroon-hover); }
.btn--ghost { border-color: var(--navy); color: var(--navy); background: rgba(255, 255, 255, .5); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--outline { border-color: var(--red); color: var(--maroon); background: rgba(255, 255, 255, .35); }
.btn--outline:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.btn:active { transform: translateY(1px); }

.link-back, .link-arrow {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 26);
  color: var(--navy); font-weight: 500; font-size: max(15px, calc(var(--u) * 21));
}
.link-back svg, .link-arrow svg { width: 1.4em; height: 1.4em; transition: transform .25s var(--ease); }
.link-back:hover svg { transform: translateX(-5px); }
.link-arrow:hover svg { transform: translateX(5px); }

/* =====================================================================
   HEADER
   ===================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--hh);
  background: rgba(253, 250, 239, .93);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(21, 48, 132, .14);
}
.hdr__in { height: 100%; display: flex; align-items: center; padding: 0 var(--gx) 0 calc(var(--u) * 78); }
.logo { display: inline-flex; color: #000; }
.logo svg { height: max(46px, calc(var(--u) * 64)); width: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: calc(var(--u) * 36); }
.nav__link { position: relative; font-weight: 700; font-size: max(14px, calc(var(--u) * 16)); color: var(--navy); }
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav .btn { --h: 52; min-width: calc(var(--u) * 135); font-size: max(14px, calc(var(--u) * 16)); margin-left: calc(var(--u) * 12); border-radius: 8px; }
.hdr__cta, .burger { display: none; }

@media (max-width: 899px) {
  .hdr__in { padding: 0 var(--gx) 0 var(--gx); }
  .logo svg { height: max(44px, calc(var(--u) * 70)); }
  .hdr__cta { display: inline-flex; --h: 64; margin-left: auto; min-width: 0; padding: 0 max(18px, calc(var(--u) * 46)); font-size: max(15px, calc(var(--u) * 26)); border-radius: 8px; }
  .burger {
    display: grid; place-items: center; width: 48px; height: 48px; margin-left: max(10px, calc(var(--u) * 30)); margin-right: -8px;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .burger span { display: block; width: 32px; height: 3px; background: var(--navy); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
  .burger span + span { margin-top: -30px; }
  .burger { gap: 0; grid-template-rows: repeat(3, 9px); align-content: center; }
  .burger span + span { margin-top: 0; }
  .burger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .burger.is-open span:nth-child(2) { opacity: 0; }
  .burger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  .nav {
    position: fixed; top: var(--hh); left: 0; right: 0; bottom: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gx) 40px;
    background: var(--cream);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav__link { font-size: 26px; font-weight: 800; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
  .nav__link::after { display: none; }
  .nav .btn { margin: 28px 0 0; height: 56px; font-size: 18px; }
  body.menu-open { overflow: hidden; }
}

/* =====================================================================
   SAHNE ÇERÇEVESİ (frame)
   Arka planda yazısız sahne, üstünde gerçek HTML içerik.
   ===================================================================== */
.frame {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  background: var(--cream);
}
.frame__bg { position: absolute; inset: 0 0 auto 0; z-index: 0; pointer-events: none; }
.frame__bg img { width: 100%; height: auto; user-select: none; }
.frame__in {
  --u: calc(100cqw / 1586);
  position: relative; z-index: 1;
  min-height: calc(var(--u) * var(--fh, 992));
  padding: 0 var(--gx) 0 calc(var(--u) * 76);
}
@media (max-width: 899px) {
  .frame__in {
    --u: calc(100cqw / 941);
    --gx: max(18px, calc(var(--u) * 68));
    min-height: calc(var(--u) * var(--fhm, 1672));
    padding: 0 var(--gx);
  }
  /* Mobilde bazı sahnelerin alt kısmı yumuşakça kaybolur, nesneler HTML içinde akışa girer */
  .frame--fade .frame__bg img {
    -webkit-mask-image: linear-gradient(#000 var(--fade-a, 25%), transparent var(--fade-b, 30%));
    mask-image: linear-gradient(#000 var(--fade-a, 25%), transparent var(--fade-b, 30%));
  }
}
.abs { position: absolute; }

/* =====================================================================
   01 · HERO
   ===================================================================== */
.frame--hero { --fh: 880; --fhm: 1510; }
.hero__text { position: absolute; left: calc(var(--u) * 75); top: calc(var(--u) * 158); width: calc(var(--u) * 520); }
.hero__title { font-size: max(44px, calc(var(--u) * 90)); line-height: .9; }
.hero__tag { margin-top: calc(var(--u) * 30); font-size: max(22px, calc(var(--u) * 41)); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; }
.hero__services { margin-top: calc(var(--u) * 22); font-size: max(14px, calc(var(--u) * 21)); letter-spacing: .04em; line-height: 1.45; }
.hero__services .dot { margin: 0 .35em; }
.hero__actions { display: flex; gap: calc(var(--u) * 14); margin-top: calc(var(--u) * 26); }
.hero__actions .btn { padding: 0 calc(var(--u) * 26); font-size: max(15px, calc(var(--u) * 18)); gap: calc(var(--u) * 20); }

/* Slider — sahnedeki beyaz panelin içine oturur */
.screen {
  position: absolute;
  left: calc(var(--u) * 620); top: calc(var(--u) * 106);
  width: calc(var(--u) * 843); height: calc(var(--u) * 607);
  clip-path: polygon(0 14.2%, 100% 0, 100% 100%, 0 96.2%);
}
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .9s var(--ease); }
.slide.is-active { opacity: 1; }
.slide img, .slide video { width: 100%; height: 100%; object-fit: cover; }
.slider-nav { position: absolute; display: flex; align-items: center; gap: calc(var(--u) * 26); left: calc(var(--u) * 1380); top: calc(var(--u) * 624); z-index: 3; }
.slider-nav[hidden] { display: none; }
.dots { display: flex; gap: max(8px, calc(var(--u) * 10)); }
.dot-btn { width: max(10px, calc(var(--u) * 12)); height: max(10px, calc(var(--u) * 12)); padding: 0; border-radius: 50%; border: 1.5px solid var(--navy); background: transparent; cursor: pointer; }
.dot-btn.is-active { background: var(--navy); }
.arrow-btn { display: none; }

@media (max-width: 899px) {
  .hero__text { position: relative; left: auto; top: auto; width: auto; padding-top: max(calc(var(--u) * 140), calc(var(--hh) + 14px)); }
  .hero__title { font-size: max(40px, calc(var(--u) * 104)); }
  .hero__tag { margin-top: calc(var(--u) * 14); font-size: max(18px, calc(var(--u) * 44)); }
  .hero__services { margin-top: calc(var(--u) * 20); font-size: max(13px, calc(var(--u) * 28)); }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 26); }
  .hero__actions .btn { height: max(44px, calc(var(--u) * 80)); }
  .hero__actions .btn { --h: 80; padding: 0 8px; gap: 10px; font-size: max(14px, calc(var(--u) * 31)); }
  .screen {
    left: calc(var(--u) * 152); top: calc(var(--u) * 846);
    width: calc(var(--u) * 654); height: calc(var(--u) * 410);
    clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 98.8%);
  }
  .slider-nav { left: 50%; transform: translateX(-50%); top: calc(var(--u) * 1404); gap: calc(var(--u) * 58); }
  .arrow-btn {
    display: grid; place-items: center;
    width: max(40px, calc(var(--u) * 60)); height: max(40px, calc(var(--u) * 60));
    border-radius: 50%; border: 1.5px solid var(--navy); background: rgba(253, 250, 239, .55); color: var(--navy); cursor: pointer; padding: 0;
  }
  .arrow-btn svg { width: 45%; height: 45%; }
  .dot-btn { width: max(12px, calc(var(--u) * 20)); height: max(12px, calc(var(--u) * 20)); }
}
.hero-next { display: none; }
@media (max-width: 899px) {
  .hero-next {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: calc(var(--u) * 28) 0 calc(var(--u) * 20);
    font-weight: 800; font-size: max(24px, calc(var(--u) * 46)); color: var(--navy); letter-spacing: -.02em;
  }
  .hero-next svg { width: 28px; height: 28px; animation: nudge 1.8s var(--ease) infinite; }
}
@keyframes nudge { 50% { transform: translateY(6px); } }

/* =====================================================================
   SEÇİLİ İŞLER
   ===================================================================== */
.works { padding: calc(var(--u) * 26) var(--gx) calc(var(--u) * 90) calc(var(--u) * 68); }
.works__head { display: flex; align-items: center; gap: calc(var(--u) * 36); margin-bottom: calc(var(--u) * 20); }
.works__head h2 { font-weight: 800; font-size: max(26px, calc(var(--u) * 40)); letter-spacing: -.025em; white-space: nowrap; }
.filters { display: flex; align-items: center; font-size: max(14px, calc(var(--u) * 18)); font-weight: 500; }
.filters button { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--navy); }
.filters button.is-active { color: var(--red); font-weight: 700; }
.filters .dot { margin: 0 .55em; }
.works__line { flex: 1; height: 1.5px; background: var(--navy); }
.works__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 12); }
.work { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cream-2); border: 1.5px solid var(--navy); isolation: isolate; }
.work img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease), filter .6s var(--ease); }
.work:hover img, .work__half:hover img { transform: scale(1.045); }
.work__ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; }
.work__ph span { font-family: var(--font-display); font-weight: 900; font-size: max(22px, calc(var(--u) * 40)); letter-spacing: -.03em; color: var(--navy); opacity: .9; }
.work__shade { display: none; }
.work__ph { transition: opacity .4s var(--ease); }
.work--feature:hover .work__ph, .work__half:hover .work__ph { opacity: 0; }
.work__info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: end; gap: 12px;
  padding: max(14px, calc(var(--u) * 22)) max(16px, calc(var(--u) * 26));
  background: linear-gradient(to top, rgba(10, 22, 70, .82), rgba(10, 22, 70, 0));
  color: #fff; transform: translateY(101%); transition: transform .45s var(--ease);
}
.work:hover .work__info, .work:focus-visible .work__info { transform: none; }
.work__info h3 { font-weight: 800; font-size: max(18px, calc(var(--u) * 26)); }
.work__info p { font-size: max(13px, calc(var(--u) * 16)); opacity: .9; }
.work__arrow { width: 26px; height: 26px; flex: none; transition: transform .35s var(--ease); }
.work.is-hidden { display: none; }
@media (hover: none) { .work__info { transform: none; } }

/* --- Öne çıkan kartlar (Luamor, 288 Pub): gradient + hover yazısı --- */
.work--feature, .work__half { background: radial-gradient(120% 90% at 0% 0%, #7a1020 0%, rgba(117, 0, 0, 0) 55%), linear-gradient(150deg, #1d3a9a 0%, #0e1f5c 100%); }
.work--feature .work__ph span, .work__half .work__ph span { color: rgba(253, 250, 239, .92); font-size: max(24px, calc(var(--u) * 46)); }
.work--feature .work__shade, .work__half .work__shade {
  display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14, 31, 92, 0) 40%, rgba(14, 31, 92, .55) 75%, rgba(10, 20, 60, .9) 100%),
    radial-gradient(90% 70% at 0% 0%, rgba(117, 0, 0, .28), rgba(117, 0, 0, 0) 60%);
  transition: background-color .5s var(--ease);
}
.work--feature:hover .work__shade, .work__half:hover .work__shade, .work__half:focus-visible .work__shade, .work--feature:focus-visible .work__shade { background-color: rgba(14, 31, 92, .45); }
.work--feature .work__info, .work__half .work__info { transform: none; background: none; }
.work--feature:hover .work__arrow, .work__half:hover .work__arrow { transform: translateX(6px); }
.work__hover {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  opacity: 0; transition: opacity .45s var(--ease);
}
.work__hover span {
  font-family: var(--font-display); font-weight: 900; color: #FDFAEF;
  font-size: max(24px, calc(var(--u) * 44)); letter-spacing: -.02em;
  padding: .25em .7em; border: 1.5px solid rgba(253, 250, 239, .85); border-radius: 999px;
  transform: translateY(14px) scale(.96); transition: transform .5s var(--ease);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}
.work--feature:hover .work__hover, .work__half:hover .work__hover, .work--feature:focus-visible .work__hover, .work__half:focus-visible .work__hover { opacity: 1; }
.work--feature:hover .work__hover span, .work__half:hover .work__hover span { transform: none; }

/* Kart videoları */
.work__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.work__half:hover .work__vid { transform: scale(1.045); }
.work__play {
  position: absolute; z-index: 3; top: max(12px, calc(var(--u) * 16)); right: max(12px, calc(var(--u) * 16));
  width: max(34px, calc(var(--u) * 40)); height: max(34px, calc(var(--u) * 40)); border-radius: 50%;
  display: grid; place-items: center; color: #fff; background: rgba(14, 31, 92, .45);
  border: 1.5px solid rgba(253, 250, 239, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.work__play svg { width: 45%; height: 45%; margin-left: 2px; }

/* Büyük pencere */
.lb { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.lb.is-open { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.lb__bg { position: absolute; inset: 0; background: rgba(8, 16, 48, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb__box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: min(92vw, 1100px); transform: translateY(16px) scale(.98); transition: transform .4s var(--ease); }
.lb.is-open .lb__box { transform: none; }
.lb__body video, .lb__body img { display: block; max-width: 92vw; max-height: 82vh; border-radius: 6px; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.lb__cap { color: #FDFAEF; font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.lb__close { position: absolute; top: -48px; right: 0; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(253, 250, 239, .7); background: transparent; color: #FDFAEF; cursor: pointer; display: grid; place-items: center; }
.lb__close svg { width: 18px; height: 18px; }
.lb__close:hover { background: rgba(253, 250, 239, .15); }

/* İkiye bölünmüş kart */
.work--split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--navy); }
.work__half { position: relative; display: block; overflow: hidden; isolation: isolate; }
.work__half + .work__half { border-left: 1.5px solid var(--navy); }
.work__half .work__info { padding: max(12px, calc(var(--u) * 18)) max(14px, calc(var(--u) * 20)); }
.work__half .work__info h3 { font-size: max(15px, calc(var(--u) * 20)); }
.work__half .work__hover span { font-size: max(18px, calc(var(--u) * 32)); }
.work__half .work__ph span { font-size: max(20px, calc(var(--u) * 34)); }
@media (hover: none) {
  .work__hover { display: none; }
}
@media (max-width: 899px) {
  .work--split { aspect-ratio: 4 / 3; }
  .work__half .work__info { padding: 12px; }
  .work__half .work__info h3 { font-size: 15px; line-height: 1.15; }
  .work__half .work__info p { font-size: 12px; line-height: 1.3; margin-top: 2px; }
  .work__half .work__arrow { display: none; }
  .work__play { width: 30px; height: 30px; top: 10px; right: 10px; }
}
@media (max-width: 899px) {
  .works { padding: calc(var(--u) * 40) var(--gx) calc(var(--u) * 70); }
  .works__head { flex-wrap: wrap; gap: 10px 18px; }
  .works__line { display: none; }
  .works__grid { grid-template-columns: 1fr; gap: 14px; }
}

/* =====================================================================
   02 · HİZMETLER
   ===================================================================== */
.sec-head { position: absolute; left: calc(var(--u) * 75); top: calc(var(--u) * 140); }
.sec-head .eyebrow + .display { margin-top: calc(var(--u) * 20); }
.sec-title { font-size: max(36px, calc(var(--u) * 84)); }

.svc-grid {
  position: absolute; left: calc(var(--u) * 62); top: calc(var(--u) * 320);
  width: calc(var(--u) * 1464); height: calc(var(--u) * 549);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  border: 1.5px solid var(--navy);
}
.svc {
  position: relative; display: block;
  padding: calc(var(--u) * 34) calc(var(--u) * 30) 0 calc(var(--u) * 22);
  border: .75px solid var(--navy);
  transition: background-color .35s var(--ease);
}
.svc:hover { background: rgba(255, 255, 255, .28); }
.svc__title { margin-top: calc(var(--u) * 20); max-width: calc(var(--u) * 380); font-size: max(20px, calc(var(--u) * 36)); line-height: 1; }
.svc__desc { margin-top: calc(var(--u) * 20); max-width: calc(var(--u) * 390); font-size: max(13px, calc(var(--u) * 19)); line-height: 1.5; font-weight: 500; }
.svc__desc .dot { margin: 0 .3em; }
.svc__desc .it { white-space: nowrap; }
.svc__arrow { position: absolute; right: calc(var(--u) * 30); bottom: calc(var(--u) * 70); width: max(22px, calc(var(--u) * 30)); color: var(--red); transition: transform .3s var(--ease); }
.svc:hover .svc__arrow { transform: translateX(6px); }
.svc__img { display: none; }
.svc-cta { position: absolute; left: calc(var(--u) * 75); top: calc(var(--u) * 888); }
.svc-cta .btn { --h: 62; min-width: calc(var(--u) * 298); }

@media (max-width: 899px) {
  .frame--hizmetler { --fade-a: 24%; --fade-b: 28.5%; }
  .frame--hizmetler .frame__in { min-height: 0; padding-bottom: calc(var(--u) * 40); }
  .sec-head { position: relative; left: auto; top: auto; padding-top: calc(var(--u) * 150); }
  .sec-title { font-size: max(42px, calc(var(--u) * 104)); }
  .svc-grid { position: relative; left: auto; top: auto; width: auto; height: auto; display: block; border: 0; margin: calc(var(--u) * 26) calc(var(--gx) * -1) 0; border-top: 1.5px solid var(--navy); }
  .svc {
    display: grid; grid-template-columns: 1fr calc(var(--u) * 300); align-items: center; gap: 10px;
    min-height: calc(var(--u) * 285);
    padding: calc(var(--u) * 30) var(--gx);
    border: 0; border-bottom: 1.5px solid var(--navy);
  }
  .svc__title { font-size: max(21px, calc(var(--u) * 50)); max-width: none; margin-top: calc(var(--u) * 14); }
  .svc__desc { font-size: max(13px, calc(var(--u) * 26)); margin-top: calc(var(--u) * 18); max-width: none; }
  .svc__img { display: block; width: 100%; height: auto; max-height: calc(var(--u) * 240); object-fit: contain; }
  .svc__arrow { bottom: calc(var(--u) * 44); right: var(--gx); }
  .svc-cta { position: relative; left: auto; top: auto; margin-top: calc(var(--u) * 26); }
  .svc-cta .btn { --h: 82; width: 100%; justify-content: center; font-size: max(17px, calc(var(--u) * 36)); }
}

/* =====================================================================
   03 · HAKKINDA (ana sayfa)
   ===================================================================== */
.frame--hakkinda .sec-head { top: calc(var(--u) * 158); }
.about-title { font-size: max(40px, calc(var(--u) * 104)); }
.about-lead { margin-top: calc(var(--u) * 26); font-size: max(17px, calc(var(--u) * 34)); max-width: calc(var(--u) * 860); }
.about-bottom { position: absolute; left: calc(var(--u) * 77); top: calc(var(--u) * 587); width: calc(var(--u) * 636); }
.about-bottom hr, .rule { border: 0; height: 1.5px; background: var(--navy); margin: 0; }
.about-quote { margin: calc(var(--u) * 20) 0 calc(var(--u) * 24); font-size: max(17px, calc(var(--u) * 32)); font-weight: 500; }
.about-bottom .btn { --h: 56; min-width: calc(var(--u) * 240); font-size: max(15px, calc(var(--u) * 19)); }
.about-wings { display: none; }
.values {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 773);
  border-top: 1.5px solid var(--navy);
  display: grid; grid-template-columns: calc(var(--u) * 532) calc(var(--u) * 523) 1fr;
  padding: calc(var(--u) * 28) 0 0;
}
.value { padding: 0 calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 75); min-height: calc(var(--u) * 142); }
.value + .value { border-left: 1.5px solid var(--navy); padding-left: calc(var(--u) * 62); }
.value__title { margin-top: calc(var(--u) * 10); font-size: max(20px, calc(var(--u) * 38)); }
.value__text { margin-top: calc(var(--u) * 12); font-size: max(14px, calc(var(--u) * 21)); font-weight: 500; }

@media (max-width: 899px) {
  .frame--hakkinda { --fade-a: 38%; --fade-b: 42.5%; }
  .frame--hakkinda .frame__in { min-height: 0; padding-bottom: calc(var(--u) * 30); }
  .frame--hakkinda .sec-head { top: auto; padding-top: calc(var(--u) * 140); }
  .about-title { font-size: max(36px, calc(var(--u) * 92)); }
  .about-lead { font-size: max(17px, calc(var(--u) * 36)); }
  .about-bottom { position: relative; left: auto; top: auto; width: auto; margin-top: calc(var(--u) * 66); }
  .about-bottom hr { width: calc(var(--u) * 460); }
  .about-quote { font-size: max(17px, calc(var(--u) * 36)); max-width: calc(var(--u) * 420); }
  .about-bottom .btn { --h: 66; min-width: calc(var(--u) * 320); font-size: max(15px, calc(var(--u) * 26)); justify-content: space-between; padding: 0 calc(var(--u) * 52); }
  .about-wings { display: block; width: calc(var(--u) * 600); margin: calc(var(--u) * 10) auto calc(var(--u) * 20); }
  .values { position: relative; top: auto; display: block; border-top: 0; padding: 0; }
  .value, .value + .value {
    display: grid; grid-template-columns: calc(var(--u) * 66) 1fr; column-gap: 0;
    border-left: 0; border-top: 1.5px solid var(--navy);
    padding: calc(var(--u) * 36) 0 calc(var(--u) * 30); min-height: 0;
  }
  .value .num { grid-row: 1 / span 2; padding-top: 4px; font-size: max(14px, calc(var(--u) * 26)); }
  .value__title { margin: 0; font-size: max(22px, calc(var(--u) * 50)); }
  .value__text { font-size: max(14px, calc(var(--u) * 28)); margin-top: calc(var(--u) * 8); }
}

/* =====================================================================
   04 · ÇALIŞMA SÜRECİ
   ===================================================================== */
.process-lead { margin-top: calc(var(--u) * 26); font-size: max(16px, calc(var(--u) * 30)); }
.process-line { position: absolute; left: calc(var(--u) * 75); right: calc(var(--u) * 70); top: calc(var(--u) * 607); height: 1.5px; background: var(--navy); }
.step { position: absolute; top: calc(var(--u) * 600); width: calc(var(--u) * 330); }
.step:nth-of-type(1) { left: calc(var(--u) * 118); --dot: 103; }
.step:nth-of-type(2) { left: calc(var(--u) * 500); --dot: 95; }
.step:nth-of-type(3) { left: calc(var(--u) * 855); --dot: 124; }
.step:nth-of-type(4) { left: calc(var(--u) * 1278); --dot: 85; width: calc(var(--u) * 260); }
.step__dot { position: absolute; top: 0; left: calc(var(--u) * var(--dot)); width: calc(var(--u) * 15); height: calc(var(--u) * 15); min-width: 11px; min-height: 11px; border-radius: 50%; background: var(--maroon); transform: translate(-50%, 0); box-shadow: 0 0 0 5px var(--cream); }
.step .num { position: absolute; top: calc(var(--u) * 28); left: calc(var(--u) * var(--dot)); transform: translateX(-50%); }
.step__title { margin-top: calc(var(--u) * 66); font-size: max(19px, calc(var(--u) * 35)); }
.step__text { margin-top: calc(var(--u) * 18); font-size: max(13px, calc(var(--u) * 20)); line-height: 1.45; font-weight: 500; }
.step__img { display: none; }
.process-cta { position: absolute; left: calc(var(--u) * 75); top: calc(var(--u) * 853); }
.process-cta .btn { --h: 62; min-width: calc(var(--u) * 300); }
.process-next { position: absolute; right: calc(var(--u) * 70); top: calc(var(--u) * 920); font-size: max(13px, calc(var(--u) * 16)); }
.process-next svg { width: 1.3em; height: 1.3em; }
.process-rule { position: absolute; left: calc(var(--u) * 75); right: calc(var(--u) * 70); top: calc(var(--u) * 952); height: 1px; background: var(--line-soft); }
.process-next:hover svg { transform: translateY(4px); }

@media (max-width: 899px) {
  .frame--surec { --fade-a: 27%; --fade-b: 31%; }
  .frame--surec .frame__in { min-height: 0; padding-bottom: calc(var(--u) * 40); }
  .frame--surec .sec-head { padding-top: calc(var(--u) * 160); }
  .process-lead { font-size: max(15px, calc(var(--u) * 33)); }
  .process-line { display: none; }
  .steps { position: relative; margin-top: calc(var(--u) * 26); padding-left: calc(var(--u) * 104); }
  .steps::before { content: ""; position: absolute; left: calc(var(--u) * 12); top: 0; bottom: calc(var(--u) * 120); width: 1.5px; background: var(--navy); }
  .step, .step:nth-of-type(n) {
    position: relative; top: auto; left: auto; width: auto;
    display: grid; grid-template-columns: 1fr calc(var(--u) * 290); align-items: start; gap: 8px;
    min-height: calc(var(--u) * 222); padding-top: calc(var(--u) * 40);
  }
  .step:nth-of-type(3) { min-height: calc(var(--u) * 285); }
  .step__dot { left: calc(var(--u) * -91); top: calc(var(--u) * 55); transform: translate(-50%, 0); width: calc(var(--u) * 26); height: calc(var(--u) * 26); min-width: 13px; min-height: 13px; }
  .step .num { left: calc(var(--u) * -62); top: calc(var(--u) * 48); transform: none; font-size: max(13px, calc(var(--u) * 26)); }
  .step__title { margin-top: 0; font-size: max(20px, calc(var(--u) * 46)); }
  .step__text { font-size: max(13px, calc(var(--u) * 26)); margin-top: calc(var(--u) * 16); }
  .step__img { display: block; width: 100%; height: auto; max-height: calc(var(--u) * 260); object-fit: contain; margin-top: calc(var(--u) * -10); }
  .process-cta { position: relative; left: auto; top: auto; margin-top: calc(var(--u) * 30); }
  .process-cta .btn { --h: 86; width: 100%; font-size: max(17px, calc(var(--u) * 36)); }
  .process-next { position: relative; right: auto; top: auto; display: flex; justify-content: center; margin-top: calc(var(--u) * 20); font-size: max(14px, calc(var(--u) * 24)); gap: 12px; }
  .process-rule { display: none; }
}

/* =====================================================================
   05 · İLETİŞİM
   ===================================================================== */
.frame--iletisim { --fh: 843; }
.frame--iletisim .frame__in { display: grid; grid-template-columns: calc(var(--u) * 730) 1fr; align-items: start; padding-top: calc(var(--u) * 133); padding-bottom: calc(var(--u) * 50); }
.contact-left { padding-top: calc(var(--u) * 8); padding-right: calc(var(--u) * 60); }
.contact-title { font-size: max(38px, calc(var(--u) * 92)); }
.contact-lead { margin-top: calc(var(--u) * 18); font-size: max(16px, calc(var(--u) * 29)); }
.contact-quick { display: flex; gap: calc(var(--u) * 20); margin-top: calc(var(--u) * 30); }
.contact-quick .btn { --h: 62; min-width: calc(var(--u) * 258); font-size: max(15px, calc(var(--u) * 23)); gap: calc(var(--u) * 16); }
.contact-quick .btn:last-child { min-width: calc(var(--u) * 270); }
.contact-quick .btn svg { width: 1.45em; height: 1.45em; }
.contact-zarf { display: none; }
.contact-right {
  border-left: 1.5px solid var(--line-soft); padding: calc(var(--u) * 12) 0 calc(var(--u) * 20) calc(var(--u) * 38);
}

.form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 22) calc(var(--u) * 24); }
.field { display: flex; flex-direction: column; gap: calc(var(--u) * 10); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field > label, .field > legend { font-weight: 700; font-size: max(15px, calc(var(--u) * 19)); color: var(--navy); padding: 0; }
.req { color: var(--red); margin-left: .25em; }
fieldset.field { border: 0; margin: 0; padding: 0; }
.input {
  width: 100%; height: max(46px, calc(var(--u) * 50));
  padding: 0 calc(var(--u) * 16);
  border: 1.5px solid var(--navy); border-radius: 4px;
  background: rgba(255, 255, 255, .6);
  font-size: 16px; color: var(--navy-ink);
  outline: none; transition: box-shadow .2s, border-color .2s, background-color .2s;
}
textarea.input { height: max(110px, calc(var(--u) * 120)); padding: calc(var(--u) * 14) calc(var(--u) * 16); resize: vertical; line-height: 1.4; }
.input::placeholder { color: #8b8e9e; }
.input:focus { box-shadow: 0 0 0 3px rgba(21, 48, 132, .16); background: #fff; }
.field.has-error .input { border-color: var(--red); }
.field__error { color: var(--red); font-size: 13px; font-weight: 600; }
.field__error:empty { display: none; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 18) calc(var(--u) * 18); margin-top: calc(var(--u) * 6); }
.choice { position: relative; display: block; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice > span {
  display: flex; align-items: center; gap: calc(var(--u) * 18);
  min-height: max(46px, calc(var(--u) * 52)); padding: 6px calc(var(--u) * 18);
  border: 1.5px solid var(--navy); border-radius: 4px; background: rgba(255, 255, 255, .6);
  font-size: max(14px, calc(var(--u) * 17)); font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.choice > span::before {
  content: ""; flex: none; width: max(18px, calc(var(--u) * 21)); height: max(18px, calc(var(--u) * 21));
  border: 1.5px solid var(--navy); border-radius: 50%;
  transition: background-color .2s, box-shadow .2s;
}
.choice input:checked + span { background: rgba(21, 48, 132, .07); }
.choice input:checked + span::before { background: var(--navy); box-shadow: inset 0 0 0 3px #fff; }
.choice input:focus-visible + span { outline: 2px solid var(--red); outline-offset: 2px; }
.form__submit { grid-column: 1 / -1; --h: 62; width: 100%; font-size: max(17px, calc(var(--u) * 23)); }
.form__submit[disabled] { opacity: .65; cursor: progress; }
.form__meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; margin-top: calc(var(--u) * -6); font-size: max(13px, calc(var(--u) * 15)); }
.form__meta a { text-decoration: underline; text-underline-offset: 3px; }
.form__status { grid-column: 1 / -1; padding: 14px 16px; border: 1.5px solid var(--navy); border-radius: 4px; background: rgba(21, 48, 132, .06); font-weight: 600; }
.form__status[hidden] { display: none; }
.form__status.is-error { border-color: var(--red); color: var(--maroon); background: rgba(117, 0, 0, .05); }

@media (max-width: 899px) {
  .frame--iletisim .frame__in { display: block; min-height: 0; padding-top: 0; padding-bottom: calc(var(--u) * 50); }
  .contact-left { padding: calc(var(--u) * 122) 0 0; }
  .contact-left > * { max-width: calc(var(--u) * 560); }
  .contact-title { font-size: max(38px, calc(var(--u) * 98)); }
  .contact-lead { font-size: max(16px, calc(var(--u) * 32)); max-width: calc(var(--u) * 470) !important; }
  .contact-left > .contact-quick { max-width: none; gap: calc(var(--u) * 16); }
  .contact-quick .btn { --h: 66; min-width: 0; flex: 1; padding: 0 10px; font-size: max(15px, calc(var(--u) * 26)); }
  .contact-quick .btn:last-child { min-width: 0; }
  .contact-right { border: 0; padding: 0; margin-top: calc(var(--u) * 50); }
  .form { grid-template-columns: 1fr; gap: calc(var(--u) * 30); }
  .field > label, .field > legend { font-size: max(16px, calc(var(--u) * 26)); }
  .input { height: max(48px, calc(var(--u) * 60)); }
  textarea.input { height: max(120px, calc(var(--u) * 136)); }
  .choices { grid-template-columns: 1fr; gap: calc(var(--u) * 16); }
  .choice > span { min-height: max(48px, calc(var(--u) * 60)); font-size: max(15px, calc(var(--u) * 24)); }
  .choice > span::before { border-radius: 3px; }
  .choice input:checked + span::before { box-shadow: inset 0 0 0 3px #fff; }
  .form__submit { --h: 72; font-size: max(17px, calc(var(--u) * 30)); }
  .form__meta { font-size: max(13px, calc(var(--u) * 19)); }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.ftr { background: var(--navy-dark); color: #fff; }
.ftr__in { display: flex; align-items: center; gap: calc(var(--u) * 46); min-height: calc(var(--u) * 149); padding: calc(var(--u) * 28) var(--gx) calc(var(--u) * 28) calc(var(--u) * 70); }
.ftr .logo { color: #fff; }
.ftr .logo svg { height: max(48px, calc(var(--u) * 68)); }
.ftr__quote { font-family: Georgia, "Times New Roman", serif; font-size: max(16px, calc(var(--u) * 23)); line-height: 1.22; padding-left: calc(var(--u) * 46); border-left: 1.5px solid rgba(255, 255, 255, .7); }
.ftr__line { flex: 1; height: 1px; background: rgba(255, 255, 255, .75); }
.ftr__right { display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * 16); }
.ftr__links { display: flex; gap: calc(var(--u) * 52); font-size: max(15px, calc(var(--u) * 18)); }
.ftr__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ftr__copy { font-size: max(12px, calc(var(--u) * 13)); opacity: .9; }
@media (max-width: 899px) {
  .ftr__in { flex-wrap: wrap; gap: 18px 22px; padding: 26px var(--gx); }
  .ftr__quote { padding-left: 22px; font-size: 16px; }
  .ftr__line { display: none; }
  .ftr__right { margin-left: auto; }
  .ftr__links { gap: 22px; font-size: 15px; }
}
@media (max-width: 480px) {
  .ftr__right { width: 100%; align-items: flex-start; margin-left: 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .3); }
}

/* =====================================================================
   HİZMET DETAY SAYFALARI
   ===================================================================== */
.breadcrumb { display: flex; flex-wrap: wrap; gap: .55em; font-size: max(14px, calc(var(--u) * 17)); font-weight: 500; color: var(--navy); }
.breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current] { color: var(--red); }
.detail-top { position: absolute; left: calc(var(--u) * 78); top: calc(var(--u) * 120); width: calc(var(--u) * 700); }
.detail-top .eyebrow { margin-top: calc(var(--u) * 48); }
.detail-title { margin-top: calc(var(--u) * 16); font-size: max(40px, calc(var(--u) * var(--tsize, 110))); line-height: .93; }
.detail-lead { margin-top: calc(var(--u) * 24); font-size: max(16px, calc(var(--u) * 29)); color: var(--blue-text); max-width: calc(var(--u) * 600); line-height: 1.22; }
.detail-actions { display: flex; align-items: center; gap: calc(var(--u) * 40); margin-top: calc(var(--u) * 30); }
.detail-actions .btn { --h: 64; min-width: calc(var(--u) * 326); font-size: max(16px, calc(var(--u) * 24)); }

.scope { position: absolute; left: 0; right: 0; top: calc(var(--u) * 710); border-top: 1.5px solid var(--blue-text); padding: calc(var(--u) * 24) 0 calc(var(--u) * 40); }
.scope__label { padding-left: calc(var(--u) * 76); font-size: max(13px, calc(var(--u) * 18)); font-weight: 600; letter-spacing: .24em; color: var(--red); }
.scope__grid { display: grid; grid-template-columns: calc(var(--u) * 417) calc(var(--u) * 376) calc(var(--u) * 377) 1fr; margin-top: calc(var(--u) * 6); }
.scope__item { padding: 0 calc(var(--u) * 24) calc(var(--u) * 10) calc(var(--u) * 78); min-height: calc(var(--u) * 190); }
.scope__item + .scope__item { border-left: 1.5px solid var(--blue-text); padding-left: calc(var(--u) * 45); }
.scope__item h3 { margin-top: calc(var(--u) * 12); font-size: max(20px, calc(var(--u) * 40)); }
.scope__item p { margin-top: calc(var(--u) * 10); font-size: max(14px, calc(var(--u) * 23)); color: var(--blue-text); line-height: 1.32; }

@media (max-width: 899px) {
  .frame--detay .frame__in { min-height: 0; padding-bottom: calc(var(--u) * 40); }
  .detail-top { position: relative; left: auto; top: auto; width: auto; padding-top: max(calc(var(--u) * 140), calc(var(--hh) + 16px)); min-height: calc(var(--u) * 965); }
  .detail-top .eyebrow { margin-top: calc(var(--u) * 58); }
  .detail-title { font-size: max(38px, calc(var(--u) * var(--tsize-m, 108))); }
  .detail-lead { font-size: max(14px, calc(var(--u) * 33)); max-width: calc(var(--u) * 380); }
  .detail-actions { flex-direction: column; gap: calc(var(--u) * 24); margin-top: 0; }
  .detail-actions .btn { --h: 72; width: calc(var(--u) * 530); min-width: 260px; font-size: max(16px, calc(var(--u) * 31)); }
  .scope { position: relative; top: auto; margin: calc(var(--u) * 40) 0 0; padding: calc(var(--u) * 30) 0 0; border-top-width: 1.5px; }
  .scope__label { padding-left: 0; }
  .scope__grid { display: block; }
  .scope__item, .scope__item + .scope__item {
    display: grid; grid-template-columns: calc(var(--u) * 94) 1fr; min-height: 0;
    border-left: 0; padding: calc(var(--u) * 18) 0 calc(var(--u) * 26); border-bottom: 1px solid var(--line-soft);
  }
  .scope__item .num { grid-row: 1 / span 2; font-size: max(15px, calc(var(--u) * 30)); padding-top: 4px; }
  .scope__item h3 { margin: 0; font-size: max(21px, calc(var(--u) * 46)); }
  .scope__item p { margin-top: 4px; font-size: max(14px, calc(var(--u) * 26)); }
}

/* =====================================================================
   M8'İ TANI
   ===================================================================== */
.frame--tani { --fh: 930; }
.tani-hero { position: absolute; left: calc(var(--u) * 80); top: calc(var(--u) * 132); color: #fff; }
.tani-hero .breadcrumb, .tani-hero .breadcrumb [aria-current] { color: #fff; }
.tani-title { margin-top: calc(var(--u) * 26); color: #fff; font-size: max(40px, calc(var(--u) * 116)); }
.tani-tag { margin-top: calc(var(--u) * 22); font-size: max(20px, calc(var(--u) * 46)); font-weight: 500; line-height: 1.1; color: #fff; }
.story { position: absolute; left: calc(var(--u) * 80); top: calc(var(--u) * 497); width: calc(var(--u) * 720); }
.story-title { margin-top: calc(var(--u) * 16); font-size: max(32px, calc(var(--u) * 78)); }
.story-lead { margin-top: calc(var(--u) * 18); font-size: max(16px, calc(var(--u) * 30)); line-height: 1.2; max-width: calc(var(--u) * 680); }
.story-actions { display: flex; align-items: center; gap: calc(var(--u) * 42); margin-top: calc(var(--u) * 92); }
.story-actions .btn { --h: 52; min-width: calc(var(--u) * 228); font-size: max(15px, calc(var(--u) * 18)); }
.story-actions .link-back { font-weight: 700; font-size: max(14px, calc(var(--u) * 18)); }
.gallery { position: absolute; left: calc(var(--u) * 909); top: calc(var(--u) * 492); width: calc(var(--u) * 606); }
.gallery__label { font-weight: 700; font-size: max(14px, calc(var(--u) * 17)); margin-bottom: calc(var(--u) * 10); }
.ph { position: relative; overflow: hidden; border: 1.5px solid var(--navy); background: rgba(244, 238, 221, .75); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph img.is-broken { display: none; }
.gallery .ph:nth-of-type(1) { height: calc(var(--u) * 207); }
.gallery .ph:nth-of-type(2) { height: calc(var(--u) * 150); width: calc(var(--u) * 388); margin: calc(var(--u) * 14) 0 0 auto; }
.tani-values { padding: 0 0 calc(var(--u) * 50); }
.tani-values__head { padding: calc(var(--u) * 26) var(--gx) 0 calc(var(--u) * 80); font-weight: 700; font-size: max(17px, calc(var(--u) * 21)); }
.tani-values .values { position: relative; top: auto; border-top: 0; }

@media (max-width: 899px) {
  .frame--tani .frame__in { min-height: 0; padding-bottom: calc(var(--u) * 30); }
  .tani-hero { position: relative; left: auto; top: auto; padding-top: max(calc(var(--u) * 140), calc(var(--hh) + 16px)); min-height: calc(var(--u) * 640); }
  .tani-title { font-size: max(38px, calc(var(--u) * 90)); }
  .tani-tag { font-size: max(17px, calc(var(--u) * 40)); }
  .story { position: relative; left: auto; top: auto; width: auto; padding-top: calc(var(--u) * 20); }
  .story-title { font-size: max(32px, calc(var(--u) * 92)); }
  .story-lead { font-size: max(16px, calc(var(--u) * 34)); }
  .story-actions { flex-direction: column; align-items: stretch; gap: 18px; margin-top: calc(var(--u) * 40); }
  .story-actions .btn { --h: 72; font-size: max(16px, calc(var(--u) * 30)); }
  .story-actions .link-back { justify-content: center; }
  .gallery { position: relative; left: auto; top: auto; width: auto; margin-top: calc(var(--u) * 50); }
  .gallery .ph:nth-of-type(1) { height: calc(var(--u) * 330); }
  .gallery .ph:nth-of-type(2) { height: calc(var(--u) * 240); width: 70%; }
  .tani-values__head { padding: calc(var(--u) * 10) var(--gx) 0; font-size: max(18px, calc(var(--u) * 34)); }
  .tani-values .values { padding: 0 var(--gx); margin-top: calc(var(--u) * 20); }
}

/* =====================================================================
   PROJE DETAY
   ===================================================================== */
.project { padding: calc(var(--hh) + var(--u) * 34) var(--gx) 0 calc(var(--u) * 78); }
.project__grid { display: grid; grid-template-columns: calc(var(--u) * 365) 1fr; gap: calc(var(--u) * 78); margin-top: calc(var(--u) * 10); }
.project__back { display: flex; justify-content: flex-end; margin: calc(var(--u) * -6) 0 calc(var(--u) * 16); }
.project__left .eyebrow { margin-top: calc(var(--u) * 48); }
.project-title { margin-top: calc(var(--u) * 14); font-size: max(38px, calc(var(--u) * 80)); }
.meta { margin-top: calc(var(--u) * 30); }
.meta dt { margin-top: calc(var(--u) * 30); font-weight: 700; font-size: max(15px, calc(var(--u) * 19)); letter-spacing: .04em; color: var(--red); }
.meta dd { margin: calc(var(--u) * 8) 0 0; font-size: max(15px, calc(var(--u) * 19)); font-weight: 500; }
.project-about h2 { margin-top: calc(var(--u) * 56); font-size: max(24px, calc(var(--u) * 46)); }
.project-about p { margin-top: calc(var(--u) * 16); font-size: max(15px, calc(var(--u) * 19)); line-height: 1.55; }
.project__left .btn { --h: 76; margin-top: calc(var(--u) * 56); justify-content: space-between; text-align: left; white-space: normal; line-height: 1.15; width: calc(var(--u) * 330); min-width: 240px; font-size: max(16px, calc(var(--u) * 22)); font-weight: 600; padding: 0 calc(var(--u) * 34); }
.project__main { aspect-ratio: 995 / 430; }
.project__thumbs-label { margin: calc(var(--u) * 22) 0 calc(var(--u) * 10); font-size: max(14px, calc(var(--u) * 18)); font-weight: 500; }
.project__thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 16); }
.project__thumbs .ph { aspect-ratio: 475 / 195; }
.pager { display: flex; justify-content: space-between; margin-top: calc(var(--u) * 38); padding: calc(var(--u) * 24) var(--gx) calc(var(--u) * 34) calc(var(--u) * 78); border-top: 1.5px solid var(--blue-text); }
.pager a { font-size: max(15px, calc(var(--u) * 19)); }
@media (max-width: 899px) {
  .project { padding: calc(var(--hh) + 20px) var(--gx) 0; }
  .project__grid { display: block; }
  .project__left .eyebrow { margin-top: calc(var(--u) * 46); }
  .project-title { font-size: max(40px, calc(var(--u) * 112)); }
  .project__back { justify-content: flex-start; margin: calc(var(--u) * 20) 0 calc(var(--u) * 26); }
  .meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: calc(var(--u) * 36); }
  .meta dt { margin-top: 0; font-size: max(15px, calc(var(--u) * 24)); }
  .meta dd { font-size: max(15px, calc(var(--u) * 24)); }
  .project-about h2 { font-size: max(28px, calc(var(--u) * 60)); margin-top: calc(var(--u) * 50); }
  .project-about p { font-size: 16px; }
  .project__thumbs { grid-template-columns: 1fr; }
  .project__thumbs .ph { aspect-ratio: 755 / 160; }
  .project__left .btn { width: 100%; --h: 92; padding: 0 calc(var(--u) * 44); }
  .pager { margin: calc(var(--u) * 26) var(--gx) 0; padding: calc(var(--u) * 26) 0 calc(var(--u) * 40); }
  .project__right { margin-top: calc(var(--u) * 30); }
  .project__right .project__main { aspect-ratio: 755 / 305; }
}

/* =====================================================================
   GİRİŞ ANİMASYONLARI
   ===================================================================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-next svg { animation: none; }
}


/* =====================================================================
   KART İÇİ FOTOĞRAF SLIDER'I (elle)
   ===================================================================== */
.ws { position: absolute; inset: 0; }
.ws__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .55s var(--ease), transform 1.1s var(--ease); }
.ws__img.is-active { opacity: 1; }
.work__half--slider:hover .ws__img.is-active { transform: scale(1.04); }
.work__cover { position: absolute; inset: 0; z-index: 4; }
.ws__btn {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: max(34px, calc(var(--u) * 40)); height: max(34px, calc(var(--u) * 40)); border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer; color: #fff;
  background: rgba(14, 31, 92, .5); border: 1.5px solid rgba(253, 250, 239, .75);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: .85; transition: opacity .3s var(--ease), background-color .25s var(--ease);
}
.ws__btn svg { width: 46%; height: 46%; }
.ws__btn:hover { background: var(--maroon); opacity: 1; }
.ws__btn--prev { left: max(10px, calc(var(--u) * 14)); }
.ws__btn--next { right: max(10px, calc(var(--u) * 14)); }
.ws__dots { position: absolute; z-index: 5; top: max(14px, calc(var(--u) * 18)); left: 50%; transform: translateX(-50%); display: flex; gap: 5px; pointer-events: none; }
.ws__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(253, 250, 239, .45); transition: background-color .3s, transform .3s; }
.ws__dot.is-active { background: #FDFAEF; transform: scale(1.25); }
.ws__count { position: absolute; z-index: 5; top: max(10px, calc(var(--u) * 14)); right: max(12px, calc(var(--u) * 16)); color: #FDFAEF; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0,0,0,.4); pointer-events: none; }
.work__half--slider .ws__dots { display: none; }
@media (min-width: 900px) { .work__half--slider .ws__btn { opacity: 0; } .work__half--slider:hover .ws__btn, .ws__btn:focus-visible { opacity: .9; } }
@media (max-width: 899px) {
  .ws__btn { width: 30px; height: 30px; }
  .ws__count { font-size: 11px; top: 8px; right: 10px; }
}

/* Lightbox galeri okları */
.lb__body { position: relative; }
.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid rgba(253, 250, 239, .75); background: rgba(14, 31, 92, .55); color: #FDFAEF; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.lb__nav svg { width: 45%; height: 45%; }
.lb__nav:hover { background: var(--maroon); }
.lb__nav--prev { left: -64px; }
.lb__nav--next { right: -64px; }
@media (max-width: 899px) { .lb__nav--prev { left: 8px; } .lb__nav--next { right: 8px; } }

/* =====================================================================
   MOBİL MENÜ DÜZELTMESİ
   (header'daki blur efekti menüyü header içine hapsediyordu)
   ===================================================================== */
@media (max-width: 899px) {
  .hdr { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(253, 250, 239, .97); }
  .nav {
    top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100dvh - var(--hh));
    padding: 8px var(--gx) 32px; background: var(--cream); z-index: 99;
    counter-reset: navi;
  }
  .nav__link {
    display: flex; align-items: baseline; gap: 14px;
    font-family: var(--font-display); font-weight: 900; font-size: 34px; letter-spacing: -.03em; line-height: 1.1;
    padding: 20px 0; border-bottom: 1.5px solid var(--navy); color: var(--navy);
  }
  .nav__link::before { counter-increment: navi; content: "0" counter(navi); font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--red); min-width: 24px; }
  .nav__link.is-active { color: var(--maroon); }
  .nav .btn { display: none; }
  .nav__extra { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 28px; }
  .nav__extra .btn { display: inline-flex; width: 100%; height: 56px; font-size: 18px; margin: 0; }
  .nav__extra p { font-family: Georgia, "Times New Roman", serif; font-size: 18px; color: var(--navy); text-align: center; margin-top: 6px; }
  .nav { opacity: 0; transform: translateY(-10px); }
  .nav.is-open { opacity: 1; transform: none; }
  .nav.is-open .nav__link { animation: navIn .45s var(--ease) both; }
  .nav.is-open .nav__link:nth-child(2) { animation-delay: .05s; }
  .nav.is-open .nav__link:nth-child(3) { animation-delay: .1s; }
  .nav.is-open .nav__link:nth-child(4) { animation-delay: .15s; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) { .nav__extra { display: none; } }


/* =====================================================================
   SLIDER OKLARI — yazıyla çakışmasın
   ===================================================================== */
.ws__btn {
  width: max(38px, calc(var(--u) * 46)); height: max(38px, calc(var(--u) * 46));
  background: rgba(253, 250, 239, .92); color: var(--navy); border: 0;
  box-shadow: 0 6px 18px rgba(8, 16, 48, .28);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ws__btn svg { width: 44%; height: 44%; }
.ws__btn:hover { background: var(--maroon); color: #fff; }
.ws__btn--prev { left: max(12px, calc(var(--u) * 16)); }
.ws__btn--next { right: max(12px, calc(var(--u) * 16)); }
@media (min-width: 900px) {
  .work__half--slider .ws__btn { opacity: 0; transform: translateY(-50%) scale(.9); transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .25s; }
  .work__half--slider:hover .ws__btn, .ws__btn:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
  .work__half--slider .ws__btn--prev:hover, .work__half--slider .ws__btn--next:hover { transform: translateY(-50%) scale(1.06); }
}
.ws__count {
  top: max(12px, calc(var(--u) * 16)); right: max(12px, calc(var(--u) * 16));
  padding: 4px 10px; border-radius: 999px; background: rgba(8, 16, 48, .55);
  font-size: 12px; text-shadow: none; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
@media (max-width: 899px) {
  .ws__btn { width: 32px; height: 32px; opacity: .95; }
  .ws__btn--prev { left: 8px; } .ws__btn--next { right: 8px; }
  .ws__count { font-size: 11px; top: 8px; right: 8px; padding: 3px 8px; }
}
/* Gerçek logo oranı */
.logo svg { height: max(48px, calc(var(--u) * 66)); width: auto; }
@media (max-width: 899px) { .logo svg { height: max(46px, calc(var(--u) * 74)); } }

/* Slider kartlarında hover yazısı: diğer kartlarla AYNI boyut ve AYNI hiza (ortada).
   Oklar yazının altına iner, çakışmaz. */
.work__half--slider .work__hover { align-items: center; padding: 0; }
.work__half--slider:hover .work__hover { opacity: 1; }
.work__half--slider:hover .work__hover span { transform: none; }
@media (hover: none) { .work__half--slider .work__hover { display: none; } }
@media (min-width: 900px) {
  .work__half--slider .ws__btn { top: min(calc(50% + max(24px, calc(var(--u) * 44)) * .8 + max(34px, calc(var(--u) * 44))), calc(100% - max(96px, calc(var(--u) * 120)))); }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .work__half--slider .ws__btn { top: 30%; width: 34px; height: 34px; }
}


/* "Yapım aşamasında" — görseli henüz olmayan kutular */
.ph { display: grid; place-items: center; }
.ph > img { position: absolute; inset: 0; }
.ph__soon {
  display: inline-flex; align-items: center; gap: .6em;
  font-weight: 700; font-size: max(13px, calc(var(--u) * 16)); letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); opacity: .75;
}
.ph__soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: soon 1.6s ease-in-out infinite; }
@keyframes soon { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .ph__soon::before { animation: none; } }

/* M8'i Tanı mobil giriş: başlık kanatların üstüne binmesin */
@media (max-width: 899px) {
  .tani-hero .tani-title, .tani-hero .tani-tag { text-shadow: 0 2px 18px rgba(8, 16, 48, .55); }
  .tani-hero .tani-title { font-size: max(36px, calc(var(--u) * 84)); }
}
/* Footer: 4 link sığsın */
@media (max-width: 480px) { .ftr__links { flex-wrap: wrap; gap: 10px 22px; } }

/* M8'i Tanı: galeri kaldırıldı, hikâye metni geniş alana yayılsın */
.story { width: min(calc(var(--u) * 1100), 100%); }
.story-lead { max-width: calc(var(--u) * 1000); }
.frame--tani { --fh: 930; }
.frame--tani .story-actions { margin-top: calc(var(--u) * 60); }


/* =====================================================================
   M8'İ TANI — hikâye metni
   ===================================================================== */
.frame--tani { --fh: 720; }
.frame--tani .story { top: calc(var(--u) * 470); width: calc(var(--u) * 1300); }
.frame--tani .story-lead { max-width: none; }
.tani-story { padding: calc(var(--u) * 10) var(--gx) calc(var(--u) * 70) calc(var(--u) * 80); }
.tani-story__in { max-width: 860px; }
.tani-story p { font-size: max(17px, calc(var(--u) * 21)); line-height: 1.7; color: var(--navy); margin: 0 0 1.2em; font-weight: 500; }
.tani-quote { margin: calc(var(--u) * 48) 0 0; padding: calc(var(--u) * 30) 0 calc(var(--u) * 6) calc(var(--u) * 34); border-left: 3px solid var(--maroon); }
.tani-quote p { font-family: var(--font-display); font-weight: 900; font-size: max(24px, calc(var(--u) * 40)); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .6em; }
.tani-quote footer { font-size: max(16px, calc(var(--u) * 19)); line-height: 1.65; color: var(--navy); opacity: .85; }
.tani-story .story-actions { margin-top: calc(var(--u) * 56); }
.tani-values { border-top: 0; }
@media (max-width: 899px) {
  .frame--tani .frame__in { padding-bottom: 0; }
  .frame--tani .story { top: auto; width: auto; padding-top: calc(var(--u) * 30); }
  .tani-story { padding: 8px var(--gx) 46px; }
  .tani-story p { font-size: 16.5px; line-height: 1.65; }
  .tani-quote { padding-left: 18px; margin-top: 34px; }
  .tani-quote p { font-size: 26px; }
  .tani-quote footer { font-size: 16px; }
  .tani-story .story-actions { margin-top: 36px; }
}


/* =====================================================================
   GİRİŞ SAHNESİ — iki panel video + önde çiçekli dal
   Masaüstü sahne 1586x992 · Mobil sahne 1122x1402
   Panel köşeleri sahne üzerinde piksel ölçülerek yerleştirildi.
   ===================================================================== */
.frame--hero .frame__bg, .frame--hero .screen, .frame--hero .slider-nav { display: none; }
.hero-stage { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; aspect-ratio: 1586 / 992; container-type: inline-size; }
.hero-stage > picture, .hero-stage > picture img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-stage__fg { z-index: 3; pointer-events: none; }
.hpanel { position: absolute; z-index: 2; overflow: hidden; background: #efe6d6; }
.hpanel video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpanel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,240,220,.10), rgba(0,0,0,0) 30%, rgba(0,0,0,.10)); box-shadow: inset 0 0 18px rgba(0,0,0,.25); }
/* masaüstü: yüzdeler sahne genişliği/yüksekliğine göre */
.hpanel--sol { left: calc(620 / 1586 * 100%); top: calc(175 / 992 * 100%); width: calc(209 / 1586 * 100%); height: calc(519 / 992 * 100%);
  clip-path: polygon(0 calc(22.2 / 519 * 100%), 100% 0, 100% 100%, 0 calc(511.6 / 519 * 100%)); }
.hpanel--sag { left: calc(1187 / 1586 * 100%); top: calc(109 / 992 * 100%); width: calc(279 / 1586 * 100%); height: calc(606 / 992 * 100%);
  clip-path: polygon(0 calc(29 / 606 * 100%), 100% 0, 100% 100%, 0 calc(595.6 / 606 * 100%)); }
.frame--hero .hero__text { z-index: 4; }

@media (max-width: 899px) {
  .frame--hero .frame__in { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .frame--hero .hero__text { order: 1; padding-bottom: calc(var(--u) * 40); }
  .hero-stage { position: relative; order: 2; aspect-ratio: 1122 / 1402; width: calc(100% + 2 * var(--gx)); margin: 0 calc(var(--gx) * -1); }
  .hpanel--sol { left: calc(145 / 1122 * 100%); top: calc(283 / 1402 * 100%); width: calc(229 / 1122 * 100%); height: calc(599 / 1402 * 100%);
    clip-path: polygon(0 calc(2 / 599 * 100%), 100% 0, 100% 100%, 0 calc(594 / 599 * 100%)); }
  .hpanel--sag { left: calc(763 / 1122 * 100%); top: calc(279 / 1402 * 100%); width: calc(275 / 1122 * 100%); height: calc(615 / 1402 * 100%);
    clip-path: polygon(0 calc(4 / 615 * 100%), 100% 0, 100% 100%, 0 calc(611 / 615 * 100%)); }
}


/* =====================================================================
   M8'İ TANI — yeni tasarım
   ===================================================================== */
.frame--tani { --fh: 452; }
.frame--tani .frame__in { min-height: calc(var(--u) * 452); }
.frame--tani .story, .tani-story { display: none; }
@media (max-width: 899px) {
  .frame--tani .frame__in { min-height: calc(var(--u) * 581); padding-bottom: 0; }
  .frame--tani .tani-hero { min-height: calc(var(--u) * 581); }
}

/* Giriş cümlesi */
.about-intro { padding: calc(var(--u) * 110) var(--gx) calc(var(--u) * 80) calc(var(--u) * 80); }
.about-intro__in { max-width: 1180px; }
.about-intro__title {
  margin-top: calc(var(--u) * 22);
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; line-height: 1.02;
  font-size: max(34px, calc(var(--u) * 76)); color: var(--navy); text-wrap: balance;
}
.about-intro__title span { color: var(--maroon); }

/* Gövde: sol numara + etiket, sağ metin */
.about-body { padding: 0 var(--gx) calc(var(--u) * 90) calc(var(--u) * 80); }
.about-body__grid {
  display: grid; grid-template-columns: calc(var(--u) * 300) minmax(0, 760px); gap: calc(var(--u) * 60);
  padding: calc(var(--u) * 44) 0; border-top: 1.5px solid var(--navy);
}
.about-body__grid:last-child { border-bottom: 1.5px solid var(--navy); }
.about-body__side { display: flex; flex-direction: column; gap: 8px; }
.about-body__num { color: var(--red); font-weight: 700; font-size: max(14px, calc(var(--u) * 19)); }
.about-body__label { font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; font-size: max(22px, calc(var(--u) * 34)); color: var(--navy); line-height: 1.05; }
.about-body__text p { margin: 0 0 1em; font-size: max(17px, calc(var(--u) * 21)); line-height: 1.7; font-weight: 500; color: var(--navy); }
.about-body__text p:last-child { margin-bottom: 0; }
.about-body__lead { font-size: max(21px, calc(var(--u) * 30)) !important; line-height: 1.35 !important; font-weight: 600 !important; letter-spacing: -.01em; }
.about-badge {
  display: inline-flex; align-items: center; gap: 14px; margin-top: calc(var(--u) * 26);
  padding: 10px 18px 10px 10px; border: 1.5px solid var(--navy); border-radius: 999px; background: rgba(255,255,255,.55);
}
.about-badge__k { background: var(--maroon); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .12em; padding: 6px 12px; border-radius: 999px; }
.about-badge__v { font-weight: 600; font-size: 15px; color: var(--navy); }

/* Alıntı bandı */
.tani-quote2 { background: var(--navy-dark); color: #FDFAEF; position: relative; overflow: hidden; }
.tani-quote2::before { content: "“"; position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * -70); font-family: Georgia, serif; font-size: calc(var(--u) * 420); line-height: 1; color: rgba(253,250,239,.06); pointer-events: none; }
.tani-quote2__in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 560); align-items: center; gap: calc(var(--u) * 40);
  padding: calc(var(--u) * 110) var(--gx) calc(var(--u) * 110) calc(var(--u) * 80); }
.tani-quote2 blockquote { margin: 0; }
.tani-quote2 blockquote p { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -.035em; line-height: 1.02; font-size: max(34px, calc(var(--u) * 78)); }
.tani-quote2__note { margin: calc(var(--u) * 34) 0 0; max-width: 620px; font-size: max(17px, calc(var(--u) * 22)); line-height: 1.65; color: rgba(253,250,239,.85); padding-left: 20px; border-left: 3px solid #b3121b; }
.tani-quote2__actions { display: flex; align-items: center; gap: calc(var(--u) * 40); margin-top: calc(var(--u) * 46); }
.tani-quote2__actions .btn { --h: 58; min-width: calc(var(--u) * 240); }
.tani-quote2__back { color: #FDFAEF; font-weight: 700; font-size: max(15px, calc(var(--u) * 18)); }
.tani-quote2__img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }

/* Değerler */
.tani .tani-values { padding: calc(var(--u) * 70) 0 calc(var(--u) * 60); }
.tani .tani-values__head { padding: 0 var(--gx) calc(var(--u) * 20) calc(var(--u) * 80); font-family: var(--font-display); font-weight: 900; letter-spacing: -.03em; font-size: max(28px, calc(var(--u) * 46)); }
.tani .tani-values .values { position: relative; top: auto; border-top: 1.5px solid var(--navy); }

@media (max-width: 899px) {
  .about-intro { padding: 44px var(--gx) 34px; }
  .about-intro__title { font-size: clamp(30px, 8.6vw, 40px); }
  .about-body { padding: 0 var(--gx) 50px; }
  .about-body__grid { grid-template-columns: 1fr; gap: 14px; padding: 28px 0; }
  .about-body__side { flex-direction: row; align-items: baseline; gap: 12px; }
  .about-body__label { font-size: 24px; }
  .about-body__text p { font-size: 16.5px; line-height: 1.65; }
  .about-body__lead { font-size: 20px !important; }
  .about-badge__v { font-size: 14px; }
  .tani-quote2::before { font-size: 260px; top: -40px; left: 10px; }
  .tani-quote2__in { grid-template-columns: 1fr; padding: 56px var(--gx) 40px; gap: 20px; }
  .tani-quote2 blockquote p { font-size: clamp(32px, 9vw, 42px); }
  .tani-quote2__note { font-size: 16.5px; }
  .tani-quote2__actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .tani-quote2__actions .btn { --h: 64; width: 100%; }
  .tani-quote2__back { justify-content: center; }
  .tani-quote2__img { width: 82%; margin: 6px auto 0; }
  .tani .tani-values { padding: 44px 0 30px; }
  .tani .tani-values__head { padding: 0 var(--gx) 10px; font-size: 30px; }
  .tani .tani-values .values { border-top: 0; padding: 0 var(--gx); }
}