/* =================================================================
   XGRIDS Türkiye — anasayfa bölümleri (tasarım v2)
   hero → ürünler → yazılımlar → ekosistem → çözümlerimiz → hakkımızda → slogan bandı
   ================================================================= */

/* ---------- HERO ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(40rem, calc(100svh - var(--ust-h)), 62rem);
  background: var(--ink) url("../assets/img/hero-poster.webp") center / cover no-repeat;
  color: #fff;
}
.hero__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__ort {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(var(--ink-rgb), .9) 0%, rgba(var(--ink-rgb), .62) 38%, rgba(var(--ink-rgb), .12) 72%, rgba(var(--ink-rgb), 0) 100%),
    linear-gradient(0deg, rgba(var(--ink-rgb), .85) 0%, rgba(var(--ink-rgb), 0) 32%);
}
.hero__ic { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 5rem 3rem; }
.hero__baslik {
  max-width: 14ch;
  font-family: var(--font-baslik); font-size: var(--fs-hero); font-weight: 800;
  line-height: .98; letter-spacing: .005em; text-transform: uppercase;
}
.hero__baslik span { color: var(--xg-acik); }
.hero__metin { max-width: 40rem; margin-top: 1.75rem; font-size: var(--fs-lg); line-height: 1.6; color: rgba(255, 255, 255, .86); }
.hero__dugmeler { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }
.hero__baslik[data-belir] { --sira: 1; }
.hero__metin[data-belir] { --sira: 2; }
.hero__dugmeler[data-belir] { --sira: 3; }

.hero__alt { border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(var(--ink-rgb), .35); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); }
.hero__alt-ic { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.hero__rakamlar { display: grid; grid-template-columns: repeat(4, auto); }
.hero__rakamlar div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 1.5rem 3.5rem 1.5rem 0; }   /* rakamlar üstte hizalı (açıklama satır sayısı farklı olsa da) */
.hero__rakamlar div + div { padding-left: 3.5rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.hero__rakamlar dd { font-family: var(--font-baslik); font-size: 2.5rem; font-weight: 700; line-height: 1; color: #fff; }
.hero__rakamlar dt { margin-top: 0.375rem; font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.hero__oynat {
  flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4); color: #fff; font-size: 1rem; transition: background-color .2s, border-color .2s;
}
.hero__oynat:hover { background: rgba(255, 255, 255, .14); border-color: #fff; }
.hero__oynat .i-oynat { display: none; }
.hero__oynat.is-durdu .i-oynat { display: block; }
.hero__oynat.is-durdu .i-durdur { display: none; }

/* ---------- ÜRÜN VE YAZILIM KARTLARI ----------
   Ortak kart: üstte medya (durgun görsel → üzerine gelince ilgili cihazın/yazılımın videosu, js/site.js [data-kart-video]),
   altta metin. Ürünler açık zeminde beyaz kart, yazılımlar koyu zeminde koyu kart. */
/* Koyu bölümler (Ürünler, Yazılımlar, Çözümler; kullanıcı 2026-10-26): --ink zemin, üst ve alt kenarda tüm genişlik boyunca mavi ışık
   şeridi — bölüm geçişleri aydınlansın; art arda gelen Ürünler/Yazılımlar sınırında iki şerit birleşir. Önceki hâl (tek köşe ışığı):
   yedek/xgrids-isik-serit-2026-10-26/ */
.bolum--urun, .bolum--yazilim, .bolum--cozum {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse 75% 16rem at 50% 0%, rgba(var(--xg-rgb), .22), transparent 72%),
    radial-gradient(ellipse 75% 16rem at 50% 100%, rgba(var(--xg-rgb), .22), transparent 72%),
    var(--ink);
}
.kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.kart {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--yaricap);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, opacity .7s var(--ease);
}
/* Ürün kartı gövdesi yazılım kartıyla aynı koyu kutu (kullanıcı 2026-10-26); cihaz görselinin durduğu üst alan açık kalır (siyah cihazlar
   koyu zeminde kaybolur). Önceki beyaz kart: yedek/xgrids-urun-kart-koyu-2026-10-26/ */
.kart--urun, .kart--yazilim { background: var(--ink-2); border: 1px solid var(--cizgi-koyu); }
.kart:hover, .js .kart.is-gorunur:hover { transform: translateY(-0.375rem); }
.kart--urun:hover, .kart--yazilim:hover { border-color: rgba(var(--xg-rgb), .6); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35); }

.kart__medya { position: relative; isolation: isolate; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-3); }
/* Vitrin: kart gövdesiyle aynı koyu zemin (kullanıcı 2026-10-26), cihazın arkasında orantılı spot ışık — siyah cihaz silüeti
   okunsun diye merkez açık maviden kenarlara söner; altta hafif zemin yansıması. Önceki açık vitrin: yedek/xgrids-urun-vitrin-koyu-2026-10-26/ */
.kart--urun .kart__medya {
  background:
    radial-gradient(ellipse 34% 62% at 50% 58%, rgba(124, 155, 255, .55) 0%, rgba(var(--xg-rgb), .26) 42%, rgba(var(--xg-rgb), 0) 78%),
    radial-gradient(ellipse 60% 18% at 50% 100%, rgba(var(--xg-rgb), .22), transparent 70%),
    var(--ink-2);
  border-bottom: 1px solid var(--cizgi-koyu);
}
.kart__poster { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.kart--urun .kart__poster { object-fit: contain; padding: 3.25rem 0 2.25rem; }   /* cihaz ~%15 küçük, merkezi spot ışıkta (kullanıcı 2026-10-26) */
.kart--urun .kart__poster[src*="portalcam"] { padding: 4.5rem 0 3rem; }   /* PortalCam iri görünüyordu: ~%10 daha küçük, merkez aynı */
.kart:hover .kart__poster { transform: scale(1.04); }
.kart__video {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease);
}
.kart.is-oynuyor .kart__video { opacity: 1; }
.kart__oynat {
  position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 2;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(var(--ink-rgb), .55); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
  color: #fff; font-size: 1rem; transition: opacity .3s, background-color .3s;
}
.kart__oynat .ikon { margin-left: 0.125rem; }
.kart:hover .kart__oynat { background: var(--xg); }
.kart.is-oynuyor .kart__oynat { opacity: 0; }
.kart__etiket {
  position: absolute; top: 1.25rem; left: 1.25rem; z-index: 2;
  padding: 0.3125rem 0.75rem; border-radius: 2rem; background: var(--ink); color: #fff;
  font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.kart__etiket--yeni { background: var(--xg); }
.kart--urun .kart__etiket:not(.kart__etiket--yeni) { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--cizgi-koyu); }   /* koyu vitrinde okunur */

.kart__govde { display: flex; flex: 1; flex-direction: column; padding: 2rem 2.25rem 2.25rem; }
.kart__tur { font-family: var(--font-baslik); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.kart--urun .kart__tur, .kart--yazilim .kart__tur { color: var(--xg-acik); }
.kart__ad { margin-top: 0.25rem; font-family: var(--font-baslik); font-size: 2.375rem; font-weight: 700; line-height: 1.05; color: var(--ink); }
.kart--urun .kart__ad, .kart--yazilim .kart__ad { color: #fff; }
.kart__ad a { transition: color .2s; }
.kart__ad a:hover { color: var(--xg); }
.kart--urun .kart__ad a:hover, .kart--yazilim .kart__ad a:hover { color: var(--xg-acik); }
.kart__konum { margin-top: 0.375rem; font-weight: 600; line-height: 1.35; color: var(--xg-acik); }
.kart__ozet { max-width: 54ch; margin-top: 0.75rem; line-height: 1.55; color: var(--soluk); }
.kart--urun .kart__ozet, .kart--yazilim .kart__ozet { color: var(--koyu-soluk); }
.kart__alt { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-top: auto; padding-top: 1.75rem; }
.kart--urun .kart__alt { border-top: 1px solid var(--cizgi-koyu); margin-top: 1.75rem; padding-top: 1.25rem; }
.kart__rakamlar { display: flex; }
.kart__rakamlar div { display: flex; flex-direction: column-reverse; padding-right: 1.5rem; }
.kart__rakamlar div + div { padding-left: 1.5rem; border-left: 1px solid var(--cizgi-koyu); }
.kart__rakamlar dd { font-family: var(--font-baslik); font-size: 2rem; font-weight: 700; line-height: 1; color: #fff; white-space: nowrap; }
.kart__rakamlar small { margin-left: 0.125rem; font-size: .55em; font-weight: 600; color: var(--koyu-soluk); }
.kart__rakamlar dt { margin-top: 0.375rem; font-size: var(--fs-xs); line-height: 1.3; color: var(--koyu-soluk); }
.kart__eylem { display: flex; align-items: center; gap: 1.5rem; }
.kart--urun .ok-link, .kart--yazilim .ok-link { color: var(--xg-acik); }
.kart--urun .ok-link:hover, .kart--yazilim .ok-link:hover { color: #fff; }
.etiketler { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.etiketler li {
  padding: 0.25rem 0.75rem; border: 1px solid var(--cizgi-koyu); border-radius: 2rem;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--koyu-metin);
}
/* LCC Plugin for UE: desteklenen platformlar ikonlu çip (etiketlerin yerine) */
.etiketler--platform li { display: inline-flex; align-items: center; gap: 0.4375rem; }
.etiketler--platform li:has(.ikon) { padding-left: 0.5625rem; }
.etiketler--platform .ikon { font-size: 1.05em; color: var(--xg-acik); }

.urunler__dip {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  margin-top: 2rem; padding: 1.5rem 1.75rem 1.5rem 2.25rem;
  background: var(--ink-2); border: 1px solid var(--cizgi-koyu); border-left: 0.25rem solid var(--xg); border-radius: var(--yaricap);   /* kart gövdesiyle aynı (2026-10-26) */
}
.urunler__dip p { font-size: var(--fs-lg); font-weight: 500; color: #fff; }
.urunler__dugmeler { display: flex; flex-wrap: wrap; gap: 0.75rem; }   /* Ürünleri Karşılaştırın + Uzmanla Görüşün (2026-10-29) */


/* ---------- EKOSİSTEM (xgrids.com/intl ile aynı: başlık, açıklama, kayan logolar) ---------- */
.bolum--ekosistem { background: var(--kagit-3); overflow: hidden; }
.ekosistem__bas { max-width: 62rem; margin-inline: auto; text-align: center; }
.ekosistem__baslik {
  font-family: var(--font-baslik); font-size: var(--fs-h2); font-weight: 700;
  line-height: 1.05; text-transform: uppercase; color: var(--ink);
}
.ekosistem__bas p { margin-top: 1.25rem; font-size: var(--fs-lg); line-height: 1.55; color: var(--soluk); }
.marka-bandi {
  margin-top: 3.75rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.marka-bandi__iz { display: flex; width: max-content; animation: marka-kay 70s linear infinite; }
.marka-bandi:hover .marka-bandi__iz, .marka-bandi:focus-within .marka-bandi__iz { animation-play-state: paused; }
.marka-bandi__liste { display: flex; align-items: center; gap: 4rem; padding-right: 4rem; }
.marka-bandi__liste img { width: auto; height: 2.75rem; filter: brightness(0); opacity: .62; transition: opacity .2s; }
.marka-bandi__liste img:hover { opacity: .9; }
@keyframes marka-kay { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marka-bandi { -webkit-mask-image: none; mask-image: none; }
  .marka-bandi__iz { width: auto; animation: none; justify-content: center; }
  .marka-bandi__liste { flex-wrap: wrap; justify-content: center; gap: 2rem 3rem; padding: 0 var(--oluk); }
  .marka-bandi__liste[aria-hidden] { display: none; }
}

/* ---------- ÇÖZÜMLERİMİZ ---------- */
/* Dokuz çözüm (2026-10-31): 3×3 ızgara, kartlar kapak görsellerinin oranında (4:3, tam kadraj); önceki 4 sütun 4:5 */
.cozumler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.cozum-kart a {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--yaricap); color: #fff;
  box-shadow: 0 0 0 1px var(--cizgi-koyu);   /* kartın koyulaşan alt kenarı zeminden ayrılsın */
}
.cozum-kart img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
/* Hover videosu: görselin üstünde, karartma katmanının altında; ilk karesi gelince belirir */
.cozum-kart__video {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .45s var(--ease);
}
.cozum-kart.is-oynuyor .cozum-kart__video { opacity: 1; }
.cozum-kart__oynat {
  position: absolute; top: 1rem; right: 1rem;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: rgba(var(--ink-rgb), .5); -webkit-backdrop-filter: blur(0.375rem); backdrop-filter: blur(0.375rem);
  color: #fff; font-size: 0.875rem; transition: opacity .3s, background-color .3s;
}
.cozum-kart__oynat .ikon { margin-left: 0.125rem; }
.cozum-kart a:hover .cozum-kart__oynat { background: var(--xg); }
.cozum-kart.is-oynuyor .cozum-kart__oynat { opacity: 0; }
.cozum-kart a::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), .5) 0%, rgba(var(--ink-rgb), 0) 22%),   /* açık görsellerde numara okunsun */
    linear-gradient(0deg, rgba(var(--ink-rgb), .94) 0%, rgba(var(--ink-rgb), .55) 45%, rgba(var(--ink-rgb), .05) 75%);
  transition: background-color .3s;
}
.cozum-kart a::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 0.25rem; background: var(--xg);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.cozum-kart a:hover img, .cozum-kart a:focus-visible img { transform: scale(1.06); }
.cozum-kart a:hover::after, .cozum-kart a:focus-visible::after { transform: scaleX(1); }
.cozum-kart__no {
  position: absolute; top: 1.25rem; left: 1.5rem;
  font-family: var(--font-baslik); font-size: 1.125rem; font-weight: 700; letter-spacing: .08em; color: rgba(255, 255, 255, .85);
}
.cozum-kart__govde { display: flex; flex-direction: column; padding: 1.75rem 1.5rem; }
.cozum-kart__ad { font-family: var(--font-baslik); font-size: 1.625rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.cozum-kart__ozet {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .85);
  transition: grid-template-rows .4s var(--ease), opacity .3s, margin-top .4s var(--ease);
}
.cozum-kart__ozet > span { min-height: 0; overflow: hidden; }
.cozum-kart a:hover .cozum-kart__ozet, .cozum-kart a:focus-visible .cozum-kart__ozet { grid-template-rows: 1fr; opacity: 1; margin-top: 0.625rem; }
@media (hover: none) {
  .cozum-kart__ozet { grid-template-rows: 1fr; opacity: 1; margin-top: 0.625rem; }
}

/* ---------- HAKKIMIZDA ---------- */
.bolum--hakkimizda { background: var(--kagit-2); }
/* Görselsiz (kullanıcı, 2026-10-26): solda başlık + giriş + düğme, sağda ince çizgiyle ayrılmış metin ve hizmetler */
.hakkimizda { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 5.5rem; align-items: start; }
.hakkimizda__bas .bolum__baslik { max-width: none; }
.hakkimizda__bas .atlihan { white-space: nowrap; }
.hakkimizda__giris { margin-top: 1.5rem; max-width: 36ch; font-size: var(--fs-lg); font-weight: 600; line-height: 1.5; color: var(--xg-koyu); }
.hakkimizda__bas .dugme { margin-top: 2.5rem; }
.hakkimizda__metin { position: relative; padding-left: 4rem; border-left: 1px solid var(--cizgi); }
.hakkimizda__metin::before { content: ""; position: absolute; left: -1px; top: 0; width: 2px; height: 4.5rem; background: var(--xg); }
.hakkimizda__metin > p { color: var(--soluk); }
.hakkimizda__metin > p + p { margin-top: 1rem; }
.hizmetler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2.25rem; }
.hizmetler li {
  display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem;
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  font-weight: 600; color: var(--ink);
}
.hizmetler .ikon {
  box-sizing: content-box; width: 1.375rem; height: 1.375rem; padding: 0.5625rem; border-radius: 0.375rem;
  background: var(--xg-50); color: var(--xg);
}

/* ---------- SLOGAN BANDI ---------- */
.slogan { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 38rem; color: #fff; text-align: center; background: var(--ink); }
.slogan__zemin { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.slogan::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50rem 26rem at 50% 110%, rgba(var(--xg-rgb), .55), transparent 70%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .72) 0%, rgba(var(--ink-rgb), .55) 50%, rgba(var(--ink-rgb), .82) 100%);
}
.slogan__ic { display: flex; flex-direction: column; align-items: center; padding-block: 6rem; }
.slogan__baslik {
  font-family: var(--font-baslik); font-size: var(--fs-slogan); font-weight: 800;
  line-height: 1; letter-spacing: .005em; text-transform: uppercase;
}
.slogan__baslik span { color: var(--xg-acik); }
.slogan__metin { max-width: 40rem; margin-top: 1.5rem; font-size: var(--fs-lg); color: rgba(255, 255, 255, .86); }
.slogan__dugmeler { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; margin-top: 2.5rem; }
.slogan__tel {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-family: var(--font-baslik); font-size: 1.375rem; font-weight: 600; letter-spacing: .04em;
}
.slogan__tel .ikon { color: var(--xg-acik); }
.slogan__tel:hover { color: var(--xg-acik); }

/* =================================================================
   KIRILIMLAR (tablet / mobil)
   ================================================================= */
@media (max-width: 1100px) {
  .hero { min-height: clamp(34rem, calc(100svh - var(--ust-h)), 48rem); }
  .hero__ort { background: linear-gradient(90deg, rgba(var(--ink-rgb), .85) 0%, rgba(var(--ink-rgb), .5) 100%), linear-gradient(0deg, rgba(var(--ink-rgb), .85) 0%, rgba(var(--ink-rgb), 0) 40%); }
  .hero__ic { padding-block: 3.5rem 2.5rem; }
  .hero__rakamlar div { padding: 1.125rem 1.75rem 1.125rem 0; }
  .hero__rakamlar div + div { padding-left: 1.75rem; }
  .hero__rakamlar dd { font-size: 1.875rem; }

  .urunler__dip { flex-direction: column; align-items: flex-start; }
  .cozumler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cozum-kart a { aspect-ratio: 4 / 3; }
  .cozum-kart__ozet { grid-template-rows: 1fr; opacity: 1; margin-top: 0.625rem; }
  .hakkimizda { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .hakkimizda__metin { padding-left: 1.5rem; }
  .kart__govde { padding: 1.75rem; }
  .kart__ad { font-size: 2rem; }
  .marka-bandi__liste img { height: 2.25rem; }
  .marka-bandi__liste { gap: 3rem; padding-right: 3rem; }
}
/* İki sütunda tek kalan son kart (dokuz çözüm): tam genişlik; görsel solda bir kart boyunda (4:3, kırpmasız), metin sağda dikeyde ortalı */
@media (min-width: 641px) and (max-width: 1100px) {
  .cozum-kart:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cozum-kart:last-child:nth-child(odd) a { aspect-ratio: 8 / 3; justify-content: center; padding-left: 50%; background: var(--ink-2); }
  .cozum-kart:last-child:nth-child(odd) img,
  .cozum-kart:last-child:nth-child(odd) .cozum-kart__video,
  .cozum-kart:last-child:nth-child(odd) a::before { right: 50%; width: 50%; }
  .cozum-kart:last-child:nth-child(odd) .cozum-kart__oynat { right: calc(50% + 1rem); }
}
@media (max-width: 760px) {
  .hero__rakamlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* eşit sütun: 2×2 ızgara hizalı (2026-11-02) */
  .hero__rakamlar div:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero__rakamlar div:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .hero__alt-ic { align-items: flex-end; }
  .hero__oynat { margin-bottom: 1rem; }
  .kartlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cozumler { grid-template-columns: minmax(0, 1fr); }
  .kart__govde { padding: 1.5rem; }
  .kart__ad { font-size: 2rem; }
  .kart__rakamlar div { padding-right: 0.625rem; }
  .kart__rakamlar div + div { padding-left: 0.625rem; }
  .kart__rakamlar dd { font-size: 1.25rem; }   /* 320K/640K, 120/300 m gibi çift değerler dar ekrana sığsın */
  .hero__dugmeler .dugme, .slogan__dugmeler .dugme { flex: 1 1 100%; }
  .hizmetler { grid-template-columns: minmax(0, 1fr); }
  .slogan { min-height: 0; }
  .slogan__ic { padding-block: 4.5rem; }
}