/* =========================================================
   WATTICA — ORTAK STİL DOSYASI
   Tüm sayfalar bu dosyayı kullanır.
   Renk, font veya boşluk değiştirmek için önce aşağıdaki
   "TASARIM DEĞİŞKENLERİ" bölümüne bakın: tek satır değişir,
   bütün site güncellenir.
   ========================================================= */

/* ---------- FONT (siteyle birlikte barındırılır, Google'a istek gitmez) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Etiketler ve rakam açıklamaları için eş aralıklı yazı tipi (IBM Plex Mono, OFL lisanslı) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- TASARIM DEĞİŞKENLERİ ---------- */
:root {
  /* Marka renkleri */
  --lacivert: #041E42;        /* logo rengi; başlıklar ve koyu bölümler */
  --lacivert-2: #0B2C5A;      /* koyu bölümlerde kart zemini */
  --turuncu: #EA580C;         /* vurgu: butonlar, büyük rakamlar, ikonlar */
  --turuncu-koyu: #C2410C;    /* küçük turuncu yazılar ve buton üzerine gelince */
  --turuncu-acik: #FFF4EC;    /* çok açık turuncu zemin */

  /* Nötr renkler */
  --metin: #334155;           /* gövde metni */
  --metin-soluk: #64748B;     /* açıklamalar, dipnotlar */
  --cizgi: #E2E8F0;           /* kart kenarları, ayırıcılar */
  --zemin: #FFFFFF;
  --zemin-gri: #F5F7FA;       /* alternatif bölüm zemini */

  /* Tipografi */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Ölçüler */
  --icerik-genislik: 1200px;
  --kenar-bosluk: 24px;
  --bolum-bosluk: 96px;       /* bölümler arası dikey boşluk */
  --kose: 12px;               /* kart köşe yuvarlaklığı */
}

/* ---------- TEMEL ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  font-weight: 450;
  line-height: 1.65;
  color: var(--metin);
  background: var(--zemin);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--turuncu-koyu); }
h1, h2, h3, h4 { color: var(--lacivert); line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: clamp(28px, 3.2vw, 38px); font-weight: 800; letter-spacing: -0.02em; }
h3 { font-size: 20px; font-weight: 700; }
p { margin: 0; }

.kapsayici { max-width: var(--icerik-genislik); margin: 0 auto; padding: 0 var(--kenar-bosluk); }
.bolum { padding: var(--bolum-bosluk) 0; }
.bolum--gri { background: var(--zemin-gri); }
.bolum--koyu { background: var(--lacivert); color: #CBD5E1; }
.bolum--koyu h2, .bolum--koyu h3 { color: #FFFFFF; }

.ust-etiket {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--turuncu-koyu); margin-bottom: 16px;
}
.bolum--koyu .ust-etiket { color: #FDBA74; }
.bolum-baslik { max-width: 760px; margin-bottom: 48px; }
.bolum-baslik p:not(.ust-etiket) { margin-top: 16px; font-size: 18px; }

.atla-link { position: absolute; left: -9999px; }
.atla-link:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }

/* ---------- BUTONLAR ---------- */
.buton {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
  padding: 14px 24px; border-radius: 8px; border: 2px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.buton--birincil { background: var(--turuncu); color: #FFFFFF; }
.buton--birincil:hover { background: var(--turuncu-koyu); }
.buton--ikincil { background: transparent; color: var(--lacivert); border-color: var(--cizgi); }
.buton--ikincil:hover { border-color: var(--lacivert); }
.buton--kucuk { padding: 10px 18px; font-size: 15px; }
.metin-link { font-weight: 700; color: var(--turuncu-koyu); text-decoration: none; }
.metin-link:hover { text-decoration: underline; }
.bolum--koyu .metin-link { color: #FDBA74; }

/* ---------- ÜST MENÜ (HEADER) ---------- */
.ust-menu {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.ust-menu .kapsayici { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.logo img { height: 34px; width: auto; }
.menu-linkler { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.menu-linkler a { color: var(--lacivert); text-decoration: none; font-weight: 600; font-size: 15px; }
.menu-linkler a:hover, .menu-linkler a[aria-current="page"] { color: var(--turuncu-koyu); }
.menu-linkler .buton { color: #fff; }
.menu-dugme { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--lacivert); }

/* ---------- HERO ----------
   Koyu lacivert zemin, solda metin. Rakam şeridi ayrı bantta (.olgu-bant).
*/
.hero { position: relative; overflow: hidden; background: var(--lacivert); color: #CBD5E1; padding: 112px 0 120px; }
.hero .kapsayici { position: relative; z-index: 1; }
.hero-metin { max-width: 780px; }
.hero .ust-etiket { color: #FDBA74; }
.hero h1 { color: #FFFFFF; margin-bottom: 24px; }
.hero-alt { font-size: 19px; color: #CBD5E1; max-width: 640px; }
.hero-butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.hero .buton--ikincil { color: #FFFFFF; border-color: rgba(255,255,255,0.28); }
.hero .buton--ikincil:hover { border-color: #FFFFFF; }

/* ---------- OLGU BANDI (hero'nun hemen altında, açık zemin) ---------- */
.olgu-bant { background: var(--zemin-gri); border-bottom: 1px solid var(--cizgi); padding: 64px 0 40px; }
.olgu-serit { display: grid; grid-template-columns: repeat(3, 1fr); }
.olgu { padding: 4px 32px 8px 0; }
.olgu + .olgu { padding-left: 32px; border-left: 1px solid var(--cizgi); }
.olgu-etiket { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--turuncu-koyu); }
.olgu-deger { display: block; margin: 14px 0 10px; font-size: 52px; font-weight: 800; letter-spacing: -0.03em; color: var(--lacivert); line-height: 1; }
.olgu-deger--vurgu { color: var(--turuncu); }
.olgu p { font-size: 16px; line-height: 1.5; color: var(--metin); max-width: 300px; }
.olgu-not { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--cizgi); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--metin-soluk); }
.olgu-not a { color: var(--turuncu-koyu); }

.grafik-kart {
  background: #FFFFFF; border: 1px solid var(--cizgi); border-radius: 14px; padding: 24px;
  box-shadow: 0 16px 40px rgba(4, 30, 66, 0.08);
}
.grafik-kart-ust { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.grafik-kart-ust strong { color: var(--lacivert); font-size: 15px; }
.grafik-kart-ust span { font-size: 12px; color: var(--metin-soluk); }
.grafik-lejant { display: flex; gap: 20px; font-size: 13px; margin-bottom: 8px; }
.grafik-lejant span { display: inline-flex; align-items: center; gap: 8px; }
.grafik-lejant i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }

/* ---------- NEDEN ŞİMDİ: ZAMAN ÇİZELGESİ ---------- */
.neden .kapsayici { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.neden-metin p + p { margin-top: 16px; }
.neden-metin .metin-link { display: inline-block; margin-top: 24px; }
.zaman { list-style: none; margin: 0; padding: 0; position: relative; }
.zaman::before { content: ""; position: absolute; left: 19px; top: 12px; bottom: 12px; width: 2px; background: var(--cizgi); }
.zaman li { position: relative; padding-left: 60px; padding-bottom: 28px; }
.zaman li:last-child { padding-bottom: 0; }
.zaman-nokta {
  position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 800;
  background: #fff; border: 2px solid var(--cizgi); color: var(--metin-soluk);
}
.zaman li.simdi .zaman-nokta { border-color: var(--turuncu); color: var(--turuncu-koyu); }
.zaman li.gelecek .zaman-nokta { border-style: dashed; border-color: var(--lacivert); color: var(--lacivert); }
.zaman-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 18px 20px; }
.zaman li.simdi .zaman-kart { border-color: #FED7AA; background: var(--turuncu-acik); }
.zaman-kart h3 { font-size: 17px; margin-bottom: 6px; }
.zaman-kart p { font-size: 15px; }

/* ---------- ÖLÇÜLMÜŞ SONUÇLAR: ŞELALE GRAFİĞİ ---------- */
.sonuc-duzen { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; }
.selale {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 32px 28px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.selale-alan { height: 260px; display: flex; flex-direction: column; justify-content: flex-end; }
.selale-kalan {
  height: calc(var(--kalan) * 1%); background: var(--lacivert); border-radius: 6px 6px 0 0;
  display: flex; justify-content: center; padding-top: 10px; color: #fff; font-weight: 800; font-size: 17px;
}
.selale-kalan--baslangic { background: #94A3B8; }
.selale-kalan--son { background: var(--turuncu); }
.selale-dusus {
  height: calc(var(--dusus) * 1%); border: 2px dashed #FDBA74; border-bottom: 0; border-radius: 6px 6px 0 0;
  background: var(--turuncu-acik); display: flex; align-items: center; justify-content: center;
  color: var(--turuncu-koyu); font-weight: 800; font-size: 15px; white-space: nowrap;
}
.selale-etiket { margin-top: 12px; font-size: 13px; color: var(--metin-soluk); line-height: 1.4; }
.selale-etiket strong { display: block; color: var(--lacivert); font-size: 14px; margin-bottom: 2px; }
.sonuc-ozet {
  background: var(--lacivert); border-radius: var(--kose); padding: 32px 28px; color: #CBD5E1;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.sonuc-ozet-rakam { font-size: 52px; font-weight: 800; color: #FDBA74; letter-spacing: -0.02em; line-height: 1.05; }
.sonuc-ozet-baslik { color: #fff; font-weight: 700; font-size: 18px; }
.sonuc-ozet-tl { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.sonuc-ozet-tl strong { color: #fff; }
.sonuc-ozet-tablo { width: 100%; margin-top: 8px; border-collapse: collapse; border-top: 1px solid rgba(255,255,255,.14); }
.sonuc-ozet-tablo caption { caption-side: top; text-align: left; padding: 16px 0 8px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #94A3B8; }
.sonuc-ozet-tablo th { text-align: left; font-weight: 500; color: #CBD5E1; padding: 6px 0; font-size: 15px; }
.sonuc-ozet-tablo td { text-align: right; font-weight: 800; color: #fff; font-size: 20px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.sonuc-ozet-tablo tr + tr th, .sonuc-ozet-tablo tr + tr td { border-top: 1px solid rgba(255,255,255,.08); }
.dipnot { margin-top: 20px; font-size: 13px; color: var(--metin-soluk); max-width: 900px; }

/* ---------- ÜRÜN KARTLARI ---------- */
.kartlar-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.urun-kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 30px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.urun-kart svg { width: 34px; height: 34px; margin-bottom: 8px; }
.urun-kart .urun-rol { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--turuncu-koyu); }
.urun-kart p { font-size: 16px; }
.bolum-alt-link { margin-top: 32px; }

/* ---------- NE KAZANIRSINIZ ---------- */
.kazanc h3 { margin: 14px 0 10px; }
.kazanc p { font-size: 16px; }
.kazanc-ikon {
  width: 48px; height: 48px; border-radius: 10px; background: var(--turuncu-acik);
  display: grid; place-items: center;
}
.kazanc-ikon svg { width: 26px; height: 26px; }

/* ---------- NASIL BAŞLARIZ ---------- */
.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: adim; list-style: none; margin: 0; padding: 0; }
.adim { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 28px; position: relative; }
.adim-no {
  width: 36px; height: 36px; border-radius: 50%; background: var(--lacivert); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 15px; margin-bottom: 16px;
}
.adim h3 { margin-bottom: 8px; }
.adim p { font-size: 16px; }
.adim--karar { border-style: dashed; background: var(--zemin-gri); }
.adim--karar .adim-no { background: var(--turuncu); }
.adimlar--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .adimlar--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .adimlar--4 { grid-template-columns: 1fr; } }

/* ---------- ENTEGRASYONLAR ---------- */
.entegrasyon .kapsayici { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.etiketler { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.etiketler li {
  background: #fff; border: 1px solid var(--cizgi); border-radius: 999px; padding: 10px 18px;
  font-weight: 700; color: var(--lacivert); font-size: 15px;
}

/* ---------- GÜVENLİK ŞERİDİ ---------- */
.guvenlik-serit .kapsayici { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: center; }
.guvenlik-maddeler { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.guvenlik-maddeler li {
  display: flex; gap: 12px; align-items: flex-start; background: var(--lacivert-2);
  border-radius: 10px; padding: 16px 18px; color: #E2E8F0; font-weight: 600; font-size: 15px;
}
.guvenlik-maddeler svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }

/* ---------- KAPANIŞ ÇAĞRISI ---------- */
.kapanis { text-align: center; }
.kapanis h2 { max-width: 760px; margin: 0 auto 36px; }
.kapanis-alt { margin: -22px auto 32px; max-width: 640px; color: var(--metin-soluk); }

/* ---------- ALT BİLGİ (FOOTER) ---------- */
.alt-bilgi { background: var(--lacivert); color: #CBD5E1; padding: 72px 0 32px; font-size: 15px; }
.alt-bilgi a { color: #E2E8F0; text-decoration: none; }
.alt-bilgi a:hover { color: #FDBA74; }
.alt-bilgi-ust { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.alt-bilgi .logo img { height: 30px; margin-bottom: 16px; }
.alt-bilgi h4 { color: #fff; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.alt-bilgi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alt-bilgi address { font-style: normal; line-height: 1.6; }
.alt-bilgi address + address { margin-top: 14px; }
.alt-bilgi address strong { color: #fff; display: block; font-size: 14px; }
.alt-bilgi-alt {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #94A3B8;
}
.alt-bilgi-alt a { color: #94A3B8; }

/* ---------- MOBİL / TABLET ---------- */
@media (max-width: 1024px) {
  .sonuc-duzen { grid-template-columns: 1fr; }
  .alt-bilgi-ust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --bolum-bosluk: 72px; }
  .neden .kapsayici, .entegrasyon .kapsayici, .guvenlik-serit .kapsayici { grid-template-columns: 1fr; gap: 40px; }
  .kartlar-3 { grid-template-columns: 1fr; }
  .adimlar { grid-template-columns: 1fr 1fr; }
  .olgu-serit { grid-template-columns: 1fr; }
  .olgu, .olgu + .olgu { padding: 22px 0 24px; border-left: 0; }
  .olgu + .olgu { border-top: 1px solid var(--cizgi); }
  .menu-dugme { display: block; }
  .menu-linkler {
    display: none; position: absolute; top: 76px; left: 0; right: 0; background: #fff;
    flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px;
    border-bottom: 1px solid var(--cizgi); box-shadow: 0 12px 24px rgba(4,30,66,.08);
  }
  .menu-linkler.acik { display: flex; }
  .menu-linkler li a { display: block; padding: 12px 4px; }
  .menu-linkler li:last-child a { margin-top: 8px; text-align: center; justify-content: center; }
}
@media (max-width: 600px) {
  :root { --kenar-bosluk: 16px; --bolum-bosluk: 56px; }
  body { font-size: 16px; }
  .hero { padding: 64px 0 72px; }
  .olgu-bant { padding: 32px 0 28px; }
  .olgu-deger { font-size: 40px; }
  .guvenlik-maddeler, .alt-bilgi-ust, .adimlar { grid-template-columns: 1fr; }
  .selale { gap: 8px; padding: 24px 14px 18px; }
  .selale-alan { height: 200px; }
  .selale-dusus { font-size: 12px; }
  .selale-kalan { font-size: 14px; }
  .selale-etiket { font-size: 11px; }
  .selale-etiket strong { font-size: 12px; }
}

/* =========================================================
   ALT SAYFALAR
   ========================================================= */
.bolum--ince { padding: 56px 0; }
.sayfa-hero { background: var(--lacivert); color: #CBD5E1; padding: 88px 0 80px; }
.sayfa-hero h1 { max-width: 820px; color: #FFFFFF; }
.sayfa-hero .ust-etiket { color: #FDBA74; }
.sayfa-hero-alt { margin-top: 20px; font-size: 19px; max-width: 720px; color: #CBD5E1; }
.sayfa-hero a:not(.buton) { color: #FDBA74; }
.sayfa-hero .buton--ikincil { color: #FFFFFF; border-color: rgba(255,255,255,0.28); }
.sayfa-hero .buton--ikincil:hover { border-color: #FFFFFF; }

/* Akış şeması */
.akis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px; }
.akis-kutu {
  position: relative; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; text-align: center; justify-content: center;
}
.akis-kutu:not(:last-child)::after {
  content: "→"; position: absolute; right: -28px; top: 50%; transform: translateY(-50%);
  color: var(--turuncu); font-weight: 800; font-size: 20px;
}
.akis-kutu--dis { background: var(--zemin-gri); border-style: dashed; }
.akis-kutu--vurgu { border-color: var(--turuncu); background: var(--turuncu-acik); }
.akis-etiket { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--turuncu-koyu); }
.akis-kutu strong { color: var(--lacivert); font-size: 16px; line-height: 1.35; }
.akis-veya { font-size: 13px; color: var(--metin); line-height: 1.4; }

/* Ürün bölümleri */
.urun-bolum .kapsayici { display: grid; grid-template-columns: 1fr 1.7fr; gap: 56px; align-items: start; }
.urun-bolum { scroll-margin-top: 76px; }
.urun-giris h2 { margin-bottom: 16px; }
.urun-not { margin-top: 16px; font-weight: 700; color: var(--lacivert); }
.ozellikler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ozellikler--tek { grid-template-columns: 1fr; }
.ozellikler li { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 22px 24px; }
.ozellikler h3 { font-size: 17px; margin-bottom: 6px; }
.ozellikler p { font-size: 15.5px; }
.ozellik--opsiyonel { border-style: dashed !important; }
.rozet {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: var(--turuncu-acik); color: var(--turuncu-koyu); border-radius: 999px; padding: 4px 10px; margin-bottom: 8px;
}
.modul-kartlar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.modul-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 26px; display: flex; flex-direction: column; gap: 12px; }
.modul-kart p { font-size: 15.5px; }
.modul-metrik { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); font-size: 14px; }
.modul-metrik-rakam { font-size: 30px; font-weight: 800; color: var(--turuncu); }
.durumlar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.durum { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 5px 12px; display: inline-block; }
.durum--hazir { background: #E7F6EC; color: #166534; }
.durum--gelisiyor { background: #F1F5F9; color: var(--metin-soluk); border: 1px dashed #CBD5E1; }
.urun-bolum .dipnot { grid-column: 2; margin-top: 0; }

/* Paket tablosu */
.tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--kose); background: #fff; }
.paket-tablo { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.paket-tablo th, .paket-tablo td { padding: 16px 18px; text-align: center; border-bottom: 1px solid var(--cizgi); }
.paket-tablo thead th { color: var(--lacivert); font-weight: 800; background: var(--zemin-gri); vertical-align: bottom; }
.paket-tablo thead th:first-child { text-align: left; }
.paket-tablo tbody th { text-align: left; color: var(--lacivert); font-weight: 700; }
.paket-tablo tbody tr:last-child th, .paket-tablo tbody tr:last-child td { border-bottom: 0; }
.paket-tablo td { color: var(--turuncu); font-weight: 800; font-size: 18px; }
.paket-tablo .onerilen { background: var(--turuncu-acik); }
.paket-tablo thead .rozet { display: block; width: max-content; margin: 6px auto 0; background: var(--turuncu); color: #fff; }

@media (max-width: 1024px) {
  .akis { grid-template-columns: 1fr; gap: 28px; max-width: 480px; }
  .akis-kutu:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -26px; transform: translateX(50%); }
}
@media (max-width: 900px) {
  .urun-bolum .kapsayici { grid-template-columns: 1fr; gap: 28px; }
  .urun-bolum .dipnot { grid-column: 1; }
  .ozellikler, .modul-kartlar { grid-template-columns: 1fr; }
  .sayfa-hero { padding: 56px 0 48px; }
}

/* Ürün sayfası: sonuç rakamları */
.urun-sonuclar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.urun-sonuc {
  background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--turuncu);
  border-radius: 10px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 2px;
}
.urun-sonuc:only-child { grid-column: 1 / -1; }
.urun-sonuc-rakam { font-size: 40px; font-weight: 800; color: var(--turuncu); letter-spacing: -0.02em; line-height: 1.1; }
.urun-sonuc-ad { font-weight: 800; color: var(--lacivert); font-size: 15px; margin-top: 4px; }
.urun-sonuc-aciklama { font-size: 13.5px; color: var(--metin-soluk); line-height: 1.45; }
.urun-giris .dipnot { margin-top: 12px; }
#dataflow .urun-sonuc, #metacast .urun-sonuc { background: #fff; }
.sonuc-serit .kapsayici { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; align-items: center; }
.sonuc-serit-rakam { font-size: clamp(48px, 6vw, 72px); font-weight: 800; color: #FDBA74; line-height: 1; letter-spacing: -0.02em; }
.sonuc-serit-metin { font-size: 19px; color: #E2E8F0; }
.sonuc-serit-metin strong { color: #fff; }
@media (max-width: 900px) { .sonuc-serit .kapsayici { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 600px) { .urun-sonuclar { grid-template-columns: 1fr; } }

/* Nasıl Çalışır: bir günün akışı */
.gun-akisi { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 18px; }
.gun-akisi::before { content: ""; position: absolute; left: 219px; top: 8px; bottom: 8px; width: 2px; background: var(--cizgi); }
.gun-akisi li { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; position: relative; }
.gun-akisi li::before {
  content: ""; position: absolute; left: 213px; top: 22px; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 3px solid var(--lacivert);
}
.gun-akisi li.vurgu::before { border-color: var(--turuncu); }
.gun-saat { font-size: 13px; color: var(--metin-soluk); text-align: right; padding-top: 14px; line-height: 1.4; }
.gun-saat strong { display: block; font-size: 17px; color: var(--lacivert); }
.gun-akisi li.vurgu .gun-saat strong { color: var(--turuncu-koyu); }
.gun-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 18px 22px; }
.gun-akisi li.vurgu .gun-kart { background: var(--turuncu-acik); border-color: #FED7AA; }
.gun-kart h3 { font-size: 17px; margin-bottom: 4px; }
.gun-kart p { font-size: 15.5px; }

/* Sonuçları nasıl ölçüyoruz */
.olcum .kapsayici { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
.olcum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.olcum-liste li { display: flex; gap: 14px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 18px 20px; }
.olcum-liste svg { flex: none; width: 24px; height: 24px; margin-top: 2px; }
.olcum-liste h3 { font-size: 17px; margin-bottom: 4px; }
.olcum-liste p { font-size: 15.5px; }

/* Dashboard yer tutucu */
.dash-gorsel { margin: 0 0 28px; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; box-shadow: 0 16px 40px rgba(4,30,66,.06); }
.dash-gorsel img { width: 100%; height: auto; display: block; }
.dash-gorsel figcaption { padding: 12px 18px; border-top: 1px solid var(--cizgi); font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--metin-soluk); }
.dash-mock { margin: 0; background: #fff; border: 1px solid var(--cizgi); border-radius: 14px; padding: 22px; box-shadow: 0 16px 40px rgba(4,30,66,.08); }
.dash-ust { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.dash-ust strong { color: var(--lacivert); font-size: 15px; }
.dash-ust span { font-size: 12px; color: var(--metin-soluk); }
.dash-kpiler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.dash-kpiler div { background: var(--zemin-gri); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; }
.dash-kpiler span { font-size: 11px; color: var(--metin-soluk); }
.dash-kpiler strong { color: var(--lacivert); font-size: 18px; }

/* İhtiyaç listesi */
.ihtiyac { margin-top: 32px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 26px 28px; }
.ihtiyac h3 { margin-bottom: 14px; }
.ihtiyac dl { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ihtiyac dt { font-weight: 800; color: var(--lacivert); font-size: 15px; margin-bottom: 4px; }
.ihtiyac dd { margin: 0; font-size: 15px; }

/* SSS */
.sss-kap { max-width: 880px; }
.sss details { border-bottom: 1px solid var(--cizgi); padding: 18px 0; }
.sss summary { cursor: pointer; font-weight: 700; color: var(--lacivert); font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: "+"; color: var(--turuncu); font-weight: 800; font-size: 22px; line-height: 1; }
.sss details[open] summary::after { content: "−"; }
.sss details p { margin-top: 10px; }

@media (max-width: 900px) {
  .olcum .kapsayici { grid-template-columns: 1fr; gap: 32px; }
  .ihtiyac dl { grid-template-columns: 1fr; gap: 16px; }
  .gun-akisi::before { left: 7px; }
  .gun-akisi li { grid-template-columns: 1fr; gap: 8px; padding-left: 32px; }
  .gun-akisi li::before { left: 0; top: 4px; }
  .gun-saat { text-align: left; padding-top: 0; }
  .gun-saat br { display: none; }
  .gun-saat strong { display: inline; margin-left: 6px; }
}
@media (max-width: 600px) { .dash-kpiler { grid-template-columns: repeat(2, 1fr); } }

/* Güvenlik sayfası */
.guvenlik-kartlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.guvenlik-kartlar li { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 28px; }
.guvenlik-kartlar h3 { margin: 16px 0 8px; font-size: 18px; }
.guvenlik-kartlar p { font-size: 15.5px; }
.guvenlik-maddeler--tek { grid-template-columns: 1fr; }
@media (max-width: 1024px) { .guvenlik-kartlar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .guvenlik-kartlar { grid-template-columns: 1fr; } }

/* Hakkımızda */
.hikaye .kapsayici { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: start; }
.hikaye-metin p + p { margin-top: 16px; }
.hikaye-metin { font-size: 18px; }
.ekip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ekip-kart { background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 28px; }
.ekip-foto {
  width: 88px; height: 88px; border-radius: 50%; object-fit: cover; margin-bottom: 18px;
  background: var(--lacivert); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 26px; letter-spacing: .02em;
}
.ekip-kart h3 { font-size: 19px; }
.ekip-unvan { color: var(--turuncu-koyu); font-weight: 700; font-size: 14.5px; margin: 4px 0 12px; }
.ekip-kart p:last-child { font-size: 15px; }

/* İletişim */
/* Giriş ile form bölümü aynı kolon ızgarasını kullanır; sağ kolonlar aynı hizada başlar */
.iletisim-duzen { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
.form { display: grid; gap: 18px; background: #fff; border: 1px solid var(--cizgi); border-radius: var(--kose); padding: 32px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; color: var(--lacivert); }
.form input[type=text], .form input[type=email], .form input[type=tel], .form textarea {
  font: inherit; font-weight: 500; font-size: 16px; color: var(--lacivert);
  border: 1px solid #CBD5E1; border-radius: 8px; padding: 12px 14px; background: #fff; width: 100%;
}
.form input:focus, .form textarea:focus { outline: 2px solid var(--turuncu); outline-offset: 1px; border-color: transparent; }
.form-onay { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; font-weight: 500 !important; }
.form-onay input { width: 18px; height: 18px; accent-color: var(--turuncu); }
.form .buton { justify-self: start; border: 0; cursor: pointer; }
.gizli { display: none; }
.iletisim-bilgi h2 { font-size: 24px; margin-bottom: 18px; }
.iletisim-bilgi ul { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; }
.iletisim-bilgi li { display: grid; }
.iletisim-bilgi li span { font-size: 13px; color: var(--metin-soluk); }
.iletisim-bilgi li a { font-weight: 700; color: var(--lacivert); text-decoration: none; }
.iletisim-bilgi address { font-style: normal; margin-top: 14px; font-size: 15px; }
.iletisim-bilgi address strong { display: block; color: var(--lacivert); }
.tesekkur { padding: 120px 0; }
/* Teşekkür sayfası koyu footer'la birleşmesin diye açık zeminde kalır */
.sayfa-hero.tesekkur { background: var(--zemin-gri); color: var(--metin); }
.sayfa-hero.tesekkur h1 { color: var(--lacivert); }
.sayfa-hero.tesekkur .ust-etiket { color: var(--turuncu-koyu); }
.sayfa-hero.tesekkur .sayfa-hero-alt { color: var(--metin); }
.sayfa-hero.tesekkur .buton--ikincil { color: var(--lacivert); border-color: var(--cizgi); }

@media (max-width: 1024px) { .ekip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .hikaye .kapsayici, .iletisim-duzen { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 600px) { .ekip, .form-satir { grid-template-columns: 1fr; } .form { padding: 22px; } }

/* Üst menü: portal girişi linki */
.menu-linkler a.menu-portal { color: var(--lacivert); font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1.5px solid var(--lacivert); border-radius: 8px; transition: background .15s ease, color .15s ease; }
.menu-linkler a.menu-portal::before {
  content: ""; width: 14px; height: 14px; display: inline-block; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.menu-linkler a.menu-portal:hover { background: var(--lacivert); color: #FFFFFF; }
@media (max-width: 900px) { .menu-linkler a.menu-portal { display: flex; justify-content: center; padding: 12px 16px; } }

/* ---------- METİN SAYFALARI (KVKK vb.) ---------- */
.metin-sayfa > * { max-width: 760px; }
.metin-sayfa h2 { font-size: 22px; margin: 40px 0 12px; }
.metin-sayfa h2:first-child { margin-top: 0; }
.metin-sayfa p + p { margin-top: 12px; }
.metin-sayfa ul { margin: 12px 0; padding-left: 22px; }
.metin-sayfa li { margin-bottom: 6px; }
.metin-tarih { margin-top: 48px !important; font-family: var(--mono); font-size: 12.5px; color: var(--metin-soluk); }

/* ---------- 404 ---------- */
.bulunamadi-butonlar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------- İLETİŞİM: GİRİŞTE SÜREÇ ÖZETİ ---------- */
.iletisim-hero .kapsayici { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
.surec { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--kose); padding: 28px 28px 22px; }
.surec-baslik { font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #FDBA74; margin-bottom: 18px; }
.surec ol { list-style: none; margin: 0; padding: 0; counter-reset: surec; display: grid; gap: 16px; }
.surec li { counter-increment: surec; display: grid; grid-template-columns: 28px 1fr; column-gap: 14px; }
.surec li::before { content: counter(surec); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: var(--turuncu); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.surec li strong { color: #fff; font-size: 16px; }
.surec li span { font-size: 14.5px; line-height: 1.5; color: #CBD5E1; }
.surec-not { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 13.5px; color: #94A3B8; }
@media (max-width: 900px) { .iletisim-hero .kapsayici { grid-template-columns: 1fr; gap: 32px; } }