/* ==================================================================
   Neds tanıtım sitesi

   admin.css'in değişkenlerini devralır, kendi bileşenlerini tanımlar.
   Adlandırma "site-" ile başlıyor ki admin.css'teki .dugme, .kart
   gibi bileşenlerle çakışmasın.

   Kahraman bölümü açık degrade zeminde: rakiplerin üçünde de açılış
   aydınlık ve fotoğraflı; düz koyu bir blok yanlarında fakir duruyor.
   Koyu yüzey burada vurgu için saklanıyor (fark bölümü ve kapanış).
================================================================== */

.site {
  margin: 0;
  background: var(--kart);
  color: var(--metin);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.site *, .site *::before, .site *::after { box-sizing: border-box; }

/* Izgara ve esnek çocukları en-küçük-içerik genişliğine kilitlenip
   dar ekranda taşıyor; tek kural hepsini çözüyor. */
.site-govde *, .site-alt * { min-width: 0; }

.site-govde img { max-width: 100%; height: auto; }

.gizli-metin {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.site-atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 10px 16px; background: var(--komur); color: #fff;
  border-radius: 0 0 10px 0; font-size: 14px; text-decoration: none;
}
.site-atla:focus { left: 0; }

/* --------------------------------------------------------- ölçüler */

.site {
  --site-en: 1180px;
  --site-bosluk: 24px;
  --site-arali: 92px;
  --mor-ton: #6d3fd4;
}

.bolum__ic,
.serit__ic,
.giris__ic,
.kapanis__ic,
.anlatim__ic,
.logo-serit__ic,
.site-ust__ic,
.site-alt__ic,
.site-alt__cizgi {
  width: 100%;
  max-width: var(--site-en);
  margin-inline: auto;
  padding-inline: var(--site-bosluk);
}

.bolum__ic--dar { max-width: 820px; }

/* ========================================================== üst bar */

.site-ust {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--kenarlik);
}

.site-ust__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-block: 12px;
}

.site-marka {
  display: inline-flex; align-items: center;
  text-decoration: none; flex: none;
}

/* Yazı kilidi 9,1:1 (1408×155); genişlik yükseklikten çıkıyor. */
.site-marka img {
  max-width: min(48vw, 160px);
  display: block;
  height: 17px; width: auto;
}

@media (max-width: 480px) {
  .site-marka img { height: 15px; }
}

.site-ust__dugme {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--kenarlik);
  border-radius: 10px; color: var(--metin); cursor: pointer;
}

.site-menu { display: flex; align-items: center; gap: 22px; }

.site-menu > a {
  font-size: 14.2px; color: var(--metin-orta);
  text-decoration: none; white-space: nowrap;
  transition: color .16s ease;
}

.site-menu > a:hover { color: var(--metin); }
.site-menu > a.aktif { color: var(--metin); font-weight: 600; }

.site-menu__ayirac { width: 1px; height: 20px; background: var(--kenarlik-koyu); }
.site-menu__giris { font-weight: 500; }

/* =========================================================== düğme */

.site-dugme {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 11px 18px; border-radius: 11px;
  border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 14.4px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, transform .12s ease, box-shadow .16s ease;
}

.site-dugme:active { transform: translateY(1px); }
.site-dugme .ico { width: 17px; height: 17px; flex: none; }

.site-dugme--birincil {
  background: var(--komur); color: #fff;
  box-shadow: 0 10px 24px -12px rgba(23, 25, 29, .75);
}
.site-dugme--birincil:hover { background: var(--komur-2); }

.site-dugme--hayalet {
  border-color: var(--kenarlik-koyu); color: var(--metin);
  background: rgba(255, 255, 255, .78);
}
.site-dugme--hayalet:hover { border-color: var(--metin-silik); background: #fff; }

/* Koyu zeminde duran ikili */
.site-dugme--ters { background: #fff; color: var(--komur); }
.site-dugme--ters:hover { background: #eceef1; }

.site-dugme--hayalet-ters { border-color: rgba(255, 255, 255, .3); color: #fff; }
.site-dugme--hayalet-ters:hover {
  border-color: rgba(255, 255, 255, .58);
  background: rgba(255, 255, 255, .08);
}

.site-dugme--buyuk { padding: 14px 24px; font-size: 15.4px; border-radius: 12px; }
.site-dugme--kucuk { padding: 9px 15px; font-size: 13.6px; border-radius: 10px; }

.site-baglanti {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14.2px; font-weight: 600; color: var(--birincil);
  text-decoration: none;
}
.site-baglanti:hover { text-decoration: underline; }
.site-baglanti .ico { width: 16px; height: 16px; }
.site-baglanti--acik { color: #8ab4f8; }

/* ======================================================== bildirim */

.site-bildirim {
  max-width: var(--site-en); margin: 16px auto 0;
  padding: 12px 16px; border-radius: 11px; font-size: 14px;
  background: var(--birincil-acik); color: var(--birincil-koyu);
}
.site-bildirim--hata { background: var(--tehlike-acik); color: var(--tehlike); }

/* =========================================================== giriş */

.giris {
  position: relative;
  padding-block: 64px 78px;
  overflow: hidden;
  /* Fotoğrafın kendi açık lila zeminiyle birleşen yumuşak degrade;
     görsel sayfanın içinden çıkmış gibi dursun, üstüne yapıştırılmış
     gibi değil. */
  background:
    radial-gradient(90% 75% at 78% 18%, rgba(109, 63, 212, .13) 0%, rgba(109, 63, 212, 0) 62%),
    radial-gradient(75% 70% at 12% 8%, rgba(31, 111, 235, .11) 0%, rgba(31, 111, 235, 0) 58%),
    linear-gradient(180deg, #f7f7fb 0%, #fcfbff 55%, var(--kart) 100%);
}

.giris__ic {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}

.rozet-cizgi {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(109, 63, 212, .22);
  background: rgba(255, 255, 255, .8);
  font-size: 12.8px; font-weight: 600; color: var(--mor-ton);
}
.rozet-cizgi .ico { width: 15px; height: 15px; }

.giris h1 {
  margin: 20px 0 0;
  font-size: clamp(33px, 4.5vw, 54px);
  line-height: 1.08; letter-spacing: -.03em; font-weight: 780;
  text-wrap: balance;
}

.giris h1 em {
  font-style: normal; position: relative; white-space: nowrap;
  background: linear-gradient(180deg, transparent 63%, rgba(109, 63, 212, .24) 63%);
  padding-inline: 3px;
}

.giris__alt {
  margin: 18px 0 0; max-width: 54ch;
  font-size: 16.4px; line-height: 1.62; color: var(--metin-orta);
}

/* Rakiplerin başlık altındaki küçük özellik rozetleri: hangi
   vaatlerin somut olduğunu bir bakışta veriyor. */
.giris__cipler { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }

.cip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 11px;
  background: #fff; border: 1px solid var(--kenarlik);
  box-shadow: 0 2px 8px -4px rgba(20, 22, 26, .12);
  font-size: 13.2px; color: var(--metin-orta);
}
.cip b { font-weight: 700; color: var(--metin); }
.cip .ico { width: 16px; height: 16px; color: var(--mor-ton); }

.giris__eylem { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.giris__guvence {
  display: flex; flex-wrap: wrap; gap: 8px 22px;
  margin: 22px 0 0; padding: 0; list-style: none;
}
.giris__guvence li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.4px; color: var(--metin-silik);
}
.giris__guvence .ico { width: 15px; height: 15px; color: var(--basari); }

/* ---------------------------------------------- sahne ve yüzen kart */

.sahne { position: relative; }

.sahne > img {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
}

.yuzen {
  position: absolute; z-index: 2;
  display: grid; grid-template-columns: 30px minmax(0, 1fr);
  align-items: center; gap: 4px 11px;
  padding: 11px 15px 11px 12px; border-radius: 13px;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 16px 36px -16px rgba(23, 25, 29, .38);
}

.yuzen__im {
  grid-row: span 2; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  font-style: normal;
}
.yuzen__im .ico { width: 16px; height: 16px; }
.yuzen__im--yesil { background: var(--basari-acik); color: var(--basari); }
.yuzen__im--mavi { background: var(--birincil-acik); color: var(--birincil-koyu); }
.yuzen__im--mor { background: var(--mor-acik); color: var(--mor-ton); }

.yuzen b {
  font-size: 12.6px; font-weight: 680; letter-spacing: -.01em;
  align-self: end; white-space: nowrap;
}
.yuzen em {
  font-style: normal; font-size: 11.6px; color: var(--metin-silik);
  align-self: start; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.yuzen__grafik {
  grid-column: 1 / -1; width: 100%; height: 22px;
  margin-top: 4px; color: var(--birincil);
}

.yuzen--siparis { top: 7%; left: -4%; }
.yuzen--ciro { bottom: 12%; left: -7%; }
.yuzen--fatura { top: 33%; right: -5%; }
.yuzen--kanal { bottom: 8%; left: -6%; }

/* ==================================================== logo şeridi */

.logo-serit {
  padding-block: 34px;
  background: var(--kart);
  border-bottom: 1px solid var(--kenarlik);
}

.logo-serit__baslik,
.serit__baslik {
  margin: 0 0 18px; text-align: center;
  font-size: 12.2px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .11em; color: var(--metin-silik);
}

/* Yatay boşluk bilerek dar: 10 öğe tek satıra sığmayınca sonuncusu
   (Paraşüt) tek başına alt satırda kalıyordu. 28 px boşlukla gereken
   genişlik 1161 px, kapsayıcı 1132 px — 29 px taşıyordu. */
.logo-serit__liste {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 16px 22px;
}

/* Sözcük-logo: marka dosyası henüz konulmamış firmalar için.
   Ağırlığı bilerek logolarla aynı seviyede: 700 punto koyu yazı,
   yanındaki soluk gri logolardan daha baskın görünüyordu. */
.logo-serit__liste span {
  font-size: 15.5px; font-weight: 600; letter-spacing: -.018em;
  color: var(--metin-silik);
  opacity: .72;
  transition: color .18s ease, opacity .18s ease;
}

.logo-serit__liste span:hover { color: var(--metin-orta); opacity: 1; }

/* Gerçek marka dosyası konulduğunda. Logolar farklı en-boy ve
   farklı renklerde geliyor; şerit dağılmasın diye yükseklik
   sabitleniyor ve hepsi soluk griye çekiliyor, üstüne gelince
   kendi rengine dönüyor.

   Seçici bilerek iki sınıflı: yukarıdaki `.site-govde img` kuralı
   (height:auto; max-width:100%) tek sınıflı seçiciden daha
   belirgin ve yüksekliği eziyordu. Doğal boyutu olmayan SVG de
   böyle olunca ekranı kaplıyordu. */
.logo-serit__liste img.logo-serit__logo {
  display: block;
  /* Her logonun kendi yüksekliği var (--logo-boy); alanları eşit
     görünsün diye satır içinde veriliyor, yoksa 26 px. */
  height: var(--logo-boy, 26px);
  width: auto;
  max-width: 132px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter .18s ease, opacity .18s ease;
}

.logo-serit__liste img.logo-serit__logo:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 560px) {
  /* Dar ekranda hepsi orantılı küçülsün; kendi oranları korunuyor. */
  .logo-serit__liste img.logo-serit__logo {
    height: calc(var(--logo-boy, 26px) * .78);
    max-width: 118px;
  }
}

.logo-serit__not {
  margin: 20px auto 0; max-width: 60ch; text-align: center;
  font-size: 12.4px; line-height: 1.6; color: var(--metin-silik);
}

/* Bağlantı düz yazıdan ayrılsın; not soluk gri olduğu için
   renk tek başına yetmiyor, alt çizgi de veriliyor. */
.logo-serit__not a {
  color: var(--metin-orta);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.logo-serit__not a:hover { color: var(--metin); }

/* ========================================================== rakamlar */

.serit {
  background: var(--zemin);
  border-bottom: 1px solid var(--kenarlik);
  padding-block: 42px;
}

.serit__liste {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px; margin: 0;
}

.serit__liste > div { text-align: center; }

.serit__liste dt {
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 780;
  letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
}

.serit__liste dd { margin: 7px 0 0; font-size: 13.2px; color: var(--metin-orta); }

.serit__not {
  margin: 24px auto 0; max-width: 60ch; text-align: center;
  font-size: 12.4px; line-height: 1.6; color: var(--metin-silik);
}

/* ========================================================= anlatım */

.anlatim { padding-block: var(--site-arali); }
.anlatim--acik { background: var(--zemin); }

.anlatim__ic {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px; align-items: center;
}

/* Ters düzende görsel sola geçer; kaynak sırası okuma sırasıdır. */
.anlatim--ters .anlatim__soz { order: 2; }
.anlatim--ters .anlatim__gorsel { order: 1; }

.etiket {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--mor-acik); color: var(--mor-ton);
  font-size: 12.2px; font-weight: 700; letter-spacing: .02em;
}

.anlatim__soz h2 {
  margin: 16px 0 0;
  font-size: clamp(25px, 2.9vw, 35px);
  line-height: 1.18; letter-spacing: -.026em; font-weight: 760;
  text-wrap: balance;
}

.anlatim__soz > p {
  margin: 15px 0 0; max-width: 52ch;
  font-size: 16px; line-height: 1.66; color: var(--metin-orta);
}

.madde-liste { margin: 22px 0 26px; padding: 0; list-style: none; display: grid; gap: 11px; }

.madde-liste li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 11px;
  align-items: start; font-size: 14.8px; line-height: 1.55; color: var(--metin-orta);
}
.madde-liste .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--basari); }

.anlatim__gorsel { position: relative; }

.anlatim__gorsel > img {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
}

.anlatim__gorsel--telefon > img {
  box-shadow: 0 30px 60px -26px rgba(23, 25, 29, .5);
}

/* =========================================================== bölüm */

.bolum { padding-block: var(--site-arali); }
.bolum--acik { background: var(--zemin); }

.bolum--koyu {
  background: var(--komur); color: #fff;
  background-image: radial-gradient(
    100% 80% at 50% 0%,
    rgba(109, 63, 212, .22) 0%,
    rgba(109, 63, 212, 0) 60%
  );
}

.bolum__basi { max-width: 66ch; margin: 0 0 44px; }
.bolum__basi--orta { margin-inline: auto; text-align: center; }

.bolum__basi h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 37px);
  line-height: 1.16; letter-spacing: -.027em; font-weight: 760;
  text-wrap: balance;
}

.bolum__basi p {
  margin: 15px 0 0; font-size: 16px; line-height: 1.65;
  color: var(--metin-orta);
}
.bolum--koyu .bolum__basi p { color: rgba(255, 255, 255, .7); }

.bolum__eylem { margin: 40px 0 0; }
.bolum__eylem--orta { text-align: center; }

/* ------------------------------------------------------------ fark */

.fark-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.fark { padding-left: 18px; border-left: 2px solid rgba(255, 255, 255, .16); }

.fark__im {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  background: rgba(255, 255, 255, .1); color: #fff;
}
.fark__im .ico { width: 18px; height: 18px; }

.fark h3 { margin: 15px 0 0; font-size: 16.4px; font-weight: 680; letter-spacing: -.012em; }

.fark p {
  margin: 9px 0 0; font-size: 14.2px; line-height: 1.62;
  color: rgba(255, 255, 255, .66);
}

/* -------------------------------------------------------- yetenek */

/* grid-auto-rows: 1fr — iki satır aynı boyda dursun. Metinler
   farklı uzunlukta olduğu için üst satır alt satırdan yüksek
   çıkıyor, ızgara basamaklı görünüyordu. */
.yetenek-izgara {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 18px;
}

.yetenek {
  padding: 22px; border-radius: 15px;
  background: var(--kart); border: 1px solid var(--kenarlik);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.yetenek:hover {
  border-color: transparent; transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(20, 22, 26, .4);
}

.yetenek__im {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--birincil-acik); color: var(--birincil-koyu);
}
.yetenek__im .ico { width: 19px; height: 19px; }

.yetenek h3 { margin: 16px 0 0; font-size: 16px; font-weight: 680; letter-spacing: -.012em; }
.yetenek p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--metin-orta); }

/* Kartlara renk dağılımı: hepsi aynı maviye boyanınca ızgara
   düzleşiyor, sıra numarasına göre ton değişiyor. */
.yetenek:nth-child(4n+2) .yetenek__im { background: var(--mor-acik); color: var(--mor-ton); }
.yetenek:nth-child(4n+3) .yetenek__im { background: var(--basari-acik); color: var(--basari); }
.yetenek:nth-child(4n+4) .yetenek__im { background: var(--uyari-acik); color: var(--uyari); }

/* ---------------------------------------------------------- fiyat */

.fiyat-kart {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--kenarlik);
  box-shadow: var(--golge-lg);
}

.fiyat-kart__sol { padding: 38px 34px; background: var(--komur); color: #fff; }

.fiyat-kart__ad {
  font-size: 12.4px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: rgba(255, 255, 255, .58);
}

.fiyat-kart__tutar { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 0; }
.fiyat-kart__tutar strong {
  font-size: clamp(34px, 4.2vw, 48px); font-weight: 780;
  letter-spacing: -.038em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fiyat-kart__tutar span { font-size: 15px; color: rgba(255, 255, 255, .6); }

.fiyat-kart__yil { margin: 12px 0 0; font-size: 14px; color: rgba(255, 255, 255, .72); }

.fiyat-kart__eylem {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px;
}

.fiyat-kart__not { margin: 20px 0 0; font-size: 12.6px; color: rgba(255, 255, 255, .5); }

.fiyat-kart__liste {
  margin: 0; padding: 34px; list-style: none;
  background: var(--kart);
  display: grid; gap: 11px; align-content: start;
}

.fiyat-kart__liste li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: 14.2px; line-height: 1.55; color: var(--metin-orta);
}
.fiyat-kart__liste .ico { width: 16px; height: 16px; margin-top: 3px; color: var(--basari); }

/* --------------------------------------------------------- hizmet */

.hizmet-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.hizmet {
  display: flex; flex-direction: column;
  padding: 22px; border-radius: 15px;
  background: var(--kart); border: 1px solid var(--kenarlik);
}

.hizmet h3 { margin: 0; font-size: 16px; font-weight: 680; letter-spacing: -.012em; }
.hizmet p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--metin-orta); flex: 1; }

.hizmet__fiyat {
  margin-top: 16px; font-size: 13.2px; font-weight: 650;
  color: var(--metin); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ sss */

.sss { display: grid; border-top: 1px solid var(--kenarlik-koyu); text-align: left; }

.sss__oge { border-bottom: 1px solid var(--kenarlik-koyu); }

.sss__oge summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 19px 2px; cursor: pointer;
  font-size: 16px; font-weight: 620; letter-spacing: -.011em;
  list-style: none;
}
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__oge summary:hover { color: var(--birincil); }

.sss__oge summary .ico {
  width: 19px; height: 19px; flex: none; color: var(--metin-silik);
  transition: transform .2s ease;
}
.sss__oge[open] summary .ico { transform: rotate(180deg); }

.sss__cevap { padding: 0 2px 20px; }
.sss__cevap p {
  margin: 0; max-width: 72ch;
  font-size: 15px; line-height: 1.68; color: var(--metin-orta);
}

/* -------------------------------------------------------- kapanış */

.kapanis {
  background: var(--komur); color: #fff;
  padding-block: 82px; text-align: center;
  background-image: radial-gradient(
    90% 100% at 50% 0%,
    rgba(31, 111, 235, .24) 0%,
    rgba(31, 111, 235, 0) 62%
  );
}

.kapanis h2 {
  margin: 0; font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.18; letter-spacing: -.027em; font-weight: 760;
  text-wrap: balance;
}

.kapanis p {
  margin: 15px auto 0; max-width: 52ch;
  font-size: 16px; line-height: 1.62; color: rgba(255, 255, 255, .7);
}

.kapanis__eylem {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; margin-top: 32px;
}

/* ======================================================= alt bilgi */

.site-alt { background: var(--zemin); border-top: 1px solid var(--kenarlik); }

.site-alt__ic {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px; padding-block: 56px 40px;
}

.site-alt__marka p {
  margin: 0; max-width: 42ch;
  font-size: 13.8px; line-height: 1.66; color: var(--metin-orta);
}

.site-alt__sutun { display: flex; flex-direction: column; gap: 11px; }

.site-alt__sutun h3 {
  margin: 0 0 3px; font-size: 12.2px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .085em; color: var(--metin-silik);
}

.site-alt__sutun a { font-size: 14px; color: var(--metin-orta); text-decoration: none; }
.site-alt__sutun a:hover { color: var(--metin); text-decoration: underline; }

.site-alt__cizgi {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px;
  padding-block: 20px; border-top: 1px solid var(--kenarlik);
  font-size: 12.8px; color: var(--metin-silik);
}

/* ====================================================== duyarlılık */

@media (max-width: 1080px) {
  .serit__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 20px; }
  .fark-izgara,
  .yetenek-izgara,
  .hizmet-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-serit__liste { gap: 12px 26px; }
  .logo-serit__liste span { font-size: 15.4px; }
}

@media (max-width: 900px) {
  .site { --site-arali: 66px; }

  .giris { padding-block: 48px 60px; }
  .giris__ic { grid-template-columns: minmax(0, 1fr); gap: 48px; }

  .anlatim__ic { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Tek sütuna inince görsel hep metnin altında kalsın. */
  .anlatim--ters .anlatim__soz,
  .anlatim--ters .anlatim__gorsel { order: 0; }

  .fiyat-kart { grid-template-columns: minmax(0, 1fr); }

  .site-alt__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
  .site-alt__marka { grid-column: 1 / -1; }
}

/* Telefonda menü çekmeceye iner. */
@media (max-width: 780px) {
  .site-ust__dugme { display: inline-flex; }

  .site-menu {
    position: fixed; inset: 0 0 auto; top: 61px;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 14px var(--site-bosluk) 20px;
    background: var(--kart);
    border-bottom: 1px solid var(--kenarlik);
    box-shadow: var(--golge-lg);
    /* Kapalıyken yukarı çekilir; yana kaydırmak yatay taşma yaratıyordu. */
    transform: translateY(-130%);
    transition: transform .24s ease, visibility .24s;
    visibility: hidden;
  }

  .site-menu.acik { transform: translateY(0); visibility: visible; }

  .site-menu > a {
    padding: 12px 4px; font-size: 15.4px;
    border-bottom: 1px solid var(--kenarlik);
  }

  .site-menu__ayirac { display: none; }

  .site-menu .site-dugme {
    margin-top: 10px; width: 100%; padding-block: 13px; font-size: 15px;
  }
}

@media (max-width: 620px) {
  .site { --site-bosluk: 18px; }

  .serit__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .fark-izgara,
  .yetenek-izgara,
  .hizmet-izgara { grid-template-columns: minmax(0, 1fr); }

  .giris__eylem .site-dugme,
  .kapanis__eylem .site-dugme,
  .fiyat-kart__eylem .site-dugme { width: 100%; }

  .fiyat-kart__sol, .fiyat-kart__liste { padding: 26px 22px; }

  .site-alt__ic { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .site-alt__marka { grid-column: auto; }

  /* Yüzen kartlar dar ekranda görselin dışına taşıyordu; içeri alınıp
     küçültülüyor, en alttaki tamamen kaldırılıyor. */
  .yuzen { padding: 9px 12px 9px 10px; border-radius: 11px; }
  .yuzen b { font-size: 11.6px; }
  .yuzen em { font-size: 10.6px; }
  .yuzen--siparis { top: 3%; left: 0; }
  .yuzen--ciro { bottom: 5%; left: 0; }
  .yuzen--fatura { top: 30%; right: 0; }
  .yuzen--kanal { bottom: 4%; left: 0; }
  .yuzen__grafik { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site *, .site *::before, .site *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ================================================ sahne düzeltmeleri

   Kaynak fotoğraf dar bir portre; kendi başına sağ sütunda küçük
   kalıyor. Arkasına yumuşak bir zemin konup ortalanıyor, yüzen
   kartlar da bu zeminin kenarlarına yaslanıyor — referans sitelerin
   kompozisyonu bu.
================================================================== */

.sahne {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 470px;
  padding-inline: 8%;
}

.sahne__zemin {
  position: absolute;
  inset: 6% 4% 0;
  border-radius: 26px;
  background:
    radial-gradient(70% 60% at 50% 30%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(155deg, rgba(109, 63, 212, .16) 0%, rgba(31, 111, 235, .13) 55%, rgba(255, 255, 255, .5) 100%);
}

/* Fotoğrafın alt kenarı zeminle birleşsin, kesik durmasın. */
.sahne > img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  max-height: 470px;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

.giris__gorsel { min-width: 0; }

/* ==================================================== kampanya şeridi

   Rakiplerin üçünde de sayfanın en üstünde duran, indirim/hediye
   duyurusu taşıyan şerit. Süper yönetici panelden yazıyor.
================================================================== */

.kampanya-serit {
  position: relative; z-index: 40;
  color: #fff;
  font-size: 13.6px;
}

.kampanya-serit__ic {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 16px;
  max-width: var(--site-en, 1180px); margin-inline: auto;
  padding: 10px var(--site-bosluk, 24px);
}

.kampanya-serit--mor { background: linear-gradient(90deg, #4c2ba6 0%, #6d3fd4 55%, #8257e6 100%); }
.kampanya-serit--koyu { background: var(--komur); }
.kampanya-serit--yesil { background: linear-gradient(90deg, #0b6b40 0%, #0f8a52 100%); }
.kampanya-serit--turuncu { background: linear-gradient(90deg, #a2560f 0%, #c9741a 100%); }

.kampanya-serit__metin { font-weight: 600; letter-spacing: -.008em; }

.kampanya-serit__dugme {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .32);
  color: #fff; text-decoration: none;
  font-size: 12.8px; font-weight: 650; white-space: nowrap;
  transition: background .16s ease;
}
.kampanya-serit__dugme:hover { background: rgba(255, 255, 255, .28); }

/* Geri sayım: rakam kutuları, birim küçük harf altta değil yanda —
   şerit tek satırda kalsın diye. */
.kampanya-sayac { display: inline-flex; align-items: center; gap: 5px; }

.kampanya-sayac b {
  display: inline-grid; place-items: center;
  min-width: 30px; padding: 3px 6px; border-radius: 7px;
  background: rgba(0, 0, 0, .26);
  font-size: 13.4px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.kampanya-sayac i {
  font-style: normal; font-size: 11px; opacity: .72;
  margin-right: 4px;
}

/* ======================================================== video kutusu */

.video-kutu {
  position: relative; display: block;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--kenarlik);
  background: var(--komur);
  box-shadow: var(--golge-lg);
  cursor: pointer;
}

.video-kutu img { display: block; width: 100%; height: auto; opacity: .82; }

.video-kutu__oynat {
  position: absolute; inset: 0; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; padding: 0;
}

.video-kutu__oynat span {
  display: grid; place-items: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--komur);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
  transition: transform .18s ease;
}
.video-kutu:hover .video-kutu__oynat span { transform: scale(1.08); }
.video-kutu__oynat .ico { width: 26px; height: 26px; margin-left: 3px; }

.video-kutu__etiket {
  position: absolute; left: 16px; bottom: 16px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
  font-size: 12.6px; font-weight: 600; color: #fff;
}

.video-kutu iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.video-bos {
  display: grid; place-items: center; gap: 10px;
  aspect-ratio: 16 / 9; padding: 24px; text-align: center;
  color: rgba(255, 255, 255, .58); font-size: 13.6px;
}
.video-bos .ico { width: 30px; height: 30px; }

/* ============================================== referans videoları

   Paket sayfasında, fiyat çizelgesinin altında. Kartlar tek sıra;
   dar ekranda alt alta iniyor. Görseli olmayan hikâyede kutu koyu
   zemin olarak kalıyor, oynat düğmesi yine ortada duruyor. */

.referans-video {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
}

.referans-video__kart { margin: 0; }

/* Görsel gelmediğinde kutu yüksekliksiz kalmasın. */
.referans-video .video-kutu { min-height: 158px; aspect-ratio: 16 / 9; }
.referans-video .video-kutu img { height: 100%; object-fit: cover; }

.referans-video figcaption {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 2px;
  font-size: 13.6px;
}

.referans-video figcaption strong { font-weight: 650; letter-spacing: -.01em; }
.referans-video figcaption span { color: var(--metin-silik); font-size: 12.6px; }

/* ================================================= özellik çizelgesi */

.ozellik-cizelge { display: grid; gap: 14px; }

.ozellik-grup {
  border: 1px solid var(--kenarlik); border-radius: 15px;
  background: var(--kart); overflow: hidden;
}

.ozellik-grup > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px; cursor: pointer; list-style: none;
  font-size: 15.6px; font-weight: 670; letter-spacing: -.012em;
}
.ozellik-grup > summary::-webkit-details-marker { display: none; }
.ozellik-grup > summary:hover { background: var(--kart-alt); }

.ozellik-grup__im {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--birincil-acik); color: var(--birincil-koyu);
}
.ozellik-grup__im .ico { width: 17px; height: 17px; }

.ozellik-grup__ok {
  margin-left: auto; width: 18px; height: 18px; flex: none;
  color: var(--metin-silik); transition: transform .2s ease;
}
.ozellik-grup[open] .ozellik-grup__ok { transform: rotate(180deg); }

.ozellik-grup__liste {
  margin: 0; padding: 4px 20px 20px; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 26px;
}

.ozellik-grup__liste li {
  display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 10px;
  align-items: start; font-size: 14.2px; line-height: 1.55; color: var(--metin-orta);
}
.ozellik-grup__liste .ico { width: 16px; height: 16px; margin-top: 3px; color: var(--basari); }

.ozellik-grup:nth-child(4n+2) .ozellik-grup__im { background: var(--mor-acik); color: var(--mor-ton); }
.ozellik-grup:nth-child(4n+3) .ozellik-grup__im { background: var(--basari-acik); color: var(--basari); }
.ozellik-grup:nth-child(4n+4) .ozellik-grup__im { background: var(--uyari-acik); color: var(--uyari); }

@media (max-width: 720px) {
  .ozellik-grup__liste { grid-template-columns: minmax(0, 1fr); }
  .kampanya-serit { font-size: 12.6px; }
  .kampanya-serit__ic { gap: 8px 12px; padding-block: 9px; }
  .kampanya-sayac b { min-width: 26px; font-size: 12.4px; }
}

/* ================================================ şerit iletişimi */

.kampanya-serit__telefon {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; text-decoration: none;
  font-size: 13.8px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kampanya-serit__telefon:hover { text-decoration: underline; }
.kampanya-serit__telefon .ico { width: 16px; height: 16px; }

.kampanya-serit__veya { font-size: 12.6px; opacity: .7; }

.kampanya-serit__dugme .ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }

.site-menu__telefon {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.4px; font-weight: 700; color: var(--metin);
  text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.site-menu__telefon .ico { width: 16px; height: 16px; color: var(--basari); }

/* =============================================== canlı rozet (kanıt) */

.rozet-canli {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px; border-radius: 999px;
  background: #fff; border: 1px solid var(--kenarlik);
  box-shadow: 0 3px 12px -6px rgba(20, 22, 26, .2);
  font-size: 13.2px; color: var(--metin-orta);
}
.rozet-canli b { font-weight: 750; color: var(--metin); font-variant-numeric: tabular-nums; }

.rozet-canli__nokta {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--basari);
  box-shadow: 0 0 0 0 rgba(15, 138, 82, .55);
  animation: kanit-atim 2.2s ease-out infinite;
}

@keyframes kanit-atim {
  0% { box-shadow: 0 0 0 0 rgba(15, 138, 82, .5); }
  70% { box-shadow: 0 0 0 9px rgba(15, 138, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 138, 82, 0); }
}

/* ================================================== sosyal kanıt şeridi */

.kanit-serit {
  padding-block: 52px;
  background: var(--kart);
  border-bottom: 1px solid var(--kenarlik);
  text-align: center;
}

.kanit-serit h2 {
  margin: 0 0 26px;
  font-size: clamp(21px, 2.3vw, 27px);
  font-weight: 720; letter-spacing: -.022em;
}

.kanit-serit__liste {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px; margin: 0;
}

.kanit-serit__liste dt {
  font-size: clamp(30px, 4vw, 46px); font-weight: 790;
  letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--mor-ton) 0%, var(--birincil) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kanit-serit__liste dd { margin: 9px 0 0; font-size: 14px; color: var(--metin-orta); }

.kanit-serit__not {
  margin: 22px auto 0; max-width: 58ch;
  font-size: 13px; color: var(--metin-silik);
}

/* ================================================== sayfa girişi (alt sayfalar) */

.sayfa-giris {
  padding-block: 60px 44px; text-align: center;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(109, 63, 212, .1) 0%, rgba(109, 63, 212, 0) 62%),
    linear-gradient(180deg, #f8f8fc 0%, var(--kart) 100%);
}

.sayfa-giris__ic {
  width: 100%; max-width: 760px; margin-inline: auto;
  padding-inline: var(--site-bosluk);
}

.sayfa-giris h1 {
  margin: 18px 0 0;
  font-size: clamp(29px, 3.6vw, 44px);
  line-height: 1.12; letter-spacing: -.03em; font-weight: 780;
  text-wrap: balance;
}

.sayfa-giris p {
  margin: 15px auto 0; max-width: 58ch;
  font-size: 16.2px; line-height: 1.62; color: var(--metin-orta);
}

.bolum--ust-sifir { padding-top: 0; }

/* ==================================================== dahil değil */

.dahil-degil {
  margin-top: 22px; padding: 22px 24px;
  border: 1px dashed var(--kenarlik-koyu); border-radius: 15px;
  background: var(--kart-alt);
}

.dahil-degil h3 {
  display: flex; align-items: center; gap: 9px; margin: 0 0 12px;
  font-size: 14.6px; font-weight: 680;
}
.dahil-degil h3 .ico { width: 18px; height: 18px; color: var(--uyari); }

.dahil-degil ul {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px;
}

.dahil-degil li {
  position: relative; padding-left: 16px;
  font-size: 13.8px; line-height: 1.55; color: var(--metin-orta);
}
.dahil-degil li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1.5px; background: var(--metin-silik);
}

/* ================================================ entegrasyon ızgarası */

.entegrasyon-izgara {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}

.entegrasyon {
  padding: 20px 22px; border-radius: 14px;
  border: 1px solid var(--kenarlik); background: var(--kart);
}

.entegrasyon h3 {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 14.8px; font-weight: 670;
}
.entegrasyon h3 .ico { width: 18px; height: 18px; color: var(--birincil); flex: none; }
.entegrasyon h3 b {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: var(--birincil-acik); color: var(--birincil-koyu);
  font-size: 12.6px; font-variant-numeric: tabular-nums;
}

.entegrasyon p { margin: 9px 0 0; font-size: 13.6px; color: var(--metin-orta); }

@media (max-width: 900px) {
  .entegrasyon-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .kanit-serit__liste { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .dahil-degil ul { grid-template-columns: minmax(0, 1fr); }
  .entegrasyon-izgara { grid-template-columns: minmax(0, 1fr); }
  .kampanya-serit__veya { display: none; }
}

/* Telefon üst menüde yer kaplamasın; çekmecede tam satır olsun. */
@media (max-width: 980px) {
  .site-menu__telefon { display: none; }
}
@media (max-width: 780px) {
  .site-menu__telefon {
    display: inline-flex; padding: 12px 4px;
    border-bottom: 1px solid var(--kenarlik);
  }
}

/* ==================================================== iletişim sayfası */

.iletisim-duzen {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px; align-items: start;
}

.iletisim-form {
  padding: 30px; border-radius: 18px;
  background: var(--kart); border: 1px solid var(--kenarlik);
  box-shadow: var(--golge);
}

.alan-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.site-alan { margin-bottom: 16px; }

.site-alan__etiket {
  display: block; margin-bottom: 7px;
  font-size: 13.2px; font-weight: 620; color: var(--metin);
}
.site-alan__etiket b { color: var(--tehlike); font-weight: 700; }

.site-alan input,
.site-alan select,
.site-alan textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--kenarlik-koyu); background: var(--kart);
  font: inherit; font-size: 14.4px; color: var(--metin);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.site-alan input:focus,
.site-alan select:focus,
.site-alan textarea:focus {
  outline: none; border-color: var(--birincil);
  box-shadow: 0 0 0 3px var(--birincil-acik);
}

.site-alan textarea { resize: vertical; min-height: 96px; }

.site-dugme--tam { width: 100%; }

.iletisim-form__not {
  margin: 14px 0 0; text-align: center;
  font-size: 12.4px; color: var(--metin-silik);
}

.iletisim-yan { display: grid; gap: 14px; }

.iletisim-kart {
  display: grid; grid-template-columns: 40px minmax(0, 1fr);
  align-items: center; gap: 2px 14px;
  padding: 16px 18px; border-radius: 15px;
  background: var(--kart); border: 1px solid var(--kenarlik);
  text-decoration: none; color: var(--metin);
  transition: border-color .16s ease, transform .16s ease;
}
.iletisim-kart:hover { border-color: var(--kenarlik-koyu); transform: translateY(-2px); }

.iletisim-kart__im {
  grid-row: span 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--basari-acik); color: var(--basari);
}
.iletisim-kart__im .ico { width: 19px; height: 19px; }

.iletisim-kart b { font-size: 13px; font-weight: 640; align-self: end; }
.iletisim-kart em {
  font-style: normal; font-size: 15.4px; font-weight: 700;
  align-self: start; font-variant-numeric: tabular-nums;
}

.iletisim-bilgi {
  padding: 22px; border-radius: 15px;
  background: var(--zemin); border: 1px solid var(--kenarlik);
}

.iletisim-bilgi h3 { margin: 0 0 4px; font-size: 15px; font-weight: 680; }
.iletisim-bilgi .madde-liste { margin-bottom: 0; }
.iletisim-bilgi .madde-liste li { font-size: 13.8px; }

.iletisim-bilgi__not {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--kenarlik);
  font-size: 12.8px; line-height: 1.6; color: var(--metin-silik);
}

@media (max-width: 900px) {
  .iletisim-duzen { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .alan-ikili { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .iletisim-form { padding: 22px 18px; }
}

/* ================================================ özellik panosu (görsel yerine) */

.ozellik-pano {
  display: grid; place-items: center; gap: 10px;
  aspect-ratio: 4 / 3; padding: 30px; border-radius: 18px;
  background:
    radial-gradient(70% 60% at 50% 25%, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(150deg, rgba(109, 63, 212, .16) 0%, rgba(31, 111, 235, .13) 100%);
  border: 1px solid var(--kenarlik);
  text-align: center;
}

.ozellik-pano__im {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 20px;
  background: #fff; color: var(--mor-ton);
  box-shadow: 0 14px 30px -14px rgba(23, 25, 29, .35);
}
.ozellik-pano__im .ico { width: 30px; height: 30px; }

.ozellik-pano b { font-size: 17px; font-weight: 700; letter-spacing: -.018em; }

.ozellik-pano__sayi {
  padding: 4px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  font-size: 12.4px; font-weight: 620; color: var(--metin-orta);
}

/* ==================================================== hizmet listesi */

.hizmet-liste { display: grid; gap: 18px; }

.hizmet-kart {
  display: grid; gap: 14px; align-content: start;
  padding: 26px 28px; border-radius: 17px;
  background: var(--kart); border: 1px solid var(--kenarlik);
  box-shadow: var(--golge-sm);
}

.hizmet-kart__ust {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px 20px;
}

.hizmet-kart__ust h2 {
  margin: 0; font-size: 20px; font-weight: 710; letter-spacing: -.02em;
}

.hizmet-kart__fiyat { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.hizmet-kart__fiyat b {
  font-size: 19px; font-weight: 760; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums;
}
.hizmet-kart__fiyat i { font-style: normal; font-size: 12.6px; color: var(--metin-silik); }

.hizmet-kart__metin { font-size: 14.8px; line-height: 1.68; color: var(--metin-orta); }
.hizmet-kart__metin p { margin: 0 0 10px; }
.hizmet-kart__metin p:last-child { margin-bottom: 0; }
.hizmet-kart__metin ul { margin: 0 0 10px; padding-left: 20px; }
.hizmet-kart__metin li { margin-bottom: 5px; }

.hizmet-kart .site-dugme { justify-self: start; }

/* ======================================================= adım listesi */

.adim-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }

.adim-liste li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px;
  align-items: start;
  padding: 20px 22px; border-radius: 15px;
  background: var(--kart); border: 1px solid var(--kenarlik);
}

.adim-liste b {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--komur); color: #fff;
  font-size: 17px; font-weight: 750;
}

.adim-liste h3 { margin: 0; font-size: 16px; font-weight: 680; }
.adim-liste p { margin: 7px 0 0; font-size: 14.2px; line-height: 1.6; color: var(--metin-orta); }

@media (max-width: 620px) {
  .hizmet-kart { padding: 22px 20px; }
  .adim-liste li { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding: 18px; }
  .adim-liste b { width: 36px; height: 36px; font-size: 15px; }
}

/* ============================================ KAHRAMAN — yeniden

   Fotoğraf artık bir sütuna sıkışmış küçük görsel değil; bölümün
   sağ yarısını kaplayıp kenardan taşıyor. Metin koyu perdenin
   üstünde duruyor, yüzen kartlar fotoğrafın üstüne biniyor.
   (Önceki hali portreyi kutu gibi gösteriyordu.)
================================================================== */

.giris {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 82px 88px;
  background: var(--komur);
  background-image:
    radial-gradient(85% 90% at 8% 15%, rgba(109, 63, 212, .34) 0%, rgba(109, 63, 212, 0) 60%),
    radial-gradient(70% 80% at 55% 100%, rgba(31, 111, 235, .22) 0%, rgba(31, 111, 235, 0) 58%);
  color: #fff;
}

.giris__foto {
  position: absolute; inset: 0 0 0 42%;
  z-index: -1;
}

.giris__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 42% 45%;
  display: block;
}

/* Fotoğrafın solu koyuya karışsın; metin her zaman okunur kalsın. */
.giris__foto::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--komur) 0%, rgba(23, 25, 29, .92) 24%, rgba(23, 25, 29, .35) 62%, rgba(23, 25, 29, .18) 100%),
    linear-gradient(0deg, rgba(23, 25, 29, .55) 0%, rgba(23, 25, 29, 0) 45%);
}

.giris__ic {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 40px; align-items: center;
}

.giris__soz { max-width: 40rem; }

.giris h1 {
  margin: 22px 0 0;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.07; letter-spacing: -.032em; font-weight: 790;
  text-wrap: balance;
  color: #fff;
}

.giris h1 em {
  font-style: normal;
  background: linear-gradient(120deg, #a78bfa 0%, #7cc4ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0;
}

.giris__alt {
  margin: 20px 0 0; max-width: 50ch;
  font-size: 16.6px; line-height: 1.62;
  color: rgba(255, 255, 255, .76);
}

/* Koyu zeminde çipler cam gibi */
.giris .cip {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .84);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.giris .cip b { color: #fff; }
.giris .cip .ico { color: #a78bfa; }

.giris .rozet-canli {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .84);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.giris .rozet-canli b { color: #fff; }

.giris__guvence li { color: rgba(255, 255, 255, .62); }
.giris__guvence .ico { color: #5fd39a; }

/* --------------------------------------------------- yüzen kartlar */

.giris__kartlar {
  position: relative;
  display: grid;
  gap: 14px;
  justify-items: end;
  min-height: 320px;
}

.giris__kartlar .yuzen { position: static; }

/* Kartlar düz bir sütun gibi durmasın; her biri farklı kaydırılıyor. */
.yuzen--1 { transform: translateX(-58px); }
.yuzen--2 { transform: translateX(6px); }
.yuzen--3 { transform: translateX(-84px); }
.yuzen--4 { transform: translateX(-18px); }

@media (max-width: 1080px) {
  .giris__foto { inset: 0 0 0 34%; }
  .yuzen--1, .yuzen--2, .yuzen--3, .yuzen--4 { transform: none; }
}

@media (max-width: 900px) {
  .giris { padding-block: 56px 60px; }
  .giris__ic { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .giris__soz { max-width: none; }

  /* Fotoğraf tüm bölümün zeminine geçiyor; kartlar altına diziliyor. */
  .giris__foto { inset: 0; }
  .giris__foto::after {
    background:
      linear-gradient(180deg, rgba(23, 25, 29, .93) 0%, rgba(23, 25, 29, .82) 52%, rgba(23, 25, 29, .95) 100%);
  }

  .giris__kartlar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch; min-height: 0;
  }
}

@media (max-width: 620px) {
  .giris__kartlar { grid-template-columns: minmax(0, 1fr); }
  .giris__kartlar .yuzen--3, .giris__kartlar .yuzen--4 { display: none; }
}

/* Kahraman koyu olduğu için .yuzen içindeki metin de beyaza dönüyordu;
   kart zemini beyaz olduğundan yazı görünmez oluyordu. */
.giris .yuzen { color: var(--metin); }
.giris .yuzen b { color: var(--metin); }
.giris .yuzen em { color: var(--metin-silik); }

/* Fotoğraf %42'den başlayınca solunda sert bir dikey çizgi kalıyordu;
   tam genişliğe yayılıp geçişi degrade yapıyor. */
.giris__foto { inset: 0; }

.giris__foto img { object-position: 68% 45%; }

.giris__foto::after {
  background:
    linear-gradient(90deg,
      var(--komur) 0%,
      rgba(23, 25, 29, .97) 30%,
      rgba(23, 25, 29, .78) 46%,
      rgba(23, 25, 29, .34) 66%,
      rgba(23, 25, 29, .16) 100%),
    linear-gradient(0deg, rgba(23, 25, 29, .5) 0%, rgba(23, 25, 29, 0) 42%);
}

/* Tam genişlikte "cover" kare fotoğrafı aşırı yakınlaştırıp konuyu
   (telefon) kaybediyordu. Fotoğraf sağ yarıda duruyor, sol kenarı
   maskeyle eriyor — sert dikiş de böylece oluşmuyor. */
.giris__foto {
  inset: 0 0 0 36%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}

.giris__foto img { object-position: 46% 42%; }

.giris__foto::after {
  background:
    linear-gradient(90deg, rgba(23, 25, 29, .9) 0%, rgba(23, 25, 29, .5) 34%, rgba(23, 25, 29, .12) 70%, rgba(23, 25, 29, .05) 100%),
    linear-gradient(0deg, rgba(23, 25, 29, .45) 0%, rgba(23, 25, 29, 0) 40%);
}

@media (max-width: 900px) {
  .giris__foto {
    inset: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .giris__foto::after {
    background: linear-gradient(180deg, rgba(23, 25, 29, .93) 0%, rgba(23, 25, 29, .84) 52%, rgba(23, 25, 29, .95) 100%);
  }
}

/* Kare fotoğrafı geniş-alçak bir kutuya "cover" ile oturtmak aşırı
   yakınlaştırıp konuyu kaybettiriyordu. Kutu daraltılıp en-boy oranı
   fotoğrafınkine yaklaştırılıyor. */
.giris__foto {
  inset: 0 0 0 55%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 34%, #000 100%);
}

.giris__foto img { object-position: 50% 40%; }

@media (max-width: 1180px) { .giris__foto { inset: 0 0 0 48%; } }
@media (max-width: 900px)  { .giris__foto { inset: 0; -webkit-mask-image: none; mask-image: none; } }

/* ========================================== yetenek kartı görselleri

   Örnek sitelerde her özellik kartının içinde bir görsel var; yalnız
   ikon taşıyan kartlar yanlarında boş duruyordu.
================================================================== */

.yetenek { padding: 0; overflow: hidden; display: flex; flex-direction: column; }

.yetenek__gorsel {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--kart-alt);
}

.yetenek__gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.yetenek:hover .yetenek__gorsel img { transform: scale(1.05); }

/* Görselin köşesindeki ikon rozeti kaldırıldı. Başlığın üstündeki
   30px boşluk yalnız o rozete yer açmak içindi; rozet gidince
   başlık görselden kopuk duruyordu. */
.yetenek h3 { margin: 18px 20px 0; }
.yetenek p { margin: 8px 20px 22px; }

/* Anlatım görselleri de kırpılsın; farklı en-boy oranlı dosyalar
   yan yana geldiğinde bölüm dağılıyordu. */
.anlatim__gorsel > img {
  aspect-ratio: 4 / 3; object-fit: cover;
}
.anlatim__gorsel--telefon > img { aspect-ratio: 4 / 3; }

/* Panel ekran görüntüleri: fotoğraf değil arayüz oldukları için
   çerçeve ve gölge veriliyor, yoksa beyaz zeminde sayfaya karışıp
   nerede bittikleri anlaşılmıyor. */
.anlatim__gorsel > img.anlatim__ekran {
  object-fit: cover; object-position: top left;
  border: 1px solid var(--kenarlik);
  background: #fff;
  box-shadow: 0 26px 54px -30px rgba(23, 25, 29, .45);
}

/* Fotoğrafı olmayan kartlar: degrade panel + büyük ikon.
   Kartların yarısı fotoğraf, yarısı panel — bilinçli ritim. */
.yetenek__gorsel--panel {
  display: grid; place-items: center;
  background:
    radial-gradient(65% 60% at 50% 35%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(145deg, rgba(109, 63, 212, .2) 0%, rgba(31, 111, 235, .16) 100%);
}

.yetenek__buyuk-im {
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 18px;
  background: rgba(255, 255, 255, .86);
  color: var(--mor-ton); font-style: normal;
  box-shadow: 0 10px 26px -12px rgba(23, 25, 29, .38);
}
.yetenek__buyuk-im .ico { width: 27px; height: 27px; }

.yetenek:nth-child(4n+2) .yetenek__gorsel--panel {
  background:
    radial-gradient(65% 60% at 50% 35%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(145deg, rgba(15, 138, 82, .2) 0%, rgba(31, 111, 235, .14) 100%);
}
.yetenek:nth-child(4n+3) .yetenek__gorsel--panel {
  background:
    radial-gradient(65% 60% at 50% 35%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(145deg, rgba(183, 121, 31, .22) 0%, rgba(195, 55, 43, .12) 100%);
}
.yetenek:nth-child(4n+4) .yetenek__gorsel--panel {
  background:
    radial-gradient(65% 60% at 50% 35%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(145deg, rgba(14, 116, 144, .2) 0%, rgba(109, 63, 212, .14) 100%);
}

/* Panelde büyük ikon zaten var; köşedeki küçük kopyası tekrar oluyor. */
.yetenek__gorsel--panel .yetenek__im { display: none; }
.yetenek__gorsel--panel + h3 { margin-top: 18px; }

/* ============================================== kahraman formu

   Örnek sitelerin üçünde de kahramanın içinde bir form var; ücretsiz
   denememiz olmadığı için dönüşümün ana yolu bu.
================================================================== */

.giris__form {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 28px; padding: 8px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  max-width: 34rem;
}

.giris__form input {
  flex: 1 1 150px; min-width: 0;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid transparent; background: rgba(255, 255, 255, .94);
  font: inherit; font-size: 14.4px; color: var(--metin);
}

.giris__form input::placeholder { color: var(--metin-silik); }

.giris__form input:focus {
  outline: none; border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .35);
}

.giris__form .site-dugme { flex: 0 0 auto; padding-inline: 20px; }

.giris__eylem { margin-top: 16px; align-items: center; }

.giris__telefon {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 750; color: #fff;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.giris__telefon:hover { text-decoration: underline; }
.giris__telefon .ico { width: 18px; height: 18px; color: #5fd39a; }

@media (max-width: 620px) {
  .giris__form { max-width: none; }
  .giris__form input { flex: 1 1 100%; }
  .giris__form .site-dugme { width: 100%; }
}

/* ======================================== KAHRAMAN — panel vitrini

   Ortalanmış söz, altında ürünün GERÇEK ekran görüntüsü.
   Önceki sürümlerde panel CSS ile çizilmişti; sahte durduğu için
   sayfanın tamamı yapay görünüyordu.
================================================================== */

.giris {
  position: relative;
  overflow: hidden;
  padding-block: 62px 0;
  text-align: center;
  background: var(--komur);
  background-image:
    radial-gradient(75% 65% at 50% 0%, rgba(109, 63, 212, .38) 0%, rgba(109, 63, 212, 0) 62%),
    radial-gradient(60% 50% at 15% 25%, rgba(31, 111, 235, .22) 0%, rgba(31, 111, 235, 0) 60%);
  color: #fff;
}

.giris__ic { display: block; }

.giris .rozet-canli {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .84);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.giris .rozet-canli b { color: #fff; }

.giris h1 {
  margin: 22px auto 0; max-width: 20ch;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.06; letter-spacing: -.033em; font-weight: 800;
  text-wrap: balance; color: #fff;
}

.giris h1 em {
  font-style: normal;
  background: linear-gradient(115deg, #a78bfa 0%, #7cc4ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.giris__alt {
  margin: 20px auto 0; max-width: 60ch;
  font-size: 17px; line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}

.giris__eylem {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 12px 20px; margin-top: 30px;
}

.giris__guvence {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 24px; margin: 22px 0 0; padding: 0; list-style: none;
}
.giris__guvence li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.6px; color: rgba(255, 255, 255, .6);
}
.giris__guvence .ico { width: 15px; height: 15px; color: #5fd39a; }

/* ------------------------------------------------ panel görüntüsü */

.panel-vitrin {
  position: relative;
  margin: 52px auto 0;
  max-width: 1040px;
  /* Alt kenar bir sonraki bölüme girsin; sayfa kesilmiş gibi durmasın. */
  margin-bottom: -70px;
}

.panel-vitrin__cerceve {
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: var(--kart-alt);
  border: 1px solid rgba(255, 255, 255, .14);
  border-bottom: none;
  box-shadow: 0 -2px 0 rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0, 0, 0, .85);
}

.panel-vitrin__ust {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px;
  background: #e9ecf0;
  border-bottom: 1px solid #dfe3e9;
}

.panel-vitrin__ust span {
  width: 10px; height: 10px; border-radius: 50%;
  background: #c6ccd4; flex: none;
}

.panel-vitrin__ust em {
  margin-left: 10px; font-style: normal;
  font-size: 11.6px; color: #8c95a1;
}

.panel-vitrin__cerceve img {
  display: block; width: 100%; height: auto;
}

/* Yüzen bildirimler görüntünün kenarına biner. */
.panel-vitrin .yuzen {
  position: absolute; z-index: 3;
  color: var(--metin);
  text-align: left;
}
.panel-vitrin .yuzen b { color: var(--metin); }
.panel-vitrin .yuzen em { color: var(--metin-silik); }

.yuzen--sol { top: 21%; left: -46px; }
.yuzen--sag { top: 47%; right: -52px; }

@media (max-width: 1180px) {
  .yuzen--sol { left: -18px; }
  .yuzen--sag { right: -20px; }
}

@media (max-width: 900px) {
  .giris { padding-block: 46px 0; }
  .panel-vitrin { margin-top: 40px; margin-bottom: -40px; }
  .yuzen--sol { top: 12%; left: 8px; }
  .yuzen--sag { top: 62%; right: 8px; }
}

@media (max-width: 620px) {
  .giris__eylem .site-dugme { width: 100%; }
  .giris__telefon { margin-inline: auto; }
  .panel-vitrin { margin-bottom: -24px; }
  /* Dar ekranda kartlar görüntüyü kapatıyor. */
  .panel-vitrin .yuzen { display: none; }
  .panel-vitrin__ust { padding: 9px 12px; }
}

/* Görüntünün alt kenarı sert kesiliyordu; aşağı doğru eriyor ki
   "devamı var" hissi versin, kırpılmış gibi durmasın. */
.panel-vitrin__cerceve {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}

/* ==================================== KAHRAMAN — yan yana düzen

   Ortalanmış hâli bölümü boş bırakıyordu: metin ortada dar bir
   sütun, iki yanı boş koyu alan, görsel çok aşağıda. Örnek
   sitelerin üçünde de görsel metnin yanında ve bölüm dolu.
================================================================== */

.giris {
  position: relative; overflow: hidden;
  padding-block: 56px 60px;
  text-align: left;
  background: var(--komur);
  background-image:
    radial-gradient(70% 80% at 4% 10%, rgba(109, 63, 212, .36) 0%, rgba(109, 63, 212, 0) 58%),
    radial-gradient(60% 70% at 70% 95%, rgba(31, 111, 235, .24) 0%, rgba(31, 111, 235, 0) 60%);
  color: #fff;
}

.giris__ic {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 40px; align-items: center;
  /* Görsel sağ kenardan taşsın: sağ boşluk kaldırılıyor. */
  padding-right: 0;
  max-width: calc(var(--site-en) + 120px);
}

.giris__soz { padding-left: 0; }

.giris h1 {
  margin: 20px 0 0; max-width: 16ch;
  font-size: clamp(33px, 3.9vw, 52px);
  line-height: 1.06; letter-spacing: -.033em; font-weight: 800;
  text-wrap: balance; color: #fff;
}

.giris__alt {
  margin: 18px 0 0; max-width: 46ch;
  font-size: 16.2px; line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}

.giris__cipler { justify-content: flex-start; margin-top: 22px; }

.giris__eylem {
  justify-content: flex-start; align-items: center;
  gap: 14px 22px; margin-top: 26px;
}

.giris__guvence { justify-content: flex-start; margin-top: 20px; gap: 8px 20px; }

/* ----------------------------------------------- görsel sütunu */

.giris__vitrin { position: relative; }

.panel-vitrin {
  position: relative;
  margin: 0;
  max-width: none;
  /* Sağ kenardan taşar; kesilmiş değil "devamı var" görünür. */
  margin-right: -22%;
}

.panel-vitrin__cerceve {
  border-radius: 13px; overflow: hidden;
  background: var(--kart-alt);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .9);
  /* Ortalanmış düzendeki alt eritme burada gereksiz. */
  -webkit-mask-image: none; mask-image: none;
}

.panel-vitrin__cerceve img { display: block; width: 100%; height: auto; }

.panel-vitrin .yuzen { position: absolute; z-index: 3; color: var(--metin); text-align: left; }
.panel-vitrin .yuzen b { color: var(--metin); }
.panel-vitrin .yuzen em { color: var(--metin-silik); }

.yuzen--sol { top: 16%; left: -54px; right: auto; }
.yuzen--alt { bottom: -18px; left: 16%; top: auto; right: auto; }

@media (max-width: 1080px) {
  .giris__ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .panel-vitrin { margin-right: -30%; }
  .yuzen--sol { left: -22px; }
}

@media (max-width: 880px) {
  .giris { padding-block: 44px 52px; }
  .giris__ic { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: var(--site-en); }
  .giris h1 { max-width: none; }
  .giris__alt { max-width: none; }
  .panel-vitrin { margin-right: -14%; }
  .yuzen--sol { top: 10%; left: -10px; }
  .yuzen--alt { bottom: -14px; left: 6%; }
}

@media (max-width: 620px) {
  .giris__eylem .site-dugme { width: 100%; }
  .giris__telefon { margin-inline: auto; }
  .panel-vitrin { margin-right: -18%; }
  .panel-vitrin .yuzen { display: none; }
}

/* Görsel kabın sağ kenarında duruyordu; ekranın dışına taşsın ki
   "devamı var" hissi versin — üç örnekte de böyle. */
.giris__vitrin { position: relative; }

.panel-vitrin {
  margin-right: 0;
  width: calc(100% + 17vw);
}

/* Kart panelin kenar çubuğunu kapatıyordu; daha dışarı alındı. */
.yuzen--sol { top: 14%; left: -68px; }
.yuzen--alt { bottom: -20px; left: 8%; }

@media (max-width: 1080px) {
  .panel-vitrin { width: calc(100% + 22vw); }
  .yuzen--sol { left: -34px; }
}

@media (max-width: 880px) {
  .panel-vitrin { width: calc(100% + 12vw); }
  .yuzen--sol { top: 8%; left: -12px; }
  .yuzen--alt { bottom: -16px; left: 5%; }
}

@media (max-width: 620px) {
  .panel-vitrin { width: calc(100% + 16vw); }
}

/* Ekran görüntüleri çerçevesiz kaldığında sayfaya yapıştırılmış
   gibi duruyor; ince kenarlık ve gölge onları "ekran" yapıyor. */
.anlatim__gorsel > img {
  border: 1px solid var(--kenarlik);
  box-shadow: 0 26px 56px -28px rgba(20, 22, 26, .45);
  background: var(--kart);
}

/* ==================================================================
   DEGRADE TEMİZLİĞİ + AÇIK KAHRAMAN

   Degrade yazı, mor parıltı zeminler ve degrade şeritler sayfaya
   "yapay üretilmiş" havası veriyordu. Örnek sitelerin hiçbirinde
   yok: İkas beyaz zemin + siyah yazı + düz mavi düğme, IdeaSoft
   düz lacivert yazı, Ticimax fotoğraf + düz lacivert.

   Buradan sonrası hepsini düz renge çeviriyor.
================================================================== */

/* ------------------------------------------------ kahraman: açık */

.giris {
  background: #f6f7f9;
  background-image: none;
  color: var(--metin);
  border-bottom: 1px solid var(--kenarlik);
  padding-block: 58px 62px;
}

.giris h1 { color: var(--metin); }

/* Degrade yazı yerine düz vurgu rengi. */
.giris h1 em {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--birincil);
}

.giris__alt { color: var(--metin-orta); }

.giris .rozet-canli {
  background: #fff;
  border-color: var(--kenarlik);
  color: var(--metin-orta);
  box-shadow: 0 1px 3px rgba(20, 22, 26, .06);
  backdrop-filter: none;
}
.giris .rozet-canli b { color: var(--metin); }

.giris .cip {
  background: #fff;
  border-color: var(--kenarlik);
  color: var(--metin-orta);
  box-shadow: 0 1px 3px rgba(20, 22, 26, .06);
  backdrop-filter: none;
}
.giris .cip b { color: var(--metin); }
.giris .cip .ico { color: var(--metin-orta); }

.giris__guvence li { color: var(--metin-silik); }
.giris__guvence .ico { color: var(--basari); }

.giris__telefon { color: var(--metin); }
.giris__telefon .ico { color: var(--basari); }

/* Açık zeminde birincil düğme koyu olmalı. */
.giris .site-dugme--ters {
  background: var(--komur); color: #fff;
  box-shadow: 0 8px 20px -10px rgba(23, 25, 29, .55);
}
.giris .site-dugme--ters:hover { background: var(--komur-2); }

.giris .site-dugme--hayalet-ters {
  border-color: var(--kenarlik-koyu); color: var(--metin); background: #fff;
}
.giris .site-dugme--hayalet-ters:hover { border-color: var(--metin-silik); }

/* --------------------------------------------- kampanya şeridi düz */

.kampanya-serit--mor { background: #5b34c7; }
.kampanya-serit--koyu { background: var(--komur); }
.kampanya-serit--yesil { background: #0f8a52; }
.kampanya-serit--turuncu { background: #c9741a; }

/* ------------------------------------------------ koyu bölüm düz */

.bolum--koyu { background-image: none; }
.kapanis { background-image: none; }

/* ------------------------------------- sosyal kanıt rakamları düz */

.kanit-serit__liste dt {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--metin);
}

/* --------------------------------------------- sayfa girişi düz */

.sayfa-giris {
  background: #f6f7f9;
  background-image: none;
  border-bottom: 1px solid var(--kenarlik);
}

/* ------------------------------------ panel/kart zeminleri düz ton */

.ozellik-pano {
  background: var(--birincil-acik);
  background-image: none;
}
.ozellik-pano__im { color: var(--birincil-koyu); box-shadow: none; border: 1px solid var(--kenarlik); }
.ozellik-pano__sayi { background: #fff; }

.yetenek__gorsel--panel {
  background: var(--birincil-acik);
  background-image: none;
}
.yetenek:nth-child(4n+2) .yetenek__gorsel--panel { background: var(--mor-acik); }
.yetenek:nth-child(4n+3) .yetenek__gorsel--panel { background: var(--basari-acik); }
.yetenek:nth-child(4n+4) .yetenek__gorsel--panel { background: var(--uyari-acik); }

.yetenek__buyuk-im { box-shadow: none; border: 1px solid var(--kenarlik); background: #fff; }

/* Kahramandaki maskeler de kalksın; kenar yumuşatma degrade sayılıyor
   ama burada işlevsel: görüntünün ekran dışına taşan kenarı. Yine de
   yazıya uygulanan degradelerin hiçbiri kalmadı. */

/* ==================================================================
   KAHRAMAN — İkas düzeni

   Beyaz zemin, ortalanmış büyük başlık, altında form, kenarlarda
   dört fotoğraf kartı. Degrade yok, parıltı yok; düz renkler.
================================================================== */

.giris {
  position: relative; overflow: hidden;
  background: #fff;
  background-image: none;
  border-bottom: 1px solid var(--kenarlik);
  padding-block: 56px 64px;
  text-align: center;
  color: var(--metin);
}

.giris__ic {
  position: relative; z-index: 2;
  display: block;
  max-width: 720px;
  margin-inline: auto;
}

.giris .rozet-canli {
  background: #fff; border-color: var(--kenarlik);
  color: var(--metin-orta); box-shadow: 0 1px 3px rgba(20,22,26,.06);
  backdrop-filter: none;
}
.giris .rozet-canli b { color: var(--metin); }

.giris h1 {
  margin: 20px auto 0; max-width: none;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.08; letter-spacing: -.032em; font-weight: 800;
  color: var(--metin);
}
.giris h1 em { background: none; -webkit-text-fill-color: currentColor; color: var(--birincil); }

.giris__alt {
  margin: 16px auto 0; max-width: 52ch;
  font-size: 16px; line-height: 1.6; color: var(--metin-orta);
}

.giris__cipler {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin-top: 22px;
}

.giris .cip {
  background: #fff; border: 1px solid var(--kenarlik);
  color: var(--metin-orta); box-shadow: none; backdrop-filter: none;
  padding: 8px 14px; font-size: 13px; border-radius: 999px;
}
.giris .cip .ico { width: 15px; height: 15px; color: var(--metin-silik); }

/* Form: tek çerçeve içinde iki alan + düz renk düğme. */
.giris__form {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 26px auto 0; padding: 0;
  max-width: 560px; background: none; border: 0; backdrop-filter: none;
}

.giris__form input {
  flex: 1 1 160px; min-width: 0;
  padding: 14px 16px; border-radius: 11px;
  border: 1px solid var(--kenarlik-koyu); background: #fff;
  font: inherit; font-size: 14.6px; color: var(--metin);
}
.giris__form input::placeholder { color: var(--metin-silik); }
.giris__form input:focus {
  outline: none; border-color: var(--birincil);
  box-shadow: 0 0 0 3px var(--birincil-acik);
}

/* İkas'taki gibi düz mavi çağrı düğmesi. */
.site-dugme--vurgu {
  flex: 0 0 auto;
  background: var(--birincil); color: #fff;
  padding: 14px 24px; font-size: 15px; border-radius: 11px;
}
.site-dugme--vurgu:hover { background: var(--birincil-koyu); }

.giris__ipucu {
  margin: 14px auto 0; font-size: 13.4px; color: var(--metin-silik);
}
.giris__ipucu a { color: var(--birincil); font-weight: 600; text-decoration: none; }
.giris__ipucu a:hover { text-decoration: underline; }

/* ---------------------------------------------- kenar fotoğrafları */

.giris__kareler {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
}

.kare {
  position: absolute;
  width: 248px; height: 184px;
  border-radius: 16px; overflow: hidden;
  background: var(--kart-alt);
  box-shadow: 0 18px 40px -22px rgba(20, 22, 26, .35);
}

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

.kare--sol-ust  { left: 2.5%;  top: 70px; }
.kare--sol-alt  { left: 2.5%;  top: 324px; }
.kare--sag-ust  { right: 2.5%; top: 70px; }
.kare--sag-alt  { right: 2.5%; top: 324px; }

/* Dar ekranda kartlar metnin altına girmesin. */
@media (max-width: 1240px) {
  .kare { width: 196px; height: 146px; }
  .kare--sol-ust, .kare--sag-ust { top: 80px; }
  .kare--sol-alt, .kare--sag-alt { top: 288px; }
}

@media (max-width: 1040px) {
  .kare--sol-alt, .kare--sag-alt { display: none; }
  .kare { width: 150px; height: 112px; }
  .kare--sol-ust, .kare--sag-ust { top: 140px; }
}

/* ---------------------------------------------------- dar ekran

   Kartlar mobilde tamamen gizliydi: kahraman düz yazıdan ibaret
   kalıyor, sayfanın en önemli yerinde tek bir görsel olmuyordu.
   Artık mutlak konumdan çıkıp metnin altında yatay kayan bir
   şeride dönüşüyorlar — dördü de görünüyor.
=================================================================== */

@media (max-width: 820px) {
  .giris {
    display: flex; flex-direction: column;
    padding-block: 36px 40px;
    /* Şerit sayfa kenarına kadar aksın diye yan boşluk burada yok;
       iç blok kendi boşluğunu taşıyor. */
    padding-inline: 0;
  }

  .giris__ic { order: 1; padding-inline: 16px; }

  .giris__kareler {
    order: 2;
    position: static; inset: auto;
    pointer-events: auto;
    display: flex; gap: 12px;
    margin-top: 30px; padding-inline: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .giris__kareler::-webkit-scrollbar { display: none; }

  .kare,
  .kare--sol-ust, .kare--sol-alt,
  .kare--sag-ust, .kare--sag-alt {
    position: relative;
    display: block;
    left: auto; right: auto; top: auto;
    flex: 0 0 72%; max-width: 260px;
    width: auto; height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: center;
  }
}

@media (max-width: 640px) {
  /* Rozet tek satıra sığmıyor; sığmadığında düzgün sarsın.
     Kelimeler kendi span'ında olduğu için artık "Şu an"
     ortadan bölünmüyor. */
  .giris .rozet-canli {
    flex-wrap: wrap; justify-content: center;
    /* fit-content olmazsa sarma açılınca rozet kabın tamamına
       yayılıyor ve hap görünümünü kaybediyor. */
    width: fit-content; max-width: 100%; margin-inline: auto;
    padding: 8px 14px;
    font-size: 12.8px; line-height: 1.45; text-align: center;
  }
  .rozet-canli__kelime { white-space: nowrap; }

  .giris h1 { font-size: clamp(27px, 8.4vw, 34px); }
  .giris__alt { font-size: 15px; }

  /* Üç çip alt alta üç satır kaplıyordu; küçülünce ikisi yan yana. */
  .giris .cip { padding: 7px 11px; font-size: 12.4px; }
  .giris__cipler { gap: 7px; margin-top: 18px; }
}

@media (max-width: 560px) {
  .giris__form input { flex: 1 1 100%; }
  .site-dugme--vurgu { width: 100%; }
  .kare { flex-basis: 78%; }
}

/* Kenar fotoğrafları ara genişliklerde metnin üstüne biniyordu:
   1100px'te dört kart da, 900px'te ikisi başlığı örtüyordu. Kartlar
   küçülürken metin kabı da daralıyor; ikisi hiç kesişmiyor. */

@media (max-width: 1280px) {
  .giris__ic { max-width: 640px; }
  .kare { width: 176px; height: 132px; }
  .kare--sol-ust, .kare--sag-ust { top: 84px; }
  .kare--sol-alt, .kare--sag-alt { top: 272px; }
}

@media (max-width: 1120px) {
  .giris__ic { max-width: 560px; }
  .kare { width: 150px; height: 112px; }
  .kare--sol-ust, .kare--sag-ust { top: 96px; }
  .kare--sol-alt, .kare--sag-alt { top: 254px; }
}

/* Bu genişliğin altında kart ile metin arasında güvenli boşluk
   kalmıyor; kartlar tamamen kaldırılıyor. */
@media (max-width: 1000px) {
  .giris__kareler { display: none; }
  .giris__ic { max-width: 720px; }
}

/* ================================================== referans bandı

   İkas'ta kahramanın hemen altındaki marka logosu bandının
   karşılığı. Logo yüklenmemiş referanslar sözcük-logo olarak
   yazılıyor; band ilk günden dolu görünüyor.
================================================================== */

.referans-band {
  padding-block: 34px 30px;
  background: #fff;
  border-bottom: 1px solid var(--kenarlik);
}

.referans-band__ic {
  width: 100%; max-width: var(--site-en);
  margin-inline: auto; padding-inline: var(--site-bosluk);
}

.referans-band__baslik {
  margin: 0 0 20px; text-align: center;
  font-size: 12.6px; color: var(--metin-silik);
}

.referans-band__liste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  align-items: center;
}

.referans {
  display: grid; place-items: center;
  min-height: 46px; padding: 6px 10px;
  text-decoration: none;
  filter: grayscale(1); opacity: .62;
  transition: filter .18s ease, opacity .18s ease;
}
.referans:hover { filter: grayscale(0); opacity: 1; }

.referans img { max-width: 100%; max-height: 40px; object-fit: contain; display: block; }

/* Logo yoksa ad sözcük-logo gibi yazılıyor. */
.referans > span {
  font-size: 16.4px; font-weight: 750; letter-spacing: -.024em;
  color: var(--metin-orta); white-space: nowrap;
}

@media (max-width: 900px) {
  .referans-band__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .referans > span { font-size: 14.8px; }
}

@media (max-width: 560px) {
  .referans-band__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .referans > span { font-size: 13.6px; }
}

/* ==================================================================
   KAHRAMAN — İkas ölçüleri

   ikas.com/tr'den okunan gerçek değerler:
     h1        48px / ağırlık 500 / satır arası 60px / genişlik 512px
     alt satır 14px / #364152 / ağırlık 400
     çip       16px / zemin #fafafa / yarıçap 8px / iç boşluk 8px
     kart      301×220 / yarıçap 8px / üst sıra 204, alt sıra 515

   Önceki hâlim çok daha kalın (800) ve çok daha yuvarlaktı
   (16–999px); "yapay üretilmiş" hissini büyük ölçüde o veriyordu.
================================================================== */

.giris h1 {
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  max-width: 15ch;
  margin-inline: auto;
}

.giris__alt {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  color: #364152;
  max-width: 46ch;
}

.giris .cip {
  padding: 8px 12px;
  border-radius: 8px;
  border: 0;
  background: #fafafa;
  font-size: 15px;
  color: var(--metin);
  box-shadow: none;
}
.giris .cip .ico { width: 16px; height: 16px; color: var(--metin-orta); }

.giris .rozet-canli {
  border-radius: 999px;          /* İkas'ta bu öğe hap biçiminde */
  font-size: 14px;
  padding: 7px 14px;
}

.giris__form { gap: 8px; margin-top: 24px; max-width: 600px; }

.giris__form input {
  padding: 13px 14px;
  border-radius: 8px;
  font-size: 15px;
}

.site-dugme--vurgu {
  border-radius: 8px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
}

.giris__ipucu { margin-top: 12px; font-size: 13px; }

/* Kartlar: daha büyük, daha az yuvarlak, daha uzak aralıklı. */
.kare {
  width: 292px; height: 214px;
  border-radius: 8px;
  box-shadow: 0 12px 30px -20px rgba(20, 22, 26, .3);
}

.kare--sol-ust  { left: 2%;  top: 62px; }
.kare--sol-alt  { left: 2%;  top: 368px; }
.kare--sag-ust  { right: 2%; top: 62px; }
.kare--sag-alt  { right: 2%; top: 368px; }

/* Referans bandı da aynı dile uysun. */
.referans-band__baslik { font-size: 13px; }
.referans > span { font-weight: 600; font-size: 15.6px; letter-spacing: -.012em; }

@media (max-width: 1440px) {
  .kare { width: 244px; height: 178px; }
  .kare--sol-alt, .kare--sag-alt { top: 330px; }
}

@media (max-width: 1280px) {
  .kare { width: 196px; height: 143px; }
  .kare--sol-ust, .kare--sag-ust { top: 76px; }
  .kare--sol-alt, .kare--sag-alt { top: 300px; }
}

@media (max-width: 1120px) {
  .kare { width: 152px; height: 111px; }
  .kare--sol-ust, .kare--sag-ust { top: 92px; }
  .kare--sol-alt, .kare--sag-alt { top: 276px; }
}

/* Başlık 15ch'e sıkışıp üç satıra bölünüyordu; işaretlemedeki <br>
   zaten iki satırı veriyor, genişlik sınırı gevşetildi. */
.giris h1 { max-width: 22ch; }

/* Alt sıradaki kartlar bölümün dışında kalıp kesiliyordu; bölüme
   kartların sığacağı yükseklik verildi. */
@media (min-width: 1121px) {
  .giris { min-height: 660px; }
}

@media (max-width: 1120px) and (min-width: 1001px) {
  .giris { min-height: 520px; }
}

/* ================================================== İkas yapısı

   İki fark daha kapatıldı:
   1) Üst şerit lacivert (İkas'ta koyu lacivert, mor değil)
   2) Referans logoları kahramanın İÇİNDE, formun altında,
      ortalanmış küçük 4×2 ızgara — ayrı tam genişlik bant değil
================================================================== */

.kampanya-serit--lacivert { background: #16213c; }

/* Kahraman içindeki logo ızgarası */
.giris__referanslar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 22px;
  max-width: 460px;
  margin: 34px auto 0;
  align-items: center;
}

.giris__referanslar .referans {
  min-height: 34px; padding: 2px;
  filter: grayscale(1); opacity: .45;
}
.giris__referanslar .referans:hover { filter: grayscale(0); opacity: .85; }

.giris__referanslar .referans img { max-height: 30px; }

.giris__referanslar .referans > span {
  font-size: 12.4px; font-weight: 650; letter-spacing: -.008em;
  color: var(--metin-orta); white-space: nowrap;
}

/* Kahraman logo ızgarasını aldığı için bölüm biraz uzuyor. */
@media (min-width: 1121px) {
  .giris { min-height: 700px; }
  .kare--sol-alt, .kare--sag-alt { top: 398px; }
}

@media (max-width: 620px) {
  .giris__referanslar { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 300px; }
}

/* ================================================ başarı hikâyeleri

   İkas'ın "Sıradaki başarı hikayesi sizinki olabilir" bölümünün
   yapısı: solda başlık ve açıklama, sağda çağrı düğmesi; altında
   yan yana kartlar — büyük görsel, marka, söz, kişi ve üç yeşil
   artış ölçüsü.
================================================================== */

.hikayeler { padding-block: 72px; }

.hikaye-basi {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 20px 40px;
  margin-bottom: 34px;
}

.hikaye-basi h2 {
  margin: 0; max-width: 22ch;
  font-size: clamp(24px, 2.8vw, 34px);
  font-weight: 600; line-height: 1.2; letter-spacing: -.022em;
}

.hikaye-basi p {
  margin: 12px 0 0; max-width: 56ch;
  font-size: 14.4px; line-height: 1.55; color: #364152;
}

.hikaye-izgara {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}

.hikaye { display: flex; flex-direction: column; }

.hikaye__gorsel {
  position: relative;
  aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: var(--kart-alt);
}
.hikaye__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hikaye__bos {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: var(--metin-silik);
}
.hikaye__bos .ico { width: 34px; height: 34px; }

.hikaye__oynat {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; border: 0;
  background: rgba(255, 255, 255, .94); color: var(--metin);
  font: inherit; font-size: 13.4px; font-weight: 600; cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .5);
}
.hikaye__oynat .ico { width: 15px; height: 15px; }

.hikaye__marka { margin-top: 16px; min-height: 26px; }
.hikaye__marka img { max-height: 26px; max-width: 130px; object-fit: contain; }
.hikaye__marka strong { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

.hikaye__soz {
  margin: 12px 0 0; font-size: 14.6px; line-height: 1.55; color: var(--metin);
}

.hikaye__kisi { margin: 12px 0 0; font-size: 13px; line-height: 1.4; }
.hikaye__kisi b { display: block; font-weight: 600; color: var(--metin); }
.hikaye__kisi span { color: var(--metin-silik); }

.hikaye__olculer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.olcu {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 84px; padding: 7px 12px; border-radius: 8px;
  background: var(--basari-acik);
}
.olcu b {
  font-size: 17px; font-weight: 700; color: var(--basari);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.olcu em { font-style: normal; font-size: 11.4px; color: var(--metin-orta); margin-top: 2px; }

@media (max-width: 980px) {
  .hikaye-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .hikayeler { padding-block: 52px; }
  .hikaye-izgara { grid-template-columns: minmax(0, 1fr); }
  .hikaye-basi .site-dugme { width: 100%; }
}

/* ====================================== kahraman kartları — İkas biçimi

   İkas'ta kartlar düz fotoğraf değil: beyaz bir çerçevenin içinde
   duruyorlar ve sol üstlerinde mağaza adını taşıyan küçük beyaz bir
   etiket var. Fark buradaydı.
================================================================== */

.kare {
  padding: 8px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 30px -14px rgba(20, 22, 26, .28);
  overflow: visible;
}

.kare img {
  border-radius: 8px;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.kare__etiket {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  padding: 5px 11px; border-radius: 7px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 2px 8px -3px rgba(20, 22, 26, .35);
  font-style: normal; font-size: 12px; font-weight: 600;
  letter-spacing: -.006em; color: var(--metin);
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .kare { padding: 6px; border-radius: 12px; }
  .kare__etiket { left: 13px; top: 13px; font-size: 11px; padding: 4px 9px; }
}

@media (max-width: 1120px) {
  .kare { padding: 5px; }
  .kare__etiket { left: 11px; top: 11px; font-size: 10px; padding: 3px 7px; }
}

/* ============================== üst şerit — İkas geri sayım biçimi

   İkas'ta rakam ve birim alt alta duruyor, her biri beyaz yuvarlak
   kutuda. Bende yan yana küçük kutulardı.
================================================================== */

.kampanya-sayac { gap: 6px; align-items: stretch; }

.kampanya-sayac b {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 42px; padding: 4px 6px 3px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .16);
  font-size: 14px; font-weight: 700; line-height: 1.1;
}

.kampanya-sayac i {
  display: block; margin: 1px 0 0;
  font-size: 9.5px; font-weight: 500; opacity: .72;
  text-transform: none; letter-spacing: 0;
}

/* Birim etiketini rakamın altına al: <b>42</b><i>Gün</i> ikilisini
   tek kutuda göstermek için sonraki kardeşi kutunun içine çekiyoruz. */
.kampanya-sayac { position: relative; }

/* ==================================== üst menü — İkas düğme ikilisi */

.site-menu__giris {
  padding: 8px 16px; border-radius: 8px;
  border: 1px solid var(--kenarlik-koyu);
  background: #fff; color: var(--metin);
  font-weight: 600; font-size: 13.6px;
}
.site-menu__giris:hover { border-color: var(--metin-silik); }

.site-menu .site-dugme--birincil {
  border-radius: 8px; padding: 9px 18px; font-size: 13.8px;
  box-shadow: none;
}

/* ==================================== rozet — İkas avatar dizisi */

.rozet-canli__avatarlar {
  display: inline-flex; align-items: center; margin-right: 2px;
}

/* Baş harfli renkli daireler yerine gerçek portreler duruyor.
   Kural hem <span> hem <img> için geçerli: dosya gelmezse
   harf rozetine düşmek hâlâ mümkün. */
.rozet-canli__avatarlar span,
.rozet-canli__avatarlar img {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 700; color: #fff;
  margin-left: -7px;
}
.rozet-canli__avatarlar span:first-child,
.rozet-canli__avatarlar img:first-child { margin-left: 0; }

.rozet-canli__avatarlar img {
  object-fit: cover; object-position: center top;
  background: var(--kart-alt);
}

.rozet-canli__avatarlar span:nth-child(1) { background: #6d3fd4; }
.rozet-canli__avatarlar span:nth-child(2) { background: #1f6feb; }
.rozet-canli__avatarlar span:nth-child(3) { background: #0f8a52; }

/* Sayaç kutusu: rakam üstte, birim altta — İkas'taki gibi. */
.sayac-kutu {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 44px; padding: 4px 7px 3px;
  border-radius: 8px; background: rgba(255, 255, 255, .16);
}
.sayac-kutu > span {
  font-size: 14.5px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.sayac-kutu > i {
  font-style: normal; font-size: 9.5px; font-weight: 500;
  opacity: .7; margin-top: 1px; letter-spacing: 0;
}
.kampanya-sayac i { margin-right: 0; }

/* Tek alanlı form: İkas'taki gibi geniş girdi + sağında düğme. */
.giris__form { max-width: 520px; }
.giris__form input[type="tel"] { flex: 1 1 300px; }

/* ==================================================================
   KAHRAMAN — İkas'tan okunan birebir değerler

   rozet   44px yükseklik · 8px yarıçap · beyaz · 16px/400
   h1      48px/500 · satır 60px · genişlik 512px · #121926
   alt     14px/400 · satır 20px · genişlik 434px · #364152
   çip     16px/400 · zemin #fafafa · 8px yarıçap · 34px yükseklik
   girdi   346×44 · 15px · 8px yarıçap
   düğme   162×46 · 16px/600 · #3034ff · 8px yarıçap
   logolar üst 663 · genişlik 569px

   Dikey boşluklar: rozet→h1 16, h1→alt 12, alt→çip 36,
   çip→form 24, form→ipucu 16, ipucu→logolar 60
================================================================== */

.giris .rozet-canli {
  height: 44px; padding: 0 16px;
  border-radius: 8px;                /* hap değil, İkas'ta köşeli */
  font-size: 16px; font-weight: 400;
  background: #fff; border: 1px solid var(--kenarlik);
  color: #000;
}
.giris .rozet-canli b { font-weight: 600; }

.giris h1 {
  margin: 16px auto 0;
  max-width: 512px;
  font-size: 48px; font-weight: 500;
  line-height: 60px; letter-spacing: -.018em;
  color: #121926;
}

.giris__alt {
  margin: 12px auto 0; max-width: 434px;
  font-size: 14px; font-weight: 400; line-height: 20px;
  color: #364152;
}

.giris__cipler { margin-top: 36px; gap: 8px; }

.giris .cip {
  height: 34px; padding: 0 10px;
  border-radius: 8px; border: 0;
  background: #fafafa;
  font-size: 16px; font-weight: 400; color: #000;
}
.giris .cip .ico { width: 17px; height: 17px; color: #697586; }

.giris__form {
  margin-top: 24px; max-width: 520px;
  gap: 10px; align-items: center;
}

.giris__form input[type="tel"] {
  flex: 0 1 346px; height: 44px; padding: 0 14px;
  border-radius: 8px; border: 1px solid var(--kenarlik-koyu);
  font-size: 15px; background: #fff;
}

.site-dugme--vurgu {
  height: 46px; padding: 0 22px;
  border-radius: 8px;
  background: #3034ff; color: #fff;
  font-size: 16px; font-weight: 600;
}
.site-dugme--vurgu:hover { background: #2529e6; }

.giris__ipucu { margin-top: 16px; font-size: 14px; color: #364152; }
.giris__ipucu a { color: #3034ff; font-weight: 500; }

.giris__referanslar {
  margin-top: 60px; max-width: 569px;
  gap: 14px 26px;
}

/* Dar ekranda ölçüler esneyebilir. */
@media (max-width: 620px) {
  .giris h1 { font-size: 32px; line-height: 40px; }
  .giris .rozet-canli { height: auto; padding: 9px 14px; font-size: 14px; }
  .giris .cip { font-size: 14px; }
  .giris__form input[type="tel"] { flex: 1 1 100%; }
}

/* ======================== kahraman kartları — İkas'ın gerçek biçimi

   Ölçüm: kapsayıcıda dolgu yok, zemin saydam, görselin kendisi
   8px yarıçaplı, 301×220. Önceki turda beyaz çerçeve eklemiştim —
   yanlıştı, kaldırıldı.
================================================================== */

.kare {
  padding: 0;
  background: transparent;
  border-radius: 8px;
  width: 301px; height: 220px;
  box-shadow: none;
  overflow: visible;
}

.kare img {
  border-radius: 8px;
  box-shadow: 0 10px 28px -16px rgba(20, 22, 26, .3);
}

.kare__etiket { left: 12px; top: 12px; }

@media (max-width: 1440px) { .kare { width: 252px; height: 184px; } }
@media (max-width: 1280px) { .kare { width: 202px; height: 148px; } }
@media (max-width: 1120px) { .kare { width: 156px; height: 114px; } }

/* ============================== rozet sayacı — ayrı rakam kutuları

   İkas'ta sayı tek parça değil: her basamak kendi kutusunda
   (477 → 4 · 7 · 7). Sayaç hissini veren şey bu.
================================================================== */

.sayac-rakamlar { display: inline-flex; gap: 3px; margin-inline: 2px; }

.sayac-rakamlar span {
  display: grid; place-items: center;
  min-width: 20px; height: 26px; padding: 0 3px;
  border-radius: 5px;
  background: #f1f2f4;
  font-size: 15px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #121926;
}

/* ============================================= kayan referans şeridi

   Sabit ızgarada yalnız ilk sekiz logo görünüyordu. Şerit sürekli
   kaydığı için referans sayısı ne olursa olsun hepsi sırayla geçiyor.
   Liste iki kez basılı; ikinci kopya birincinin bittiği yerde
   başladığı için dönüş dikişsiz.
================================================================== */

.logo-serit-kayan {
  margin: 56px auto 0;
  max-width: 640px;
  overflow: hidden;
  /* İki uçta erime: logolar aniden bitmiş gibi durmasın. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

.logo-serit-kayan__ray {
  display: flex; width: max-content;
  animation: logo-kay 26s linear infinite;
}

.logo-serit-kayan:hover .logo-serit-kayan__ray { animation-play-state: paused; }

.logo-serit-kayan__grup { display: flex; align-items: center; gap: 34px; padding-right: 34px; }

.logo-serit-kayan .referans {
  display: grid; place-items: center;
  min-height: 34px; flex: none;
  filter: grayscale(1); opacity: .45;
  transition: filter .2s ease, opacity .2s ease;
}
.logo-serit-kayan .referans:hover { filter: grayscale(0); opacity: .9; }
.logo-serit-kayan .referans img { max-height: 30px; max-width: 120px; object-fit: contain; }
.logo-serit-kayan .referans > span {
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--metin-orta); white-space: nowrap;
}

@keyframes logo-kay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* tam bir kopya kadar */
}

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

@media (max-width: 620px) {
  .logo-serit-kayan { max-width: none; margin-top: 40px; }
  .logo-serit-kayan__grup { gap: 24px; padding-right: 24px; }
}

/* ============================== referans logoları — İkas'ın gerçeği

   Ölçüm: kayan şerit DEĞİL. Sabit 4 sütunlu ızgara, 8 hücre,
   kapsayıcı 604×92, sütun 133px, logo 98px, satır aralığı 54px.
   Her hücrede birden çok logo üst üste; opaklıkla sırayla geçiyor.
================================================================== */

/* 3×3: şeritte hazır demosu olan dokuz sektör var, dokuzu da
   aynı anda görünsün. Sütunlar sabit 133px'ti; "Kozmetik &
   Kişisel Bakım" gibi uzun adlar hücreden taşıp yan yazıyla
   iç içe giriyordu. Artık sütun esnek ve yazı gerekirse
   alt satıra iniyor. */
.logo-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  gap: 14px 22px;
  width: 660px; max-width: 100%;
  margin: 56px auto 0;
}

.logo-hucre {
  position: relative;
  display: grid; place-items: center;
  height: 40px;
}

.logo-hucre__oge {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .55s ease;
  pointer-events: none;
}
.logo-hucre__oge.acik { opacity: 1; }

.logo-hucre__oge img {
  max-width: 98px; max-height: 34px; object-fit: contain;
  filter: grayscale(1); opacity: .55;
}

.logo-hucre__oge em {
  font-style: normal; font-size: 13.4px; font-weight: 650;
  letter-spacing: -.01em; color: var(--metin-silik);
  /* nowrap değil: uzun sektör adı hücreye sığmazsa taşmak
     yerine ikinci satıra insin. */
  line-height: 1.35; text-align: center; text-wrap: balance;
  padding-inline: 4px;
}

@media (max-width: 620px) {
  .logo-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; gap: 14px 18px; margin-top: 40px;
  }
  .logo-hucre__oge em { font-size: 12.4px; }
}

/* ====================== kahraman kartları — İkas'ın gerçek konumu

   1905px ekranda ölçüm:
     İkas  sol kart x=272 · sağ kart sağdan 273 · üst sıra y=204 · alt y=515
     Bende sol kart x=38  · sağ kart sağdan 38  · üst sıra y=182 · alt y=518

   Kartlarım ekran kenarına yapışıktı. İkas'ta kartın iç kenarı,
   ortadaki 720px'lik metin sütununun ~19px dışında duruyor —
   yani konum ekrana değil metne göre. calc() ile aynısı kuruluyor:
     50% - (360 metin yarısı + 19 boşluk + 301 kart) = 50% - 680px
================================================================== */

.kare--sol-ust,
.kare--sol-alt  { left: calc(50% - 680px); right: auto; }

.kare--sag-ust,
.kare--sag-alt  { right: calc(50% - 680px); left: auto; }

/* Dikey: rozetin 3px üstünden başlayıp 308px sonra ikinci sıra. */
.kare--sol-ust, .kare--sag-ust { top: 53px; }
.kare--sol-alt, .kare--sag-alt { top: 364px; }

/* Dar ekranda calc negatife düşüp kartları dışarı atmasın. */
@media (max-width: 1560px) {
  .kare--sol-ust, .kare--sol-alt { left: 2.5%; }
  .kare--sag-ust, .kare--sag-alt { right: 2.5%; }
}

/* ------------------------------------------- logolar hem kayıyor

   Hücre içinde sönüp beliriyorlar ama şerit de yavaşça sağa doğru
   süzülüyor; ikisi birden oluyor.
================================================================== */

.logo-izgara {
  animation: logo-suzul 9s ease-in-out infinite alternate;
}

@keyframes logo-suzul {
  from { transform: translateX(-10px); }
  to   { transform: translateX(10px); }
}

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

/* ==================================================================
   YAZI TİPİ — Plus Jakarta Sans

   Sistem yığını her sitede aynı görünüyordu. Plus Jakarta Sans'ın
   Latin Extended kümesi tam: ş ğ ı İ ö ü ç hepsi var — Türkçe
   metinde eksik karakter düşmüyor. Harf biçimlerinde (tek katlı a,
   kuyruklu g) kendine ait bir ses var, yine de kurumsal duruyor.

   Panel bilerek dışarıda: orası günde saatlerce bakılan bir araç,
   sistem yazı tipi orada daha okunaklı ve daha hızlı.
================================================================== */

.site,
.site button,
.site input,
.site select,
.site textarea {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Yeni yazı tipi öncekinden bir tık dar; başlıkta harf aralığını
   biraz açıp aynı optik ağırlığı koruyoruz. */
.giris h1 { letter-spacing: -.024em; }
.bolum__basi h2,
.hikaye-basi h2,
.sayfa-giris h1 { letter-spacing: -.022em; }

/* Rakamlar her yerde aynı genişlikte dursun (sayaç, fiyat, ölçü). */
.sayac-kutu > span,
.sayac-rakamlar span,
.fiyat-kart__tutar strong,
.serit__liste dt,
.kanit-serit__liste dt,
.olcu b { font-feature-settings: "tnum" 1; }

/* ==================================================================
   RENKLER — Neds'in kendi paleti

   Mavi (#3034ff) ve mor (#6d3fd4) İkas ile IdeaSoft'un renkleriydi;
   örnek alırken tonları da almışım. Neds'in kimliği panelden geliyor
   ve kömür öncüllü: --komur #17191d ana renk, griler destek.
   Vurgu için ayrı bir renk uydurmak yerine kömürün kendisi
   kullanılıyor; ayırt edici olan da bu.
================================================================== */

/* Menüdeki düğmenin yazısı gri kalıyordu: .site-menu > a kuralı
   (0,1,1) .site-dugme--birincil'i (0,1,0) eziyor. */
.site-menu > a.site-dugme--birincil { color: #fff; }
.site-menu > a.site-dugme--birincil:hover { color: #fff; }

/* Şerit: laciverti bırakıp kendi kömürümüz. */
.kampanya-serit--lacivert,
.kampanya-serit--koyu { background: var(--komur); }

/* Çağrı düğmesi: elektrik mavisi yerine kömür. */
.site-dugme--vurgu { background: var(--komur); color: #fff; }
.site-dugme--vurgu:hover { background: var(--komur-2); }

/* Başlıktaki vurgu kelimesi ve bağlantılar. */
.giris h1 em { color: var(--komur); }

.giris__ipucu a { color: var(--komur); font-weight: 600; text-decoration: underline; }
.giris__ipucu a:hover { color: var(--komur-2); }

/* Rozet avatarları: renk cümbüşü yerine kömür tonları. */
.rozet-canli__avatarlar span:nth-child(1) { background: #17191d; }
.rozet-canli__avatarlar span:nth-child(2) { background: #3f434b; }
.rozet-canli__avatarlar span:nth-child(3) { background: #6b7280; }

/* Rakam kutuları ve sayaç. */
.sayac-rakamlar span { background: #eceef1; color: var(--komur); }

/* Bölüm etiketleri ve panel zeminlerindeki mor. */
.etiket { background: #eceef1; color: var(--komur); }

.yetenek__im,
.ozellik-grup__im { background: #eceef1; color: var(--komur); }

.yetenek:nth-child(4n+2) .yetenek__im,
.yetenek:nth-child(4n+3) .yetenek__im,
.yetenek:nth-child(4n+4) .yetenek__im,
.ozellik-grup:nth-child(4n+2) .ozellik-grup__im,
.ozellik-grup:nth-child(4n+3) .ozellik-grup__im,
.ozellik-grup:nth-child(4n+4) .ozellik-grup__im { background: #eceef1; color: var(--komur); }

.yetenek__gorsel--panel,
.yetenek:nth-child(4n+2) .yetenek__gorsel--panel,
.yetenek:nth-child(4n+3) .yetenek__gorsel--panel,
.yetenek:nth-child(4n+4) .yetenek__gorsel--panel { background: #f1f2f4; }

.yetenek__buyuk-im,
.ozellik-pano__im { color: var(--komur); }
.ozellik-pano { background: #f1f2f4; }

.rozet-cizgi { border-color: var(--kenarlik); color: var(--metin-orta); }
.rozet-cizgi .ico { color: var(--metin-orta); }

.site-baglanti { color: var(--komur); text-decoration: underline; }
.site-baglanti--acik { color: #fff; }

.hikaye-basi .site-dugme--vurgu { background: var(--komur); }

/* Yeşil yalnız "artış/onay" anlamında kalsın — o anlam taşıyor. */

/* Kart köşesindeki ikonlarda mavi/mor kalmıştı: .yetenek__gorsel
   .yetenek__im (0,2,0) daha özgül olduğu için önceki kuralı eziyordu. */
.yetenek__gorsel .yetenek__im,
.yetenek:nth-child(4n+2) .yetenek__gorsel .yetenek__im,
.yetenek:nth-child(4n+3) .yetenek__gorsel .yetenek__im,
.yetenek:nth-child(4n+4) .yetenek__gorsel .yetenek__im { color: var(--komur); }

/* ==================================================================
   PALET — tek noktadan

   Mavi ve mor CSS'in 25 ayrı yerinde geçiyordu; her birini tek tek
   ezmek hem kırılgan hem eksik kalıyordu (diğer sayfalarda ikonlar
   mavi kalmıştı). Bunun yerine admin.css'ten gelen renk
   değişkenlerinin kendisi .site kapsamında yeniden tanımlanıyor —
   nerede kullanılırsa kullanılsın kömüre çözülüyor.

   Panel etkilenmiyor: değişkenler yalnız .site altında değişiyor.
   Yeşil (--basari) ve kırmızı (--tehlike) dokunulmadan kalıyor;
   onlar süs değil, anlam taşıyor.
================================================================== */

.site {
  --birincil: #17191d;
  --birincil-koyu: #000000;
  --birincil-acik: #eceef1;

  --mor: #17191d;
  --mor-ton: #17191d;
  --mor-acik: #eceef1;

  --bilgi: #3f434b;
  --bilgi-acik: #eceef1;
}

/* Doğrudan yazılmış birkaç renk kaldı, onlar da paletten. */
.site .site-baglanti--acik { color: #fff; }
.site .kampanya-serit--mor { background: var(--komur); }
.site .kanit-serit__liste dt { background: none; color: var(--metin); -webkit-text-fill-color: currentColor; }

/* Odak halkası da kömür olsun, mavi çakmasın. */
.site .site-alan input:focus,
.site .site-alan select:focus,
.site .site-alan textarea:focus,
.site .giris__form input:focus {
  border-color: var(--komur);
  box-shadow: 0 0 0 3px rgba(23, 25, 29, .12);
}

/* ------------------------------------------------------------- kıyas
   Ücretlendirme biçimi karşılaştırması. İki sütun bilerek eşit
   ağırlıkta değil: sağdaki bizim tarafımız, hafif vurgulu. */

.kiyas {
  border: 1px solid var(--kenarlik); border-radius: 14px;
  background: var(--kart); overflow: hidden;
}

.kiyas__satir {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px; padding: 16px 22px;
  border-top: 1px solid var(--kenarlik);
  font-size: 14px; align-items: start;
}

.kiyas__satir:first-child { border-top: 0; }

.kiyas__satir--basi {
  padding-top: 14px; padding-bottom: 14px;
  background: var(--birincil-acik);
  font-size: 12.4px; font-weight: 640;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--metin-orta);
}

.kiyas__konu { font-weight: 640; color: var(--metin); }
.kiyas__piyasa { color: var(--metin-orta); }

.kiyas__neds {
  display: flex; align-items: flex-start; gap: 8px;
  color: var(--metin); font-weight: 560;
}

.kiyas__neds .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--birincil); }
.kiyas__satir--basi .kiyas__neds { font-weight: 640; }

@media (max-width: 760px) {
  /* Telefonda üç sütun sığmıyor; başlık satırı anlamını yitirdiği
     için gizlenip her hücre kendi etiketiyle yazılıyor. */
  .kiyas__satir--basi { display: none; }
  .kiyas__satir { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 18px; }
  .kiyas__konu { font-size: 14.6px; }
  .kiyas__piyasa::before { content: 'Abonelikli altyapılarda: '; color: var(--metin-silik); }
  .kiyas__neds::before { content: 'Neds: '; color: var(--metin-silik); font-weight: 400; }
  .kiyas__neds .ico { display: none; }
}

/* ------------------------------------------------- panel görüntüsü
   Anlatım görselleri 4/3'e kırpılıyor; fotoğraflar için doğru ama
   panel ekran görüntüsünde yan menüyü ve sağdaki kartı kesiyordu.
   Ekran görüntüsünün tamamı görünmeli — kesilen panel "panel"i
   göstermiyor. */

.anlatim__gorsel--telefon > img {
  aspect-ratio: 1568 / 726;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------- marka
   Üst menüde yatay kilit, alt bilgide dikey kilit duruyor. */

.site-alt__logo {
  display: inline-block;
  width: 152px;
  /* Logo kilidinde yazının altında pay var; optik hizada dursun
     diye üstten biraz kaldırılıyor. */
  margin: -8px 0 14px -4px;
}

.site-alt__logo img { display: block; width: 100%; height: auto; }

/* ============================================ referanslar sayfası

   Hazır demo mağaza kartları (3×3) ve altındaki sektör listesi.
   Kart yapısı .yetenek ile aynı mantıkta ama görsel daha büyük;
   burada asıl anlatan şey fotoğraf.
================================================================== */

.demo-izgara {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 22px;
}

.demo-kart {
  display: flex; flex-direction: column;
  border-radius: 15px; overflow: hidden;
  background: var(--kart); border: 1px solid var(--kenarlik);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.demo-kart:hover {
  border-color: transparent; transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(20, 22, 26, .4);
}

.demo-kart__gorsel {
  display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--kart-alt);
}
.demo-kart__gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease;
}
.demo-kart:hover .demo-kart__gorsel img { transform: scale(1.05); }

.demo-kart__govde { padding: 18px 20px 22px; }
.demo-kart__govde h3 {
  margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.014em;
}

.demo-kart__tema {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 7px; padding: 3px 9px; border-radius: 999px;
  background: var(--mor-acik); color: var(--mor-ton);
  font-size: 12px; font-weight: 650;
}
.demo-kart__tema .ico { width: 13px; height: 13px; }

.demo-kart__govde p {
  margin: 11px 0 0; font-size: 14px; line-height: 1.6;
  color: var(--metin-orta);
}

/* Sektör listesi: sütunlara akan düz ad listesi. Her birine ayrı
   kart çizmek 27 kutu demek; okunacak şey yalnız ad. */
.sektor-liste {
  list-style: none; margin: 0; padding: 0;
  columns: 4; column-gap: 26px;
  max-width: 940px; margin-inline: auto;
}
.sektor-liste li {
  break-inside: avoid;
  padding: 7px 0 7px 18px; position: relative;
  font-size: 14.4px; color: var(--metin-orta);
}
.sektor-liste li::before {
  content: ""; position: absolute; left: 0; top: 15px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--birincil);
}

@media (max-width: 1000px) {
  .demo-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sektor-liste { columns: 3; }
}

@media (max-width: 640px) {
  .demo-izgara { grid-template-columns: minmax(0, 1fr); }
  .sektor-liste { columns: 2; column-gap: 18px; }
}

@media (max-width: 420px) {
  .sektor-liste { columns: 1; }
}

/* ============================================ referanslar sayfası

   Ana sayfadaki hikâye şeridinin sayfa hâli: görsel üstte, söz,
   kişi ve ölçüler altta. Kart yapısı .demo-kart ile aynı ritimde
   dursun diye aynı köşe/gölge değerleri kullanılıyor.
================================================================== */

.referans-izgara {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 22px;
}

.referans-kart {
  display: flex; flex-direction: column;
  border-radius: 15px; overflow: hidden;
  background: var(--kart); border: 1px solid var(--kenarlik);
}

.referans-kart__gorsel {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: var(--kart-alt);
}
.referans-kart__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }

.referans-kart__govde {
  display: flex; flex-direction: column;
  padding: 18px 20px 22px; gap: 10px;
}

.referans-kart__marka strong {
  font-size: 16.5px; font-weight: 700; letter-spacing: -.014em;
}
.referans-kart__marka img { height: 24px; width: auto; max-width: 130px; object-fit: contain; }

.referans-kart__soz {
  margin: 0; font-size: 14.6px; line-height: 1.62; color: var(--metin-orta);
}

.referans-kart__kisi {
  margin: 0; font-size: 13.4px; line-height: 1.5;
}
.referans-kart__kisi strong { font-weight: 650; }
.referans-kart__kisi span { display: block; color: var(--metin-silik); }

/* Ölçüler: üç küçük kutu. Sayı üstte, ne olduğu altta. */
.referans-kart__olculer {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 0; padding: 0;
}
.referans-kart__olculer > div {
  flex: 1 1 82px;
  padding: 9px 10px; border-radius: 10px;
  background: var(--basari-acik);
}
.referans-kart__olculer dt {
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--basari);
  font-variant-numeric: tabular-nums;
}
.referans-kart__olculer dd {
  margin: 2px 0 0; font-size: 11.6px; line-height: 1.35; color: var(--metin-orta);
}

.referans-kart__bag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 6px;
  font-size: 13.8px; font-weight: 650; text-decoration: none;
  color: var(--birincil-koyu);
}
.referans-kart__bag .ico { width: 15px; height: 15px; }

/* Boş durum: kayıt yokken uydurma marka basmak yerine bu çıkıyor. */
.bos-durum {
  max-width: 620px; margin-inline: auto; text-align: center;
  padding: 44px 26px; border-radius: 18px;
  background: var(--kart); border: 1px solid var(--kenarlik);
}
.bos-durum__im {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin: 0 auto 18px;
  border-radius: 16px; background: var(--mor-acik); color: var(--mor-ton);
}
.bos-durum__im .ico { width: 25px; height: 25px; }
.bos-durum h2 { margin: 0; font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -.02em; }
.bos-durum p { margin: 12px 0 0; color: var(--metin-orta); line-height: 1.65; }
.bos-durum__eylem {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 24px;
}

@media (max-width: 1000px) {
  .referans-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .referans-izgara { grid-template-columns: minmax(0, 1fr); }
  .bos-durum__eylem .site-dugme { width: 100%; }
}

/* ------------------------------------------- hizmet kartı görseli

   platform_services.image kolonu vardı ama şablon okumuyordu;
   kartlar yalnız yazıydı. Görseli olan kart iki sütuna geçiyor,
   olmayan eski tek sütun düzeninde kalıyor.
   ================================================================ */

.hizmet-kart--gorselli {
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 26px; align-items: start;
}

.hizmet-kart__gorsel {
  border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9;
  background: var(--zemin-2, #f2f2f2);
}
.hizmet-kart__gorsel img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.hizmet-kart__govde { display: grid; gap: 14px; align-content: start; }

@media (max-width: 760px) {
  .hizmet-kart--gorselli { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Motion kartları (ana sayfa) */
.motion-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.motion-bas h2 { margin: 0; font-size: clamp(26px, 3vw, 37px); line-height: 1.16; letter-spacing: -.022em; font-weight: 760; }
.motion-bas p { margin: 12px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--metin-orta); }
.motion-bas .site-dugme { flex: none; }
.motion-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.motion-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.motion-kart--dar { grid-column: span 5; }
.motion-kart--genis { grid-column: span 7; }
.motion-kart { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 22px 22px 0; font: inherit; text-align: left; color: var(--metin); background: #f6f7f9; border: 1px solid var(--kenarlik); border-radius: 18px; overflow: hidden; cursor: pointer; transition: translate .2s ease, box-shadow .2s ease, border-color .2s ease; }
.motion-kart:hover { translate: 0 -3px; border-color: var(--kenarlik-koyu); box-shadow: 0 14px 30px rgba(23, 25, 29, .09); }
.motion-kart:focus-visible { outline: 2px solid var(--komur); outline-offset: 2px; }
.motion-kart__ust { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.motion-kart__ust strong { font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -.012em; }
.motion-kart__ok { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--metin); background: #fff; border: 1px solid var(--kenarlik); border-radius: 50%; transition: background .2s ease, color .2s ease; }
.motion-kart:hover .motion-kart__ok { color: #fff; background: var(--komur); }
.motion-kart__yazi { min-height: 3.1em; font-size: 14.4px; line-height: 1.55; color: var(--metin-orta); }
.motion { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; background: #f6f7f9; }
.motion-kart .motion { margin-top: 6px; }
.motion-pencere { width: min(760px, calc(100vw - 32px)); padding: 22px; color: var(--metin); background: #f6f7f9; border: 0; border-radius: 20px; }
.motion-pencere::backdrop { background: rgba(16, 24, 40, .6); }
.motion-pencere h3 { margin: 12px 0 6px; font-size: 24px; letter-spacing: -.015em; }
.motion-pencere p { margin: 0 0 16px; line-height: 1.6; color: var(--metin-orta); }
.motion-pencere__kapat { position: absolute; right: 12px; top: 12px; z-index: 1; width: 38px; height: 38px; font-size: 24px; line-height: 1; color: var(--metin); background: #fff; border: 1px solid var(--kenarlik); border-radius: 50%; cursor: pointer; }
@media (max-width: 960px) { .motion-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .motion-kart--dar, .motion-kart--genis { grid-column: span 6; } }
@media (max-width: 620px) { .motion-izgara, .motion-bento { grid-template-columns: minmax(0, 1fr); } .motion-kart--dar, .motion-kart--genis { grid-column: auto; } .motion-bas { align-items: flex-start; flex-direction: column; } }

/* Dönüşüm öğeleri */
.giris__donus { margin: 10px 0 0; font-size: 13.6px; font-weight: 600; color: var(--metin); }
.giris__puan { margin: 8px 0 0; font-size: 13.6px; color: var(--metin-orta); }
.giris__puan a { color: inherit; }
.kampanya-bant { background: var(--komur); color: #fff; }
.kampanya-bant a { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; min-height: 40px; padding: 7px 16px; font-size: 13.8px; color: #fff; text-decoration: none; }
.kampanya-bant__sayac { font-variant-numeric: tabular-nums; font-weight: 700; }
.guven-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.guven-kart { padding: 22px; background: #f6f7f9; border: 1px solid var(--kenarlik); border-radius: 16px; }
.guven-kart h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.guven-kart p { margin: 0; font-size: 14.2px; line-height: 1.55; color: var(--metin-orta); }
.yorum-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.yorum-kart { margin: 0; padding: 22px; background: #fff; border: 1px solid var(--kenarlik); border-radius: 16px; }
.yorum-kart__puan { color: #f1a81e; letter-spacing: 2px; }
.yorum-kart blockquote { margin: 10px 0 14px; font-size: 15px; line-height: 1.6; color: var(--metin); }
.yorum-kart figcaption { font-size: 13.6px; color: var(--metin-orta); }
.tasima { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tasima__soz h2 { margin: 0; font-size: clamp(26px, 3vw, 37px); line-height: 1.16; letter-spacing: -.022em; font-weight: 760; }
.tasima__soz p { margin: 14px 0 22px; font-size: 16px; line-height: 1.65; color: var(--metin-orta); }
.tasima__adim { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tasima__adim li { display: flex; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--kenarlik); border-radius: 14px; }
.tasima__adim b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: #fff; background: var(--komur); border-radius: 50%; }
.tasima__adim strong { display: block; font-size: 16px; }
.tasima__adim span { display: block; margin-top: 3px; font-size: 14.2px; line-height: 1.5; color: var(--metin-orta); }
.kiyas-tablo { margin-top: 18px; padding: 24px; background: #fff; border: 1px solid var(--kenarlik); border-radius: 16px; color: var(--metin); }
.kiyas-tablo h3 { margin: 0 0 14px; font-size: 20px; letter-spacing: -.012em; }
.kiyas-tablo__sar { overflow-x: auto; }
.kiyas-tablo table { width: 100%; min-width: 460px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.kiyas-tablo th, .kiyas-tablo td { padding: 13px 14px; text-align: center; border-bottom: 1px solid var(--kenarlik); font-variant-numeric: tabular-nums; }
.kiyas-tablo tbody th { text-align: left; font-weight: 600; }
.kiyas-tablo tr:last-child th, .kiyas-tablo tr:last-child td { border-bottom: 0; }
.kiyas-tablo .biz { color: #fff; background: var(--komur); border-bottom-color: rgba(255, 255, 255, .14); }
.kiyas-tablo thead .biz { border-radius: 12px 12px 0 0; font-weight: 800; }
.kiyas-tablo tr:last-child .biz { border-radius: 0 0 12px 12px; }
.kt-var, .kt-yok { display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 14px; font-weight: 800; border-radius: 50%; }
.kt-var { color: #fff; background: #0fae66; }
.kt-yok { color: #c0322f; background: #fdeaea; }
.kiyas-tablo > p { margin: 14px 0 0; font-size: 12.8px; line-height: 1.55; color: var(--metin-orta); }
.motion--panel { aspect-ratio: 4 / 3; border-radius: 20px; box-shadow: 0 18px 44px rgba(23, 25, 29, .16); background: #3b1fa8; }
.alt-cubuk { display: none; }
.wa-yuzen { position: fixed; right: 20px; bottom: 20px; z-index: 40; padding: 12px 18px; font-size: 14.4px; font-weight: 700; color: #fff; text-decoration: none; background: #128c4b; border-radius: 999px; box-shadow: 0 10px 24px rgba(23, 25, 29, .2); }
@media (max-width: 980px) { .guven-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } .yorum-izgara { grid-template-columns: 1fr; } .tasima { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 780px) {
  body.site { padding-bottom: 62px; }
  .wa-yuzen { display: none; }
  .alt-cubuk { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--kenarlik); }
  .alt-cubuk a { flex: 1; display: grid; place-items: center; min-height: 44px; font-size: 14.2px; font-weight: 700; color: var(--metin); text-decoration: none; background: #f6f7f9; border-radius: 10px; }
  .alt-cubuk a.alt-cubuk__ana { flex: 1.5; color: #fff; background: var(--komur); }
}
@media (max-width: 560px) { .guven-izgara { grid-template-columns: 1fr; } .kiyas-tablo { padding: 16px 12px; } .kiyas-tablo table { min-width: 0; table-layout: fixed; } .kiyas-tablo th, .kiyas-tablo td { padding: 10px 3px; font-size: 12px; } .kiyas-tablo tbody th { width: 37%; padding-left: 2px; font-size: 12.6px; line-height: 1.3; } .kt-var, .kt-yok { width: 22px; height: 22px; font-size: 12px; } }

/* Arama bandı */
.arama-bant { padding: 72px 20px; background: #fff; }
.arama-bant__ic { display: flex; align-items: center; gap: 24px; width: min(1132px, 100%); margin: 0 auto; padding: 28px 32px; background: #f6f7f9; border: 1px solid var(--kenarlik); border-radius: 18px; }
.arama-bant__kisiler { flex: none; display: flex; }
.arama-bant__kisiler img { width: 58px; height: 58px; object-fit: cover; border: 3px solid #f6f7f9; border-radius: 50%; filter: grayscale(1) contrast(1.05); transition: translate .2s ease; }
.arama-bant__kisiler img + img { margin-left: -14px; }
.arama-bant__ic:hover .arama-bant__kisiler img { translate: 0 -3px; }
.arama-bant__soz { flex: 1; min-width: 0; }
.arama-bant__soz h2 { margin: 0; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.2; letter-spacing: -.02em; font-weight: 760; color: var(--metin); }
.arama-bant__soz p { margin: 5px 0 0; font-size: 14.6px; color: var(--metin-orta); }
.arama-bant__eylem { flex: none; display: flex; align-items: center; gap: 18px; }
.arama-bant__tel { font-size: 17px; font-weight: 750; color: var(--metin); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) {
  .arama-bant { padding: 48px 16px; }
  .arama-bant__ic { flex-direction: column; align-items: flex-start; padding: 24px 20px; gap: 16px; }
  .arama-bant__eylem { width: 100%; justify-content: space-between; }
}
/* Sık sorulanlar: iki sütun */
#sss .bolum__ic--dar { max-width: 1132px; }
#sss .sss { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
#sss .sss__oge { min-width: 0; }
@media (max-width: 760px) { #sss .sss { grid-template-columns: minmax(0, 1fr); } }
/* Alt bilgi ve araçlar */
.site-alt__ic { grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); }
.sss { max-width: 100%; }
.arac-baslik { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.024em; font-weight: 770; }
.arac-alt { margin: 10px 0 24px; color: var(--metin-orta); }
.arac-geri { display: inline-block; margin-bottom: 14px; font-size: 14px; color: var(--metin-orta); }
.arac-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.arac-liste a { display: grid; gap: 4px; padding: 18px; color: var(--metin); text-decoration: none; background: #f6f7f9; border: 1px solid var(--kenarlik); border-radius: 14px; }
.arac-liste span { font-size: 14px; color: var(--metin-orta); }
.arac-form { display: grid; gap: 14px; padding: 22px; background: #f6f7f9; border: 1px solid var(--kenarlik); border-radius: 16px; }
.arac-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 650; }
.arac-form input, .arac-form select { min-height: 44px; padding: 0 12px; font: inherit; color: var(--metin); background: #fff; border: 1px solid var(--kenarlik-koyu); border-radius: 10px; }
.arac-sonuc { display: block; padding: 16px; font-size: 18px; font-weight: 700; line-height: 1.5; color: #fff; word-break: break-word; background: var(--komur); border-radius: 12px; }
.arac-sonuc a { color: #fff; }
.arac-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
@media (max-width: 1100px) { .site-alt__ic { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-alt__marka { grid-column: 1 / -1; } }
@media (max-width: 780px) { .site-alt__ic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; } }
@media (max-width: 520px) { .arac-liste { grid-template-columns: 1fr; } }

/* İki dakikada Neds: dikey tanıtım reelleri */
.bolum--reeller .bolum__ic--dar { max-width: 1132px; }
.bolum--reeller .kiyas-tablo { max-width: 820px; margin-left: auto; margin-right: auto; margin-top: 40px; }
.reeller { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.reel-kart { position: relative; display: block; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #17191d; cursor: pointer; aspect-ratio: 9 / 16; text-align: left; isolation: isolate; transition: translate .25s ease, box-shadow .25s ease; }
.reel-kart:hover { translate: 0 -4px; box-shadow: 0 16px 34px rgba(16, 24, 40, .18); }
.reel-kart:focus-visible { outline: 3px solid var(--birincil); outline-offset: 3px; }
.reel-kart__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-kart::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(to top, rgba(10, 10, 14, .82), transparent); z-index: 1; }
.reel-kart__oynat { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding-left: 2px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #17191d; }
.reel-kart__yazi { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; display: grid; gap: 2px; color: #fff; }
.reel-kart__yazi strong { font-size: 14px; line-height: 1.25; font-weight: 700; }
.reel-kart__yazi small { font-size: 11.5px; line-height: 1.3; opacity: .8; }
.reeller__not { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--metin-orta); }
.reel-pencere { width: min(420px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #0f1013; color: #fff; }
.reel-pencere::backdrop { background: rgba(10, 12, 18, .78); }
.reel-pencere__video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 110px); aspect-ratio: 9 / 16; object-fit: contain; background: #000; }
.reel-pencere__alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.reel-pencere__alt strong { font-size: 15px; }
.reel-pencere__kapat { position: absolute; top: 10px; right: 10px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #17191d; font-size: 22px; line-height: 1; cursor: pointer; }
@media (max-width: 1000px) { .reeller { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .reeller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px -16px 0; padding: 0 16px 6px; scrollbar-width: none; }
  .reeller::-webkit-scrollbar { display: none; }
  .reel-kart { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .reel-kart { transition: none; } .reel-kart:hover { translate: none; } }