/* ===========================================================
   ALVEXA — ANA SAYFA BİLEŞENLERİ
   Yalnızca index.html'e bağlanır.
     1. Hero
     2. Hizmet kartları (üç faaliyet alanı)
     3. İstatistik şeridi + sayaçlar
     4. "Alvexa Group Hakkında" özeti
     5. Değerlerimiz (üç panel)
     6. "20+ ülkede proje deneyimi" — bayrak grid'i
     7. Referanslarımız — marka duvarı
     8. "Globalda biz" — dünya haritası + ülke bulutu
   Kapanış CTA şeridi (.cta-band) ve iç sayfa hero'su
   (.page-hero) PROMPT 6'da css/base.css'e taşındı —
   birden fazla sayfa kullanıyor.
   tokens.css değişkenleri üzerinden çalışır; burada
   sabit renk yazılmaz.
   =========================================================== */

/* ===========================================================
   1. HERO
   Fotoğraf AYDINLIK (sabah ışığı, açık gökyüzü) ve yazı koyu.
   Bu yüzden karartma değil, soldan gelen AÇIK bir perde var:
   metin bloğunun arkasını beyazlatır, sağdaki cam cepheli
   yapıyı açıkta bırakır.
   Not: header sticky ve akış içinde, hero onun ALTINDA başlar.
   =========================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  /* 19 Ağu 2026 — müşteri isteği: açılış görseli tam ekranı
     kaplasın (iç sayfalarla aynı davranış). 80vh -> 100vh.
     svh: mobilde adres çubuğu inip kalkarken sayfa zıplamasın. */
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--gray-bg);   /* görsel yüklenene kadar */
}

.hero__media {
  position: absolute;
  inset: 0;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Sağdaki yapı kadrajda kalsın, sol boşluk metne yer açsın */
  object-position: 62% center;
}

/* 21 Ağu 2026 — hero fotoğrafın yerini açılış videosu aldı.
   object-position BURADA `center`, fotoğraftaki gibi 62% DEĞİL:
   video bir montaj, sahneler değişiyor. Mağaza cephelerinde
   tabela (Koton, Reserved, LC Waikiki, Starbucks) kadrajın tam
   ortasında; 62%'e kaydırılırsa dar ekranda tabelanın yarısı
   kesiliyor. Ormandaki açılış sahnesinde ortalamanın maliyeti
   yok, çünkü yapı zaten sağ yarıyı dolduruyor.
   Poster karesi de object-fit/-position kurallarına uyar. */
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Kimi tarayıcı <video>'yu inline kutu sayıp altına satır boşluğu
     bırakır; mutlak konumda bile kenarda 1 px sızıntı yapar. */
  display: block;
  background-color: var(--gray-bg);
}

/* Açık perde — soldan sağa saydamlaşır */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    var(--scrim-light) 0%,
    var(--scrim-light) 26%,
    var(--scrim-light-soft) 48%,
    transparent 66%
  );
  /* .hero__media DOM'da sonra geldigi icin ustte boyanirdi;
     perde ve icerik z-index ile onun ustune alinir. */
  z-index: 1;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--section-y-sm);
}

.hero__content {
  /* rem — `ch` burada KAPSAYICININ 16px'ine gore hesaplanir,
     baslikin 66px'ine gore degil; blok daralip "PURPOSE."
     kelime ortasindan kirilirdi (reset.css: overflow-wrap). */
  max-width: 38rem;
}

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide);
  color: var(--ink);
  text-wrap: balance;
}

/* Başlığın altındaki kısa yatay çizgi — kaynak görseldeki gibi */
.hero__rule {
  width: 56px;
  height: 1px;
  margin-block: var(--sp-8) var(--sp-6);
  margin-inline: 0 auto;   /* <hr> varsayilan olarak ortalanir */
  border: 0;
  background-color: var(--ink);
  opacity: 0.5;
}

.hero__subtitle {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--ink);
  text-wrap: pretty;
}

.hero__actions {
  margin-top: var(--sp-10);
}

/* -----------------------------------------------------------
   1.1 AŞAĞI OK — bir sonraki bölüme yumuşak geçiş
   ----------------------------------------------------------- */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: var(--sp-8);
  z-index: 2;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: var(--ink);
  background-color: rgb(255 255 255 / 0.55);
  /* Safari hâlâ önekli sürümü istiyor; öneksizden ÖNCE yazılır.
     İkisi de desteklenmezse üstteki yarı saydam beyaz zemin
     tek başına yeterli — buton her hâlükârda okunur kalır. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  animation: hero-bob 2.4s ease-in-out infinite;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  background-color: var(--sage);
  color: var(--white);
}

.hero__scroll svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(5px); }
}

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

/* -----------------------------------------------------------
   1.2 HERO — 1024px altı
   Dar ekranda kadraj sağa kayınca metnin arkası kalabalıklaşır;
   perde dikeye döner ve kuvvetlenir.
   ----------------------------------------------------------- */
@media (max-width: 1023px) {
  .hero__media img {
    object-position: 70% center;
  }

  /* Video ortalı kalır — gerekçe yukarıda (tabelalar kadrajın
     ortasında). Dar ekranda perde zaten dikeye dönüp
     kuvvetlendiği için metnin arkası yine temiz. */

  .hero::before {
    background-image: linear-gradient(
      to right,
      var(--scrim-light) 0%,
      var(--scrim-light) 42%,
      var(--scrim-light-soft) 72%,
      transparent 100%
    );
  }

  .hero__content {
    max-width: 30rem;
  }
}

@media (max-width: 767px) {
  .hero {
    min-height: 70vh;
    min-height: 70svh;
    align-items: flex-end;
  }

  .hero__media img {
    object-position: 76% center;
  }

  /* Dikey perde: metin altta, üstte fotoğraf açıkta kalır */
  .hero::before {
    background-image: linear-gradient(
      to bottom,
      transparent 0%,
      var(--scrim-light-soft) 22%,
      var(--scrim-light) 44%,
      var(--scrim-light) 100%
    );
  }

  .hero__inner {
    padding-bottom: var(--sp-20);   /* aşağı okun altında kalmasın */
  }

  .hero__content {
    max-width: none;
  }

  .hero__rule {
    margin-block: var(--sp-6) var(--sp-5);
  }

  .hero__actions {
    margin-top: var(--sp-8);
  }
}

/* ===========================================================
   2. HİZMET KARTLARI — `.service-card`
   Bu bileşen artık css/base.css içinde: PROMPT 7'de iletisim.html
   de aynı kartları kullanmaya başladı, kopyalanmasın diye ortak
   dosyaya taşındı. Ana sayfaya özel bir ezme gerekirse buraya yazılır.
   =========================================================== */

/* ===========================================================
   3. İSTATİSTİK ŞERİDİ
   Kaynak görseldeki düzen: solda sayı + etiket, sağında
   ince çizgi ikon; öğeler arasında dikey ayraç.
   =========================================================== */
.stats {
  /* Ayraçlar boşluğun tam ORTASINDA dursun diye bu değer hem
     grid boşluğu hem de ayracın konumu için kullanılır. */
  --stat-gap: var(--sp-6);

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

.stat {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
}

/* Öğeler arası ince dikey ayraç.
   Kenarlık öğenin kenarına yapışır ve boşlukta yamuk durur;
   bu yüzden ayraç boşluğun ortasına konumlandırılıyor. */
.stat + .stat::after {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: calc(-1 * var(--stat-gap) / 2);
  border-left: 1px solid var(--gray-line);
}

.stat__value {
  display: block;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  /* Sayaç sayarken rakam genişliği değişmesin */
  font-variant-numeric: tabular-nums;
  /* "500.000m² +" iki satira bolunmesin */
  white-space: nowrap;
}

.stat__label {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-wrap: balance;
}

.stat__icon {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--sage);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 1280px altinda dort sutun yan yana rahat sigmiyor: 2x2'ye in,
   ikon sayinin ustune gecsin. */
@media (max-width: 1279px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-10) var(--stat-gap);
  }

  .stat {
    flex-direction: column;
    gap: var(--sp-3);
    text-align: center;
    padding-inline: var(--sp-1);
  }

  /* Ayraç yalnızca sağdaki sütunun solunda kalsın */
  .stat + .stat::after {
    content: none;
  }

  .stat:nth-child(even)::after {
    content: '';
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: calc(-1 * var(--stat-gap) / 2);
    border-left: 1px solid var(--gray-line);
  }

  .stat__icon {
    order: -1;          /* ikon üstte */
  }
}

/* Dar telefonda 2x2 hücreye "500.000m² +" ancak küçülerek sığar */
@media (max-width: 479px) {
  .stat__value {
    font-size: var(--fs-lg);
  }

  .stat__icon {
    width: 38px;
    height: 38px;
  }
}

/* Son çare — 340px altı tek sütun */
@media (max-width: 339px) {
  .stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .stat:nth-child(even)::after {
    content: none;
  }
}

/* ===========================================================
   4. "ALVEXA GROUP HAKKINDA" ÖZETİ
   İki sütun: solda metin, sağda görsel.
   =========================================================== */
.about-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(var(--sp-10), 5vw, var(--sp-20));
  align-items: center;
}

.about-summary__text p {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-muted);
}

.about-summary__actions {
  margin-top: var(--sp-10);
}

.about-summary__media {
  position: relative;
}

.about-summary__media img {
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Görselin sol altında ince adaçayı çerçeve — referans siteye
   yakın, sade bir derinlik katmanı */
.about-summary__media::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--sp-5));
  bottom: calc(-1 * var(--sp-5));
  width: 45%;
  height: 45%;
  border-left: 2px solid var(--sage);
  border-bottom: 2px solid var(--sage);
  pointer-events: none;
}

@media (max-width: 899px) {
  .about-summary {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--section-gap);
  }

  /* Mobilde görsel metnin altında */
  .about-summary__media {
    order: 1;
  }

  .about-summary__media img {
    max-height: 24rem;
  }

  .about-summary__media::after {
    display: none;
  }
}


/* ===========================================================
   5. DEĞERLERİMİZ — ÜÇ PANEL
   Kaynak görselde ikon + başlık + metin FOTOĞRAFIN İÇİNE
   gömülüydü. tools/make-value-panels.py her panelin YAZISIZ
   üst bölgesini kesti (y=0..430); yazı buraya HTML olarak
   taşındı — çevrilebilir, seçilebilir, SEO'ya girer.

   Bu yüzden fotoğraf paneli tamamen kaplamaz: üstte doğal
   en/boy oranıyla durur, aşağı doğru --ink'e karışır. Panelin
   zemini zaten --ink olduğu için geçiş dikişsiz.
   Fotoğrafı cover ile tüm panele yaymak yan tarafları %40'a
   varan oranda kırpıyordu — insanlar kadraj dışı kalıyordu.
   =========================================================== */
.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;                       /* paneller bitişik, boşluk yok */
  background-color: var(--ink);
}

.value-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 400px;
  overflow: hidden;
  background-color: var(--ink);
  color: var(--text-on-dark);
  text-align: center;
  isolation: isolate;
}

/* İnce ayraç — kenarlık yerine ::before; panel kenarında
   yamuk durmasın diye tam ortada duruyor */
.value-panel + .value-panel::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.16);
  z-index: 3;
}

.value-panel__media {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  aspect-ratio: 634 / 430;      /* kesilen kaynağın gerçek oranı */
  z-index: 0;
}

.value-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform var(--transition-slow);
}

/* Fotoğrafı aşağı doğru --ink'e eriten perde. Üstte de hafif
   karartma var: kaynak tasarımda fotoğraflar koyulaştırılmış. */
.value-panel__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to bottom,
    rgba(29, 29, 27, 0.45) 0%,
    rgba(29, 29, 27, 0.5) 40%,
    rgba(29, 29, 27, 0.88) 78%,
    var(--ink) 100%
  );
  transition: opacity var(--transition);
}

.value-panel__body {
  position: relative;
  z-index: 2;
  /* Üstteki fotoğrafın yüksekliği genişliğin ~%68'i. Metin
     %52'den başlayınca fotoğrafın karartılmış alt bölgesine
     biniyor — kaynak tasarımdaki düzen. */
  padding-block-start: 52%;
  padding-block-end: var(--sp-12);
  padding-inline: clamp(var(--sp-5), 2.6vw, var(--sp-10));
}

.value-panel__icon {
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--sp-6);
  fill: none;
  stroke: var(--white);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--transition);
}

.value-panel__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
}

.value-panel__desc {
  max-width: 34ch;
  margin-inline: auto;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-on-dark);
}

/* Hover: perde hafif açılır, ikon büyür */
.value-panel:hover .value-panel__media::after {
  opacity: 0.82;
}

.value-panel:hover .value-panel__media img {
  transform: scale(1.04);
}

.value-panel:hover .value-panel__icon {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
  .value-panel__media img,
  .value-panel__icon {
    transition: none;
  }

  .value-panel:hover .value-panel__media img,
  .value-panel:hover .value-panel__icon {
    transform: none;
  }
}

/* Tablet ve altı: alt alta. Panel tam genişleyince fotoğraf da
   genişler; metnin başladığı yer genişliğe bağlı olduğu için
   oranı yeniden ayarlıyoruz. */
@media (max-width: 899px) {
  .values {
    grid-template-columns: minmax(0, 1fr);
  }

  .value-panel + .value-panel::before {
    inset-block: auto 0;
    inset-inline: 0;
    width: auto;
    height: 1px;
  }

  .value-panel__media {
    aspect-ratio: 16 / 9;       /* geniş panelde fotoğraf bandı alçalır */
  }

  .value-panel__body {
    padding-block-start: min(46%, 300px);
    padding-block-end: var(--sp-10);
  }
}

@media (max-width: 479px) {
  .value-panel__media {
    aspect-ratio: 3 / 2;
  }

  .value-panel__body {
    padding-block-start: 54%;
  }
}


/* ===========================================================
   6. "20+ ÜLKEDE PROJE DENEYİMİ" — BAYRAK GRID'İ
   Bayraklar assets/icons/flags/ altında YEREL SVG.
   Harici CDN veya flag-icons paketi yok.
   =========================================================== */

/* İki yanında ince çizgi olan ortalı başlık */
.rule-title {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-4), 3vw, var(--sp-10));
  margin-bottom: var(--section-gap);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

.rule-title::before,
.rule-title::after {
  content: '';
  flex: 1 1 0;
  height: 1px;
  background-color: var(--gray-line);
}

.section--dark .rule-title {
  color: var(--white);
}

.section--dark .rule-title::before,
.section--dark .rule-title::after {
  background-color: rgba(255, 255, 255, 0.2);
}

.flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(var(--sp-5), 2.4vw, var(--sp-8)) clamp(var(--sp-3), 1.6vw, var(--sp-6));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Genişlik üst sınırı 86px: ICERIK.md'deki sıra 1. satırda 11,
   2. satırda 10 ülke olacak şekilde kırılsın diye ölçüldü.
   Kapsayıcı iç genişliği en fazla 1200px; 11 × 86 + 10 × 23 = 1176. */
.flag {
  flex: 0 0 auto;
  width: clamp(70px, 6vw, 86px);
  text-align: center;
}

.flag__img {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto var(--sp-3);
  border-radius: var(--radius-full);   /* SVG içinde de clip var, bu yedek */
  /* Açık zeminli bayraklar (Gürcistan, Lübnan) beyaz zeminde
     kaybolmasın diye çok ince bir çember */
  box-shadow: 0 0 0 1px var(--gray-line);
  transition: transform var(--transition);
}

.flag:hover .flag__img {
  transform: scale(1.08);
}

.flag__name {
  display: block;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .flag {
    width: clamp(66px, 21vw, 92px);
  }

  .flag__img {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flag__img {
    transition: none;
  }

  .flag:hover .flag__img {
    transform: none;
  }
}


/* ===========================================================
   7. REFERANSLARIMIZ — MARKA DUVARI
   19 Ağu 2026: tipografik temsil kaldırıldı, gerçek logolar
   kondu (yerel SVG, assets/logo/brands/).

   ÖLÇÜ NEDEN HER LOGODA AYRI? Tek bir `max-height` verilince
   duvar dağılıyor: RESERVED 9:1, Starbucks 1:1 orana sahip —
   aynı yükseklikte RESERVED bir pankart, Starbucks bir nokta
   gibi duruyor. Bu yüzden her logoya optik olarak dengelenmiş
   bir `--logo-w` / `--logo-h` çifti veriliyor (birimsiz sayı;
   `--logo-unit` ile çarpılıyor, küçük ekranda o birim kısılır).
   Tarayıcı iki üst sınırın DARINA sığdırır, oran korunur.
   =========================================================== */
.brand-wall {
  --logo-unit: 1px;   /* logo ölçeğinin tek ayar noktası */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background-color: var(--gray-line);   /* hücre araları = ızgara çizgisi */
  border: 1px solid var(--gray-line);
}

.brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  padding: var(--sp-5) var(--sp-4);
  background-color: var(--white);
  transition: background-color var(--transition);
}

/* Logo, iki üst sınırın darına sığar; oran her zaman korunur.
   `min(100%, …)` iki sütuna düşen dar telefon hücresinde logonun
   kutudan taşmasını engelliyor. */
.brand-cell__logo {
  display: block;
  /* Genişlik `max-width` DEĞİL, doğrudan `width`: cropp.svg gibi
     dosyanın içinde küçük bir width/height taşıyan logolar
     (82 × 18) `max-width` ile büyütülemiyor, olduğu yerde kalıyordu.
     `width` + `height: auto` + `max-height` üçlüsünde tarayıcı
     oranı koruyarak iki sınırın darına oturtuyor.
     `min(100%, …)` iki sütuna düşen dar telefon hücresinde taşmayı
     engelliyor. */
  width: min(100%, calc(var(--logo-w, 150) * var(--logo-unit)));
  height: auto;
  max-height: calc(var(--logo-h, 30) * var(--logo-unit));
  /* Emniyet ağı: max-height devreye girerse Chrome açıkça verilmiş
     `width`i geri hesaplamıyor ve logoyu EZİYOR (Starbucks'ta %3,5
     ölçüldü). object-fit ile oran her koşulda korunuyor. */
  object-fit: contain;
  /* Sekiz markanın kurumsal renkleri (mavi, kırmızı, yeşil, siyah)
     yan yana durunca duvar alacalı görünüyor ve Alvexa'nın adaçayı
     paletiyle çakışıyor. Sakin hâl gri; renk hover'da geliyor. */
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter var(--transition), opacity var(--transition);
}

.brand-cell:hover {
  background-color: var(--gray-bg);
}

.brand-cell:hover .brand-cell__logo {
  filter: none;
  opacity: 1;
}

/* Dokunmatik cihazda hover yok — logolar baştan renkli olmalı,
   yoksa telefon ziyaretçisi duvarı hiç renkli göremez. */
@media (hover: none) {
  .brand-cell__logo {
    filter: none;
    opacity: 1;
  }
}

/* Optik denge — değerler tarayıcıda ölçülerek oturtuldu, tahmin
   değil. Kelime markalarında genişlik, kare/işaretli logoda
   (Starbucks) yükseklik sınırı belirleyici oluyor. */
.brand-cell__logo--lcwaikiki  { --logo-w: 162; --logo-h: 26; }
.brand-cell__logo--starbucks  { --logo-w: 55;  --logo-h: 58; }
.brand-cell__logo--reserved   { --logo-w: 168; --logo-h: 22; }
.brand-cell__logo--cropp      { --logo-w: 130; --logo-h: 32; }
.brand-cell__logo--sinsay     { --logo-w: 110; --logo-h: 44; }
.brand-cell__logo--defacto    { --logo-w: 152; --logo-h: 34; }
.brand-cell__logo--mediamarkt { --logo-w: 158; --logo-h: 26; }
.brand-cell__logo--koton      { --logo-w: 132; --logo-h: 30; }

@media (max-width: 899px) {
  .brand-wall {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 599px) {
  .brand-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --logo-unit: 0.86px;   /* iki sütunda hücre daralıyor */
  }

  .brand-cell {
    min-height: 96px;
    padding: var(--sp-4) var(--sp-3);
  }
}


/* ===========================================================
   8. "GLOBALDA BİZ" — DÜNYA HARİTASI VİDEOSU
   19 Ağu 2026: SVG harita + ülke ismi bulutu kaldırıldı, yerine
   müşterinin harita videosu kondu.
   Sahne DEKORATİF (aria-hidden); ülke adları ayrıca gerçek metin
   olarak .global__plain listesinde duruyor.
   Videonun zemini ffmpeg'de beyaza çekildi (colorlevels, 212 →
   253), böylece beyaz bölümün üstünde gri bir kutu gibi durmuyor;
   harita zeminsiz süzülüyor. CSS filtresi kullanılmadı — her kare
   için GPU harcamak yerine bir kez dosyaya işlendi.
   =========================================================== */
.global {
  position: relative;
  overflow: hidden;
}

/* width: 100% ŞART. Yalnızca aspect-ratio verilince tarayıcı oranı
   korumak için GENİŞLİĞİ büyütebiliyor ve sahne kabı aşıyor
   (bu bölümde bizzat yaşandı, .global'daki overflow:hidden gizliyordu). */
.global__stage {
  position: relative;
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;   /* videonun kendi oranı: 1280 × 720 */
}

/* object-fit: contain — kadraj kırpılmasın; videonun kenarları
   zaten beyaz, kutu görünmüyor. */
.global__video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobilde dağınık yerleşim okunmaz hâle gelir: sahne gizlenir,
   isimler sade bir sarmalayan liste olarak görünür. */
.global__plain {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.global__plain li {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.global__plain li.is-home {
  color: var(--sage-dark);
  font-weight: var(--fw-bold);
}

/* Mobilde video gizlenir. Sebebi tasarım değil OKUNURLUK: ülke
   adları videonun İÇİNE gömülü, 360px'te dünya haritası üzerinde
   okunmaz hâle geliyor. Yerine aynı bilgiyi taşıyan düz liste
   görünüyor (ekran okuyucu her genişlikte onu okuyor).
   preload="none" olduğu için gizli video indirilmez de. */
@media (max-width: 767px) {
  .global__stage {
    display: none;
  }

  .global__plain {
    display: flex;
  }
}