/*
 * xhesap.com — ortak stil (31 Ekim 2026). Tüm tanıtım sayfaları bunu yükler: renk belirteçleri, yazı tipleri,
 * tek tip ölçeği, butonlar, üst çubuk (hamburger menü dahil), alt bilgi.
 *
 * - Zeminler DÜZ renktir (gradyan ve ışık lekesi yok). Bölümler .koyu / .acik sınıflarıyla dönüşümlü gider;
 *   sınıf yalnızca belirteçleri değiştirir, bileşenler var(--…) kullandığı için iki zeminde de çalışır.
 * - Yazı: IBM Plex Sans (metin) + IBM Plex Mono (yalnız gerçek veri/rakam). Logo yazısı Poppins 600 kalır (marka).
 * - Yazı boyutu yalnızca --t1…--t7 ile verilir; başka px/rem/clamp yazmayın.
 */
:root {
  /* tip ölçeği */
  --t1: 13px; --t2: 15px; --t3: 17px; --t4: 20px; --t5: 26px; --t6: 34px; --t7: 48px; --t8: 64px;

  --govde: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --display: var(--govde);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --logo: "Poppins", var(--govde);

  /* marka mavisi: beyaz yazıyla ≥ 4,5:1 (#2b66e6 → 4,9:1), üzerine gelince koyulaşır (≥ 6:1) */
  --mavi: #2b66e6;
  --mavi-ustu: #2058cf;
  --mavi-yazi: #ffffff;

  /* KOYU zemin (varsayılan) */
  --zemin: #06142b;
  --zemin-2: #0a1f40;
  --yuzey: #0d2850;
  --cizgi: #214070;
  --cizgi-soft: #162f58;
  --yazi: #eef3fc;
  --yazi-2: #c3d1e8;
  --soluk: #93a7c7;
  --buz: #a9c8ff;
  --tuttu: #43d6a2;
  --fark: #f5b54a;
  --golge: rgba(0, 0, 0, .55);
  color-scheme: dark;
}
@media (max-width: 47.99rem) {
  :root { --t8: 40px; --t7: 34px; --t6: 26px; --t5: 20px; }
}

/* AÇIK zemin */
.acik {
  --zemin: #f5f5f7;
  --zemin-2: #ececf0;
  --yuzey: #ffffff;
  --cizgi: #d3dae8;
  --cizgi-soft: #e2e7f0;
  --yazi: #0d1a33;
  --yazi-2: #37455f;
  --soluk: #566580;
  --buz: #1c4cb5;
  --tuttu: #0a7650;
  --fark: #8a4f00;
  --golge: rgba(13, 26, 51, .18);
  color-scheme: light;
  background: var(--zemin);
  color: var(--yazi);
}
.acik-beyaz { --zemin: #ffffff; --zemin-2: #f5f5f7; --yuzey: #f5f5f7; --cizgi: #d8dce6; background: var(--zemin); }
.koyu {
  background: var(--zemin);
  color: var(--yazi);
}
/* açık bir bölümün içinde koyu kalması gereken parça (ekran görüntüsü kartları) */
.koyu-ic {
  --zemin: #06142b; --zemin-2: #0a1f40; --yuzey: #0d2850; --cizgi: #214070; --cizgi-soft: #162f58;
  --yazi: #eef3fc; --yazi-2: #c3d1e8; --soluk: #93a7c7; --buz: #a9c8ff; --tuttu: #43d6a2; --fark: #f5b54a;
  color-scheme: dark; color: var(--yazi);
}

* { box-sizing: border-box; }
html { background: var(--zemin); scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font-family: var(--govde); font-size: var(--t3); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
.sar { max-width: 76rem; margin-inline: auto; padding-inline: 20px; }
@media (min-width: 48rem) { .sar { padding-inline: 32px; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* odak halkası: her etkileşimli öğede görünür */
:focus-visible { outline: 3px solid var(--buz); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible, .btn-form:focus-visible { outline-offset: 3px; }
.acik :focus-visible { outline-color: #1c4cb5; }
.btn-ana:focus-visible, .giris-ac:focus-visible { outline-color: #ffffff; box-shadow: 0 0 0 5px var(--mavi-ustu); }
:where(.koyu, .acik) .btn-ana:focus-visible { outline-color: var(--yazi); box-shadow: none; }

/* bölüm üstü küçük başlık: normal yazı, vurgu rengi */
.etiket { font-family: var(--govde); font-size: var(--t2); font-weight: 600; color: var(--buz); letter-spacing: 0; text-transform: none; }

h1, h2, h3 { font-family: var(--display); }
h1 { font-weight: 700; font-size: var(--t7); line-height: 1.1; letter-spacing: -.02em; margin: 14px 0 0; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--buz); }
h2 { font-weight: 700; font-size: var(--t6); line-height: 1.15; letter-spacing: -.015em; margin: 12px 0 0; text-wrap: balance; max-width: 40rem; }
h3 { font-weight: 600; font-size: var(--t4); line-height: 1.3; letter-spacing: -.01em; margin: 0; }

/* ------------------------------------------------ buton */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--govde);
  font-weight: 600; font-size: var(--t3); line-height: 1.2; text-decoration: none; cursor: pointer;
  padding: 13px 22px; border-radius: 10px; border: 1px solid transparent;
}
.btn-ana { background: var(--mavi); color: var(--mavi-yazi); }
.btn-ana:hover { background: var(--mavi-ustu); }
.btn-ikincil { background: transparent; color: var(--yazi); border-color: var(--cizgi); }
.btn-ikincil:hover { border-color: var(--yazi); }
.btn-buyuk { font-size: var(--t4); padding: 16px 28px; border-radius: 12px; }
.dugmeler { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ------------------------------------------------ logo */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--yazi); }
.logo img { display: block; border-radius: 22%; }
.logo span { font-family: var(--logo); font-weight: 600; font-size: var(--t5); letter-spacing: -.03em; line-height: 1; }

/* ------------------------------------------------ üst çubuk */
.ustbar { position: sticky; top: 0; z-index: 50; width: 100%; background: var(--zemin); border-bottom: 1px solid var(--cizgi-soft); color: var(--yazi); }
.ustbar-ic { width: 100%; padding: 12px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; }
@media (min-width: 48rem) { .ustbar-ic { padding-inline: 32px; } }
.ustbar .logo img { height: 44px; width: auto; }
.ustbar-orta { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ustbar-sag { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.ustbar .demo-btn, .indir-ac {
  font: inherit; font-weight: 600; font-size: var(--t2); text-decoration: none; color: var(--yazi); cursor: pointer; background: transparent;
  padding: 9px 16px; border: 1px solid transparent; border-radius: 999px; white-space: nowrap;
}
.ustbar .demo-btn:hover, .indir-ac:hover { border-color: var(--cizgi); }
.ustbar .demo-btn[aria-current="page"] { border-color: var(--cizgi); }
.indir-ac[aria-expanded="true"] { border-color: var(--buz); color: var(--buz); }
.giris-ac {
  font: inherit; font-weight: 600; font-size: var(--t2); cursor: pointer; text-decoration: none; white-space: nowrap;
  padding: 9px 20px; border-radius: 999px; border: 1px solid transparent; background: var(--mavi); color: var(--mavi-yazi);
}
.giris-ac:hover { background: var(--mavi-ustu); }
.giris-ac[aria-expanded="true"] { background: transparent; border-color: var(--buz); color: var(--buz); }
.menu-ac { display: none; font: inherit; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--cizgi); background: transparent; color: var(--yazi); padding: 0; place-items: center; }
.menu-ac svg { display: block; }
.menu-ac .kapat-ikon { display: none; }
.menu-ac[aria-expanded="true"] .ac-ikon { display: none; }
.menu-ac[aria-expanded="true"] .kapat-ikon { display: block; }
.menu-panel { display: none; border-top: 1px solid var(--cizgi-soft); background: var(--zemin); }
.menu-panel.acik-menu { display: block; }
.menu-panel ul { list-style: none; margin: 0; padding: 8px 20px 16px; display: grid; }
.menu-panel a, .menu-panel button { display: flex; align-items: center; width: 100%; min-height: 48px; font: inherit; font-size: var(--t3); font-weight: 500; color: var(--yazi); text-decoration: none; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--cizgi-soft); padding: 8px 0; cursor: pointer; }
.menu-panel li:last-child a { border-bottom: 0; }
.menu-panel a:hover, .menu-panel button:hover { color: var(--buz); }
.menu-panel .menu-giris { margin-top: 12px; justify-content: center; border: 0; border-radius: 10px; background: var(--mavi); color: var(--mavi-yazi); font-weight: 600; }
.menu-panel .menu-giris:hover { background: var(--mavi-ustu); color: var(--mavi-yazi); }
@media (max-width: 77.99rem) {
  .ustbar-ic { display: flex; justify-content: space-between; }
  .ustbar-orta, .ustbar-sag .demo-btn, .ustbar-sag .indir-ac { display: none; }
  .menu-ac { display: grid; }
}
@media (max-width: 47.99rem) { .ustbar .logo img { height: 38px; } .logo span { font-size: var(--t4); } .giris-ac { padding: 8px 14px; } }

/* giriş ve indirme panelleri (üst çubuğun altında açılır) */
.giris-panel { border-top: 1px solid var(--cizgi-soft); background: var(--zemin-2); }
.giris-panel[hidden] { display: none; }
.giris-panel-ic { width: 100%; padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
@media (min-width: 48rem) { .giris-panel-ic { padding-inline: 32px; } }
.giris-kutu { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.giris-kutu input {
  font: inherit; font-size: var(--t2); color: var(--yazi); background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: 10px; padding: 10px 14px; width: 15rem; min-width: 0;
}
.giris-kutu input::placeholder { color: var(--soluk); }
.giris-kutu input:focus-visible { outline-offset: 1px; border-color: var(--buz); }
.giris-kutu button[type=submit] {
  font: inherit; font-weight: 600; font-size: var(--t2); cursor: pointer; white-space: nowrap;
  padding: 10px 22px; border-radius: 10px; border: 0; background: var(--mavi); color: var(--mavi-yazi);
}
.giris-kutu button[type=submit]:hover { background: var(--mavi-ustu); }
.giris-unuttum { font-size: var(--t1); color: var(--soluk); text-decoration: none; white-space: nowrap; }
.giris-unuttum:hover { color: var(--buz); text-decoration: underline; }
.giris-hata { flex-basis: 100%; margin: 0; padding: 10px 14px; border-radius: 10px; font-size: var(--t2); text-align: right; background: rgba(245, 181, 74, .12); border: 1px solid rgba(245, 181, 74, .45); color: var(--fark); }
.giris-hata[hidden] { display: none; }
.indir-ic { justify-content: flex-end; gap: 22px; align-items: center; }
.indir-qr { text-align: center; background: #fff; border-radius: 12px; padding: 8px 8px 4px; }
.indir-qr svg { display: block; }
.indir-qr small { display: block; color: #31405f; font-size: var(--t1); font-weight: 600; margin-top: 2px; }
.indir-metin { display: grid; gap: 8px; max-width: 24rem; }
.indir-metin b { font-size: var(--t3); }
.indir-metin span { color: var(--yazi-2); font-size: var(--t2); }
.indir-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.indir-link a { font-family: var(--mono); font-weight: 600; font-size: var(--t2); color: var(--buz); text-decoration: none; }
.indir-link button { font: inherit; font-size: var(--t1); font-weight: 600; cursor: pointer; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--cizgi); background: transparent; color: var(--yazi); }
.indir-link button:hover { border-color: var(--yazi); }
.indir-magaza { display: flex; gap: 8px; }
.indir-magaza a { font-weight: 600; font-size: var(--t2); text-decoration: none; color: var(--mavi-yazi); background: var(--mavi); padding: 9px 16px; border-radius: 10px; }
.indir-magaza a:hover { background: var(--mavi-ustu); }
@media (max-width: 47.99rem) { .giris-panel-ic { justify-content: stretch; } .giris-kutu { width: 100%; } .giris-kutu input { flex: 1 1 100%; width: auto; font-size: var(--t3); } .giris-kutu button[type=submit] { flex: 1 1 auto; } .giris-hata { text-align: left; } .indir-qr { display: none; } }

/* ------------------------------------------------ alt bilgi */
.alt { background: var(--zemin); border-top: 1px solid var(--cizgi-soft); padding-block: 40px 48px; }
.alt-ic { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.alt img { height: 30px; width: auto; display: block; }
.alt p { margin: 0; font-size: var(--t2); color: var(--soluk); line-height: 1.7; }
.alt p b { color: var(--yazi-2); font-weight: 600; }
.alt a { color: var(--yazi-2); }
.kunye { display: grid; gap: 6px; }
.logo-kucuk span { font-size: var(--t4); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

[hidden] { display: none !important; }