/* ══════════════════════════════════════════════════════════════════════
   Bitech Tahsilat — tanıtım sitesi
   Palet: ÜRÜNÜN KENDİ RENGİ (#5955D1). Ekran görüntüleriyle aynı dili
   konuşsun diye panelden alındı — bkz. :root açıklaması.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* 🔑 PALET PANELDEN GELİR, moda değil.
     Ekran görüntüleri #5955D1 mor; site turuncu olsaydı her görsel
     sayfayla çakışır ve iki ayrı ürün gibi görünürdü. Ara renkler de
     panelin kendi değişkenlerinden alındı (--bs-body-color, --bs-border-color). */
  --ana: #5955D1;
  --ana-koyu: #3F3BB0;
  --ana-soluk: #EFEEFC;
  --ana-cizgi: #DAD8F6;

  /* Mürekkep LACİVERT, nötr siyah değil: panelin gövde rengi (#14141F) ile
     markanın morunun arasında durur ve metin moru "yabancı" göstermez. */
  --murekkep: #171935;
  --metin: #26284A;
  /* ⚠ #696981 beyazda 4.9:1'di, açık lila zeminde 4.3'e düşüyordu (AA altı).
     Bir ton koyulaştırıldı; ikincil metin artık iki zeminde de okunur. */
  --metin-2: #5B5C78;
  --metin-3: #85869E;

  --zemin: #FFFFFF;
  /* Serin gri-lila: panelin kendi sayfa zemini (#F3F4F8) ile aynı aile. */
  --zemin-2: #F4F5FA;
  --cizgi: #E6E7F0;

  --yesil: #0E9F6E;
  --yesil-soluk: #E6F6F0;

  --yazi: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Mono YALNIZCA dekontta: termal fiş yazıcısının karşılığıdır, veri etiketi
     süsü değildir. Başka yerde kullanılmaz. */
  --yazi-fis: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --kap: 1200px;
  --r: 16px;
  --r-sm: 12px;
  --golge: 0 1px 2px rgba(22, 23, 43, .04), 0 10px 28px rgba(22, 23, 43, .06);
  --golge-buyuk: 0 6px 14px rgba(22, 23, 43, .05), 0 22px 54px rgba(22, 23, 43, .10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--yazi);
  color: var(--metin);
  background: var(--zemin);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  /* Tutarlar alt alta hizalı dursun: 1.080,00 ile 13.437,50 aynı sütunda. */
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { color: var(--murekkep); letter-spacing: -.018em; line-height: 1.16; margin: 0; }

/* Klavyeyle gezen herkes nerede olduğunu görsün — tek kural, her öğe. */
:focus-visible { outline: 3px solid var(--ana); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--ana-cizgi); color: var(--murekkep); }

.kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 24px; }

.atla {
  position: absolute; left: -9999px;
  background: var(--murekkep); color: #fff; padding: 12px 18px; border-radius: 8px;
}
.atla:focus { left: 16px; top: 16px; z-index: 200; }

/* ── İkonlar ──────────────────────────────────────────────────────── */
.ikon { width: 24px; height: 24px; flex: none; }
.ikon-sm { width: 17px; height: 17px; }

/* ── Düğmeler ─────────────────────────────────────────────────────── */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-weight: 600; font-size: 15px;
  font-family: inherit;
  /* ⚠ Düğme metni ASLA kırılmaz: 900–1100 px arasında "Bizimle İletişime
     Geçin" iki satıra düşüp üst çubuğu şişiriyordu. */
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.dugme:active { transform: translateY(1px); }
.dugme-buyuk { padding: 16px 30px; font-size: 16px; }

.dugme-ana { background: var(--ana); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px rgba(89, 85, 209, .24); }
.dugme-ana:hover { background: var(--ana-koyu); }

.dugme-sade { background: #fff; color: var(--murekkep); border-color: var(--cizgi); }
.dugme-sade:hover { border-color: var(--ana); color: var(--ana); }

.dugme-hayalet { background: transparent; color: var(--ana); border-color: var(--ana-cizgi); }
.dugme-hayalet:hover { background: var(--ana-soluk); }

/* ── Üst çubuk ────────────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 60;
  padding: 14px 0;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  transition: box-shadow .2s ease, background .2s ease;
}
.ust-dolu { box-shadow: 0 1px 0 var(--cizgi), 0 6px 24px rgba(16, 24, 40, .05); }
.ust-ic { display: flex; align-items: center; gap: 32px; }

.marka { display: inline-flex; align-items: center; gap: 10px; }
.marka-im { color: var(--ana); display: block; }
.marka-im svg { width: 32px; height: 32px; display: block; }
.marka-yazi {
  font-weight: 700; font-size: 19px; color: var(--murekkep); letter-spacing: -.03em;
}
.marka-yazi b { color: var(--ana); font-weight: 800; }

.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { font-size: 15px; font-weight: 500; color: var(--metin-2); white-space: nowrap; position: relative; }
.menu a:hover { color: var(--murekkep); }
/* Aktif sayfa: kalınlık yerine alt çizgi — kalın yazı menü genişliğini değiştirip
   öğeleri sayfadan sayfaya kaydırıyordu. */
.menu a.aktif { color: var(--murekkep); }
.menu a.aktif::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px; background: var(--ana);
}

.ust-sag { display: flex; align-items: center; gap: 16px; }
.tel-link {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 15px; font-weight: 600; color: var(--murekkep);
}
/* Telefon, menüyle butonun arasına sığmadığı genişlikte başlıktan çekilir;
   kapanış bölümünde ve alt bilgide zaten duruyor. */
@media (max-width: 1220px) { .ust-sag .tel-link { display: none; } }
.tel-link:hover { color: var(--ana); }

.menu-ac { display: none; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.menu-ac span { display: block; width: 22px; height: 2px; background: var(--murekkep); margin: 5px 0; border-radius: 2px; }

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 76px 0 72px; overflow: hidden; }
/* ⚠ Renk bulutu (radial blur) BİLİNÇLİ olarak kaldırıldı: rakibin en tanınan
   görsel imzası oydu ve benzerlik oradan geliyordu. Yerine düz, sakin bir
   lila zemin — panelin kendi zemini de böyle. */
.hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 100%;
  background: linear-gradient(180deg, var(--ana-soluk) 0%, rgba(240,239,252,0) 78%);
  z-index: -1;
}

.rozet {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px; margin-bottom: 26px;
  background: #fff; border: 1px solid var(--cizgi); border-radius: 100px;
  font-size: 13.5px; font-weight: 600; color: var(--metin-2);
  box-shadow: var(--golge);
}
.rozet-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--yesil); flex: none; }

.hero-izgara { display: grid; grid-template-columns: .92fr 1.08fr; gap: 48px; align-items: center; }

.hero h1 {
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
  max-width: 17ch; margin: 0 0 22px;
  text-wrap: balance;
}
/* ⚠ Başlıkta tek kelimeyi renklendirmek şablon izidir ve kaldırıldı; sınıf
   alt sayfalarda duruyor, artık yalnızca başlığın bir parçası. */
.hero h1 .vurgu { color: inherit; }

.hero-alt {
  font-size: 18.5px; color: var(--metin-2);
  max-width: 54ch; margin: 0 0 32px;
}
.hero-dugmeler { display: flex; gap: 14px; flex-wrap: wrap; }

/* Tanıtım dosyası bağlantısı.
   ⚠ ÜÇÜNCÜ BİR DÜĞME YAPILMADI: hero'da iki düğme var ve üçüncüsü ikisinin de
   ağırlığını düşürürdü. Burada asıl eylem "iletişime geçin"dir; PDF ikincil
   bir yoldur ve ikincil görünmelidir. */
.hero-indir { margin-top: 18px; font-size: 14.5px; }
.hero-indir a {
  color: var(--metin-2); text-decoration: none;
  border-bottom: 1px solid var(--ana-cizgi); padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.hero-indir a:hover { color: var(--ana); border-bottom-color: var(--ana); }
.hero-indir em { font-style: normal; color: var(--metin-3); }

.hero-kanit {
  display: flex; gap: 38px; flex-wrap: wrap;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--ana-cizgi);
}

.hero-kanit strong { display: block; font-size: 30px; font-weight: 700; color: var(--murekkep); line-height: 1.2; }
.hero-kanit span { font-size: 14.5px; color: var(--metin-2); }

/* ── Bölüm iskeleti ───────────────────────────────────────────────── */
.bolum { padding: 84px 0; }
.bolum-gri { background: var(--zemin-2); }
.bolum-murekkep { background: var(--murekkep); color: rgba(255, 255, 255, .78); }
.bolum-murekkep h2, .bolum-murekkep h3 { color: #fff; }

.bolum-bas { max-width: 660px; margin: 0 0 52px; }
.bolum-bas.orta { margin-left: auto; margin-right: auto; text-align: center; }
.bolum-bas:not(.orta) { max-width: 720px; }
.ust-etiket {
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ana);
}
.bolum-bas h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -.024em; margin-bottom: 14px; text-wrap: balance; }
.bolum-bas p { margin: 0; font-size: 17px; color: var(--metin-2); }
.bolum-murekkep .bolum-bas p { color: rgba(255, 255, 255, .68); }

/* ── Izgaralar ────────────────────────────────────────────────────── */
.izgara { display: grid; gap: 22px; }
.iz-2 { grid-template-columns: repeat(2, 1fr); }
.iz-3 { grid-template-columns: repeat(3, 1fr); }
.iz-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Özellik kartı ────────────────────────────────────────────────── */
/* 🔑 Kart değil LİSTE: özellikler bir katalog maddesidir, tıklanacak nesne
   değil. Kutu + gölge + üzerine gelince zıplama, tıklanabilir gibi durup
   hiçbir şey yapmıyordu. Artık ince çizgiyle ayrılmış, sakin bir döküm. */
.izgara:has(> .ozellik) { column-gap: 56px; row-gap: 0; }
.ozellik {
  display: flex; gap: 18px;
  padding: 26px 0;
  border-top: 1px solid var(--cizgi);
}
.ozellik-ikon {
  width: 44px; height: 44px; flex: none;
  border-radius: 12px;
  background: var(--ana-soluk); color: var(--ana);
  display: flex; align-items: center; justify-content: center;
}
.ozellik-ikon .ikon { width: 22px; height: 22px; }
.ozellik h3 { font-size: 18px; font-weight: 600; margin: 2px 0 6px; letter-spacing: -.01em; }
.ozellik p { margin: 0; font-size: 15.5px; color: var(--metin-2); max-width: 60ch; }

.ozellik-koyu { border-top-color: rgba(255, 255, 255, .12); }
.ozellik-koyu p { color: rgba(255, 255, 255, .66); }
.ozellik-koyu .ozellik-ikon { background: rgba(89, 85, 209, .16); }

/* ── Adımlar ──────────────────────────────────────────────────────── */
/* 🔑 Sitede numara taşıyan TEK yer: içerik gerçekten bir sıradır. Numaralar
   bir çizgiyle birbirine bağlanır — kutular yan yana değil, yol üzerinde. */
.izgara:has(> .adim) { gap: 0; position: relative; }
.izgara:has(> .adim)::before {
  content: ""; position: absolute; left: 22px; right: 33%; top: 22px;
  height: 2px; background: linear-gradient(90deg, var(--ana) 0%, var(--ana-cizgi) 100%);
}
.adim { position: relative; padding: 0 32px 0 0; }
.adim-no {
  position: relative;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--ana);
  box-shadow: 0 0 0 6px var(--zemin-2);
  margin-bottom: 22px;
}
.adim:not(:first-child) .adim-no { background: #fff; color: var(--ana); border: 2px solid var(--ana); }
.adim h3 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.adim p { margin: 0; font-size: 15.5px; color: var(--metin-2); }
@media (max-width: 860px) {
  .izgara:has(> .adim) { gap: 30px; }
  .izgara:has(> .adim)::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--ana), var(--ana-cizgi)); }
  .adim { padding: 0 0 0 68px; }
  .adim-no { position: absolute; left: 0; top: -4px; margin: 0; }
}

/* ── Sekmeler ─────────────────────────────────────────────────────── */
.sekmeler {
  display: inline-flex; gap: 4px; padding: 5px;
  background: var(--zemin-2); border: 1px solid var(--cizgi); border-radius: 100px;
  margin-bottom: 34px;
}
.sekme {
  border: 0; background: none; cursor: pointer;
  padding: 10px 22px; border-radius: 100px;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--metin-2);
}
.sekme:hover { color: var(--ana); }
.sekme.aktif { background: var(--ana); color: #fff; }

/* ── Banka / kurum kutuları ───────────────────────────────────────── */
/* Logo duvarı: ayrı ayrı kartlar yerine TEK tablo, ince iç çizgilerle.
   ⚠ Çizgi hücrenin OUTLINE'ıdır, zemin rengi değil: son satır eksik kaldığında
   (13 logo / 5 sütun) boş hücreler gri blok olarak görünmesin. */
.logo-izgara {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: #fff;
  border: 1px solid var(--cizgi); border-radius: var(--r);
  overflow: hidden;
}
.logo-kutu {
  outline: 1px solid var(--cizgi);
  background: #fff;
  min-height: 100px; padding: 20px 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  text-align: center;
}
.logo-ad { font-size: 14.5px; font-weight: 600; color: var(--murekkep); line-height: 1.35; }
.logo-aile { font-size: 11.5px; color: var(--metin-3); }

/* ── Karşılaştırma ────────────────────────────────────────────────── */
.karsi { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.karsi-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r); padding: 30px 32px; }
.karsi-kart.iyi { border-color: var(--ana-cizgi); box-shadow: var(--golge-buyuk); }
/* "Bugün" tarafı bir DEFTER SAYFASIDIR: kırmızı kenar çizgisi + satır çizgileri.
   Başlıktaki "defterde değil, panelde" cümlesinin görsel karşılığı.
   ⚠ Satır aralığı li yüksekliğiyle eşleşir (34 px); değişirse ikisi birlikte değişir. */
.karsi-kart.defter {
  background:
    linear-gradient(90deg, transparent 22px, rgba(214, 90, 90, .35) 22px, rgba(214, 90, 90, .35) 23px, transparent 23px),
    #FCFCFE;
  padding-left: 44px;
}
/* Çizgiler LİSTENİN satır yüksekliğine bağlı: satır 34 px, çizgi her satırın
   dibinde. İki satıra kırılan madde de çizgiye oturur. */
.karsi-kart.defter ul {
  background: repeating-linear-gradient(180deg, transparent 0 33px, #E1E3EE 33px 34px);
}
.karsi-kart.defter li { line-height: 34px; padding: 0; min-height: 0; }
.karsi-kart.defter li .ikon { margin-top: 8px; }
.karsi-baslik {
  display: block; margin-bottom: 14px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: var(--metin-2);
}
.karsi-kart.iyi .karsi-baslik { color: var(--murekkep); }
.karsi-kart ul { list-style: none; margin: 0; padding: 0; }
.karsi-kart li {
  display: flex; gap: 11px; align-items: flex-start;
  min-height: 34px; margin: 0; padding: 5px 0; font-size: 15.5px; line-height: 1.5; color: var(--metin-2);
}
.karsi-kart.defter li span { text-decoration: line-through; text-decoration-color: rgba(38, 40, 74, .28); }
.karsi-kart .ikon { width: 19px; height: 19px; margin-top: 3px; color: var(--metin-3); }
.karsi-kart.iyi .ikon { color: var(--ana); }
.karsi-kart.iyi li { color: var(--metin); }

/* ── Ekran çerçevesi ──────────────────────────────────────────────── */
.ekranlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cerceve {
  margin: 0; background: #fff; border: 1px solid var(--cizgi);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--golge);
}
.cerceve-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px; background: var(--zemin-2); border-bottom: 1px solid var(--cizgi);
}
.cerceve-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D7DBE5; }
.cerceve-bar em {
  margin-left: 8px; font-style: normal; font-size: 11.5px; color: var(--metin-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cerceve img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  background: var(--zemin-2);
}
.cerceve figcaption { padding: 15px 18px; font-size: 14px; color: var(--metin-2); }

/* ── Kapanış çağrısı ──────────────────────────────────────────────── */
.cagri { background: var(--murekkep); padding: 68px 0; }
.cagri-ic {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.cagri h2 { color: #fff; font-size: clamp(24px, 3vw, 34px); font-weight: 800; margin-bottom: 10px; }
.cagri p { margin: 0; color: rgba(255, 255, 255, .68); max-width: 52ch; }
.cagri-dugmeler { display: flex; gap: 12px; flex-wrap: wrap; }
.cagri .dugme-sade { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.cagri .dugme-sade:hover { border-color: #fff; color: #fff; }

/* ── Form ─────────────────────────────────────────────────────────── */
.form-sarma { display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: start; }
.form {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 34px; box-shadow: var(--golge-buyuk);
}
.form h2 { font-size: 22px; margin-bottom: 6px; }
.form-not-ust { margin: 0 0 24px; font-size: 14.5px; color: var(--metin-2); }
.form label { display: block; margin-bottom: 15px; font-size: 14px; font-weight: 600; color: var(--murekkep); }
.form input, .form select, .form textarea {
  width: 100%; margin-top: 7px; padding: 12px 14px;
  border: 1.5px solid var(--cizgi); border-radius: 10px;
  font: inherit; font-size: 15px; font-weight: 400; color: var(--metin);
  background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--ana); box-shadow: 0 0 0 4px rgba(89, 85, 209, .12);
}
.form textarea { resize: vertical; }
.ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.istege { font-weight: 400; color: var(--metin-3); }
.form-not { margin: 14px 0 0; font-size: 12.5px; color: var(--metin-3); }
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; }

.iletisim-kutu { list-style: none; margin: 34px 0 0; padding: 0; }
.iletisim-kutu li { display: flex; gap: 15px; margin-bottom: 24px; }
.iletisim-kutu strong { display: block; color: var(--murekkep); margin-bottom: 2px; }
.iletisim-kutu div { font-size: 15px; color: var(--metin-2); }
.ik-ikon {
  width: 46px; height: 46px; flex: none; border-radius: 13px;
  background: var(--ana-soluk); color: var(--ana);
  display: flex; align-items: center; justify-content: center;
}

.uyari {
  padding: 15px 18px; border-radius: 12px; margin-bottom: 22px;
  font-size: 14.5px; border: 1px solid;
}
.uyari-hata { background: #FEF2F2; border-color: #FECACA; color: #B42318; }
.uyari-tamam { background: var(--yesil-soluk); border-color: #A6E4CE; color: #05684C; }
/* Nötr bilgi kutusu — hata da başarı da değil, "bunu bilerek karar ver". */
.uyari-bilgi {
  background: var(--zemin-2); border-color: var(--cizgi); color: var(--metin-2);
}
.uyari-bilgi strong { color: var(--metin); }

/* ── Alt bilgi ────────────────────────────────────────────────────── */
.alt { background: var(--zemin-2); border-top: 1px solid var(--cizgi); padding: 58px 0 26px; }
.alt-izgara { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 34px; }
.alt-metin { margin: 16px 0 0; font-size: 14.5px; color: var(--metin-2); }
.alt-sutun h3 { font-size: 14px; margin-bottom: 14px; }
.alt-sutun a { display: block; margin-bottom: 9px; font-size: 14.5px; color: var(--metin-2); }
.alt-sutun a:hover { color: var(--ana); }
.alt-son {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--cizgi);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.alt-son p { margin: 0; font-size: 13px; color: var(--metin-3); }
.alt-not { max-width: 60ch; }

/* ── Duyarlı ──────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .iz-4 { grid-template-columns: repeat(2, 1fr); }
  .logo-izgara { grid-template-columns: repeat(4, 1fr); }
  .form-sarma { grid-template-columns: 1fr; gap: 40px; }
  .alt-izgara { grid-template-columns: 1fr 1fr; }
}

/* 🔑 Menü 980 px'te katlanır (eskiden 860): 860–1100 arasında beş bağlantı +
   telefon + düğme yan yana sığmıyor, "Ana Sayfa" iki satıra kırılıyordu. */
@media (max-width: 980px) {
  .menu {
    position: absolute; inset: 70px 16px auto 16px;
    flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--cizgi); border-radius: var(--r);
    padding: 14px; box-shadow: var(--golge-buyuk);
    display: none;
  }
  .menu.acik { display: flex; animation: menu-ac .18s ease-out; }
  .menu a { padding: 11px 8px; border-radius: 8px; }
  .menu a:hover { background: var(--zemin-2); }
  .menu a.aktif { background: var(--ana-soluk); }
  .menu a.aktif::after { display: none; }
  .menu-ac { display: block; margin-left: 0; }
  .ust-sag { margin-left: auto; }
}
@keyframes menu-ac { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (max-width: 860px) {
  .iz-2, .iz-3 { grid-template-columns: 1fr; }
  .ekranlar { grid-template-columns: 1fr; }
  .karsi { grid-template-columns: 1fr; }
  .logo-izgara { grid-template-columns: repeat(2, 1fr); }
  .bolum { padding: 60px 0; }
  .hero { padding: 56px 0 54px; }
  .hero-kanit { gap: 26px; }
  .alt-izgara { grid-template-columns: 1fr; }
  .ikili { grid-template-columns: 1fr; }
}

/* Menü içindeki buton ve telefon — YALNIZCA dar ekranda görünür.
   Geniş ekranda ikisi de başlıkta duruyor, burada tekrar edilmez. */
.menu-dugme, .menu-tel { display: none; }

@media (max-width: 620px) {
  /* 🔑 Başlıkta yalnızca LOGO + HAMBURGER kalır.
     Buton burada dururken üçü yan yana sığmıyor, buton iki satıra kırılıyor
     ve üst bar şişiyordu. Kayıp yok: hemen altındaki hero'da zaten
     "Ücretsiz Demo Talep Edin" var, buton da menünün içine indi. */
  .ust-sag { display: none; }

  /* ⚠ Renk BURADA tekrar veriliyor ve gerekli: ".menu a" seçicisi
     (.dugme-ana'dan daha özgül) butonun beyaz yazısını eziyordu — mor zeminde
     gri yazı çıkıyordu. İki sınıflı seçici o kuralı yener. */
  .menu .menu-dugme {
    display: block;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    color: #fff;
  }
  .menu .menu-dugme:hover { color: #fff; }
  .menu-tel {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 10px; padding-top: 12px;
    border-top: 1px solid var(--cizgi);
    font-size: 15px; font-weight: 600; color: var(--murekkep);
  }

  /* Logo tek başına kaldığı için biraz nefes alsın ama şişmesin. */
  .marka-logo { height: 26px; }
}

@media (max-width: 520px) {
  .ust-sag .dugme { padding: 10px 16px; font-size: 14px; }
  .logo-izgara { grid-template-columns: repeat(2, 1fr); }
  .logo-kutu { min-height: 78px; padding: 14px 10px; }
  .logo-gorsel { max-width: 112px; }
  .hero-kanit { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px; }
  .hero-kanit strong { font-size: 26px; }
  .hero-kanit span { font-size: 13.5px; line-height: 1.35; display: block; }
}


/* ── Banka logoları ───────────────────────────────────────────────────
   🔑 Logo dosyası VARSA görsel, yoksa bankanın adı yazılır. Böylece
   logolar tek tek eklendikçe site kendiliğinden zenginleşir; eksik
   logo "kırık görsel" olarak DEĞİL, düzgün bir yazı olarak görünür. */
.logo-gorsel {
  max-height: 30px; max-width: 132px;
  width: auto; margin: 0 auto;
  /* ⚠ Banka logoları çok farklı renklerde; gri zeminde hepsi aynı
     ağırlıkta dursun diye hafif doygunluk düşürülüyor, hover'da açılıyor. */
  filter: saturate(.92);
  transition: filter .18s ease, transform .18s ease;
}
.logo-kutu:hover .logo-gorsel { filter: saturate(1); transform: scale(1.03); }

/* Hero görseli: sağ sütunda, hafif yükseltilmiş. */
.hero-gorsel { box-shadow: var(--golge-buyuk); }
.hero-gorsel img { aspect-ratio: 16 / 11; }

@media (max-width: 980px) {
  .hero-izgara { grid-template-columns: 1fr; gap: 36px; }
  .hero h1 { max-width: none; }
}


/* ── Grup başlıkları (Bankalar sayfası) ──────────────────────────────
   🔑 Durum artık kutunun köşesindeki rozetle değil, BAŞLIKLA anlatılıyor.
   Rozet logonun üstüne biniyordu; ayrıca "kaç tanesi hazır" sorusu bu
   düzende tek bakışta yanıtlanıyor. */
.grup-bas {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 6px;
}
.grup-bas-ikinci { margin-top: 52px; }
.grup-bas h3 { font-size: 19px; font-weight: 700; }
.grup-sayi {
  font-size: 13px; font-weight: 600; color: var(--ana);
  background: var(--ana-soluk); padding: 3px 11px; border-radius: 100px;
}
.grup-alt {
  margin: 0 0 22px; font-size: 14.5px; color: var(--metin-2); max-width: 66ch;
}

/* ⚠ Yol haritasındaki bankalar SOLUK gösterilir: kullanıcı hangisinin
   bugün hazır olduğunu okumadan da görsün. Üstüne gelince netleşir —
   bilgi gizlenmiyor, yalnızca ikinci plana alınıyor. */
.logo-izgara-soluk .logo-kutu { background: var(--zemin-2); }
.logo-izgara-soluk .logo-gorsel { filter: saturate(.25) opacity(.75); }
.logo-izgara-soluk .logo-kutu:hover .logo-gorsel { filter: saturate(1) opacity(1); }
.logo-izgara-soluk .logo-ad { color: var(--metin-2); }

/* ══ PAKET ══════════════════════════════════════════════════════════════
   Tek paket kartı. ⚠ "Dahil olmayanlar" sütunu bilinçli olarak eşit
   ağırlıkta: sanal POS komisyonunun bize ödenmediğini gizlemek, ilk
   faturada tartışma çıkarır.
   ═══════════════════════════════════════════════════════════════════════ */
.paket-kart {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 0;
  border: 1px solid var(--cizgi);
  border-radius: 18px;
  overflow: hidden;
  background: var(--zemin);
  box-shadow: 0 10px 30px rgba(22, 23, 43, .05);
}

/* Fiyat paneli: KOYU mor zemin + yavas suzulen dalga.
   🔑 Zemin koyulasinca ustundeki HER SEY yeniden renklendirilmek zorundadir
      (tutar, not, buton). Yalnizca arka plani degistirmek gri yazilari
      okunamaz hale getirirdi -- sitede bunun bir ornegi zaten var (mobil
      menu butonu, ~satir 409).
   ⚠ Dalga SUS DEGIL, dikkat yonlendiricidir: sayfadaki tek koyu blok budur,
      goz once fiyata gider. Bu yuzden hareket YAVAS ve DUSUK KONTRASTTIR;
      hizli ya da parlak bir animasyon fiyati okutmak yerine gozu kacirir. */
.paket-fiyat {
  position: relative;
  isolation: isolate;                 /* dalga kartin disina tasmasin */
  overflow: hidden;
  background: linear-gradient(158deg, #4A46C4 0%, #3B37A6 55%, #2E2B84 100%);
  border-right: 0;
  padding: 44px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* Iki yumusak isik lekesi. AYRI katmanlar cunku farkli hizlarda suzuluyorlar;
   tek katman olsaydi hareket mekanik ve tekrarli gorunurdu. */
.paket-fiyat::before,
.paket-fiyat::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 45% 55% 52% 48% / 48% 45% 55% 52%;
  pointer-events: none;               /* butonun tiklanmasini engellemesin */
}
.paket-fiyat::before {
  width: 150%; aspect-ratio: 1;
  left: -35%; bottom: -70%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.20), rgba(255,255,255,0) 62%);
  animation: paket-dalga 22s ease-in-out infinite;
}
.paket-fiyat::after {
  width: 115%; aspect-ratio: 1;
  right: -45%; top: -55%;
  background: radial-gradient(circle at 60% 60%, rgba(140,255,235,.16), rgba(255,255,255,0) 60%);
  animation: paket-dalga 30s ease-in-out infinite reverse;
}

@keyframes paket-dalga {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(4%, -6%, 0) rotate(120deg) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) rotate(240deg) scale(1); }
}

/* 🔴 Hareket bir TERCIHTIR. Isletim sisteminde "animasyonlari azalt" acik olan
   kullanicida dalga DURUR: gorsel kaybolmaz, yalnizca hareketsiz kalir. */
@media (prefers-reduced-motion: reduce) {
  .paket-fiyat::before,
  .paket-fiyat::after { animation: none; }
}

.paket-tutar {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 1px 12px rgba(16, 14, 60, .28);
}
.paket-tutar span { font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, .72); }
.paket-tutar-yok { font-size: 26px; letter-spacing: -.4px; }

/* ⚠ .72 alfa bilincli: beyaza yaklastikca tutardan ayrismiyor, dusurulunce
   koyu zeminde okunmuyor. KDV notu okunmali ama fiyatla yarismamali. */
.paket-not { font-size: 14px; color: rgba(255, 255, 255, .72); margin: 0; }

/* Senelik odeme kutusu. Butonun HEMEN USTUNDE durur ve sirasi bilincli:
   fiyat -> KDV notu -> tesvik -> cagri. Tesvik butonun ALTINA konsaydi
   okuyucu karari zaten vermis olurdu; en ise yarayacagi an, butona basmadan
   hemen oncesidir.
   ⚠ Zemin beyazin dusuk alfasi: koyu morun uzerinde ayri bir RENK kullanmak
      panelde ucuncu bir ton yaratir ve dalgayla carpisirdi. */
.paket-yillik {
  margin-top: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  display: grid;
  gap: 3px;
}
.paket-yillik strong {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -.1px;
}
/* .62 alfa: KDV notundan (.72) BIR TIK soluk. Ikisi esit olsaydi panelde ayni
   agirlikta iki kucuk yazi olur, goz hangisini once okuyacagini bilemezdi. */
.paket-yillik span { font-size: 13px; color: rgba(255, 255, 255, .62); line-height: 1.45; }
/* Buton: koyu mor zeminde mor buton gorunmez olurdu -- ters cevrildi. */
.paket-fiyat .dugme-ana {
  background: #fff;
  color: var(--ana-koyu);
  box-shadow: 0 6px 20px rgba(12, 10, 48, .28);
}
.paket-fiyat .dugme-ana:hover {
  background: #fff;
  color: #2E2B84;
  box-shadow: 0 10px 26px rgba(12, 10, 48, .36);
  transform: translateY(-1px);
}

.paket-icerik {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 40px 32px;
}
.paket-icerik h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--murekkep);
  margin: 0 0 16px;
}

.paket-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paket-liste li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--metin);
  line-height: 1.5;
}
.paket-liste li::before {
  position: absolute;
  left: 0;
  top: 1px;
  font-weight: 700;
}
.paket-var li::before { content: "✓"; color: var(--ana); }
.paket-yok li::before { content: "—"; color: var(--metin-3); }
.paket-yok li { color: var(--metin-2); }

@media (max-width: 900px) {
  .paket-kart { grid-template-columns: 1fr; }
  /* Koyu zeminde acik gri cizgi gorunmez; ayrim zaten renkle yapiliyor. */
  .paket-fiyat { border-right: 0; border-bottom: 0; }
  .paket-icerik { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* == EKRAN BÜYÜTME =========================================================
   Kartın içinde görsel ~400 px; o boyutta rakamlar okunmuyor. Tıklayınca
   tam ekran açılır. Kütüphane yok, ~40 satır CSS.
   ========================================================================= */
[data-buyutulebilir] { cursor: zoom-in; }
[data-buyutulebilir]:focus-visible { outline: 3px solid var(--ana); outline-offset: 4px; }

/* Büyüt ipucu — görselin üstünde, yalnızca üzerine gelince. */
[data-buyutulebilir] { position: relative; }
[data-buyutulebilir]::after {
  content: "Büyütmek için tıklayın";
  position: absolute;
  right: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(22, 23, 43, .82);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
[data-buyutulebilir]:hover::after,
[data-buyutulebilir]:focus-visible::after { opacity: 1; }

.buyutec {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(22, 23, 43, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
}
.buyutec[hidden] { display: none; }

.buyutec img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.buyutec-kapat {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.buyutec-kapat:hover { background: rgba(255, 255, 255, .22); }

@media (max-width: 700px) {
  .buyutec { padding: 14px; }
  /* Dokunmatikte :hover yok — ipucu hep görünsün. */
  [data-buyutulebilir]::after { opacity: 1; }
}

/* Kurumsal logo — başlıkta ve alt bilgide. Yükseklik sabit, genişlik oranla.
   ⚠ Yükseklik veriliyor, genişlik değil: logo bir gün daha uzun bir yazıyla
   güncellenirse satır yüksekliği bozulmaz, yalnızca yana uzar. */
.marka-logo { height: 30px; width: auto; display: block; }
.marka-logo-alt { height: 34px; }
@media (max-width: 560px) {
  .marka-logo { height: 25px; }
  .marka-logo-alt { height: 29px; }
}

/* ══ HERO SAHNESİ + DEKONT ════════════════════════════════════════════════
   🔑 Sitenin TEK hareketli anı. Ekran görüntüsünün önünde örnek bir tahsilat
   dekontu satır satır "basılır" ve banka onayıyla biter: ürünün ne yaptığını
   tek bakışta söyler. Dekont üründe gerçekten var (/bayi/odeme/dekont).
   ⚠ Rakamlar gerçek bir testin oranıdır (%7,5 · 3 taksit); "Örnek" yazısı
   bunun bir müşterinin işlemi OLMADIĞINI açıkça söyler.
   ⚠ Başka bölümlere giriş animasyonu EKLENMEZ — tek an, dağınık efektten iyidir.
   ═════════════════════════════════════════════════════════════════════════ */
.hero-sahne { position: relative; padding: 0 0 56px 64px; }
.hero-sahne .hero-gorsel { transform: none; }

.dekont {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  width: 272px;
  background: #fff;
  padding: 20px 20px 22px;
  font-family: var(--yazi-fis);
  font-size: 12.5px; line-height: 1.55; color: var(--murekkep);
  border-radius: 6px 6px 0 0;
  /* Gölge filtreyle: alttaki tırtıklı kenar da gölge alsın (box-shadow almazdı). */
  filter: drop-shadow(0 18px 30px rgba(23, 25, 53, .16)) drop-shadow(0 2px 4px rgba(23, 25, 53, .08));
  transform-origin: 50% 0;
  animation: dekont-cik .5s cubic-bezier(.2, .7, .2, 1) .25s both;
}
/* Kâğıdın kopartılmış alt kenarı. */
.dekont::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px;
  background: conic-gradient(from -45deg at 50% 100%, #fff 90deg, transparent 0) 50% 0 / 14px 100%;
}
.dekont-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #C9CBDA; }
.dekont-bas strong { font-family: var(--yazi); font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.dekont-bas span { color: var(--metin-3); font-size: 11.5px; }

.dekont-govde { margin: 0; }
.dekont-satir { display: flex; justify-content: space-between; gap: 12px; }
.dekont-satir dt { color: var(--metin-2); }
.dekont-satir dd { margin: 0; text-align: right; }
.dekont-ara { border-top: 1px dashed #C9CBDA; margin: 9px 0; }
.dekont-toplam dt, .dekont-toplam dd { font-weight: 600; color: var(--murekkep); font-size: 14px; }

.dekont-muhur {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 9px 11px;
  border: 1.5px solid var(--yesil); border-radius: 8px;
  color: #077A54; background: var(--yesil-soluk);
  font-family: var(--yazi); font-size: 13.5px; font-weight: 600;
}
.dekont-muhur .ikon { width: 18px; height: 18px; }

/* Basılma: satırlar yazıcıdan çıkar gibi yukarıdan aşağı açılır (adımlı), en
   sonda onay mührü basılır. Toplam ~2,4 sn; bir kez oynar. */
.dekont-govde { clip-path: inset(0 0 100% 0); animation: dekont-bas 1.3s steps(9, end) .8s forwards; }
.dekont-muhur { opacity: 0; animation: dekont-muhur .45s cubic-bezier(.3, 1.5, .5, 1) 2.2s forwards; }

@keyframes dekont-cik { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dekont-bas { to { clip-path: inset(0 0 0 0); } }
@keyframes dekont-muhur { from { opacity: 0; transform: scale(1.18) rotate(-2deg); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dekont, .dekont-govde, .dekont-muhur { animation: none; clip-path: none; opacity: 1; }
  .menu.acik { animation: none; }
}

@media (max-width: 980px) {
  .hero-sahne { padding: 0 0 40px 40px; max-width: 640px; }
}
@media (max-width: 560px) {
  .hero-sahne { padding: 0 0 170px 0; }
  .dekont { left: 50%; margin-left: -130px; width: 260px; }
}

/* Hamburger → çarpı: menünün açık olduğunu düğmenin kendisi söyler. */
.menu-ac span { transition: transform .2s ease, opacity .2s ease; }
.menu-ac[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-ac[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-ac[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══ İLETİŞİM HARİTASI ════════════════════════════════════════════════════
   Harita yeri, Google yüklenmeden önce SAKİN bir sokak dokusu gösterir
   (CSS çizgileri, görsel dosya yok). Tıklanınca aynı kutuya iframe oturur,
   yükseklik değişmez — sayfa zıplamaz. */
.harita {
  margin-top: 34px;
  border: 1px solid var(--cizgi); border-radius: var(--r);
  overflow: hidden; background: #fff;
}
.harita-yer {
  position: relative; height: 240px;
  display: grid; place-items: center;
  background:
    linear-gradient(28deg, transparent 47%, #fff 47% 53%, transparent 53%),
    linear-gradient(118deg, transparent 58%, #fff 58% 61%, transparent 61%),
    linear-gradient(0deg, transparent 72%, #fff 72% 74%, transparent 74%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.7) 46px 48px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.7) 38px 40px),
    #E9EAF3;
}
.harita-yer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.harita-pin {
  width: 48px; height: 48px; border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  background: var(--ana); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 22px rgba(89, 85, 209, .35);
}
.harita-pin .ikon { transform: rotate(45deg); width: 22px; height: 22px; }
.harita-alt {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-top: 1px solid var(--cizgi);
}
.harita-alt strong { display: block; color: var(--murekkep); }
.harita-alt span { font-size: 14.5px; color: var(--metin-2); }
.harita-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.harita-dugmeler .dugme { padding: 10px 16px; font-size: 14px; }
.harita-not { margin: 0; padding: 0 18px 14px; font-size: 12.5px; color: var(--metin-3); }

/* ⚠ Izgara çocukları varsayılan olarak içeriklerinden daralamaz: formdaki
   Turnstile kutusunun en az genişliği 390 px ekranda sayfayı 4 px taşırıyordu. */
.form-sarma > * { min-width: 0; }
@media (max-width: 520px) { .form { padding: 24px 18px; } }