/* ==========================================================================
   Anasayfa "zengin" tasarım — ORTAK jetonlar ve parçalar (ana-*.php bölümleri)
   Lacivert #1f3263 + turuncu #f47b20 · başlıklar Montserrat Black büyük harf + turuncu alt çizgi
   Bu dosya yalnız anasayfada yüklenir (layout cx-s-*.css glob'u); iç sayfaları etkilemez.
   ========================================================================== */
body.cx-home {
  --ax-navy: #1f3263; --ax-navy2: #162550; --ax-navy3: #2a4078;
  --ax-or: #f47b20; --ax-or2: #e8650f; --ax-orl: #fff1e6;
  --ax-ink: #1b2a52; --ax-text: #4b5672; --ax-muted: #8a93a8;
  --ax-bg: #f3f5f9; --ax-line: #e4e8f0;
  --ax-head: "Montserrat", "Plus Jakarta Sans", system-ui, sans-serif;
  background: var(--ax-bg);
}
body.cx-home .cx-main { overflow-x: clip; }
.ax-sec { position: relative; padding-top: 110px; }

/* Bölüm başlığı */
.ax-sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 40px; }
.ax-sh__t { min-width: 0; }
.ax-H { position: relative; display: inline-block; margin: 0; padding-bottom: 16px; font-family: var(--ax-head); font-weight: var(--ax-hw, 900); font-size: calc(50px * var(--ax-fzh, 1)); line-height: 1; letter-spacing: -.005em; text-transform: var(--ax-tt, uppercase); color: var(--ax-navy); }
.ax-H::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 6px; border-radius: calc(6px * var(--ax-rs, 1)); background: var(--ax-or); }
.ax-H > span { display: block; }
.ax-sh p { margin: 14px 0 0; font-size: calc(16.5px * var(--ax-fz, 1)); line-height: 1.55; color: var(--ax-muted); }
.ax-sh__r { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }

/* Düğmeler */
.ax-all { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 22px; border-radius: calc(14px * var(--ax-rs, 1)); background: #fff; border: 1.5px solid var(--ax-line); font-size: calc(13.5px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ax-navy); white-space: nowrap; transition: border-color .2s, transform .2s; }
.ax-all i { color: var(--ax-or); font-size: calc(14px * var(--ax-fz, 1)); transition: transform .2s; }
.ax-all:hover { border-color: var(--ax-or); }
.ax-all:hover i { transform: translateX(3px); }
.ax-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.ax-pl { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; border: 1.5px solid var(--ax-line); border-radius: calc(14px * var(--ax-rs, 1)); background: #fff; font: inherit; font-size: calc(13px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--ax-navy); cursor: pointer; white-space: nowrap; }
.ax-pl i.n { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: calc(7px * var(--ax-rs, 1)); background: var(--ax-bg); display: inline-grid; place-items: center; font-size: calc(11px * var(--ax-fz, 1)); }
.ax-pl.is-on { background: var(--ax-or); border-color: var(--ax-or); color: #fff; }
.ax-pl.is-on i.n { background: rgba(255, 255, 255, .25); }
.ax-pl.is-on::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: var(--ax-or); transform: translateX(-50%) rotate(45deg); border-radius: calc(2px * var(--ax-rs, 1)); }
.ax-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: calc(8px * var(--ax-rs, 1)); font-size: calc(11px * var(--ax-fz, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--ax-or); color: #fff; }
.ax-chip--bl { background: var(--ax-c1l, #e2f1fb); color: #11699c; }
.ax-chip--gr { background: #e3f3dc; color: #3b7f2b; }
.ax-chip--or { background: var(--ax-orl); color: var(--ax-orink, #c25a0c); }

/* Dalga deseni (svg <use href="#axWaves">) */
.ax-waves { pointer-events: none; }

@media (max-width: 1100px) {
  .ax-sec { padding-top: 80px; }
  .ax-H { font-size: calc(38px * var(--ax-fzh, 1)); }
  .ax-sh { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
  .ax-sh__r { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ax-sec { padding-top: 64px; }
  .ax-H { font-size: calc(30px * var(--ax-fzh, 1)); padding-bottom: 13px; }
  .ax-H::after { height: 5px; width: 52px; }
  .ax-sh p { font-size: calc(15px * var(--ax-fz, 1)); }
  .ax-pills { gap: 8px; }
  .ax-pl { height: 42px; padding: 0 14px; font-size: calc(12px * var(--ax-fz, 1)); }
}