/* ==========================================================================
   Anasayfa · "Çavuşlu Hep Yanınızda" — mor-mavi bant, CSS telefon, 4 cam kutu
   ========================================================================== */
.cx-s--mobil { position: relative; z-index: 2; background: #fff; padding: 0 0 2px; }
.cx-mobil {
  position: relative; display: flex; align-items: center; gap: 28px; min-height: 124px; padding: 0 54px 0 307px;
  border-radius: calc(16px * var(--ax-rs, 1)); color: #fff;
  background: linear-gradient(90deg, #4a1780 0%, #3a1a78 9%, #052c62 20%, #05306a 30%, #064585 40%, #1a5aaa 52%, #0a6fb8 66%, #0b70b8 72%, #1a58b2 80%, #3a41a8 90%, #5a2ca0 100%);
}
.cx-mobil__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cx-mobil__lines { display: block; width: 100%; height: 100%; }

/* ── CSS ile çizilmiş telefon (bandın üstünden taşar, alttan kırpılır) ── */
.cx-mobil__dev { position: absolute; left: 98px; bottom: 0; z-index: 1; width: 116px; height: 132px; overflow: hidden; pointer-events: none; }
.cx-mobil__phone {
  position: absolute; left: 0; top: 0; width: 100%; height: 240px; padding: 5px; border-radius: calc(26px * var(--ax-rs, 1));
  background: linear-gradient(160deg, #2a3350, #0a0f22 40%, #121a33); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset, 0 18px 30px -12px rgba(0, 0, 0, .65);
}
.cx-mobil__notch { position: absolute; top: 9px; left: 50%; z-index: 3; width: 36px; height: 9px; margin-left: -18px; border-radius: calc(9px * var(--ax-rs, 1)); background: #05080f; }
.cx-mobil__screen { position: relative; height: 100%; overflow: hidden; border-radius: calc(21px * var(--ax-rs, 1)); background: linear-gradient(180deg, #2f7fc6, #0a3d91); }
.cx-mobil__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-mobil__screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 20, 60, .25), rgba(0, 20, 60, 0) 40%); }
.cx-mobil__logo { position: absolute; top: 24px; left: 50%; z-index: 2; transform: translateX(-50%); display: block; padding: 3px 7px; border-radius: calc(8px * var(--ax-rs, 1)); background: rgba(255, 255, 255, .94); box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); line-height: 0; }
.cx-mobil__logo img { display: block; width: auto; height: 15px; max-width: 70px; }

/* ── Metin ── */
.cx-mobil__txt { flex: 1 1 auto; min-width: 0; padding-block: 14px; }
.cx-mobil__txt h2 { font-size: calc(23.5px * var(--ax-fz, 1)); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.cx-mobil__txt p { margin-top: 7px; max-width: 330px; font-size: calc(13px * var(--ax-fz, 1)); line-height: 1.4; color: rgba(255, 255, 255, .92); }
.cx-mobil__stores { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 12px; }
.cx-mobil__store {
  display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px 0 11px; border-radius: calc(6px * var(--ax-rs, 1)); background: #fff; color: #111;
  box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .6); transition: transform .2s;
}
.cx-mobil__store:hover { transform: translateY(-2px); }
.cx-mobil__store i { font-size: calc(19px * var(--ax-fz, 1)); line-height: 1; }
.cx-mobil__store .fa-google-play { color: #1a9d58; }
.cx-mobil__store span { display: flex; flex-direction: column; line-height: 1.1; }
.cx-mobil__store b { font-size: calc(11px * var(--ax-fz, 1)); font-weight: 700; }
.cx-mobil__store small { margin-top: 1px; font-size: calc(9px * var(--ax-fz, 1)); font-weight: 500; color: #555; }

/* ── Cam kutular ── */
.cx-mobil__tiles { flex: none; display: grid; grid-template-columns: repeat(4, 92px); gap: 17px; }
.cx-mobil__tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; height: 71px; padding: 6px 4px; text-align: center;
  border: 1px solid rgba(255, 255, 255, .42); border-radius: calc(12px * var(--ax-rs, 1)); background: rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); color: #fff;
  transition: background .2s, transform .2s, border-color .2s;
}
.cx-mobil__tile i { font-size: calc(20px * var(--ax-fz, 1)); line-height: 1; }
.cx-mobil__tile span { font-size: calc(10.5px * var(--ax-fz, 1)); font-weight: 500; line-height: 1.15; }
.cx-mobil__tile:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .8); transform: translateY(-2px); }

@media (max-width: 1100px) {
  .cx-mobil { padding: 0 24px 0 236px; gap: 20px; }
  .cx-mobil__dev { left: 64px; width: 106px; }
  .cx-mobil__tiles { grid-template-columns: repeat(4, 80px); gap: 10px; }
  .cx-mobil__txt h2 { font-size: calc(22px * var(--ax-fz, 1)); }
  .cx-mobil__txt p { font-size: calc(12.5px * var(--ax-fz, 1)); }
}
@media (max-width: 900px) {
  .cx-mobil { flex-wrap: wrap; padding: 18px 20px 18px 200px; row-gap: 16px; }
  .cx-mobil__dev { left: 46px; width: 100px; }
  .cx-mobil__txt { flex: 1 1 100%; padding-block: 0; }
  .cx-mobil__txt p { max-width: 520px; }
  .cx-mobil__tiles { flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cx-mobil { padding: 22px 16px 18px; text-align: center; border-radius: calc(14px * var(--ax-rs, 1)); }
  .cx-mobil__dev { display: none; }
  .cx-mobil__txt p { margin-inline: auto; }
  .cx-mobil__stores { justify-content: center; }
  .cx-mobil__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .cx-mobil__tile, .cx-mobil__store { transition: none; } }