/* Crea Brand Works — anasayfa bölümleri.
   Sıra her bölümde: mobil temel → tablet (>=768) → masaüstü (>=1280, XD ölçüleri × --u).
   Masaüstü sayılarının kaynağı: XD artboard "Web 1920 – 2" (y değerleri artboard koordinatı). */

.section-title {
  font-weight: 300;
}

.eyebrow {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  padding-top: 56px;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero__title {
  font-size: 40px;
  line-height: 46px;
  font-weight: 300;
  /* XD'de iki boşluk Roboto Bold (0,2485em); Manrope boşluğu 0,2em → fark */
  word-spacing: .0485em;
}

.hero__aside {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__slash {
  flex: none;
  width: 40px;
}

.hero__lead {
  font-size: 16px;
  line-height: 24px;
}

.hero__showcase {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 48px;
}

.hero__wordmark {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.hero__wordmark-sub {
  font-size: .5em;
  font-weight: 200;
  line-height: 0;
}

/* Eğik şeritler: XD'de 4 paralelkenar, kutu 827×300; konumlar kutunun yüzdesi */
/* Mobilde gizli (uifolio: morf bölümü <992px'de kapalı); kartlar zaten aynı görselleri taşır */
.hero__strips {
  position: relative;
  display: none;
  order: -1;
  width: 100%;
  aspect-ratio: 827 / 300;
}

.hero__strip {
  position: absolute;
  top: 0;
  width: 34.295%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0 0, 54.704% 0, 100% 100%, 44.884% 100%);
}

.hero__strip:nth-child(2) { left: 22.328%; }
.hero__strip:nth-child(3) { left: 43.345%; }
.hero__strip:nth-child(4) { left: 65.705%; }

.projects {
  display: grid;
  gap: 20px;
  margin-top: 48px;
}

.project {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
}

.project__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* XD: siyah %30 zemin + arka plan bulanıklığı (blur 5, parlaklık 15) */
.project__bar {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
  padding: 12px 20px;
  border-radius: 7.5px;
  background: rgb(0 0 0 / .3);
  -webkit-backdrop-filter: blur(10px) brightness(1.15);
  backdrop-filter: blur(10px) brightness(1.15);
}

/* Kartın tamamı canlı siteye bağlanır (Osman/Emre 2026-10-04); çerçevenin içinde olduğu için morfla birlikte
   hareket eder. Creart'ın canlı alan adı henüz yok → o kart bağlantısız. */
.project__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.project__link:focus-visible {
  outline-offset: -4px; /* çerçeve overflow:hidden — halka içeride çizilir, kırpılmaz */
}

.project__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 28px;
}

.project__tags {
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
}

/* Mobil (Emre 2026-10-05): "CREA B.W." yok; kartlar kare (6/6) ve blogdaki gibi yatay kaydırılır —
   sonraki kart kenarda görünür, kaydırılabildiği anlaşılır. Cam çubuk açık fotoğrafta (Brooks Lawford gökyüzü)
   2,25:1 ölçüldü → koyu zemin + 14px etiket */
@media (width < 768px) {
  .hero__showcase {
    display: none;
  }

  .projects {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: 16px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .projects::-webkit-scrollbar {
    display: none;
  }

  .project {
    aspect-ratio: 1;
    scroll-snap-align: start;
  }

  .project__bar {
    background: color-mix(in srgb, var(--c-bg) 65%, transparent);
  }

  .project__tags {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (min-width: 768px) {
  .hero__title {
    font-size: 56px;
    line-height: 64px;
  }

  .hero__lead {
    max-width: 420px;
    font-size: 18px;
    line-height: 26px;
  }

  .hero__slash {
    width: 64px;
  }

  .hero__wordmark {
    font-size: 104px;
  }

  .hero__strips {
    display: block;
  }

  .projects {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 56px;
  }

  .project {
    aspect-ratio: 330 / 450;
  }

  .project__img {
    object-position: 50% 50%;
  }
}

/* Büyük tablet (dikey iPad'den geniş): başlık solda, tanıtım sağda — masaüstü kurgusuyla aynı eksen;
   dört proje yan yana (iki kolonda kart 640px'e uzuyor, 660px kaynak görsel yetmiyordu) */
@media (min-width: 1024px) and (width < 1280px) {
  .hero__intro {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .hero__aside {
    margin-top: 20px;
  }

  .hero__lead {
    max-width: 340px;
  }

  .projects {
    grid-template-columns: repeat(4, 1fr);
  }

  .project__bar {
    right: 8px;
    bottom: 8px;
    left: 8px;
    min-height: 72px;
    padding: 10px 14px;
  }

  .project__title {
    font-size: 17px;
    line-height: 24px;
  }

  .project__tags {
    font-size: 12px;
    line-height: 16px;
  }
}

@media (min-width: 1280px) {
  .hero {
    padding-top: 0;
  }

  /* h1 üst kenarı y=260,42 (ilk baseline 329) − header alt kenarı 85 */
  .hero__intro {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    margin-top: calc(175.42 * var(--u));
  }

  .hero__title {
    font-size: calc(72 * var(--u));
    line-height: calc(82 * var(--u));
  }

  .hero__aside {
    gap: calc(30 * var(--u));
    margin-top: calc(36.58 * var(--u));
  }

  .hero__slash {
    width: calc(92.649 * var(--u));
  }

  .hero__lead {
    width: calc(401 * var(--u));
    max-width: none;
    font-size: calc(22 * var(--u));
    line-height: calc(30 * var(--u));
  }

  /* Şeritler y=600,885'te başlar; kelime işaretinin baseline'ı (901) şerit altına oturur */
  .hero__showcase {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0;
    margin-top: calc(176.47 * var(--u));
  }

  .hero__strips {
    flex: none;
    order: 0;
    width: calc(827 * var(--u));
    height: calc(300 * var(--u));
    aspect-ratio: auto;
  }

  /* Metin kutusu (595,8) şerit başlangıcını 12,8px aşar; XD'de de öyle — kalan alanı alır, taşar */
  .hero__wordmark {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: calc(8.14 * var(--u));
    white-space: nowrap;
    font-size: calc(156 * var(--u));
    line-height: calc(103 * var(--u));
  }

  .projects {
    grid-template-columns: repeat(4, 1fr);
    gap: calc(30 * var(--u));
    margin-top: calc(279.115 * var(--u));
  }

  .project {
    border-radius: calc(15 * var(--u));
  }

  .project__bar {
    right: calc(10 * var(--u));
    bottom: calc(10 * var(--u));
    left: calc(10 * var(--u));
    min-height: calc(90 * var(--u));
    padding: 0 calc(15 * var(--u)) 0 calc(25 * var(--u));
    border-radius: calc(7.5 * var(--u));
  }

  .project__title {
    font-size: calc(22 * var(--u));
    line-height: calc(30 * var(--u));
  }

  .project__tags {
    margin-top: calc(2.6 * var(--u));
    font-size: calc(14 * var(--u));
    line-height: calc(19 * var(--u));
  }
}

/* ---------- Hizmetler ---------- */

.services {
  padding-top: 96px;
}

.services__title {
  font-size: 30px;
  line-height: 38px;
  text-align: center;
}

.services__connector {
  display: block;
  width: 1px;
  height: 40px;
  margin: 24px auto 0;
  background: var(--c-connector);
}

.service {
  display: grid;
  gap: 28px;
  padding-block: 48px;
  border-bottom: 1px solid var(--c-rule);
}

.service__num {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
}

.service__mark {
  width: 14.154px;
}

.service__title {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 800;
  line-height: 38px;
}

/* Emre 2026-10-05: açıklama 16px / 24px — masaüstünde de sabit (--u ile ölçeklenmez) */
.service__desc {
  margin-top: 12px;
  color: var(--c-muted);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* flex: görsel hücreden genişse (262 > 236) de ortalı taşar; grid güvenli hizada sola yaslıyordu */
.service__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 220px;
  background: url("../svg/icon-3.svg") center / contain no-repeat;
}

.service__img {
  width: auto;
  max-width: none;
  height: 160px;
}

.service__img--sm {
  height: 136px;
}

.service__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

/* Mobil (Emre 2026-10-05): metin ve görsel ortalı, maddeler alt alta tek sütun */
@media (width < 768px) {
  .service {
    text-align: center;
  }

  .service__num {
    justify-content: center;
  }

  .service__items {
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
}

@media (min-width: 768px) {
  .services__title {
    font-size: 40px;
    line-height: 50px;
  }

  .service {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "body visual" "body items";
    column-gap: 48px;
    row-gap: 24px;
  }

  .service__body { grid-area: body; }
  .service__visual { grid-area: visual; }

  .service__items {
    grid-area: items;
    grid-template-columns: 1fr;
    font-size: 14px; /* Emre 2026-10-04: hizmet maddeleri 14px (tüm kırılımlarda) */
    line-height: 32px;
  }
}

/* Dikey tablet: metin + liste solda üst üste, görsel sağda ortalı (liste görselin altında kalınca
   sol kolonun yarısı boş kalıyordu) */
@media (min-width: 768px) and (width < 1024px) {
  .service {
    grid-template-areas: "body visual" "items visual";
    align-items: start;
  }

  .service__visual {
    align-self: center;
  }
}

/* Büyük tablet: masaüstüyle aynı üç kolon (metin | görsel | liste), ölçüler sabit px */
@media (min-width: 1024px) and (width < 1280px) {
  .service {
    grid-template-columns: 1fr 236px 1fr;
    grid-template-areas: "body visual items";
    align-items: center;
    column-gap: 16px;
    padding-block: 64px;
  }

  .service__items {
    padding-left: 48px;
  }
}

@media (min-width: 1280px) {
  .services {
    padding-top: calc(103.62 * var(--u));
  }

  .services__title {
    font-size: calc(48 * var(--u));
    line-height: calc(58 * var(--u));
  }

  .services__connector {
    height: calc(50 * var(--u));
    margin-top: calc(23.88 * var(--u));
  }

  /* Satır 450,5 = 99,75 + 250 + 99,75 + 1 (çizgi). Sütunlar: 587 | 236 (sayfa ortası) | 587 */
  .service {
    grid-template-columns: 1fr calc(236.089 * var(--u)) 1fr;
    grid-template-rows: calc(250 * var(--u));
    grid-template-areas: "body visual items";
    gap: 0;
    padding-block: calc(99.75 * var(--u));
  }

  /* XD'de ilk satır, bağlantı çizgisine 11,25px daha yakın */
  .service:first-child {
    padding-top: calc(88.5 * var(--u));
    padding-bottom: calc(111.5 * var(--u));
  }

  /* Metin sütunu XD'de x=248 (konteyner solunun 7px dışında) */
  .service__body {
    align-self: start;
    margin: calc(21.04 * var(--u)) 0 0 calc(-7 * var(--u));
  }

  .service__num {
    gap: calc(9.85 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .service__mark {
    width: calc(14.154 * var(--u));
  }

  .service__title {
    margin-top: calc(9.57 * var(--u));
    font-size: calc(42 * var(--u));
    line-height: calc(57 * var(--u));
  }

  .service__desc {
    margin-top: calc(18.7 * var(--u));
  }

  .service__visual {
    width: 100%;
    height: 100%;
  }

  .service__img {
    height: calc(200 * var(--u));
  }

  .service__img--sm {
    height: calc(170 * var(--u));
  }

  .service__items {
    display: block;
    align-self: center;
    padding-left: calc(257 * var(--u));
    font-size: 14px; /* Emre 2026-10-04: 14px sabit; 2026-10-05: satır aralığı 32px sabit (>=768 kuralı) */
  }
}

/* ---------- Crea (hakkında + istatistik) ---------- */

.about {
  padding-top: 96px;
}

.about__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about__title {
  font-size: 30px;
  line-height: 40px;
}

.about__cta {
  margin-top: 28px;
}

.stats {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 64px;
}

.stats__figure {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats__number {
  font-size: 120px;
  font-weight: 600;
  line-height: 1;
}

.stats__plus {
  color: var(--c-accent);
  font-size: .224em;
  line-height: 0;
  vertical-align: 2.625em;
}

.stats__caption,
.stats__text {
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
}

.stats__side {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--c-rule-stats);
}

.stats__slash {
  width: 94px;
}

/* Mobil: dar sütunda tek kelimelik son satır ("sunar.") bırakma. balance denendi: "Markanızı" tek başına
   ilk satıra düşüp başlığı bozdu → yalnız pretty */
@media (width < 768px) {
  .hero__lead,
  .service__desc,
  .stats__caption,
  .stats__text,
  .cta__text {
    text-wrap: pretty;
  }

  /* Emre 2026-10-05: hakkımızda (başlık, buton, 17+, iki metin, eğik) mobilde ortalı */
  .about__head,
  .stats__figure,
  .stats__side {
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .about__title {
    font-size: 44px;
    line-height: 54px;
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .stats__figure {
    justify-content: space-between;
    padding-right: 40px;
  }

  .stats__side {
    justify-content: space-between;
    padding: 0 0 0 40px;
    border-top: 0;
    border-left: 1px solid var(--c-rule-stats);
  }
}

@media (min-width: 1280px) {
  .about {
    padding-top: calc(106.25 * var(--u));
  }

  /* Göz hizası x=248, başlık x=615 (4. kolon) */
  .about__head {
    display: grid;
    grid-template-columns: calc(360 * var(--u)) 1fr;
    align-items: start;
    gap: 0;
  }

  .eyebrow {
    margin: calc(9.05 * var(--u)) 0 0 calc(-7 * var(--u));
    font-size: calc(24 * var(--u));
    line-height: calc(33 * var(--u));
  }

  .about__title {
    display: inline;
    font-size: calc(62 * var(--u));
    line-height: calc(72 * var(--u));
  }

  .about__statement {
    font-size: calc(62 * var(--u));
    line-height: calc(72 * var(--u));
  }

  /* Buton son satırın akışında: metin baseline'ı XD'de 4023,5, satır baseline'ı 4036 */
  .about__cta {
    margin: 0 0 0 calc(14.4 * var(--u));
    vertical-align: calc(12.5 * var(--u));
  }

  /* x=589 (17'nin çıkış noktası) · ayraç 1092 · sağ metin 1172 · yükseklik 350 */
  .stats {
    grid-template-columns: calc(502.5 * var(--u)) 1fr;
    height: calc(350 * var(--u));
    margin: calc(98.25 * var(--u)) 0 0 calc(334 * var(--u));
  }

  .stats__figure {
    padding-right: 0;
  }

  .stats__number {
    font-size: calc(250 * var(--u));
    line-height: calc(178.5 * var(--u));
  }

  .stats__plus {
    font-size: calc(56 * var(--u));
    vertical-align: calc(147 * var(--u));
  }

  .stats__caption,
  .stats__text {
    font-size: calc(20 * var(--u));
    line-height: calc(27 * var(--u));
  }

  .stats__side {
    padding-left: calc(79.5 * var(--u));
  }

  .stats__text {
    margin-top: calc(1.84 * var(--u));
  }

  .stats__slash {
    width: calc(141.654 * var(--u));
  }
}

/* ---------- Referanslar: iki satır sonsuz kayan şerit (üst sağa, alt sola) ----------
   Her satırda logo seti + aria-hidden kopyası; iz %50 kayınca kopya asıl setin yerine oturur.
   Dikişsiz döngü için izin sonunda bir boşluk payı var (padding-right = gap). */

.refs {
  --ref-w: 200px;
  --ref-h: 110px;
  --ref-gap: 10px;
  --ref-logo: .6px;
  overflow: hidden;
  margin-top: 96px;
}

.refs__row {
  display: flex;
  gap: var(--ref-gap);
  width: max-content;
  padding-right: var(--ref-gap);
}

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

/* Akışı JS motoru sürer (effects.js); JS yokken satırlar XD'deki durağan konumda kalır.
   Süre, set genişliğiyle orantılı: iki satır aynı piksel hızında akar (6 kart / 7 kart) */
.refs__row--right {
  --ref-dur: 52s;
}

.refs__row--left {
  --ref-dur: 60s;
}

/* JS motoru devredeyken sürüklenebilir (dikey kaydırma tarayıcıda kalır) */
.refs--js .refs__row {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  will-change: transform;
}

.refs--js .refs__row.is-dragging {
  cursor: grabbing;
}

.refs--js .ref img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.ref {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--ref-w);
  height: var(--ref-h);
  border-radius: 10px;
  background: var(--c-surface);
}

.ref img {
  width: auto;
  height: calc(var(--h, 50) * var(--ref-logo));
}

@media (min-width: 768px) {
  .refs {
    --ref-w: 260px;
    --ref-h: 140px;
    --ref-gap: 15px;
    --ref-logo: .8px;
  }
}

/* Masaüstü: ilk kare XD ile aynı — satırlar sayfa ortasına hizalı başlar (x=-37 ve x=-204) */
@media (min-width: 1280px) {
  .refs {
    --ref-w: calc(320 * var(--u));
    --ref-h: calc(180 * var(--u));
    --ref-gap: calc(15 * var(--u));
    --ref-logo: var(--u);
    margin-top: calc(100.5 * var(--u));
  }

  .ref {
    border-radius: calc(10 * var(--u));
  }

  /* Görünen setin yarı genişliği kadar sola: 6 kart → 997,5 · 7 kart → 1165 */
  .refs__row--right {
    margin-left: calc(50% - 997.5 * var(--u));
  }

  .refs__row--left {
    margin-left: calc(50% - 1165 * var(--u));
  }
}

/* Hareketi azalt: şerit yerine ortalı sarılan ızgara (masaüstünde de — kırpık kenardaki logolar
   başka türlü hiç görülemezdi), kopyalar gizli */
@media (prefers-reduced-motion: reduce) {
  .refs {
    padding-inline: var(--gutter);
  }

  .refs__row {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    margin-left: 0;
    padding-right: 0;
  }

  .ref--clone {
    display: none;
  }
}

/* Mobil + hareketi azalt: 200px'lik kart 350px alana tek sütun düşüp 13 satır / 1550px uzuyordu → iki sütun */
@media (prefers-reduced-motion: reduce) and (width < 768px) {
  .refs {
    --ref-w: calc((var(--cw) - var(--ref-gap)) / 2);
  }
}

/* ---------- Banner (CTA) ---------- */

.cta {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  margin-top: 96px;
  overflow: hidden;
}

.cta__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgb(0 0 0 / .9) 0, rgb(0 0 0 / .55) 45%, rgb(0 0 0 / 0) 80%);
}

.cta__content {
  position: relative;
  z-index: 2;
  padding-bottom: 48px;
}

.cta__slash {
  width: 44px;
}

.cta__text {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 300;
  line-height: 34px;
}

/* Mobil (Emre 2026-10-05, ekran görüntüsüyle): yazı ortalı. Düzen aynı — "görsel kaybolmuş" görselle çözüldü:
   banner-m-* müşterinin dikey görseli (800×1350, brand-assets/banner-mobil-dikey.jpg): tabela üstte, yazı alttaki
   düz duvara oturur. Alan görselden daha az dikey → üstten hizalı, kırpılan kısım alttaki duvar (tabela kesilmez) */
@media (width < 768px) {
  .cta__img {
    object-position: 50% 0;
  }

  .cta__text {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .cta {
    align-items: center;
    min-height: 520px;
  }

  .cta::before {
    background: linear-gradient(90deg, #000 0, rgb(0 0 0 / 0) 71.146%);
  }

  .cta__content {
    padding-bottom: 0;
  }

  .cta__slash {
    width: 64px;
  }

  .cta__text {
    max-width: 600px;
    font-size: 30px;
    line-height: 42px;
  }
}

/* Tablet: fotoğraf yükseklikle ölçeklenir (520px) ve ortadan kırpılır; tabelanın aydınlık kenarı
   x = 50vw + 159px'te başlar. Metin o çizgiden önce biter (768–834'te "müşterilerimize" kenarın üstüne
   biniyor, kontrast 1,1:1) ve soldaki perde metin bölgesinde daha koyu tutulur. */
@media (min-width: 768px) and (width < 1280px) {
  .cta::before {
    background: linear-gradient(90deg, #000 0, rgb(0 0 0 / .8) 40%, rgb(0 0 0 / .45) 62%, rgb(0 0 0 / 0) 80%);
  }

  .cta__text {
    max-width: min(600px, calc(50vw + 100px));
  }
}

@media (min-width: 1280px) {
  /* XD: 1920×700, köşe 5; perde x=0→1366 siyah→saydam */
  .cta {
    display: block;
    min-height: 0;
    height: calc(700 * var(--u));
    margin-top: calc(100 * var(--u));
    border-radius: calc(5 * var(--u));
  }

  .cta__content {
    padding-top: calc(205 * var(--u));
  }

  .cta__slash {
    width: calc(85.086 * var(--u));
  }

  .cta__text {
    max-width: none;
    margin-top: calc(40.45 * var(--u));
    font-size: calc(38 * var(--u));
    line-height: calc(52 * var(--u));
  }
}

/* ---------- Blog ---------- */

.blog {
  padding-top: 96px;
}

.blog__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.blog__title {
  font-size: 34px;
  line-height: 44px;
}

/* Emre 2026-10-05: blog başlığı, buton ve kart metinleri mobilde ortalı */
@media (width < 768px) {
  .blog__head {
    align-items: center;
    text-align: center;
  }

  .blog .post {
    text-align: center;
  }
}

/* Mobil: ekranda tek kart, yatay kaydırma (uifolio mobil blog slider'ı) */
.posts {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 16px;
  margin: 40px calc(-1 * var(--gutter)) 0;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.posts::-webkit-scrollbar {
  display: none;
}

.post {
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .blog__head {
    flex-direction: row;
    align-items: flex-end;
    gap: 48px;
  }

  .blog__title {
    font-size: 44px;
    line-height: 56px;
  }

  .posts {
    grid-auto-columns: 46%;
    gap: 24px;
  }
}

/* Büyük tablet: üç yazı yan yana sığıyor — yatay kaydırıcı + yarım görünen kart gerekmiyor */
@media (min-width: 1024px) and (width < 1280px) {
  .posts {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

@media (min-width: 1280px) {
  .blog {
    padding-top: calc(101.25 * var(--u));
  }

  /* Başlık 1–4. kolon, buton 5. kolon başı (x=735); buton alt kenarı başlıktan 10,25 yukarıda */
  .blog__head {
    display: grid;
    grid-template-columns: calc(480 * var(--u)) 1fr;
    gap: 0;
  }

  .blog__title {
    font-size: calc(62 * var(--u));
    line-height: calc(82 * var(--u));
  }

  .blog__all {
    justify-self: start;
    margin-bottom: calc(10.25 * var(--u));
  }

  .posts {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(30 * var(--u));
    margin: calc(58.75 * var(--u)) 0 0;
    padding-inline: 0;
    overflow: visible;
  }
}