/*
Styles
- Variables
- Base CSS
- Utility
- Header
- Footer

*/
/*
  Design Tokens
  Modüller kendi hex/px değerlerini taşımaz; hepsi buradan beslenir.
  Yeni bir modül eklerken doğrudan renk veya boşluk yazmak yerine
  buradaki token'ı kullan; yoksa önce buraya ekle.

  Breakpoint seti: 768px / 1024px / 1280px.
  (Custom property'ler media query içinde geçersiz olduğu için bu set
   dille zorlanamaz, konvansiyonla korunur. Bkz. AGENTS.md)
*/
:root {

  /* Typography */
  --tu-font-main: "Manrope", sans-serif;
  --tu-font-heading: "Merriweather", serif;

  /* Satır yüksekliği ölçeği — metin küçüldükçe satır arası açılır.
     Başlıklar ve alt metinler yalnız bu dört değerden birini kullanır;
     modüle özel line-height yazılmaz. */
  --tu-lh-tight: 1.2;      /* h1, h2 — büyük başlıklar */
  --tu-lh-snug: 1.3;       /* h3, h4, h5 */
  --tu-lh-normal: 1.5;     /* h6 etiketleri, .tu-u-caption */
  --tu-lh-relaxed: 1.6;    /* gövde metni, .tu-u-lead */

  /* Harf aralığı — varsayılan "normal". Yalnız küçük/büyük harf etiketlerde
     açılır; başlıklarda negatif tracking kullanılmaz. */
  --tu-ls-normal: normal;
  --tu-ls-wide: 0.02em;

  /* ── Renkler ── */
  --tu-red: #d2160f;
  --tu-red-dark: #b0120d;   /* hover; önceden #b5120d ve #b0120d olarak ikiye ayrılmıştı */
  --tu-cream: #f6f3e9;      /* tek krem: beyazla kontrastı 1.11:1, ayrımı görülebilen tek ton */
  --tu-white: #ffffff;
  --tu-primary: #000000;    /* başlıklar ve varsayılan metin */
  --tu-ink: #2c2c2c;        /* gövde metni */
  --tu-text-muted: #6b6b6b;
  /*
    Koyu zemin üstündeki açık metin/ikon/çizgi rengi. Tek kaynak: buradan
    değiştirince header, footer, Mutfağında modülü, banner başlığı ve dolu
    CTA butonu birlikte değişir.

    "on-red" değil "on-dark" diyoruz çünkü kullanım yerlerinden biri kırmızı
    zemin değil: banner başlığı fotoğrafın üstündeki koyu gradient overlay'de
    duruyor. İsim en geniş doğru zemini tarif etmeli.

    Önceden bu rol üç ayrı tona bölünmüştü: #f8f4e9 (header, Mutfağında, CTA),
    #f9eecc (footer) ve #fff5e1 (banner başlığı).
  */
  --tu-on-dark: #f8f4e9;
  --tu-hairline: #eae3d4;
  --tu-whatsapp: #25d366;       /* WhatsApp marka yeşili — sticky CTA */
  --tu-whatsapp-dark: #1da851;  /* hover */

  /* ── Dikey ritim ── */
  --tu-section-space: 48px;

  /*
    Modül İÇİ dikey boşluklar — rol bazlı, t-shirt ölçeği değil.
    Kasıtlı olarak "sm/md/lg" demiyoruz: rol adı, yeni bir modül yazan
    kişiyi "hangisi bu duruma uyar" sorusuna zorluyor ve serbestçe px
    seçmesini engelliyor. Yeni bir role ihtiyaç varsa buraya eklenmeli.
  */
  --tu-space-text: 16px;      /* paragraflar arası */
  --tu-space-heading: 18px;   /* başlık → alt başlık / gövde metni */
  --tu-space-content: 40px;   /* metin → CTA (bir içerik kolonu içinde) */
  --tu-space-header: 40px;    /* başlık bloğu → altındaki grid */
  --tu-space-feature: 40px;   /* modül içi büyük ayrım */

  /* ── Yatay ritim ── */
  --tu-container-max: 1280px;
  --tu-container-padding: 20px;
  --tu-header-height: 80px;

  @media (width >= 768px) {
    --tu-section-space: 80px;
    --tu-space-feature: 60px;
  }

  @media (width >= 1024px) {
    --tu-section-space: 100px;
    --tu-container-padding: 48px;
    --tu-space-header: 60px;
    --tu-space-feature: 100px;
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sayfa içi çapa (#doner, #sorular …) hedefi sabit header'ın altında kalmasın.
   Header'ın kendi yüksekliği + biraz nefes payı. */
html {
  scroll-padding-top: calc(var(--tu-header-height) + 16px);
}

body {
  font-family: var(--tu-font-main);
  background: var(--tu-white);
  color: var(--tu-primary);
  line-height: var(--tu-lh-relaxed);
}

/* .tu-container kaldırıldı — yatay ritmin tek sahibi .tu-section__inner.
   İkisi iç içe kullanıldığında içerik genişliği modüle göre 48px
   oynuyordu; bkz. prompts/2026-07-27-tasarim-dili.md §4 */

.tu-safe-area {
  min-width: 320px;
  max-width: var(--tu-container-max);
  margin-inline: auto;
}

/*
  Section System
  ──────────────
  Her içerik modülü şu iskeleti kullanır:

    <section class="tu-section tu-bg-light tu-<modül>">
      <div class="tu-section__inner"> … </div>
    </section>

  - .tu-section        → dikey ritim (padding-block). Modül kendi padding'ini yazmaz.
  - .tu-section__inner → yatay ritim (max-width + gutter). Tek sarmalayıcı;
                         içine ayrıca .tu-container konmaz.
  - .tu-bg-light       → krem/beyaz almaşması (aşağıdaki zincir).

  .tu-safe-area hâlâ header/footer gibi kendi yatay padding'ini yöneten
  yapılarda kullanılıyor; içerik modülleri .tu-section__inner kullanmalı.
*/

.tu-section {
  padding-block: var(--tu-section-space);
}

/* Sayfayı açan modül: mobilde header'a yapışır, masaüstünde ritme döner. */
.tu-section--lead {
  padding-block-start: 0;

  @media (width >= 1024px) {
    padding-block-start: var(--tu-section-space);
  }
}

.tu-section--flush {
  padding-block: 0;
}

.tu-section__inner {
  min-width: 320px;
  max-width: var(--tu-container-max);
  margin-inline: auto;
  padding-inline: var(--tu-container-padding);
}

/*
  Krem/beyaz almaşması — run-length zinciri.

  Açık zeminli modüller krem ile başlar; ardışık her modülde krem/beyaz
  sırayla değişir. Araya hero, kırmızı modül veya footer girdiğinde zincir
  kopar ve sayım kendiliğinden yeniden kremden başlar.

  Her satır N tane KESİNTİSİZ .tu-bg-light kardeş şart koşuyor; specificity
  N ile büyüdüğü için en derin eşleşme kazanır. Bu yüzden !important ya da
  kaynak sırası hassasiyeti gerekmez.

  Dikkat: modüller gerçek DOM kardeşi olmalı. Araya <div class="u-spacer">
  gibi bir eleman girerse zincir kopar.
*/
.tu-bg-light { background-color: var(--tu-cream); }
.tu-bg-light + .tu-bg-light { background-color: var(--tu-white); }
.tu-bg-light + .tu-bg-light + .tu-bg-light { background-color: var(--tu-cream); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light { background-color: var(--tu-white); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light { background-color: var(--tu-cream); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light { background-color: var(--tu-white); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light { background-color: var(--tu-cream); }

/*
  Kart yüzeyi — yukarıdaki .tu-bg-light zincirinin TERSİ.
  Section krem ise kart beyaz, section beyaz ise kart krem olur; kart bu
  sayede zeminden her zaman ayrışır, hangi section sırasında olursa olsun
  krem üzerine krem (veya beyaz üzerine beyaz) binmez. Aynı run-length
  zincirini kullanır; specificity artışı sayesinde en derin eşleşme
  kazanır, kaynak sırası önemsizdir. Kart olduğunu vurgulamak istediğin
  her bileşene ekleyebilirsin.
*/
.tu-card-surface { background-color: var(--tu-white); }
.tu-bg-light + .tu-bg-light .tu-card-surface { background-color: var(--tu-cream); }
.tu-bg-light + .tu-bg-light + .tu-bg-light .tu-card-surface { background-color: var(--tu-white); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light .tu-card-surface { background-color: var(--tu-cream); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light .tu-card-surface { background-color: var(--tu-white); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light .tu-card-surface { background-color: var(--tu-cream); }
.tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light + .tu-bg-light .tu-card-surface { background-color: var(--tu-white); }

.tu-fluid-image {
  max-width: 100%;
  height: auto;
  display: block;
}

.tu-filter-invert {
  filter: invert(100%);
}

.tu-u-mx-auto {
  margin-inline: auto;
}

.tu-u-text-center {
  text-align: center;
}

.tu-u-flex-grow {
  flex-grow: 1;
}

.tu-u-img-fluid {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
  Sitedeki TEK başlık ölçeği. Her başlık bu sınıfa bağlanır; bölüm sınıfları
  (.tu-*__title) yalnız boşluk/hizalama tutar, font özelliği tanımlamaz.
  Kararlar: tüm ana başlıklar Merriweather 500; her seviye mobilden masaüstüne
  büyür (küçülen ya da sabit kalan adım bırakılmadı).

  text-transform BAŞLIKLARDA KULLANILMAZ: büyük harf görünmesi istenen metinler
  HTML'de/içerik verisinde zaten büyük harf yazılıyor. Aşağıdaki `none` bu kuralı
  koruyan bir reset; uppercase eklemek için değil, kaçak eklenmesini engellemek
  için var.
*/
.tu-u-heading {
  &:is(h1, h2, h3, h4, h5, h6, .tu-h1, .tu-h2, .tu-h3, .tu-h4, .tu-h5, .tu-h6) {
    font-family: var(--tu-font-heading);
    color: var(--tu-primary);
    line-height: var(--tu-lh-tight);
    font-weight: 500;
    letter-spacing: var(--tu-ls-normal);
    text-wrap: balance;
  }

  strong {
    font-weight: bold;
  }

  &:is(h1, .tu-h1) {
    font-size: 32px;
  }

  &:is(h2, .tu-h2) {
    font-size: 28px;
  }

  &:is(h3, .tu-h3, h4, .tu-h4, h5, .tu-h5) {
    line-height: var(--tu-lh-snug);
  }

  &:is(h3, .tu-h3) {
    font-size: 24px;
  }

  &:is(h4, .tu-h4) {
    font-size: 20px;
  }

  &:is(h5, .tu-h5) {
    font-size: 18px;
  }

  /* h6 etiket/isim seviyesi: gövde fontu, biraz daha kalın, açık harf aralığı. */
  &:is(h6, .tu-h6) {
    font-family: var(--tu-font-main);
    font-size: 16px;
    font-weight: 600;
    line-height: var(--tu-lh-normal);
    letter-spacing: var(--tu-ls-wide);
  }

  @media (width >=768px) {
    &:is(h1, .tu-h1) {
      font-size: 45px;
    }

    &:is(h2, .tu-h2) {
      font-size: 38px;
    }

    &:is(h3, .tu-h3) {
      font-size: 30px;
    }

    &:is(h4, .tu-h4) {
      font-size: 24px;
    }

    &:is(h5, .tu-h5) {
      font-size: 20px;
    }

    &:is(h6, .tu-h6) {
      font-size: 18px;
    }
  }

}

/*
  Başlık altı metinlerin tek ölçeği — başlık ölçeğinin (.tu-u-heading) eşi.
  Modüllerde "BAŞLIK + alt metin" düzeni her yerde aynı görünsün diye bölüm
  sınıfları (.tu-*__desc / __text / __caption) artık yalnız genişlik, boşluk ve
  istisna rengi tutuyor; tipografi buradan geliyor.

  .tu-u-lead    → doğrudan bölüm başlığının altındaki ana açıklama
  .tu-u-caption → kart, adım veya görsel altındaki küçük açıklama
*/
.tu-u-lead {
  font-family: var(--tu-font-main);
  font-size: 16px;
  font-weight: 400;
  line-height: var(--tu-lh-relaxed);
  letter-spacing: var(--tu-ls-normal);
  color: var(--tu-ink);
  text-wrap: pretty;

  @media (width >= 768px) {
    font-size: 18px;
  }
}

.tu-u-caption {
  font-family: var(--tu-font-main);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--tu-lh-normal);
  letter-spacing: var(--tu-ls-normal);
  color: var(--tu-ink);
  text-wrap: pretty;

  @media (width >= 768px) {
    font-size: 14px;
  }
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* Utility */

/* Link Button Utility: Removes background and border to make a semantic button render precisely like plain text/link */
.tu-link-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  display: inline-block;
}

/* Stretched Link Utility */
.u-stretched-link-container {
  position: relative;
}

.u-stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

@media (hover: hover) {
  .u-underline-hover:hover {
    text-decoration: underline;
  }
}



/* .u-spacer kaldırıldı.
   Dikey boşluk artık .tu-section (modüller arası) ve --tu-space-* token'ları
   (modül içi) ile veriliyor; boşluk için markup'a boş div koymaya gerek yok.
   Ayrıca kendi 576/992/1200/1400px ölçeğini taşıyordu ve projenin
   768/1024/1280 setine uymuyordu. Son kullanımı da kaldırıldığı için silindi. */


/*
  Header Component
  - Mobile first approach
  - Breakpoint: 1400px for desktop nav (bileşen kısıtı, aşağıda gerekçeli)
  - .tu-header__inner 3 kolonlu bir grid: [nav-left] [logo genişliği] [nav-right].
    Orta kolon her zaman var(--tu-header-logo-width) kadar ayrılır; nav-left ve
    nav-right kalan alanı (minmax(0,1fr)) paylaşır ve o alana sığmayan linkler
    logonun üstüne binmek yerine ikinci satıra sarar (flex-wrap). Böylece nav
    öğe sayısı değişse bile logoyla çakışma matematiksel olarak imkansız —
    piksel bazlı genişlik/breakpoint hesabına bağımlı değil.
*/

/* ── Variables ── */
.tu-header {
  --tu-header-bg: var(--tu-red);
  --tu-header-text: var(--tu-on-dark);
  --tu-header-height: 80px;
  --tu-header-logo-width: 140px;
  --tu-header-logo-height: 98px;

  @media (width >= 640px) {
    --tu-header-logo-width: 144px;
  }

  @media (width >= 768px) {
    --tu-header-height: 64px;
  }

  /* .tu-header__inner grid'i orta kolonu bu değişkenle boyutlandırıyor, bu yüzden
     büyük logo eşiği burada (.tu-header üzerinde) tanımlı olmalı — sadece
     .tu-header__logo üzerinde tanımlansaydı grid bunu göremezdi. */
  @media (width >= 1550px) {
    --tu-header-logo-width: 244px;
    --tu-header-logo-height: 133px;
  }
}

/* ── Header Bar ── */
.tu-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--tu-header-bg);
  height: var(--tu-header-height);
}

.tu-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tu-header-logo-width) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  height: 100%;
  padding-inline: 10px;

  /* Overrides .tu-safe-area. */
  max-width: 1600px;

  @media (width >= 640px) {
    padding-inline: 20px;
  }

  @media (width >= 1024px) {
    padding-inline: var(--tu-container-padding, 60px);
  }
}

/* ── Logo ── */
.tu-header__logo {
  grid-column: 2;
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  z-index: 110;
  width: var(--tu-header-logo-width);
  display: flex;
  align-items: center;
  justify-content: center;

  /* 1550px: bileşen kısıtı — logonun büyük boyuta geçip header'ın altına
     taşabildiği genişlik. Ritim breakpoint'i değil. --tu-header-logo-width
     büyümesi .tu-header üzerinde tanımlı (yukarıda); grid'in orta kolonu
     otomatik genişler, bu yüzden nav-left/nav-right ile çakışma riski yok. */
  @media (width >= 1550px) {
    top: 100%;
    transform: translate(-50%, -50%);
  }
}

.tu-header__logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Desktop Navigation ── */

.tu-header__nav-left,
.tu-header__nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* grid track'in gerçek genişliğine uysun; içerik genişliği kolonu itmesin */

    @media (width >= 1280px) {
      gap: 24px;
    }
}

.tu-header__nav-left {
  grid-column: 1;
  justify-self: start;
}

.tu-header__nav-right {
  grid-column: 3;
  justify-self: end;
}

/*
  Header'ın mobil/masaüstü eşiği: 1400px.
  Bileşen kısıtı — bu genişliğin altında masaüstü nav'ın (özellikle
  nav-left'teki dört link) rahat okunacak yeri kalmıyor, hamburger menüye
  geçiliyor. 1400px üzerinde nav-left/nav-right grid kolonlarına sığmayan
  linkler artık logonun üstüne binmiyor: her link kendi flex-shrink payı
  kadar daralıp gerektiğinde kendi içinde iki satıra sarıyor (bkz.
  .tu-header__nav-link — "KALİTE BELGELERİMİZ" artık elle <br> yerine bunu
  otomatik yapıyor). Bu yüzden eşik burada tam bir çakışma sınırı değil,
  sadece UX tercihi.

  Eşiğin iki tarafı tam olarak tümleyici olmalı: aşağıdaki `< 1400` ile
  hamburger'ın `>= 1400` kuralı birlikte çalışıyor. Önceden hamburger
  `> 1400` kullanıyordu; tam 1400px'te iki kural da devre dışı kalıyor,
  hem hamburger hem masaüstü menüsü aynı anda görünüyordu.
*/
@media (width < 1400px) {
  .tu-header__nav-left,
  .tu-header__nav-right .tu-header__nav-link {
    display: none;
  }
}


.tu-header__nav-link {
  font-family: var(--tu-font-main);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  color: var(--tu-header-text);
  flex-shrink: 1;
  min-width: 0;
  transition: opacity 0.25s ease;

  /* Logo/font eşiğiyle aynı: bkz. .tu-header__logo yorumu. */
  @media (width >= 1550px) {
    font-size: 13px;
    letter-spacing: 2px;
  }
}

.tu-header__nav-link:hover {
  text-decoration: underline;
}

/* ── Contact Button (SVG) ── */
.tu-header__cta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--tu-header-text);
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}


.tu-header__cta {
    max-width: 80px; font-size: 10px; line-height: 1.5; text-align: right;
    & > img { display: none; }
    &::after { content: attr(aria-label); text-transform: uppercase; }
    /* 370px: bileşen kısıtı — en küçük telefonlarda CTA metni sığmadığı için */
    @media (width >= 370px) {
        font-size: 12px;
    }
    @media (width >= 640px) {
        max-width: unset;
        & > img { display: block; }
        &::after { content: ''; }
    }
}


.tu-header__cta:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

.tu-header__cta svg {
  width: 83px;
  height: 34px;
  display: block;
}

/* ── Hamburger Button ── */
.tu-header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 120;
  grid-column: 1;
  justify-self: start;

  /* Yukarıdaki `width < 1400px` kuralının tümleyeni. */
  @media (width >= 1400px) {
    display: none;
  }
}

.tu-header__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--tu-header-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger → X animation */
.tu-header__hamburger.is-active .tu-header__hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.tu-header__hamburger.is-active .tu-header__hamburger-line:nth-child(2) {
  opacity: 0;
}

.tu-header__hamburger.is-active .tu-header__hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Overlay Menu ── */
.tu-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 105;
  background-color: var(--tu-header-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow: auto;
  padding-block: 50px;

  @media (orientation: landscape) {
    padding-block: 280px 50px;
  }

  /* Hamburger ile aynı eşik. Önceden 1470px'ti: 1400-1469 aralığında
     hamburger gizliyken overlay hâlâ açılabilir durumda kalıyordu. */
  @media (width >= 1400px) {
    display: none;
  }
}

.tu-header__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.tu-header__overlay-link {
  font-family: var(--tu-font-main);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--tu-header-text);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.tu-header__overlay.is-open .tu-header__overlay-link {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered entrance for overlay links */
.tu-header__overlay.is-open .tu-header__overlay-link:nth-child(1) { transition-delay: 0.08s; }
.tu-header__overlay.is-open .tu-header__overlay-link:nth-child(2) { transition-delay: 0.14s; }
.tu-header__overlay.is-open .tu-header__overlay-link:nth-child(3) { transition-delay: 0.20s; }
.tu-header__overlay.is-open .tu-header__overlay-link:nth-child(4) { transition-delay: 0.26s; }
.tu-header__overlay.is-open .tu-header__overlay-link:nth-child(5) { transition-delay: 0.32s; }
.tu-header__overlay.is-open .tu-header__overlay-link:nth-child(6) { transition-delay: 0.38s; }

.tu-header__overlay-link:hover {
  opacity: 0.75;
}

/*
Footer Component (Figma: node 823:581)
- Breakpoints: 768px, 1024px
*/

/* ── Variables ── */
.tu-footer {
  --tu-footer-bg: var(--tu-red);
  --tu-footer-text: var(--tu-on-dark);
  --tu-footer-border: var(--tu-on-dark);
  --tu-footer-font-size: 14px;
}

/* ── Footer2 Base ── */
.tu-footer {
  background-color: var(--tu-footer-bg);
  color: var(--tu-footer-text);
  font-family: var(--tu-font-main);
  font-size: var(--tu-footer-font-size);
  line-height: 1.4;
  padding-block: 30px;
}

/* ── Top Section (Intro + Nav) ── */
.tu-footer__top {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 30px var(--tu-container-padding) 40px;
  border-top: 1px solid var(--tu-footer-border);

  @media (width >= 1024px) {
    flex-direction: row;
    justify-content: space-between;
    gap: 40px;
    padding-block: 50px 60px;
    padding-inline-start: 0;
  }
}

.tu-footer__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 420px;

  @media (width >= 768px) {
    max-width: 336px;
  }
}

/* Koyu zeminli footer: ölçek ortak, rengi footer değişkeninden geliyor. */
.tu-footer__heading.tu-u-heading {
  color: var(--tu-footer-text);
}

.tu-footer__newsletter {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 355px;
  /* Odak halkası (outline) taşarsa bile sonuç mesajı overlay'inin
     arkasından görünmesin diye form sınırının dışına çıkamaz. */
  overflow: hidden;
  border-radius: 4px;

  @media (width >= 768px) {
    max-width: 284px;
  }
}

.tu-footer__newsletter-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  background: transparent;
  border: 1px solid var(--tu-footer-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding-inline: 12px;
  color: var(--tu-footer-text);
  font-family: var(--tu-font-main);
  font-size: 13px;
  /* Tarayıcının varsayılan odak halkası yerine zemin rengiyle vurgu:
     halka form'un dışına taşıp overlay'in arkasından görünebiliyordu. */
  outline: none;
  transition: background-color 0.15s ease;
}

.tu-footer__newsletter-input:focus-visible {
  background: rgb(255 255 255 / 12%);
}

.tu-footer__newsletter-input::placeholder {
  color: var(--tu-footer-text);
  opacity: 0.8;
}

.tu-footer__newsletter-submit {
  flex-shrink: 0;
  width: 52px;
  height: 48px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: block;
  outline: none;
  transition: background-color 0.15s ease;
}

.tu-footer__newsletter-submit:focus-visible {
  background: rgb(255 255 255 / 12%);
}

.tu-footer__newsletter-submit img {
  display: block;
  width: 100%;
  height: 100%;
}

.tu-footer__newsletter-msg {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 12px;
  margin: 0;
  background: var(--tu-footer-bg);
  font-size: 13px;
  color: var(--tu-footer-text);
}

.tu-footer__newsletter-msg[hidden] {
  display: none;
}

.tu-footer__newsletter-msg.is-error .tu-footer__newsletter-msg-text {
  color: #ffb3b3;
}

.tu-footer__newsletter-msg-text {
  min-width: 0;
}

.tu-footer__newsletter-msg-ok {
  flex-shrink: 0;
  padding: 0 16px;
  height: 100%;
  background: transparent;
  border: none;
  border-left: 1px solid var(--tu-footer-border);
  color: var(--tu-footer-text);
  font-family: var(--tu-font-main);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.tu-footer__logo {
  display: block;
  width: 140px;
  height: auto;
}

/* ── Nav Links ── */
.tu-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;

  @media (width >= 1024px) {
    gap: 80px;
  }
}

.tu-footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 80px;
}

.tu-footer__nav-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.26px;
}

.tu-footer__nav-link {
  display: block;
  font-size: var(--tu-footer-font-size);
  color: var(--tu-footer-text);
  line-height: 2.4;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .tu-footer__nav-link:hover {
    opacity: 0.7;
    text-decoration: underline;
  }
}

/* ── Copyright Bar ── */
.tu-footer__copyright {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tu-footer-border);

  @media (width >= 768px) {
    flex-direction: row;
  }
}

.tu-footer__copyright-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  font-size: 14px;
}

.tu-footer__copyright-cell--totop {
  width: 100%;
  justify-content: space-between;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--tu-footer-border);
  color: var(--tu-footer-text);
  font: inherit;
  cursor: pointer;
  transition: opacity 0.25s ease;

  @media (width >= 768px) {
    width: 178px;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--tu-footer-border);
  }
}

@media (hover: hover) {
  .tu-footer__copyright-cell--totop:hover {
    opacity: 0.8;
  }
}

.tu-footer__copyright-cell--right {
  flex: 1;
  flex-direction: column;
  gap: 16px;

  @media (width >= 768px) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.tu-footer__social {
  display: flex;
  gap: 12px;
  order: 2;

  @media (width >= 768px) {
    order: 0;
    margin-inline: auto;
  }
}

.tu-footer__social-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  color: var(--tu-footer-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .tu-footer__social-link:hover {
    opacity: 0.7;
  }
}

.tu-footer__credit {
  opacity: 0.8;
  font-size: 12px;
}

.tu-footer__credit a {
  text-decoration: underline;
  color: var(--tu-footer-text);
  transition: opacity 0.25s ease;
}

@media (hover: hover) {
  .tu-footer__credit a:hover {
    opacity: 1;
  }
}


.tu-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.tu-banner__list {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.tu-banner__list::-webkit-scrollbar {
  display: none;
}

.tu-banner__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  height: 500px;
  max-height: 754px;
  min-height: 390px;
  overflow: hidden;

  /* 1200px: bileşen kısıtı, ritim değil — banner'ın sabit masaüstü
     yüksekliğine geçtiği nokta. 1280'e çekilirse 1200-1279 aralığında
     80vh devrede kalıyor ve banner 603px yerine ~720px oluyor. */
  @media (width >= 1200px) {
    flex: 1;
    height: 603px;
    max-height: unset;
  }
}

.tu-banner__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.tu-banner__item:hover .tu-banner__img {
  transform: scale(1.05);
}

/* Etin kırmızısı hiçbir yerde kapanmasın: karartma katmanı YOK. Okunabilirlik
   artık gölgeyle değil, başlığın krem zeminli kutusuyla sağlanıyor. */
.tu-banner__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0 clamp(16px, 3vw, 28px) clamp(20px, 5vh, 40px);
  text-align: center;
}

.tu-banner__title {
  position: relative;
  z-index: 1;
  font-family: var(--tu-font-main);
  font-weight: 800;
  font-size: clamp(15px, 1.6vw, 19px);
  color: var(--tu-red);
  text-transform: uppercase;
  width: 100%;
  line-height: 1.35;
  background: var(--tu-cream);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.tu-banner__badge {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 3vw, 30px);
  top: clamp(16px, 3vw, 30px);
  width: 90px;
  height: auto;

  @media (width >= 768px) {
    width: 120px;
  }
}

.tu-banner__actions {
  position: absolute;
  bottom: clamp(40px, 10vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 430px;
  padding-inline: 20px;
  z-index: 20;

  @media (width >= 768px) {
    max-width: 344px;
  }

  @media (width < 768px) {
    /* Keep centered on top of the whole banner area on mobile too */
    position: absolute;
    pointer-events: none; /* Let clicks pass through if needed, but buttons should be clickable */
  }
}

.tu-banner__btn {
  height: 51px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1.6px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-family: var(--tu-font-main);
  text-decoration: none;

  @media (width < 768px) {
    pointer-events: auto;
  }
}

.tu-banner__btn--outline {
  border: 1px solid var(--tu-white);
  color: var(--tu-white);
  background: transparent;
}

.tu-banner__btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

.tu-banner__btn--solid {
  background: var(--tu-red);
  color: var(--tu-on-dark);
}

.tu-banner__btn--solid:hover {
  background: var(--tu-red-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(210, 22, 15, 0.3);
}

.tu-et-dogru {
  text-align: center;
}

.tu-et-dogru__title {
  text-wrap: balance;
  margin: 0 auto var(--tu-space-header);
}

.tu-et-dogru__bullets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--tu-space-feature);

  @media (width >= 768px) {
    gap: 15px;
  }

  @media (width >= 1024px) {
    flex-direction: row;
    justify-content: center;
    gap: 60px;
  }
}

.tu-et-dogru__bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--tu-font-main);
  font-weight: 600;
  font-size: 18px;
  color: var(--tu-primary);

  @media (width >= 1024px) {
    font-size: 20px;
  }
}

.tu-et-dogru__bullet-dot {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.tu-et-dogru__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 10px;

  @media (width >= 1024px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
  }
}

.tu-et-dogru__feature {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tu-et-dogru__icon {
  height: 35px;
  margin-bottom: 10px;

  @media (width >= 768px) {
    height: 60px;
    margin-bottom: 20px;
  }
}

.tu-et-dogru__icon img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.tu-et-dogru__feature-title {
  margin-bottom: 15px;

  /* Dört kartın açıklamaları aynı hizada başlasın diye taban yükseklik veriliyor.
     Sabit height iken ortak başlık ölçeğinde metin kutudan taşıyordu; iki satırlık
     ölçüyü taban alan min-height taşmayı da engelliyor. */
  @media (width >= 1024px) {
    min-height: calc(24px * 1.3 * 2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.tu-et-dogru__feature-desc {
  max-width: 300px;

  @media (width >= 1024px) {
    max-width: 240px;
  }
}

/* Ürünlerimiz Component Styles */

.tu-products__header {
  text-align: center;
  margin-inline: auto;
  margin-bottom: var(--tu-space-header);
}

.tu-products__title {
  margin-bottom: var(--tu-space-heading);
}

.tu-products__desc {
  text-wrap: balance;
}

.tu-products__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 15px;

  @media (width >= 768px) {
    grid-template-columns: repeat(4, 1fr);
    margin-bottom: 30px;
  }
}

.tu-product-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;

  &:hover .tu-product-card__image img {
    transform: scale(1.08);
  }
}

/* Görsel kendi oranını korur; başlık artık üstüne binmiyor, altında duruyor. */
.tu-product-card__image {
  aspect-ratio: 387 / 481;
  overflow: hidden;
  background-color: #eee;
  border-radius: 4px;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

.tu-product-card__content {
  text-align: center;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ölçeğin tek istisnası. Kartlar mobilde ikişer, masaüstünde dörder yan yana
   dizildiği için tu-h4 her iki kırılımda da fazla büyük kalıyordu; bu başlık
   seviye sınıfı taşımaz, ölçüsünü buradan alır. */
.tu-product-card__title.tu-u-heading {
  font-size: 15px;
  line-height: var(--tu-lh-normal);
  margin-bottom: 1rem;

  @media (width >= 768px) {
    font-size: 18px;
  }
}

/* begin: tu-cta */
.tu-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  width: 100%;
  justify-content: center;

  &.tu-cta-buttons--start {
    justify-content: flex-start;
  }

  /* Mobilde iki butonu alt alta yığmak yerine yan yana sığdır. */
  @media (width < 768px) {
    flex-wrap: nowrap;
    gap: 8px;
  }
}

.tu-cta-btn {
  width: max-content;
  min-width: 180px;
  max-width: 300px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 16px;
  background-color: var(--tu-red);
  color: var(--tu-white);
  font-family: var(--tu-font-main);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: var(--tu-red-dark);
  }

  &.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
  }

  /* WhatsApp ikonunun konuşma balonu kulakçığı sağda boşluk bırakıyor;
     ikonu hafifçe sola kaydırarak diğer CTA ikonuyla görsel olarak dengele. */
  &.tu-cta-btn--whatsapp .tu-cta-btn__icon {
    transform: translateX(-2px);
  }

  /* İki buton yan yana sığdığı sürece eşit genişlikte kalsın. */
  @media (width < 768px) {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
  }

  @media (width < 400px) {
    gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
  }

  @media (width >= 768px) {
    font-size: 16px;
    padding: 12px 24px;
  }
}

.tu-cta-btn__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  svg, img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @media (width < 400px) {
    width: 18px;
    height: 18px;
  }
}

.tu-cta-btn__text {
  flex: 1 1 auto;
}
/* end: tu-cta */

.tu-soguk-zincir__header {
  text-align: center;
  margin-bottom: var(--tu-space-header);

  p {
    margin-inline: auto;
    max-width: 960px;
  }
}

.tu-soguk-zincir__title {
  margin-bottom: var(--tu-space-heading);
}

.tu-soguk-zincir__desc {
  margin: 0;
}

.tu-soguk-zincir__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 10px;

  @media (width >= 768px) {
    gap: 40px 30px;
  }

  @media (width >= 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* .tu-ustalik__item ile aynı kart deseni: boşluk gap'ten geliyor. */
.tu-soguk-zincir__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.tu-soguk-zincir__image-wrapper {
  width: 100%;
  aspect-ratio: 350 / 400;
  overflow: hidden;
}

.tu-soguk-zincir__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tu-soguk-zincir__caption {
  max-width: 320px;
  padding: var(--tu-space-heading) 10px;
  font-size: 12px;
}

/* begin: tu-split */
.tu-split__inner {
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (width >= 1024px) {
    flex-direction: row;
    align-items: stretch;
  }
}

.tu-split__image-wrapper {
  position: relative;
  width: 100%;

  @media (width >= 1024px) {
    width: 50%;
  }
}

.tu-split__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tu-split__content {
  width: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;

  @media (width >= 1024px) {
    width: 50%;
    padding: 80px 40px;
  }
}

.tu-split__heading {
  margin-bottom: var(--tu-space-heading);
  /* max-width: 440px; */
  text-align: left;

  /*@media (width >= 768px) {
    max-width: 352px;
  }*/
}

/*
  Paragraf boşluğu p'lerin margin'i yerine flow gap ile veriliyor.

  `p { margin-block: 1rem }` kullanıldığında, sarmalayıcının padding'i ve
  border'ı olmadığı için ilk p'nin üst margin'i dışarı sızıyor; ebeveyn
  (.tu-split__content) flex olduğundan da başlığın margin-bottom'ı ile
  collapse etmiyordu. Sonuç: başlık aralığı niyet edilenden büyük çıkıyordu.
  gap tanım gereği collapse'tan bağımsız, dolayısıyla ebeveynin flex mi
  block mu olduğu artık sonucu değiştirmiyor.
*/
.tu-split__text {
  display: flex;
  flex-direction: column;
  gap: var(--tu-space-text);
  margin-bottom: var(--tu-space-content);
  max-width: 600px;

  @media (width >= 768px) {
    max-width: 460px;
  }

  strong {
    font-weight: 700;
  }

  p {
    margin-block: 0;
  }
}

/* Görsel sağa, içerik sola geçer (DOM sırası: görsel önce, içerik sonra). */
.tu-split--reverse {
  .tu-split__image-wrapper {
    @media (width >= 1024px) {
      order: 2;
    }
  }

  .tu-split__content {
    @media (width >= 1024px) {
      order: 1;
    }
  }
}

/*
  tu-slider — tu-split görsel sütununda çalışan Swiper.

  Kutu 4:3'e sabitleniyor; tek görselde object-fit: cover ile yaşanan
  masaüstü kırpılması böylece ortadan kalkıyor, görseller de aynı orana
  hazırlanacağı için kırpma kalmıyor.

  Masaüstünde sütun stretch olduğu için align-self: center veriyoruz;
  aksi halde satır yüksekliği oranı ezip görseli tekrar kırpardı.
*/
.tu-slider {
  width: 100%;
  aspect-ratio: 4 / 3;

  @media (width >= 1024px) {
    align-self: center;
  }

  .swiper-slide {
    /* Slaytın kendisi de kutuyu tam doldursun; img %100 yüksekliği buradan alır. */
    height: 100%;
  }
}

.tu-slider__pagination {
  /* Swiper'ın turkuaz varsayılanı yerine marka rengi. */
  --swiper-pagination-color: var(--tu-red);
  --swiper-pagination-bullet-inactive-color: var(--tu-white);
  --swiper-pagination-bullet-inactive-opacity: 0.7;
  --swiper-pagination-bullet-size: 10px;
  --swiper-pagination-bullet-horizontal-gap: 5px;
  --swiper-pagination-bottom: 16px;
}

/* Masaüstünde görsel sütunu 4:3 kutuya uyar (stretch yerine). */
.tu-split__image-wrapper:has(.tu-slider) {
  @media (width >= 1024px) {
    display: flex;
  }
}

/* İçerik ortalanır, başlık büyür. */
.tu-split--center {
  .tu-split__content {
    align-items: center;
    text-align: center;
  }

  .tu-split__heading {
    text-align: center;
  }

  .tu-split__text {
    text-align: center;
  }
}
/* end: tu-split */

/* begin: tu-video-logo */
.tu-video-logo__video-button {
  position: absolute;
  padding-block-start: 5%;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.25) 100%);
  transition: background-color 0.3s ease;
}

.tu-video-logo__video-logo {
  width: 140px;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));

  @media (width >= 768px) {
    width: 180px;
  }

}

.tu-video-logo__video-play {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  color: var(--tu-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, background-color 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  svg {
    transform: translateX(2px);

    @media (width >= 768px) {
      width: 50%;
      height: 50%;
    }
  }

  @media (width >= 768px) {
    width: 80px;
    height: 80px;
  }

}

.tu-video-logo__video-button:hover .tu-video-logo__video-play {
  background-color: var(--tu-white);
  transform: translate(-50%, -50%) scale(1.08);
}

/* Fancybox: video lightbox'ı ekrana sığacak en büyük boyutta göster */
.fancybox__slide:is(.has-iframe, .has-youtube) .fancybox__content {
  width: min(96vw, calc(96vh * 16 / 9)) !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
}
/* end: tu-video-logo */

/* begin: tu-ustalik */
.tu-ustalik__header {
  text-align: center;
  margin-bottom: var(--tu-space-header);

  p {
    margin-inline: auto;
    max-width: 720px;
  }
}

.tu-ustalik-badge {
  width: 140px;
  height: 140px;

  @media (width >= 768px) {
    width: 270px;
    height: 270px;
  }
}

.tu-ustalik__title {
  margin-bottom: var(--tu-space-heading);
}

.tu-ustalik__desc {
  margin: 0;
}

.tu-ustalik__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 10px;

  @media (width >= 1024px) {
    gap: 15px;
    grid-template-columns: repeat(4, 1fr);
  }
}

/* align-items: center vardı ama display tanımlı olmadığı için (block)
   hiçbir etkisi yoktu. Flow'a çevrildi: hem o satır artık çalışıyor hem de
   görsel/başlık/metin aralığı margin toplamı yerine tek gap'ten geliyor. */
.tu-ustalik__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--tu-space-heading);

  .tu-u-heading {
    margin-block: 0;
  }

  /* gap boşluğu verdiği için sarmalayıcının kendi margin'i sıfırlanıyor. */
  .tu-ustalik__image-wrapper {
    margin-bottom: 0;
  }
}

.tu-ustalik__image-wrapper {
  width: 100%;
  aspect-ratio: 350 / 400;
  overflow: hidden;
  margin-bottom: 14px;

  @media (width >= 768px) {
    margin-bottom: 24px;
  }
}

.tu-ustalik__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tu-ustalik__caption {
  max-width: 320px;
  margin-inline: auto;

  @media (width >= 768px) {
    max-width: 256px;
  }
}
/* end: tu-ustalik */

/* begin: tu-mutfaginda */
/*
  Mutfağında Component Styles
  - Mobile first approach with modern CSS nesting
  - Breakpoints: 1024px for side-by-side flex layout, 1430px for overlapping absolute visuals layout
*/

.tu-mutfaginda {
  background-color: var(--tu-red);
  padding-inline: var(--tu-container-padding);
  overflow: hidden;
  position: relative;

  /* Yatay padding bu modülde .tu-section__inner'a devredilemiyor:
     ≥1430px'de üst üste binen görseller .tu-safe-area'nın tam genişliğine
     göre absolute konumlanıyor, gutter eklenirse kompozisyon kayıyor. */
  @media (width >= 1430px) {
    padding-inline: 0;
  }
}

.tu-mutfaginda__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;

  @media (width >= 1024px) {
    flex-direction: row;
    justify-content: space-between;
    position: relative;
  }

  @media (width >= 1430px) {
    min-height: 697px;
  }
}

.tu-mutfaginda__visuals {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  max-width: 500px;
  height: auto;
  position: relative;

  @media (width >= 1024px) {
    width: 48%;
  }

  @media (width >= 1430px) {
    display: block;
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
  }
}

.tu-mutfaginda__img-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  width: 100%;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (width >= 1430px) {
    position: absolute;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
}

.tu-mutfaginda__img-wrapper--primary {
  width: 100%;
  aspect-ratio: 496 / 367;
  z-index: 1;

  @media (width >= 1430px) {
    width: 397px;
    top: 106px;
    left: 43px;
  }
}

.tu-mutfaginda__img-wrapper--secondary {
  width: 90%;
  aspect-ratio: 366 / 338;
  align-self: flex-end;
  z-index: 2;

  @media (width >= 1430px) {
    width: 293px;
    align-self: auto;
    top: 341px;
    left: 329px;
  }
}

.tu-mutfaginda__content {
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  color: var(--tu-on-dark);

  @media (width >= 1024px) {
    width: 48%;
  }

  @media (width >= 1430px) {
    width: 45%;
    margin-left: auto;
    padding-right: 32px;
  }
}

.tu-mutfaginda__title {
  margin: 0;
}

.tu-mutfaginda__stars {
  width: 180px;
  height: auto;

  @media (width >= 1024px) {
    width: 226px;
  }
}

.tu-mutfaginda__text {
  margin: 0;
  max-width: 600px;

  @media (width >= 1024px) {
    max-width: 480px;
  }
}

/* end: tu-mutfaginda */

.tu-musteri-yorumlari {
  overflow: hidden;
}

.tu-musteri-yorumlari__title {
  text-align: center;
  margin-bottom: var(--tu-space-header);

  @media (width >= 1200px) {
    max-width: 960px;
    margin-inline: auto;
  }
}

.tu-musteri-yorumlari__stars {
  width: 120px;
  height: auto;
}

/* bkz. .tu-bu-lezzetin__grid: aynı carousel → 3'lü grid geçiş kararı burada da geçerli. */
.tu-musteri-yorumlari__grid {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;

  margin-inline: calc(var(--tu-container-padding) * -1);
  padding-inline: var(--tu-container-padding);

  @media (width >= 1200px) {
    overflow: visible;
    justify-content: center;
    gap: 26px;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.tu-musteri-yorumlari__grid::-webkit-scrollbar {
  display: none;
}

.tu-musteri-yorumlari__item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 85%;

  @media (width >= 1200px) {
    width: 340px;
    flex-shrink: 1;
  }
}

.tu-musteri-yorumlari__card {
  height: 100%;
  background: var(--tu-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}

.tu-musteri-yorumlari__image {
  aspect-ratio: 1 / 1;

  svg {
    display: block;
    width: 100%;
    height: 100%;
  }
}

/* Logo, görsel ile metin arasındaki sınırın üstüne negatif margin ile taşıyor. */
.tu-musteri-yorumlari__badge {
  display: block;
  width: 92px;
  height: auto;
  margin: -28px 28px 0 auto;
  position: relative;
  z-index: 2;
}

.tu-musteri-yorumlari__content {
  padding: 16px 24px 28px;

}

/* Yorum yapan kişi: metin isim, ölçek ortak, italik ve soluk renk bu modüle özel. */
.tu-musteri-yorumlari__name.tu-u-heading {
  font-style: italic;
  font-size: 13px;
  color: var(--tu-text-muted);
  margin-bottom: 8px;
}

/* Yorum metni: vurgulu, kırmızı ve kalın. */
.tu-musteri-yorumlari__text {
  font-weight: 700;
  margin-bottom: 8px;
}

/* end: tu-musteri-yorumlari */

.tu-bu-lezzetin {
  overflow: hidden;
}

.tu-bu-lezzetin__title {
  text-align: center;
  margin-bottom: var(--tu-space-header);

  @media (width >= 1200px) {
    max-width: 960px;
    margin-inline: auto;
  }
}

/* Bu modülün 1200px eşiği bileşen kısıtı, ritim değil: carousel'den
   3'lü grid'e geçiş üç kartın yan yana sığdığı genişlikte olmalı (~1180px).
   1280'e çekilirse 1200-1279 aralığında carousel devrede kalıyor ve mobil
   için tasarlanmış %85 kart genişliği masaüstünde 926px'e çıkıyor. */
.tu-bu-lezzetin__grid {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */

  /* Carousel mobilde ekran kenarına kadar kayabilsin: .tu-section__inner
     gutter'ından negatif margin ile çıkıp boşluğu kendi padding'i veriyor. */
  margin-inline: calc(var(--tu-container-padding) * -1);
  padding-inline: var(--tu-container-padding);

  @media (width >= 1200px) {
    overflow: visible;
    justify-content: center;
    gap: 26px;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.tu-bu-lezzetin__grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.tu-bu-lezzetin__item {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 85%; /* Mobile card width */

  @media (width >= 1200px) {
    width: auto;
    flex-shrink: 1;
  }
}


.tu-bu-lezzetin__image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}


/* begin: tu-page-header
   Başlık + açıklama bloğu. İçerik sayfalarında (iletisim vb.) kullanılır.
   Daha önce iletisim.php içinde inline style ve u-spacer div'leriyle
   yapılıyordu; token'lara bağlanabilmesi için buraya taşındı. */
.tu-page-header .tu-u-heading {
    margin-bottom: 0.5rem;
}

.tu-page-header,
.tu-contact-page-info {
  margin-bottom: calc( var(--tu-space-header) * 0.5);
}

.tu-u-desc.tu-u-lead {
  max-width: 600px;
  margin: 12px auto 0;
  color: var(--tu-text-muted);
}

.tu-contact-page-form {
  max-width: 900px;
  margin-inline: auto;
  background-color: var(--tu-white);
  border: 1px solid var(--tu-hairline);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  padding: 24px;

  @media (width >= 768px) {
    padding: 40px;
  }
}

.tu-contact-page {
  a {
    color: var(--tu-text-muted);
    text-decoration: none;

    @media (hover:hover) {
      &:hover {
        color: var(--tu-red);
        text-decoration: underline;
        text-underline-offset: 4px;
      }
    }
  }
}
/* end: tu-page-header */

/*
  Sticky CTA
  ──────────
  Sağ altta sabit duran telefon + WhatsApp butonları (includes/sticky-cta.php).
  Header/footer gibi site geneli "chrome" olduğu için ayrı bir CSS dosyası
  yerine burada duruyor (AGENTS.md kural 7'den bilinçli sapma).

  Mobil: sadece ikon, iki daire — içeriği kapatmasın diye.
  ≥1024px: etiketli hap biçimi (İLETİŞİM + numara + alt satır).

  Footer'a gelindiğinde scripts.js elemanı translateY ile yukarı iterek
  footer'ın üst kenarına park eder; buradaki transform kasıtlı olarak
  transition'sız çünkü scroll ile her frame güncelleniyor.

  Sayfa başından aşağı kaydırıldığında scripts.js .is-compact ekliyor:
  hap büzülüp sadece ikonlu daireye dönüyor, başa dönülünce metin geri
  geliyor. Mobilde zaten metin yok, bu yüzden sadece ≥1024px'te anlamlı.
*/
.tu-sticky-cta {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  /* header 100 / mobil overlay 105 ALTINDA: menü açıkken overlay bunu örtmeli */
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  will-change: transform;

  @media (width >= 1024px) {
    right: 20px;
    bottom: 20px;
    gap: 12px;
    /* İki hap eşit genişlikte olsun: sabit konumlu kolon zaten en geniş
       çocuğu kadar (shrink-to-fit) genişliyor, stretch de kısa olanı
       ona eşitliyor. Sabit bir px genişliğe gerek kalmıyor. */
    align-items: stretch;
  }
}

.tu-sticky-cta__item {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--tu-white);
  font-family: var(--tu-font-main);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background-color 0.3s ease, padding 0.3s ease, gap 0.3s ease;

  &.is-disabled {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
  }

  @media (width >= 1024px) {
    width: auto;
    height: auto;
    min-height: 56px;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 20px 10px 14px;
    border-radius: 999px;

    /* Kaydırıldığında hap büzülüp daireye dönüyor: sağdaki metin payı
       kalkıyor, geriye ikon + eşit padding kalıyor. */
    .tu-sticky-cta.is-compact & {
      gap: 0;
      padding: 10px 14px;
    }
  }
}

.tu-sticky-cta__item--phone {
  background-color: var(--tu-red);

  @media (hover: hover) {
    &:hover {
      background-color: var(--tu-red-dark);
    }
  }
}

.tu-sticky-cta__item--wa {
  background-color: var(--tu-whatsapp);

  @media (hover: hover) {
    &:hover {
      background-color: var(--tu-whatsapp-dark);
    }
  }
}

.tu-sticky-cta__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    width: 100%;
    height: 100%;
  }

  @media (width >= 1024px) {
    width: 28px;
    height: 28px;
  }
}

/* Mobilde etiket gizli — anlam item'daki aria-label'da taşınıyor. */
.tu-sticky-cta__body {
  display: none;

  @media (width >= 1024px) {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    /* Büzülme max-width üzerinden animasyonlanıyor; display: none olsaydı
       geçiş olmazdı. white-space: nowrap kapanırken metnin sarmasını önlüyor. */
    max-width: 240px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.3s ease, opacity 0.2s ease;

    .tu-sticky-cta.is-compact & {
      max-width: 0;
      opacity: 0;
    }
  }
}

.tu-sticky-cta__label {
  font-size: 15px;
  font-weight: 700;

  strong {
    font-weight: 700;
  }
}

.tu-sticky-cta__sub {
  font-size: 12px;
  font-weight: 400;
}
/* end: tu-sticky-cta */

/* begin: tu-urun-kategori */
/* Bu modül .tu-bg-light zincirinin dışında: kendi içinde zebra şeritli
    bir bölge oluşturuyor ve o yüzden zinciri bilinçli olarak kırıyor.
    Renkler yine global token'lardan besleniyor.
    Şeritler artık .tu-safe-area içinde değil, doğrudan bu sarmalayıcının
    çocuğu — böylece 1280px üstü ekranlarda şerit kenarları görünmüyor. */
.tu-urun-kategorileri {
  background-color: var(--tu-white);
}

.tu-urun-kategori {
  padding-block: 48px;
  border-top: 1px solid var(--tu-hairline);

  @media (width >= 768px) {
    padding-block: 64px;
  }
}

/* Tek numaralı şeritler krem: önceki modül (beyaz) ile sınır oluşsun. */
.tu-urun-kategori:nth-child(odd) {
  background-color: var(--tu-cream);
}

/*
  Kategori kartı: görsel + başlık/açıklama.

  Kaynak görseller dikey (774×962). Mobilde kart gibi okunsun diye görsel
  önce geliyor (DOM sırası da bu), altında başlık ve açıklama.
  ≥768px'te başlık/açıklama solda, görsel sağda — grid ile açıkça
  yerleştiriliyor, DOM sırası mobil için doğru kalıyor.
*/
.tu-urun-kategori__card {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;

  @media (width >= 768px) {
    grid-template-columns: 1fr minmax(300px, 420px);
    align-items: start;
    gap: 32px;
    margin-bottom: 32px;
  }
}

.tu-urun-kategori__head {
  display: flex;
  flex-direction: column;
  gap: 8px;

  @media (width >= 768px) {
    grid-column: 1;
    grid-row: 1;
    gap: 14px;
    padding-top: 24px;
  }
}

.tu-urun-kategori__eyebrow {
  font-family: var(--tu-font-main);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tu-red);
  font-weight: 700;
}

.tu-urun-kategori__title {
  margin: 0;
}

.tu-urun-kategori__desc {
  max-width: 480px;
  font-size: 15px;
  line-height: var(--tu-lh-relaxed);
  text-wrap: balance;

  p {
    margin-bottom: 8px;
  }

  @media (width >= 768px) {
    font-size: 17px;
  }
}

/* Oran kaynak görselin kendi oranı (≈4/5): cover kırpma yapmadan doluyor,
   eski 21/6 şeridindeki ortadan kesilme sorunu kalkıyor. */
.tu-urun-kategori__hero {
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 12px;

  @media (width >= 768px) {
    grid-column: 2;
    grid-row: 1;
  }
}

.tu-urun-kategori__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tu-urun-kategori__list {
  border-top: 1px solid var(--tu-hairline);
}

.tu-urun-kategori__row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--tu-hairline);

  @media (width >= 768px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  @media (width >= 1280px) {
    border-radius: 8px;
    padding-inline: 16px;
    margin-inline: -16px;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: color-mix(in srgb, var(--tu-red) 6%, transparent);
    }

    &:hover .tu-urun-kategori__name {
      color: var(--tu-red);
    }
  }
}

/* Başlık değil, kategori listesindeki span; kendi ölçüsünü taşır. */
.tu-urun-kategori__name {
  font-family: var(--tu-font-heading);
  font-weight: 500;
  font-size: 16px;
  color: var(--tu-primary);
  transition: color 0.2s ease;

  @media (width >= 768px) {
    flex-shrink: 0;
    min-width: 260px;
  }
}

.tu-urun-kategori__row-desc {
  font-size: 13px;
  color: var(--tu-ink);

  @media (width >= 768px) {
    flex: 1;
  }
}

.tu-urun-kategori__cta {
  margin-left: auto;
  flex-shrink: 0;
  align-self: flex-start;
  font-family: var(--tu-font-main);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--tu-red);
  background-color: transparent;
  border: 1px solid var(--tu-red);
  border-radius: 20px;
  padding: 8px 18px;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s ease;

  @media (width >= 768px) {
    align-self: center;
  }

  &:hover {
    background-color: var(--tu-red);
    color: var(--tu-white);
  }
}
/* end: tu-urun-kategori */

/* begin: tu-sorular */
/*
  SSS akordeonu — <details>/<summary> üstünde, JS'siz.

  Akordeon davranışı için script yazmıyoruz: <details> zaten klavye ile
  açılıp kapanıyor, ekran okuyucuya durumunu bildiriyor ve sayfa içi arama
  (Ctrl+F) kapalı cevabı bulup açabiliyor. Bir <button aria-expanded> + JS
  kombinasyonu bunların hiçbirini bedavaya vermiyor.

  <summary> flex yapılabilsin diye list-style kaldırılıyor; ::marker ve
  WebKit'in ayrı ::-webkit-details-marker'ı ayrı ayrı susturulmalı.
*/
.tu-sorular__header {
  text-align: center;
  margin-bottom: var(--tu-space-header);
}

.tu-sorular__title {
  margin-bottom: var(--tu-space-heading);
}

.tu-sorular__desc {
  max-width: 720px;
  margin-inline: auto;
}

/* Liste ölçü olarak okunabilirlikten türüyor: 1280px genişlikte tek satırlık
   soru başlıkları çok uzuyor, cevap satırları 100 karakteri aşıyordu. */
.tu-sorular__list {
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid var(--tu-hairline);
}

.tu-soru {
  border-bottom: 1px solid var(--tu-hairline);
}

.tu-soru__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 20px;
  cursor: pointer;
  list-style: none;

  &::-webkit-details-marker {
    display: none;
  }

  @media (width >= 768px) {
    padding-block: 24px;
  }
}

.tu-soru__title {
  transition: color 0.2s ease;
}

.tu-soru[open] .tu-soru__title {
  font-weight: 700;
}

@media (hover: hover) {
  .tu-soru__question:hover .tu-soru__title {
    color: var(--tu-red);
  }
}

.tu-soru__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--tu-hairline);
  color: var(--tu-red);
  transition: transform 0.3s ease, background-color 0.2s ease;
}

.tu-soru[open] .tu-soru__icon {
  transform: rotate(180deg);
  background-color: var(--tu-white);
}

/*
  Açılış animasyonu yükseklik değil opaklık/öteleme üstünden: <details>
  içeriğinin yüksekliği auto olduğu için height geçişi ölçüm gerektirir,
  ölçüm de JS demektir. Kısa bir fade yeterince yumuşak.
*/
.tu-soru__answer.tu-u-lead {
  padding-block-end: 24px;
  max-width: 760px;
  animation: tu-soru-in 0.3s ease-out;

  @media (width >= 768px) {
    padding-inline-end: 52px;  /* ikon sütununun altını boş bırak */
  }

  a,
  .tu-link-button {
    color: var(--tu-red);
    font-weight: 700;

    &:hover {
      text-decoration: underline;
    }
  }
}

@keyframes tu-soru-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* end: tu-sorular */

/* begin: tu-surec */
.tu-surec__list {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: var(--tu-space-header);

  @media (width >= 768px) {
    gap: 0;
  }
}

/*
  Mobilde HTML sırası (görsel, metin) sabit kalıyor; masaüstünde çift/tek
  öğeler flexbox order ile yer değiştiriyor, böylece "metin-görsel /
  görsel-metin" zikzağı elde ediliyor.
*/
.tu-surec__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;

  @media (width >= 768px) {
    flex-direction: row;
    gap: 0;
  }

  &:nth-child(odd) {
    @media (width >= 768px) {
      .tu-surec__image-wrapper {
        order: 2;
      }

      .tu-surec__text {
        order: 1;
      }
    }
  }
}

.tu-surec__image-wrapper {
  width: 100%;

  @media (width >= 768px) {
    width: 50%;
  }
}

.tu-surec__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tu-surec__text {
  width: 100%;
  font-family: var(--tu-font-main);
  /* Ölçek .tu-u-lead'den; bu modülde vurgu için kalın. */
  font-weight: 700;
  text-align: center;

  @media (width >= 768px) {
    width: 50%;
  }

  p {
    margin: 0 auto;
    max-width: 480px;
    text-wrap: balance;
  }
}

/* begin: tu-nasil */
.tu-nasil {
  background-color: var(--tu-red);
  text-align: center;
}

.tu-nasil .tu-nasil__title {
  color: var(--tu-on-dark);
  margin-bottom: var(--tu-space-header);
}

.tu-nasil__list {
  display: flex;
  flex-direction: column;
  gap: var(--tu-space-feature);

  @media (width >= 768px) {
    flex-direction: row;
    gap: 40px;
  }
}

.tu-nasil__item {
  color: var(--tu-on-dark);

  @media (width >= 768px) {
    flex: 1;
  }
}

.tu-nasil__number {
  font-family: var(--tu-font-heading);
  font-size: 48px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: var(--tu-space-text);
}

/* Koyu zeminli bölüm: ölçek ortak, rengi kapsayıcıdan devralıyor. */
.tu-nasil__heading.tu-u-heading {
  color: inherit;
  margin-bottom: var(--tu-space-text);
}

/* Koyu zeminli bölüm: ölçek ortak, rengi kapsayıcıdan devralıyor. */
.tu-nasil__text.tu-u-caption {
  color: inherit;
  max-width: 340px;
  margin-inline: auto;
}
/* end: tu-nasil */

/* begin: tu-kalite-ust */
.tu-kalite-ust {
  text-align: center;
}

.tu-kalite-ust__title {
  max-width: 900px;
  margin: 0 auto var(--tu-space-header);
}

.tu-kalite-ust__text {
  display: flex;
  flex-direction: column;
  gap: var(--tu-space-text);
  max-width: 720px;
  margin: 0 auto var(--tu-space-feature);

  p {
    margin-block: 0;
  }
}

.tu-kalite-ust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 30px 40px;

  @media (width >= 768px) {
    gap: 40px 70px;
  }
}

.tu-kalite-ust__logo {
  width: 72px;
  height: 72px;
  object-fit: contain;

  @media (width >= 768px) {
    width: 88px;
    height: 88px;
  }
}
/* end: tu-kalite-ust */

/* begin: tu-certs */
.tu-certs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  gap: 20px;

  @media (width >= 768px) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
}

/*
  Oranlar, alttaki "İncele" butonunun payını içerir: buton eklendiğinde
  görsele kalan alan daralmasın diye kart eskisine göre bir miktar uzun.
*/
.tu-certs__card {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--tu-red);
  border-radius: 4px;
  padding: 20px;

  @media (width >= 768px) {
    width: calc(33% - 30px);
    aspect-ratio: 6 / 7;
    padding: 30px;
  }
}

/*
  Sabit yükseklikli metin bloğu: başlık 1 veya 2 satır olsa da bu alanın
  yüksekliği değişmez, metin justify-content:flex-end ile alta yaslanır.
  Böylece görsel her kartta aynı yükseklikte başlar; metin uzunluğuna göre
  büyüyüp küçülmez.
*/
.tu-certs__text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 100%;
  min-height: 71px;

  @media (width >= 768px) {
    min-height: 40px;
  }
}

/* Koyu zeminli sertifika kartı: ölçek ortak, rengi ve hizası modüle özel. */
.tu-certs__category.tu-u-heading {
  color: var(--tu-on-dark);
  text-align: center;
  margin: 0;
}

.tu-certs__name.tu-u-caption {
  color: var(--tu-on-dark);
  text-align: center;
  margin: 4px 0 0;
}

.tu-certs__image-wrapper {
  flex-grow: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin-top: 16px;
}

a.tu-certs__card {
  cursor: pointer;
  text-decoration: none;

  &:hover .tu-certs__image {
    transform: scale(1.03);
  }

  &:hover .tu-certs__button {
    background-color: var(--tu-white);
    color: var(--tu-red);
  }
}

/*
  Kartın tamamı zaten belgeyi açan bir <a>; bu yüzden buton bir <span>.
  İç içe bağlantı kurmadan "İncele" çağrısını görünür kılıyor.
*/
.tu-certs__button {
  flex-shrink: 0;
  margin-top: 1.5rem;
  font-family: var(--tu-font-main);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--tu-on-dark);
  background-color: transparent;
  border: 1px solid var(--tu-on-dark);
  border-radius: 20px;
  padding: 3px 12px;
  white-space: nowrap;
  transition: all 0.25s ease;

  @media (width >= 768px) {
    font-size: 10.5px;
    padding: 4px 14px;
  }
}

.tu-certs__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease;
}
/* end: tu-certs */
/* end: tu-surec */

/* begin: tu-fabrika-video */
/* Video üstündeki tek cümlelik giriş. Önce h2 idi ve tarayıcı varsayılanıyla
   render oluyordu; başlık olmadığı için paragrafa çevrildi, ölçüsü burada. */
.tu-fabrika-video__lead {
  max-width: 720px;
  margin-inline: auto;
}
/* end: tu-fabrika-video */

/* begin: tu-yasal */
.tu-yasal__title {
  font-family: var(--tu-font-heading);
  font-size: clamp(1.375rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: var(--tu-lh-tight);
  color: var(--tu-primary);
  margin-bottom: var(--tu-space-feature);
}

.tu-yasal__prose {
  max-width: 860px;

  & h2 {
    font-family: var(--tu-font-main);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: var(--tu-lh-snug);
    color: var(--tu-primary);
    margin-block: calc(var(--tu-space-feature) + 8px) var(--tu-space-heading);
    text-transform: uppercase;
    letter-spacing: var(--tu-ls-wide);

    &:first-child {
      margin-top: 0;
    }
  }

  & p {
    font-size: 0.9375rem;
    line-height: var(--tu-lh-relaxed);
    color: var(--tu-ink);
    margin-bottom: var(--tu-space-text);
  }

  & ol {
    padding-left: 1.25rem;
    margin-bottom: var(--tu-space-text);

    & li {
      font-size: 0.9375rem;
      line-height: var(--tu-lh-relaxed);
      color: var(--tu-ink);
      margin-bottom: 0.5rem;
    }
  }

  & ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--tu-space-text);

    & li {
      font-size: 0.9375rem;
      line-height: var(--tu-lh-relaxed);
      color: var(--tu-ink);
      margin-bottom: 0.625rem;
      padding-left: 1.25rem;
      position: relative;

      &::before {
        content: "–";
        position: absolute;
        left: 0;
        color: var(--tu-red);
      }
    }
  }
}

.tu-yasal__meta {
  margin-top: var(--tu-space-feature);
  padding-top: var(--tu-space-heading);
  border-top: 1px solid var(--tu-hairline);
  font-family: var(--tu-font-main);
  font-size: 0.875rem;
  line-height: var(--tu-lh-relaxed);
  color: var(--tu-text-muted);
}

.tu-yasal__meta-row {
  margin-bottom: 0.25rem;
}
/* end: tu-yasal */