:root {
  --primary:#006eb7;
  --primary-dark:#005a96;
  --primary-soft:#eaf6fc;
  --secondary:#646363;
  --ink:#20242a;
  --muted:#6d7680;
  --line:#e7edf2;
  --surface:#ffffff;
  --surface-2:#f7fafc;
  --shadow:0 18px 60px rgba(23,45,67,.10);
  --radius:22px;
  --radius-sm:14px;
  --container:1180px;
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

img {
  max-width:100%;
  height:auto;
  display:block
}

button,input,textarea,select {
  font:inherit
}

.container {
  width:min(var(--container),calc(100% - 40px));
  margin-inline:auto
}

.section {
  padding:92px 0
}

.section-sm {
  padding:64px 0
}

.surface {
  background:var(--surface-2)
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:14px
}

.eyebrow:before {
  content:"";
  width:28px;
  height:2px;
  background:var(--primary);
  border-radius:3px
}

.display {
  font-size:clamp(42px,6vw,76px);
  line-height:1.02;
  letter-spacing:-.045em;
  margin:0 0 24px;
  font-weight:800
}

.section-title {
  font-size:clamp(32px,4vw,50px);
  line-height:1.12;
  letter-spacing:-.035em;
  margin:0 0 18px
}

.section-lead {
  font-size:18px;
  color:var(--muted);
  max-width:720px;
  margin:0
}

.blue {
  color:var(--primary)
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:50px;
  padding:0 22px;
  border-radius:12px;
  font-weight:800;
  border:1px solid transparent;
  transition:.22s ease;
  cursor:pointer
}

.btn svg {
  width:18px;
  height:18px
}

.btn-primary {
  background:var(--primary);
  color:#fff;
  box-shadow:0 10px 24px rgba(0,110,183,.22)
}

.btn-primary:hover {
  background:var(--primary-dark);
  transform:translateY(-2px)
}

.btn-outline {
  border-color:#ccd7df;
  background:#fff;
  color:var(--ink)
}

.btn-outline:hover {
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-2px)
}

.btn-ghost {
  color:var(--primary);
  padding-inline:0;
  min-height:auto
}

.btn-ghost:hover {
  gap:14px
}

.topbar {
  background:#172028;
  color:#d8e1e8;
  font-size:13px
}

.topbar .inner {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  min-height:38px
}

.topbar-links,.topbar-note {
  display:flex;
  align-items:center;
  gap:18px
}

.topbar a:hover {
  color:#fff
}

.header {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(231,237,242,.9)
}

.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:82px;
  gap:24px
}

.brand img {
  width:178px;
  height:auto
}

.nav-links {
  display:flex;
  align-items:center;
  gap:6px
}

.nav-links>a,.nav-item>a {
  padding:12px 11px;
  font-size:14px;
  font-weight:750;
  color:#313840;
  border-radius:10px
}

.nav-links>a:hover,.nav-item>a:hover {
  color:var(--primary);
  background:var(--primary-soft)
}

.nav-item {
  position:relative
}

.dropdown {
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:260px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:9px;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:.18s
}

.nav-item:hover .dropdown {
  opacity:1;
  visibility:visible;
  transform:none
}

.dropdown a {
  display:block;
  padding:10px 12px;
  border-radius:9px;
  font-size:14px;
  font-weight:700
}

.dropdown a:hover {
  background:var(--primary-soft);
  color:var(--primary)
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:10px
}

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  align-items:center;
  justify-content:center
}

.menu-toggle span,.menu-toggle:before,.menu-toggle:after {
  content:"";
  display:block;
  width:20px;
  height:2px;
  background:#222;
  position:absolute
}

.menu-toggle span {
  transform:translateY(0)
}

.menu-toggle:before {
  transform:translateY(-6px)
}

.menu-toggle:after {
  transform:translateY(6px)
}

.hero {
  position:relative;
  overflow:hidden;
  background:radial-gradient(circle at 82% 18%,rgba(0,110,183,.15),transparent 31%),linear-gradient(180deg,#fbfdff 0%,#f5f9fc 100%)
}

.hero:after {
  content:"";
  position:absolute;
  right:-160px;
  top:30px;
  width:440px;
  height:440px;
  border:1px solid rgba(0,110,183,.13);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(0,110,183,.035),0 0 0 110px rgba(0,110,183,.025)
}

.hero-grid {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.04fr .96fr;
  gap:64px;
  align-items:center;
  min-height:690px;
  padding:70px 0
}

.hero-copy p {
  font-size:19px;
  color:var(--muted);
  max-width:680px;
  margin:0 0 30px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px
}

.hero-points {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:34px;
  padding-top:24px;
  border-top:1px solid var(--line)
}

.hero-point {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:750;
  color:#4d5964
}

.check {
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-grid;
  place-items:center;
  background:#e7f5fb;
  color:var(--primary);
  font-weight:900
}

.dashboard {
  background:#fff;
  border:1px solid #dde8ef;
  border-radius:28px;
  box-shadow:0 30px 90px rgba(23,65,91,.16);
  padding:22px;
  position:relative;
  transform:rotate(-1deg)
}

.dash-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 2px 18px
}

.dash-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:850
}

.dash-mark {
  width:34px;
  height:34px;
  border-radius:11px;
  background:var(--primary);
  position:relative
}

.dash-mark:after {
  content:"";
  position:absolute;
  inset:8px;
  border:2px solid #fff;
  border-radius:4px
}

.dash-pill {
  font-size:12px;
  background:#edf5f9;
  padding:7px 10px;
  border-radius:999px;
  color:#66727c
}

.dash-cards {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

.metric {
  border:1px solid var(--line);
  border-radius:16px;
  padding:17px;
  background:#fff
}

.metric small {
  display:block;
  color:#7b8791;
  font-size:12px;
  margin-bottom:8px
}

.metric strong {
  font-size:25px;
  letter-spacing:-.03em
}

.metric .trend {
  font-size:11px;
  color:#138b60;
  background:#e9f8f1;
  border-radius:999px;
  padding:4px 7px;
  float:right
}

.chart {
  height:170px;
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px;
  display:flex;
  align-items:flex-end;
  gap:11px;
  background:linear-gradient(#fff,#fbfdfe)
}

.bar {
  flex:1;
  border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#57b2e9,var(--primary));
  min-height:24px
}

.bar:nth-child(2) {
  height:44%
}

.bar:nth-child(3) {
  height:70%
}

.bar:nth-child(4) {
  height:56%
}

.bar:nth-child(5) {
  height:86%
}

.bar:nth-child(6) {
  height:66%
}

.dash-note {
  position:absolute;
  right:-34px;
  bottom:42px;
  background:#172028;
  color:#fff;
  border-radius:14px;
  padding:13px 16px;
  box-shadow:0 12px 30px rgba(23,32,40,.2);
  font-size:13px;
  font-weight:700
}

.dash-note b {
  color:#80d2ff
}

.trust-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff
}

.trust-inner {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.trust-item {
  padding:25px 28px;
  border-right:1px solid var(--line)
}

.trust-item:last-child {
  border-right:0
}

.trust-item strong {
  display:block;
  font-size:25px;
  letter-spacing:-.03em;
  color:var(--primary)
}

.trust-item span {
  font-size:13px;
  color:var(--muted);
  font-weight:650
}

.section-head {
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:end;
  margin-bottom:40px
}

.cards {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}

.card {
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  box-shadow:0 8px 28px rgba(36,58,76,.04);
  transition:.22s
}

.card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:#c9ddea
}

.icon {
  width:52px;
  height:52px;
  border-radius:16px;
  background:var(--primary-soft);
  color:var(--primary);
  display:grid;
  place-items:center;
  margin-bottom:21px
}

.icon svg {
  width:25px;
  height:25px
}

.card h3 {
  font-size:20px;
  line-height:1.25;
  margin:0 0 10px
}

.card p {
  color:var(--muted);
  margin:0 0 18px;
  font-size:15px
}

.product-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.product-card {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  padding:27px;
  min-height:315px;
  display:flex;
  flex-direction:column
}

.product-card:after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  border-radius:50%;
  background:var(--primary-soft);
  right:-90px;
  top:-80px
}

.product-card .tag {
  font-size:11px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--primary);
  margin-bottom:18px
}

.product-card h3 {
  font-size:28px;
  margin:0 0 10px;
  letter-spacing:-.03em
}

.product-card p {
  color:var(--muted);
  font-size:14px;
  margin:0 0 20px
}

.product-card .for {
  margin-top:auto;
  padding-top:17px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:#65717a
}

.product-card .for b {
  display:block;
  color:#303840;
  margin-bottom:4px
}

.product-card a {
  margin-top:18px;
  color:var(--primary);
  font-weight:800;
  font-size:14px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center
}

.feature-panel {
  background:#172028;
  color:#fff;
  border-radius:30px;
  padding:36px;
  position:relative;
  overflow:hidden
}

.feature-panel:after {
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  background:rgba(0,110,183,.23);
  border-radius:50%;
  right:-120px;
  top:-110px
}

.feature-panel h3 {
  font-size:32px;
  line-height:1.15;
  margin:0 0 14px;
  position:relative;
  z-index:1
}

.feature-panel p {
  color:#bdc9d2;
  position:relative;
  z-index:1
}

.feature-list {
  display:grid;
  gap:13px;
  margin-top:26px;
  position:relative;
  z-index:1
}

.feature-list div {
  padding:14px 16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px
}

.feature-list b {
  display:block;
  font-size:14px
}

.feature-list span {
  font-size:12px;
  color:#aebcc6
}

.chips {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:24px
}

.chip {
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:700;
  color:#5d6872
}

.cta-band {
  background:linear-gradient(120deg,#005a96,#007cc8);
  color:#fff;
  border-radius:30px;
  padding:52px;
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:center;
  box-shadow:0 22px 60px rgba(0,110,183,.2)
}

.cta-band h2 {
  font-size:clamp(30px,4vw,48px);
  line-height:1.08;
  margin:0 0 12px;
  letter-spacing:-.03em
}

.cta-band p {
  margin:0;
  color:#d8eefb;
  max-width:670px
}

.cta-band .btn {
  background:#fff;
  color:var(--primary);
  flex:0 0 auto
}

.footer {
  margin-top:80px;
  background:#172028;
  color:#d2dbe2
}

.footer-main {
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr 1fr;
  gap:45px;
  padding:70px 0
}

.footer-logo {
  filter:none;
  opacity:1;
  width:190px
}

.footer p {
  color:#9fadb8;
  font-size:14px;
  max-width:360px
}

.footer h3,.footer h4 {
  color:#fff;
  margin:0 0 17px;
  font-size:14px
}

.footer a {
  display:block;
  color:#b8c4cd;
  font-size:14px;
  margin:9px 0
}

.footer a:hover {
  color:#fff
}

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding:18px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:#8797a3
}

.page-hero {
  background:linear-gradient(180deg,#f7fbfe,#fff);
  padding:76px 0 58px;
  border-bottom:1px solid var(--line)
}

.breadcrumbs {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:#7d8993;
  font-size:13px;
  margin-bottom:24px
}

.breadcrumbs a {
  color:var(--primary)
}

.page-hero h1 {
  font-size:clamp(40px,5vw,62px);
  line-height:1.05;
  letter-spacing:-.04em;
  margin:0 0 18px
}

.page-hero p {
  font-size:18px;
  color:var(--muted);
  max-width:760px;
  margin:0
}

.content-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:56px;
  align-items:start
}

.prose {
  min-width:0
}

.prose h1 {
  display:none
}

.prose h2 {
  font-size:30px;
  line-height:1.2;
  margin:42px 0 16px;
  letter-spacing:-.025em
}

.prose h3 {
  font-size:22px;
  line-height:1.28;
  margin:30px 0 12px
}

.prose p {
  color:#4f5a63;
  margin:0 0 17px
}

.prose ul,.prose ol {
  padding-left:22px;
  color:#4f5a63
}

.prose li {
  margin:8px 0
}

.prose strong {
  color:#252b31
}

.prose img {
  border-radius:18px;
  margin:24px 0;
  border:1px solid var(--line)
}

.prose details {
  border:1px solid var(--line);
  border-radius:14px;
  margin:12px 0;
  padding:0 18px;
  background:#fff
}

.prose summary {
  padding:17px 0;
  cursor:pointer;
  font-weight:800
}

.prose details p {
  padding-bottom:15px
}

.side-card {
  position:sticky;
  top:112px;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
  background:#fff;
  box-shadow:0 12px 36px rgba(27,53,72,.07)
}

.side-card h3 {
  margin:0 0 10px;
  font-size:22px
}

.side-card p {
  color:var(--muted);
  font-size:14px
}

.side-card .btn {
  width:100%;
  margin-top:8px
}

.side-links {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:16px
}

.side-links a {
  display:flex;
  justify-content:space-between;
  padding:9px 0;
  font-size:14px;
  font-weight:700;
  color:#4e5962
}

.side-links a:hover {
  color:var(--primary)
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.field {
  display:grid;
  gap:7px
}

.field.full {
  grid-column:1/-1
}

.field label {
  font-size:13px;
  font-weight:800
}

.field input,.field textarea,.field select {
  width:100%;
  border:1px solid #dce5eb;
  background:#fff;
  border-radius:11px;
  padding:13px 14px;
  outline:none
}

.field input:focus,.field textarea:focus,.field select:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(0,110,183,.09)
}

.field textarea {
  min-height:130px;
  resize:vertical
}

.reference-groups {
  display:grid;
  gap:24px
}

.reference-group {
  border:1px solid var(--line);
  border-radius:20px;
  padding:25px
}

.reference-group h3 {
  margin:0 0 14px
}

.logo-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px
}

.logo-placeholder {
  min-height:94px;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  place-items:center;
  text-align:center;
  padding:10px;
  color:#65727b;
  font-size:12px;
  background:#fff
}

.support-boxes {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}

.support-box {
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  background:#fff
}

.support-box h3 {
  margin-top:0
}

.floating-actions {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:45;
  display:grid;
  gap:9px
}

.float-btn {
  width:52px;
  height:52px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(26,43,57,.15);
  color:var(--primary);
  transition:.24s ease
}

.float-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(26,43,57,.22)
}

.float-btn.primary {
  background:var(--primary);
  color:#fff;
  border-color:var(--primary)
}

.float-btn.whatsapp {
  background:#25D366;
  color:#fff;
  border-color:#25D366
}

.float-btn.scroll-top {
  background:#172028;
  color:#fff;
  border-color:#172028;
  opacity:0;
  transform:translateY(10px);
  pointer-events:none
}

.float-btn.scroll-top.is-visible {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto
}

.float-btn svg {
  width:22px;
  height:22px
}

.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease
}

.reveal.visible {
  opacity:1;
  transform:none
}

@media(max-width:1020px) {
  .nav-links {
    display:none;
    position:absolute;
    left:20px;
    right:20px;
    top:88px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:12px;
    align-items:stretch;
    flex-direction:column
  }
  .nav-links.open {
    display:flex
  }
  .nav-links>a,.nav-item>a {
    display:block
  }
  .dropdown {
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    padding:0 0 0 14px;
    display:none
  }
  .nav-item.open .dropdown {
    display:block
  }
  .header-demo-btn {
    display:inline-flex
  }
  .menu-toggle {
    display:flex;
    position:relative
  }
  .hero-grid,.split {
    grid-template-columns:1fr;
    gap:46px
  }
  .hero-grid {
    min-height:auto;
    padding:72px 0
  }
  .dashboard {
    max-width:650px
  }
  .product-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .cards {
    grid-template-columns:repeat(2,1fr)
  }
  .content-layout {
    grid-template-columns:1fr
  }
  .side-card {
    position:static
  }
  .footer-main {
    grid-template-columns:1fr 1fr
  }
  .logo-grid {
    grid-template-columns:repeat(3,1fr)
  }
}

@media(max-width:720px) {
  .container {
    width:min(var(--container),calc(100% - 28px))
  }
  .topbar .inner {
    justify-content:center
  }
  .topbar-note {
    display:none
  }
  .topbar-links {
    gap:10px
  }
  .nav {
    min-height:72px
  }
  .brand img {
    width:145px
  }
  .section {
    padding:70px 0
  }
  .section-head {
    display:block
  }
  .section-head .btn {
    margin-top:18px
  }
  .cards,.product-grid,.support-boxes {
    grid-template-columns:1fr
  }
  .trust-inner {
    grid-template-columns:1fr 1fr
  }
  .trust-item:nth-child(2) {
    border-right:0
  }
  .trust-item:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
  .hero-points {
    display:grid;
    gap:11px
  }
  .dashboard {
    padding:15px
  }
  .dash-note {
    position:static;
    margin-top:12px
  }
  .cta-band {
    padding:34px 25px;
    display:block
  }
  .cta-band .btn {
    margin-top:24px
  }
  .footer-main {
    grid-template-columns:1fr
  }
  .footer-bottom {
    display:block
  }
  .form-grid {
    grid-template-columns:1fr
  }
  .field.full {
    grid-column:auto
  }
  .logo-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .page-hero {
    padding:58px 0 45px
  }
  .floating-actions {
    right:12px;
    bottom:12px
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important
  }
  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }
}

/* HM home slider — full-width editorial hero inspired by the reference site's presentation */ .home-slider {
  position:relative;
  height:clamp(620px,76vh,820px);
  min-height:620px;
  overflow:hidden;
  background:#07131d;
  color:#fff;
  isolation:isolate
}

.hm-slide {
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .85s ease,visibility .85s ease;
  z-index:1
}

.hm-slide.is-active {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:2
}

.hm-slide-bg {
  position:absolute;
  inset:-2%;
  background-size:cover;
  background-position:center right;
  transform:scale(1.055);
  transition:transform 7.4s cubic-bezier(.16,.84,.25,1);
  will-change:transform
}

.hm-slide.is-active .hm-slide-bg {
  transform:scale(1)
}

.hm-slide-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,16,25,.96) 0%,rgba(5,16,25,.88) 34%,rgba(5,16,25,.48) 60%,rgba(5,16,25,.12) 100%),linear-gradient(0deg,rgba(0,0,0,.22),transparent 40%)
}

.hm-slide-inner {
  position:relative;
  z-index:3;
  height:100%;
  display:flex;
  align-items:center;
  padding-top:12px
}

.hm-slide-copy {
  max-width:820px;
  padding-bottom:44px
}

.hm-slide-kicker {
  display:inline-flex;
  align-items:center;
  gap:13px;
  color:#a8dfff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:24px
}

.hm-slide-kicker:before {
  content:"";
  width:43px;
  height:2px;
  background:#1ba2f2
}

.hm-slide-copy h1,.hm-slide-copy h2 {
  margin:0;
  max-width:920px;
  color:#fff;
  font-size:clamp(48px,5.2vw,80px);
  line-height:.98;
  letter-spacing:-.052em;
  font-weight:800;
  text-transform:uppercase;
  text-wrap:balance
}

.hm-slide-copy h1 span,.hm-slide-copy h2 span {
  color:#fff
}

.hm-slide-copy p {
  max-width:690px;
  margin:28px 0 29px;
  color:rgba(255,255,255,.73);
  font-size:17px;
  line-height:1.72
}

.hm-slide-link {
  display:inline-flex;
  align-items:center;
  gap:22px;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.48);
  transition:.25s
}

.hm-slide-link span {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.38);
  border-radius:50%;
  transition:.25s
}

.hm-slide-link:hover {
  color:#81d4ff;
  border-color:#81d4ff
}

.hm-slide-link:hover span {
  transform:translateX(5px);
  border-color:#81d4ff
}

.hm-slider-side {
  position:absolute;
  z-index:4;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  color:rgba(255,255,255,.36);
  font-size:10px;
  font-weight:800;
  letter-spacing:.28em
}

.hm-slider-side:before,.hm-slider-side:after {
  content:"";
  display:inline-block;
  width:1px;
  height:50px;
  background:rgba(255,255,255,.22);
  margin:15px auto
}

.hm-slider-ui {
  position:absolute;
  z-index:5;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:27px
}

.hm-slider-index {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:93px;
  font-variant-numeric:tabular-nums
}

.hm-slider-index strong {
  font-size:14px;
  color:#fff
}

.hm-slider-index span {
  width:32px;
  height:1px;
  background:rgba(255,255,255,.35)
}

.hm-slider-index em {
  font-style:normal;
  font-size:11px;
  color:rgba(255,255,255,.45)
}

.hm-slider-dots {
  display:flex;
  align-items:center;
  gap:9px;
  margin-right:auto
}

.hm-slider-dots button {
  appearance:none;
  border:0;
  width:7px;
  height:7px;
  border-radius:99px;
  padding:0;
  background:rgba(255,255,255,.36);
  cursor:pointer;
  transition:.25s
}

.hm-slider-dots button.is-active {
  width:31px;
  background:#37b6ff
}

.hm-slider-arrows {
  display:flex;
  gap:8px
}

.hm-slider-arrows button {
  width:47px;
  height:47px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(7,19,29,.22);
  backdrop-filter:blur(7px);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  transition:.25s
}

.hm-slider-arrows button:hover {
  background:#006eb7;
  border-color:#006eb7
}

.hm-slider-progress {
  position:absolute;
  z-index:6;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:rgba(255,255,255,.08)
}

.hm-slider-progress span {
  display:block;
  height:100%;
  width:0;
  background:#1ca5f4
}

.home-slider.is-playing .hm-slider-progress span {
  animation:hmSliderProgress 7s linear forwards
}

@keyframes hmSliderProgress {
  from {
    width:0
  }
  to {
    width:100%
  }
}

@media(max-width:1020px) {
  .home-slider {
    height:680px;
    min-height:680px
  }
  .hm-slide-shade {
    background:linear-gradient(90deg,rgba(5,16,25,.95),rgba(5,16,25,.64) 72%,rgba(5,16,25,.35))
  }
  .hm-slide-copy {
    max-width:760px
  }
  .hm-slider-side {
    display:none
  }
  .hm-slider-ui {
    bottom:26px
  }
}

@media(max-width:720px) {
  .home-slider {
    height:650px;
    min-height:650px
  }
  .hm-slide-bg {
    background-position:66% center
  }
  .hm-slide-shade {
    background:linear-gradient(90deg,rgba(5,16,25,.96),rgba(5,16,25,.76)),linear-gradient(0deg,rgba(0,0,0,.25),transparent)
  }
  .hm-slide-inner {
    align-items:flex-start;
    padding-top:90px
  }
  .hm-slide-copy {
    padding-bottom:75px
  }
  .hm-slide-kicker {
    font-size:10px;
    letter-spacing:.14em;
    margin-bottom:18px
  }
  .hm-slide-kicker:before {
    width:28px
  }
  .hm-slide-copy h1,.hm-slide-copy h2 {
    font-size:clamp(36px,10vw,52px);
    line-height:1.02;
    letter-spacing:-.045em
  }
  .hm-slide-copy p {
    font-size:14px;
    line-height:1.62;
    margin:20px 0 22px;
    max-width:94%
  }
  .hm-slide-link {
    font-size:11px;
    gap:14px
  }
  .hm-slide-link span {
    width:30px;
    height:30px
  }
  .hm-slider-ui {
    bottom:22px;
    gap:15px
  }
  .hm-slider-dots {
    display:none
  }
  .hm-slider-index {
    min-width:auto
  }
  .hm-slider-index span {
    width:22px
  }
  .hm-slider-arrows button {
    width:42px;
    height:42px
  }
}

@media(prefers-reduced-motion:reduce) {
  .hm-slide,.hm-slide-bg,.hm-slide-link,.hm-slide-link span {
    transition:none!important
  }
  .home-slider.is-playing .hm-slider-progress span {
    animation:none!important;
    width:100%
  }
}

/* Brand and product logos */ .brand img {
  max-height:56px;
  width:auto
}

.footer-logo {
  max-width:210px;
  height:auto
}

.product-logo {
  display:block;
  max-width:220px;
  width:100%;
  height:46px;
  object-fit:contain;
  object-position:left center;
  margin:8px 0 14px;
  position:relative;
  z-index:1
}

.product-card h3 {
  font-size:0;
  line-height:0;
  margin:0
}

.page-product-logo {
  display:block;
  max-width:340px;
  width:100%;
  height:72px;
  object-fit:contain;
  object-position:left center;
  margin:10px 0 16px
}

.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

@media(max-width:720px) {
  .brand img {
    max-height:48px
  }
  .page-product-logo {
    max-width:280px;
    height:58px
  }
  .product-logo {
    max-width:190px;
    height:40px
  }
}

/* Only the İşletme Çözümleri section uses a dark theme */ .business-dark {
  background:#0d1821;
  color:#fff;
  position:relative;
  overflow:hidden
}

.business-dark:before {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 90% 10%,rgba(0,110,183,.22),transparent 34%),linear-gradient(135deg,#0b151d,#14242f);
  pointer-events:none
}

.business-dark .container {
  position:relative;
  z-index:1
}

.business-dark .eyebrow {
  color:#72c9ff
}

.business-dark .eyebrow:before {
  background:#2baaf4
}

.business-dark .section-title {
  color:#fff
}

.business-dark .section-title .blue {
  color:#55bdf7
}

.business-dark .section-lead {
  color:#aebdca
}

.business-dark .card {
  background:#15242e;
  border-color:rgba(255,255,255,.09);
  box-shadow:0 12px 30px rgba(0,0,0,.16)
}

.business-dark .card:hover {
  border-color:rgba(85,189,247,.45);
  box-shadow:0 18px 42px rgba(0,0,0,.24)
}

.business-dark .card h3 {
  color:#fff
}

.business-dark .card p {
  color:#adbbc6
}

.business-dark .icon {
  background:rgba(0,110,183,.18);
  color:#65c4fb
}

.business-dark .btn-ghost {
  color:#65c4fb
}

.brand img {
  width:auto;
  max-width:178px;
  max-height:58px;
  object-fit:contain
}

.footer-logo {
  width:auto;
  max-width:210px;
  max-height:118px;
  object-fit:contain
}

/* Alt sayfa görselli hero alanları — genel tema açık kalır */ .page-hero.page-hero-image {
  position:relative;
  overflow:hidden;
  padding:96px 0 72px;
  background-color:#172028;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  border-bottom:0;
  isolation:isolate;
}

.page-hero.page-hero-image::before {
  content:"";
  position:absolute;
  inset:0;
  background:     linear-gradient(90deg,rgba(8,19,29,.76) 0%,rgba(8,19,29,.54) 40%,rgba(8,19,29,.27) 72%,rgba(8,19,29,.18) 100%),     linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.16));
  z-index:0;
  pointer-events:none;
}

.page-hero.page-hero-image .container {
  position:relative;
  z-index:1
}

.page-hero.page-hero-image .breadcrumbs, .page-hero.page-hero-image .breadcrumbs a, .page-hero.page-hero-image .breadcrumbs span, .page-hero.page-hero-image .eyebrow, .page-hero.page-hero-image h1 {
  color:#fff
}

.page-hero.page-hero-image .breadcrumbs {
  opacity:.9
}

.page-hero.page-hero-image p {
  color:rgba(255,255,255,.92);
  max-width:760px
}

.page-hero.page-hero-image .page-product-logo {
  display:block;
  width:min(340px,80vw);
  height:auto;
  max-height:82px;
  object-fit:contain;
  object-position:left center;
  padding:12px 16px;
  margin:8px 0 18px;
  background:rgba(255,255,255,.96);
  border-radius:16px;
  box-shadow:0 16px 38px rgba(0,0,0,.16);
}

.page-hero.hero-products {
  background-image:url('../img/hero-products.webp')
}

.page-hero.hero-run {
  background-image:url('../img/hero-run.webp')
}

.page-hero.hero-jump {
  background-image:url('../img/hero-jump.webp')
}

.page-hero.hero-fly {
  background-image:url('../img/hero-fly.webp')
}

.page-hero.hero-musavir {
  background-image:url('../img/hero-musavir.webp')
}

.page-hero.hero-solutions {
  background-image:url('../img/hero-solutions.webp')
}

.page-hero.hero-custom {
  background-image:url('../img/hero-custom.webp')
}

.page-hero.hero-webmobile {
  background-image:url('../img/hero-webmobile.webp')
}

.page-hero.hero-support {
  background-image:url('../img/hero-support.webp')
}

.page-hero.hero-corporate {
  background-image:url('../img/hero-corporate.webp')
}

@media(max-width:720px) {
  .page-hero.page-hero-image {
    padding:72px 0 54px;
    background-position:center center
  }
  .page-hero.page-hero-image::before {
    background:linear-gradient(90deg,rgba(8,19,29,.84),rgba(8,19,29,.55))
  }
}

/* Header brand + Mikro partner placement */ .brand {
  display:flex;
  align-items:center;
  flex:0 0 auto
}

.brand .brand-logo {
  display:block!important;
  width:auto!important;
  height:58px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain
}

.nav-actions {
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto
}

.header-partner-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:104px;
  height:64px;
  padding:3px 5px;
  background:#fff;
  border-radius:10px
}

.header-partner-logo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.footer-logo {
  display:block!important;
  width:auto!important;
  height:90px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain
}

@media(max-width:1020px) {
  .brand .brand-logo {
    height:52px!important
  }
  .header-partner-logo {
    width:84px;
    height:54px
  }
}

@media(max-width:720px) {
  .brand .brand-logo {
    height:46px!important
  }
  .header-partner-logo {
    width:68px;
    height:46px;
    padding:2px 4px
  }
  .nav-actions {
    gap:8px
  }
  .footer-logo {
    height:76px!important
  }
}

/* Typography — tech-forward display font */ :root {
  --font-body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:"Space Grotesk",Inter,ui-sans-serif,system-ui,sans-serif
}

body {
  font-family:var(--font-body)
}

h1,h2,h3,h4,h5,h6,.display,.section-title,.hm-slide-copy h1,.hm-slide-copy h2,.nav-links>a,.nav-item>a,.dropdown a,.btn,.eyebrow,.product-card .tag,.trust-item strong,.feature-panel h3,.cta-band h2,.page-hero h1 {
  font-family:var(--font-display)
}

.nav-links>a,.nav-item>a,.dropdown a,.btn {
  letter-spacing:-.015em
}

.hm-slide-copy h1,.hm-slide-copy h2,.display,.section-title,.page-hero h1 {
  letter-spacing:-.045em
}

/* Header partner + demo CTA */ .nav-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto
}

.header-partner-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  width:108px;
  height:54px;
  padding:4px 6px;
  background:#fff;
  border:1px solid #e7edf2;
  border-radius:10px;
  flex:0 0 auto
}

.header-partner-logo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}

.header-demo-btn {
  min-height:46px;
  padding:0 16px;
  border-radius:11px;
  white-space:nowrap;
  box-shadow:0 9px 22px rgba(0,110,183,.18)
}

.header-demo-btn svg {
  width:17px;
  height:17px
}

@media(max-width:1120px) {
  .header-partner-logo {
    width:92px;
    height:50px
  }
  .header-demo-btn {
    padding:0 13px;
    font-size:13px
  }
}

@media(max-width:1020px) {
  .header-partner-logo {
    width:82px;
    height:48px
  }
  .header-demo-btn {
    min-height:44px;
    padding:0 12px
  }
}

@media(max-width:720px) {
  .nav-actions {
    gap:6px
  }
  .header-partner-logo {
    width:60px;
    height:42px;
    padding:2px 3px;
    border-radius:8px
  }
  .header-demo-btn {
    width:42px;
    min-width:42px;
    height:42px;
    min-height:42px;
    padding:0;
    border-radius:10px
  }
  .header-demo-btn span {
    display:none
  }
  .header-demo-btn svg {
    width:18px;
    height:18px
  }
}

/* ===== Ana sayfa tam ekran hero + hero üzerinde saydam header ===== */ .home-page .header {
  position:sticky;
  top:0;
  z-index:80;
  margin-bottom:-82px;
  background:rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:none;
  transition:background .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.home-page .header .nav {
  min-height:82px
}

.home-page .header:not(.is-solid) .nav-links>a, .home-page .header:not(.is-solid) .nav-item>a {
  color:#fff
}

.home-page .header:not(.is-solid) .nav-links>a:hover, .home-page .header:not(.is-solid) .nav-item>a:hover {
  color:#fff;
  background:rgba(255,255,255,.12)
}

.home-page .header:not(.is-solid) .brand {
  display:flex;
  align-items:center;
  padding:5px 9px;
  border-radius:12px;
  background:rgba(255,255,255,.90);
  box-shadow:0 8px 28px rgba(4,18,30,.10)
}

.home-page .header.is-solid {
  background:rgba(255,255,255,.96);
  border-bottom-color:rgba(231,237,242,.95);
  box-shadow:0 9px 28px rgba(21,42,58,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}

.home-page .header.is-solid .nav-links>a, .home-page .header.is-solid .nav-item>a {
  color:#313840
}

.home-page .header.is-solid .nav-links>a:hover, .home-page .header.is-solid .nav-item>a:hover {
  color:var(--primary);
  background:var(--primary-soft)
}

.home-page .home-slider {
  height:calc(100svh - 104px);
  min-height:620px;
  max-height:none
}

.home-page .hm-slide-inner {
  padding-top:82px
}

.home-page .hm-slide-copy {
  padding-bottom:34px
}

.home-page .trust-item {
  padding:16px 28px
}

.home-page .trust-item strong {
  font-size:22px;
  line-height:1.15
}

.home-page .trust-item span {
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.35
}

@media(max-width:1020px) {
  .home-page .header {
    margin-bottom:-76px
  }
  .home-page .header .nav {
    min-height:76px
  }
  .home-page .home-slider {
    height:calc(100svh - 104px);
    min-height:600px
  }
  .home-page .hm-slide-inner {
    padding-top:76px
  }
}

@media(max-width:720px) {
  .home-page .header {
    margin-bottom:-72px
  }
  .home-page .header .nav {
    min-height:72px
  }
  .home-page .header:not(.is-solid) .nav-links {
    background:rgba(255,255,255,.98)
  }
  .home-page .header:not(.is-solid) .nav-links>a,   .home-page .header:not(.is-solid) .nav-item>a {
    color:#313840
  }
  .home-page .home-slider {
    height:calc(100svh - 236px);
    min-height:560px
  }
  .home-page .hm-slide-inner {
    padding-top:118px
  }
  .home-page .trust-item {
    padding:12px 14px
  }
  .home-page .trust-item strong {
    font-size:19px
  }
  .home-page .trust-item span {
    font-size:11px
  }
}

/* Marketing value strip */ .marketing-strip {
  position:relative;
  z-index:9;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.marketing-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.marketing-item {
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr 18px;
  gap:13px;
  align-items:center;
  min-height:104px;
  padding:16px 18px;
  border-right:1px solid var(--line);
  background:#fff;
  transition:.25s ease;
  overflow:hidden
}

.marketing-item:last-child {
  border-right:0
}

.marketing-item:before {
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:0;
  height:3px;
  background:var(--primary);
  transition:.3s ease
}

.marketing-item:hover {
  background:#f7fbfe;
  box-shadow:0 -10px 32px rgba(25,65,90,.06)
}

.marketing-item:hover:before {
  right:0
}

.marketing-icon {
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:var(--primary-soft);
  color:var(--primary);
  transition:.25s
}

.marketing-icon svg {
  width:21px;
  height:21px
}

.marketing-item:hover .marketing-icon {
  background:var(--primary);
  color:#fff;
  transform:translateY(-2px)
}

.marketing-kicker {
  display:block;
  margin-bottom:4px;
  color:var(--primary);
  font-family:var(--font-display);
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em
}

.marketing-item strong {
  display:block;
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.22;
  letter-spacing:-.02em;
  color:var(--ink)
}

.marketing-item small {
  display:block;
  margin-top:4px;
  font-size:10.5px;
  line-height:1.35;
  color:var(--muted)
}

.marketing-arrow {
  align-self:center;
  color:#9aa8b2;
  font-size:18px;
  transition:.25s
}

.marketing-item:hover .marketing-arrow {
  color:var(--primary);
  transform:translateX(3px)
}

@media(max-width:1020px) {
  .marketing-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .marketing-item:nth-child(2) {
    border-right:0
  }
  .marketing-item:nth-child(-n+2) {
    border-bottom:1px solid var(--line)
  }
}

@media(max-width:720px) {
  .marketing-grid {
    grid-template-columns:1fr 1fr
  }
  .marketing-item {
    grid-template-columns:34px 1fr;
    min-height:118px;
    padding:13px 12px;
    gap:9px
  }
  .marketing-item:nth-child(odd) {
    border-right:1px solid var(--line)
  }
  .marketing-icon {
    width:34px;
    height:34px;
    border-radius:10px
  }
  .marketing-icon svg {
    width:18px;
    height:18px
  }
  .marketing-arrow {
    display:none
  }
  .marketing-kicker {
    font-size:8px
  }
  .marketing-item strong {
    font-size:13px
  }
  .marketing-item small {
    font-size:9.5px
  }
}

/* ===== Subtle transparent home header ===== */ .home-page .header {
  background:rgba(7,19,29,.24)!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.home-page .header:not(.is-solid) .brand {
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
}

.home-page .header:not(.is-solid) .brand-logo {
  width:auto;
  max-width:178px;
  max-height:58px;
  filter:none;
}

.home-page .header.is-solid {
  background:#fff!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:0 8px 24px rgba(21,42,58,.07)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* Partner logo and demo CTA use the same visual height */ .header-partner-logo, .header-demo-btn {
  height:54px!important;
  min-height:54px!important;
}

.header-demo-btn {
  padding:0 18px!important;
  border-radius:10px!important;
}

@media(max-width:1020px) {
  .header-partner-logo,   .header-demo-btn {
    height:50px!important;
    min-height:50px!important
  }
}

@media(max-width:720px) {
  .header-partner-logo,   .header-demo-btn {
    height:42px!important;
    min-height:42px!important
  }
  .home-page .header:not(.is-solid) .brand-logo {
    max-width:145px;
    max-height:48px
  }
}

/* Hero header micro-details */ .home-page .header:not(.is-solid) .nav-links>a, .home-page .header:not(.is-solid) .nav-item>a {
  transition:background .2s ease,color .2s ease
}

.home-page .header:not(.is-solid) .nav-links>a:hover, .home-page .header:not(.is-solid) .nav-item>a:hover {
  background:rgba(255,255,255,.07)!important
}

/* ===== Full viewport hero + larger marketing band ===== */
/* Topbar is 38px high; header overlays the hero. Together the first scene fills the viewport. */ .home-page .home-slider {
  height:calc(100svh - 38px)!important;
  min-height:680px!important;
  max-height:none!important;
}

.home-page .hm-slide-inner {
  padding-top:96px!important;
}

.home-page .hm-slide-copy {
  padding-bottom:36px!important;
}

/* Give the four value propositions more presence and readability */ .marketing-strip {
  background:#fff;
  border-top:1px solid #e1e8ed;
  border-bottom:1px solid #e1e8ed;
}

.marketing-grid {
  align-items:stretch;
}

.marketing-item {
  grid-template-columns:56px 1fr 24px!important;
  gap:18px!important;
  min-height:154px!important;
  padding:26px 24px!important;
}

.marketing-icon {
  width:52px!important;
  height:52px!important;
  border-radius:15px!important;
}

.marketing-icon svg {
  width:26px!important;
  height:26px!important;
}

.marketing-kicker {
  margin-bottom:7px!important;
  font-size:10px!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
}

.marketing-item strong {
  font-size:18px!important;
  line-height:1.28!important;
  letter-spacing:-.025em!important;
}

.marketing-item small {
  margin-top:7px!important;
  font-size:12.5px!important;
  line-height:1.5!important;
  color:#66727c!important;
}

.marketing-arrow {
  font-size:22px!important;
}

@media(max-width:1020px) {
  .home-page .home-slider {
    height:calc(100svh - 38px)!important;
    min-height:640px!important;
  }
  .home-page .hm-slide-inner {
    padding-top:88px!important
  }
  .marketing-item {
    min-height:142px!important;
    padding:22px 22px!important;
  }
  .marketing-item strong {
    font-size:17px!important
  }
  .marketing-item small {
    font-size:12px!important
  }
}

@media(max-width:720px) {
  .home-page .home-slider {
    height:calc(100svh - 38px)!important;
    min-height:620px!important;
  }
  .home-page .hm-slide-inner {
    padding-top:120px!important;
  }
  .marketing-grid {
    grid-template-columns:1fr!important;
  }
  .marketing-item {
    grid-template-columns:48px 1fr 20px!important;
    min-height:122px!important;
    padding:20px 18px!important;
    gap:14px!important;
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }
  .marketing-item:last-child {
    border-bottom:0!important
  }
  .marketing-icon {
    width:46px!important;
    height:46px!important;
    border-radius:13px!important;
  }
  .marketing-icon svg {
    width:23px!important;
    height:23px!important;
  }
  .marketing-kicker {
    font-size:9px!important
  }
  .marketing-item strong {
    font-size:16px!important;
    line-height:1.3!important
  }
  .marketing-item small {
    font-size:11.5px!important;
    line-height:1.45!important
  }
  .marketing-arrow {
    display:block!important;
    font-size:19px!important
  }
}

/* ===== HM Grup logo boyut dengesi: header + footer ===== */ .brand .brand-logo, .footer-logo {
  display:block!important;
  width:auto!important;
  height:58px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain;
}

.footer-logo {
  margin:0 0 18px;
}

@media(max-width:1020px) {
  .brand .brand-logo,   .footer-logo {
    height:52px!important
  }
}

@media(max-width:720px) {
  .brand .brand-logo,   .footer-logo {
    height:46px!important
  }
  .footer-logo {
    margin-bottom:16px
  }
}

/* ===== Logo 70px + menu 15px + primary scroll-top ===== */
/* Header ve footer HM Grup logolari ayni masaustu yuksekliginde */ .brand .brand-logo, .footer-logo {
  display:block!important;
  width:auto!important;
  height:70px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
}

/* 70px logoya nefes veren header yuksekligi */ .nav, .home-page .header .nav {
  min-height:96px!important;
}

.home-page .header {
  margin-bottom:-96px!important;
}

.home-page .hm-slide-inner {
  padding-top:112px!important;
}

/* Ana menu tipografisi */ .nav-links>a, .nav-item>a {
  font-size:15px!important;
}

.dropdown a {
  font-size:14px!important;
}

/* Yukari kaydir: footer uzerinde de belirgin HM ana rengi */ .float-btn.scroll-top, .float-btn.scroll-top.is-visible {
  background:var(--primary)!important;
  color:#fff!important;
  border-color:var(--primary)!important;
  box-shadow:0 10px 28px rgba(0,110,183,.28)!important;
  z-index:90;
}

.float-btn.scroll-top.is-visible:hover {
  background:var(--primary-dark)!important;
  border-color:var(--primary-dark)!important;
  box-shadow:0 14px 34px rgba(0,90,150,.34)!important;
}

@media(max-width:1020px) {
  .brand .brand-logo,   .footer-logo {
    height:58px!important
  }
  .nav,   .home-page .header .nav {
    min-height:82px!important
  }
  .home-page .header {
    margin-bottom:-82px!important
  }
  .home-page .hm-slide-inner {
    padding-top:100px!important
  }
}

@media(max-width:720px) {
  .brand .brand-logo,   .footer-logo {
    height:50px!important
  }
  .nav,   .home-page .header .nav {
    min-height:72px!important
  }
  .home-page .header {
    margin-bottom:-72px!important
  }
  .home-page .hm-slide-inner {
    padding-top:118px!important
  }
  .nav-links>a,   .nav-item>a {
    font-size:15px!important
  }
}

/* ===== 2026-09 Çözümler IA + mega menu + footer üstü uzaktan destek ===== */ .nav {
  position:relative
}

.solutions-menu {
  position:static
}

.mega-dropdown {
  left:50%!important;
  width:min(780px,calc(100vw - 48px));
  min-width:0!important;
  padding:16px!important;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  transform:translate(-50%,8px)!important;
}

.solutions-menu:hover .mega-dropdown {
  transform:translate(-50%,0)!important
}

.mega-group {
  padding:8px;
  border-radius:12px
}

.mega-title {
  display:block;
  padding:4px 10px 9px;
  color:#8b98a2;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}

.mega-dropdown .mega-group a {
  padding:8px 10px;
  font-size:13px!important
}

.mega-dropdown .mega-all {
  color:var(--primary);
  margin-top:4px;
  border-top:1px solid var(--line);
  border-radius:0;
  padding-top:12px!important
}

.remote-support-strip {
  position:relative;
  background:linear-gradient(180deg,#f8fbfd 0%,#f2f7fa 100%);
  border-top:1px solid #e4edf3;
  padding:52px 0;
  scroll-margin-top:110px;
}

.remote-support-inner {
  display:grid;
  grid-template-columns:1.05fr 1.95fr;
  gap:54px;
  align-items:center
}

.remote-support-copy h2 {
  margin:7px 0 12px;
  font-size:clamp(26px,2.6vw,40px);
  line-height:1.08;
  letter-spacing:-.035em
}

.remote-support-copy p {
  margin:0;
  color:#6f7d88;
  font-size:14px;
  line-height:1.65;
  max-width:520px
}

.remote-tools {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.remote-tool {
  min-height:132px;
  background:#fff;
  border:1px solid #dfe9ef;
  border-radius:18px;
  padding:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:.22s ease;
  box-shadow:0 10px 28px rgba(25,48,66,.04)
}

.remote-tool:hover {
  transform:translateY(-3px);
  border-color:rgba(0,110,183,.35);
  box-shadow:0 16px 36px rgba(25,48,66,.10)
}

.remote-logo {
  position:relative;
  display:block;
  width:100%;
  height:64px
}

.remote-logo img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  transition:opacity .2s ease
}

.remote-logo .logo-hover {
  opacity:0
}

.remote-tool:hover .logo-default {
  opacity:0
}

.remote-tool:hover .logo-hover {
  opacity:1
}

.remote-download {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:12px;
  border-top:1px solid #edf2f5;
  color:#4d5a64;
  font-size:12px;
  font-weight:750
}

.remote-tool:hover .remote-download {
  color:var(--primary)
}

.remote-download b {
  font-size:16px;
  font-weight:600
}

.footer {
  margin-top:0!important
}

.footer-main {
  grid-template-columns:1.35fr .7fr .9fr .8fr 1fr!important;
  gap:34px!important
}

.solutions-overview {
  background:#fff
}

.solutions-intro {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:70px;
  align-items:end;
  margin-bottom:58px
}

.solution-group {
  padding:44px 0;
  border-top:1px solid var(--line)
}

.solution-group-head {
  display:grid;
  grid-template-columns:56px 1fr;
  gap:22px;
  align-items:start;
  margin-bottom:24px
}

.solution-group-head>span {
  font-family:var(--font-display);
  font-size:12px;
  font-weight:800;
  color:var(--primary);
  letter-spacing:.12em;
  border-top:2px solid var(--primary);
  padding-top:8px
}

.solution-group-head h3 {
  margin:0 0 5px;
  font-size:25px;
  letter-spacing:-.03em
}

.solution-group-head p {
  margin:0;
  color:var(--muted);
  font-size:14px
}

.solution-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

.solution-grid-three {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.solution-card {
  position:relative;
  min-height:260px;
  padding:26px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  transition:.22s ease;
  scroll-margin-top:130px
}

.solution-card:hover {
  transform:translateY(-4px);
  border-color:rgba(0,110,183,.35);
  box-shadow:0 16px 42px rgba(19,53,76,.09)
}

.solution-no {
  font-family:var(--font-display);
  color:#a9b5be;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em
}

.solution-card h4 {
  font-size:19px;
  margin:24px 0 10px;
  letter-spacing:-.025em
}

.solution-card p {
  font-size:13.5px;
  line-height:1.65;
  color:var(--muted);
  margin:0 0 22px
}

.solution-card a {
  margin-top:auto;
  font-size:12px;
  font-weight:800;
  color:var(--primary)
}

.solution-cta {
  margin-top:36px;
  padding:38px 42px;
  border-radius:22px;
  background:#172028;
  color:#fff;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center
}

.solution-cta .eyebrow {
  color:#7fd0ff
}

.solution-cta h3 {
  font-size:28px;
  margin:7px 0 8px;
  color:#fff
}

.solution-cta p {
  margin:0;
  color:#aebbc4;
  max-width:700px;
  font-size:14px
}

.solution-cta .btn {
  flex:0 0 auto
}

.featured-solutions .card {
  position:relative;
  overflow:hidden
}

.solution-kicker {
  display:block;
  margin-bottom:24px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:#77c7f5
}

.featured-solutions .card h3 {
  margin-top:0
}

@media(max-width:1180px) {
  .nav-links {
    gap:2px
  }
  .nav-links>a,.nav-item>a {
    padding-left:8px!important;
    padding-right:8px!important;
    font-size:14px!important
  }
  .header-partner-logo {
    width:90px!important
  }
  .header-demo-btn {
    padding-left:14px!important;
    padding-right:14px!important
  }
  .footer-main {
    grid-template-columns:1.3fr 1fr 1fr!important
  }
  .footer-main>div:nth-child(4),.footer-main>div:nth-child(5) {
    margin-top:6px
  }
}

@media(max-width:1020px) {
  .mega-dropdown {
    position:static!important;
    width:auto!important;
    display:none;
    grid-template-columns:1fr;
    transform:none!important;
    padding:0 0 0 14px!important
  }
  .nav-item.open .mega-dropdown {
    display:block!important
  }
  .mega-group {
    padding:4px 0
  }
  .mega-title {
    padding:9px 10px 5px
  }
  .remote-support-inner {
    grid-template-columns:1fr;
    gap:28px
  }
  .solution-grid,.solution-grid-three {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .solutions-intro {
    grid-template-columns:1fr;
    gap:20px
  }
  .footer-main {
    grid-template-columns:1fr 1fr!important
  }
}

@media(max-width:720px) {
  .remote-support-strip {
    padding:42px 0
  }
  .remote-tools {
    grid-template-columns:1fr
  }
  .remote-tool {
    min-height:112px
  }
  .remote-logo {
    height:52px
  }
  .solution-grid,.solution-grid-three {
    grid-template-columns:1fr
  }
  .solution-card {
    min-height:220px
  }
  .solution-cta {
    display:block;
    padding:30px 24px
  }
  .solution-cta .btn {
    margin-top:22px
  }
  .footer-main {
    grid-template-columns:1fr!important
  }
}

/* ===== SEO/AI revizyonu: çözüm ikonları + local presence ===== */ .menu-solution-icon {
  width:28px;
  height:28px;
  border-radius:8px;
  background:var(--primary-soft);
  color:var(--primary);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px
}

.menu-solution-icon svg {
  width:16px;
  height:16px
}

.mega-dropdown .mega-group a:has(.menu-solution-icon) {
  display:flex;
  align-items:center;
  gap:9px
}

.solution-icon {
  display:flex;
  width:44px;
  height:44px;
  margin-top:18px;
  border-radius:12px;
  align-items:center;
  justify-content:center;
  background:var(--primary-soft);
  color:var(--primary)
}

.solution-icon svg {
  width:24px;
  height:24px
}

.solution-card .solution-icon + h4 {
  margin-top:16px
}

.local-presence-section {
  background:#f7fafc;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.local-presence-inner {
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:60px;
  align-items:center
}

.local-presence-inner p {
  max-width:780px;
  color:var(--muted)
}

.local-presence-actions {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  max-width:320px;
  margin-left:auto;
  width:100%
}

.area-chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px
}

.area-chips span {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 12px;
  border:1px solid #dfe9ef;
  border-radius:999px;
  background:#fff;
  color:#53616b;
  font-size:12px;
  font-weight:700
}

.local-area-box {
  margin-top:48px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#f8fbfd;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center
}

.local-area-box h3 {
  margin:6px 0 8px;
  font-size:24px
}

.local-area-box p {
  margin:0;
  color:var(--muted)
}

.local-service-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:0
}

.check-list {
  margin:18px 0 26px;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px
}

.check-list li {
  position:relative;
  padding-left:25px;
  color:var(--muted);
  font-size:14px
}

.check-list li:before {
  content:'✓';
  position:absolute;
  left:0;
  top:0;
  color:var(--primary);
  font-weight:900
}

@media(max-width:1020px) {
  .local-presence-inner,.local-area-box {
    grid-template-columns:1fr
  }
  .local-presence-actions {
    margin-left:0
  }
  .local-service-grid {
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:720px) {
  .mega-dropdown .mega-group a:has(.menu-solution-icon) {
    display:flex
  }
  .local-service-grid {
    grid-template-columns:1fr
  }
  .local-area-box {
    padding:24px
  }
  .area-chips span {
    font-size:11px
  }
}

.featured-solution-icon {
  display:flex;
  width:46px;
  height:46px;
  margin:0 0 16px;
  border-radius:13px;
  align-items:center;
  justify-content:center;
  background:rgba(0,110,183,.16);
  color:#7fd0ff;
  border:1px solid rgba(127,208,255,.14)
}

.featured-solution-icon svg {
  width:25px;
  height:25px
}

/* ===== 2026-09 Yerel SEO + Uzaktan Destek arka plan ayrımı ===== */ .local-presence-section {
  position:relative;
  overflow:hidden;
  background:     radial-gradient(circle at 12% 18%, rgba(0,110,183,.10), transparent 34%),     linear-gradient(135deg,#f2f9fd 0%,#eaf5fb 48%,#f7fbfd 100%);
  border-top:1px solid rgba(0,110,183,.10);
  border-bottom:1px solid rgba(0,110,183,.12);
}

.local-presence-section::before {
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  right:-90px;
  top:-120px;
  border:1px solid rgba(0,110,183,.10);
  border-radius:50%;
  pointer-events:none;
}

.local-presence-section .container {
  position:relative;
  z-index:1
}

.local-presence-section .area-chips span {
  background:rgba(255,255,255,.82);
  border-color:rgba(0,110,183,.16);
  color:#465965;
}

.remote-support-strip {
  position:relative;
  overflow:hidden;
  background:     linear-gradient(180deg,#f4f6f8 0%,#edf1f4 100%);
  border-top:1px solid #dbe3e8;
  border-bottom:1px solid #dbe3e8;
}

.remote-support-strip::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(0,110,183,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,110,183,.025) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to right,transparent,black 18%,black 82%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,black 18%,black 82%,transparent);
  pointer-events:none;
}

.remote-support-inner {
  position:relative;
  z-index:1
}

.remote-support-copy .eyebrow {
  color:#5b6a74
}

.remote-support-copy h2 {
  color:#1f2b33
}

.remote-support-copy p {
  color:#687780
}

.remote-tool {
  background:rgba(255,255,255,.94);
  border-color:#d7e1e7;
  box-shadow:0 12px 30px rgba(25,48,66,.055);
}

.remote-tool:hover {
  background:#fff;
  border-color:rgba(0,110,183,.34);
  box-shadow:0 18px 38px rgba(25,48,66,.11);
}

/* ===== Yerel SEO ilçe sayfaları + favicon revizyonu ===== */ .area-chips.area-links a {
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:7px 13px;
  border:1px solid rgba(0,110,183,.16);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:#40545f;
  font-size:12px;
  font-weight:750;
  transition:.18s ease;
}

.area-chips.area-links a:hover, .area-chips.area-links a.is-current {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  transform:translateY(-1px);
}

.district-page {
  background:#fff
}

.district-intro {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:64px;
  align-items:start;
}

.district-contact {
  position:sticky;
  top:122px
}

.district-contact p {
  color:var(--muted);
  font-size:14px;
  line-height:1.7
}

.district-contact-lines {
  display:grid;
  gap:7px;
  margin:18px 0 22px
}

.district-contact-lines a {
  color:var(--primary);
  font-weight:750
}

.district-focus {
  margin-top:72px
}

.section-head.compact {
  margin-bottom:24px
}

.district-focus .support-box {
  min-height:210px
}

.district-focus .support-box h3 {
  font-size:18px
}

.district-focus .support-box p {
  font-size:13.5px;
  line-height:1.7;
  color:var(--muted)
}

.district-products {
  margin-top:56px
}

.district-product-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.district-product-links a {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:48px;
  padding:10px 14px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  font-weight:750;
  color:#34434d
}

.district-product-links a:after {
  content:"→";
  color:var(--primary)
}

.district-product-links a:hover {
  border-color:rgba(0,110,183,.35);
  color:var(--primary)
}

.district-network {
  margin-top:72px;
  padding-top:48px;
  border-top:1px solid var(--line)
}

.district-network>p {
  max-width:820px;
  color:var(--muted)
}

.district-directory {
  margin-top:58px;
  padding:38px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#f8fbfd
}

.district-directory>p {
  max-width:850px;
  color:var(--muted)
}

@media(max-width:1020px) {
  .district-intro {
    grid-template-columns:1fr
  }
  .district-contact {
    position:static
  }
}

@media(max-width:720px) {
  .district-product-links {
    grid-template-columns:1fr
  }
  .district-directory {
    padding:26px 22px
  }
}

/* ===== Referanslar: sektör SVG ikon kartları ===== */ .sector-reference-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:36px;
}

.sector-reference-card {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:92px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 26px rgba(20,43,60,.05);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.sector-reference-card:hover {
  transform:translateY(-3px);
  border-color:rgba(0,110,183,.28);
  box-shadow:0 14px 34px rgba(20,43,60,.09);
}

.sector-reference-icon {
  display:grid;
  place-items:center;
  flex:0 0 54px;
  width:54px;
  height:54px;
  border-radius:15px;
  background:linear-gradient(145deg,#f3f9fd,#e8f3fa);
  border:1px solid rgba(0,110,183,.10);
}

.sector-reference-icon img {
  display:block;
  width:34px;
  height:34px;
}

.sector-reference-card strong {
  font-family:"Space Grotesk",sans-serif;
  font-size:15px;
  line-height:1.3;
  color:#26333d;
}

@media(max-width:1020px) {
  .sector-reference-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:760px) {
  .sector-reference-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .sector-reference-card {
    min-height:84px;
    padding:16px;
    gap:11px
  }
  .sector-reference-icon {
    flex-basis:46px;
    width:46px;
    height:46px;
    border-radius:13px
  }
  .sector-reference-icon img {
    width:29px;
    height:29px
  }
  .sector-reference-card strong {
    font-size:14px
  }
}

@media(max-width:430px) {
  .sector-reference-grid {
    grid-template-columns:1fr
  }
}

/* ===== Sosyal medya alanları ===== */ .footer-social {
  margin-top:22px;
}

.footer-social-label {
  display:block;
  margin-bottom:10px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.footer-social-links {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.footer-social-links a {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:10px;
  color:#fff;
  background:rgba(255,255,255,.045);
  font-size:12px;
  font-weight:650;
  transition:.18s ease;
}

.footer-social-links a:hover {
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.09);
}

.footer-social-links svg {
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.contact-social-section {
  padding:0 0 84px;
  background:#fff;
}

.contact-social-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:56px;
  align-items:center;
  padding:38px 42px;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(145deg,#f8fbfd,#eef7fc);
}

.contact-social-card p {
  max-width:680px;
  color:var(--muted);
  line-height:1.7;
}

.contact-social-links {
  display:grid;
  gap:12px;
}

.social-platform {
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;
  align-items:center;
  min-height:72px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  color:#26333d;
  transition:.18s ease;
}

.social-platform:hover {
  transform:translateY(-2px);
  border-color:rgba(0,110,183,.25);
  box-shadow:0 10px 26px rgba(20,43,60,.07);
}

.social-platform svg {
  width:30px;
  height:30px;
  color:var(--primary);
}

.social-platform span {
  display:grid;
  gap:2px;
}

.social-platform strong {
  font-family:"Space Grotesk",sans-serif;
  font-size:15px;
}

.social-platform small {
  color:var(--muted);
  font-size:12px;
}

.social-platform b {
  color:var(--primary);
  font-size:18px;
}

@media(max-width:900px) {
  .contact-social-card {
    grid-template-columns:1fr;
    gap:28px
  }
}

@media(max-width:600px) {
  .contact-social-card {
    padding:28px 22px
  }
  .footer-social-links a span {
    display:none
  }
}

/* ===== Hero çalışma saatleri + sosyal medya ===== */ .hero-contact-meta {
  position:absolute;
  z-index:7;
  right:max(72px,calc((100vw - var(--container))/2));
  bottom:104px;
  display:flex;
  align-items:center;
  gap:20px;
  padding:15px 18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:rgba(7,19,29,.34);
  color:#fff;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  box-shadow:0 12px 36px rgba(0,0,0,.10);
}

.hero-hours {
  display:flex;
  align-items:center;
  gap:11px;
}

.hero-meta-icon {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  flex:0 0 35px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:#8bd8ff;
  background:rgba(255,255,255,.045);
}

.hero-meta-icon svg {
  width:17px;
  height:17px;
}

.hero-meta-copy {
  display:grid;
  gap:2px;
}

.hero-meta-copy small, .hero-social>small {
  color:rgba(255,255,255,.54);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero-meta-copy strong {
  display:flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-family:var(--font-display);
  font-size:12px;
  line-height:1.25;
  letter-spacing:-.01em;
}

.hero-meta-copy strong b {
  color:#9dddff;
  font-weight:700;
}

.hero-meta-copy em {
  color:rgba(255,255,255,.48);
  font-size:9.5px;
  font-style:normal;
}

.hero-meta-separator {
  width:1px;
  height:42px;
  background:rgba(255,255,255,.14);
}

.hero-social {
  display:grid;
  gap:7px;
}

.hero-social-links {
  display:flex;
  align-items:center;
  gap:7px;
}

.hero-social-links a {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.17);
  border-radius:50%;
  color:#fff;
  background:rgba(255,255,255,.045);
  transition:.18s ease;
}

.hero-social-links a:hover {
  color:#fff;
  background:var(--primary);
  border-color:var(--primary);
  transform:translateY(-2px);
}

.hero-social-links svg {
  width:17px;
  height:17px;
}

@media(max-width:1180px) {
  .hero-contact-meta {
    right:28px;
    bottom:104px;
  }
}

@media(max-width:900px) {
  .hero-contact-meta {
    right:20px;
    bottom:94px;
    padding:12px 14px;
    gap:14px;
  }
  .hero-meta-separator {
    height:36px
  }
}

@media(max-width:720px) {
  .hero-contact-meta {
    left:14px;
    right:14px;
    bottom:82px;
    justify-content:space-between;
    padding:11px 13px;
    border-radius:13px;
  }
  .hero-meta-copy small,   .hero-social>small {
    font-size:8px
  }
  .hero-meta-copy strong {
    font-size:11px
  }
  .hero-meta-copy em {
    display:none
  }
  .hero-meta-icon {
    width:31px;
    height:31px;
    flex-basis:31px
  }
  .hero-social-links a {
    width:31px;
    height:31px
  }
}

@media(max-width:430px) {
  .hero-meta-copy strong {
    display:grid;
    gap:0;
  }
  .hero-meta-separator {
    margin-left:auto
  }
}

/* ===== Blog / Bilgi Merkezi ===== */ .home-blog-section {
  background:linear-gradient(180deg,#fff 0%,#f8fbfd 100%);
}

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.blog-card {
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:330px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(20,43,60,.045);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.blog-card:hover {
  transform:translateY(-4px);
  border-color:rgba(0,110,183,.24);
  box-shadow:0 18px 42px rgba(20,43,60,.09);
}

.blog-card-icon {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin-bottom:20px;
  border-radius:16px;
}

.blog-card-icon img {
  display:block;
  width:64px;
  height:64px
}

.blog-card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  color:#7a8791;
  font-size:10px;
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.blog-card-meta span {
  color:var(--primary)
}

.blog-card h3 {
  margin:0 0 12px;
  font-family:var(--font-display);
  font-size:19px;
  line-height:1.28;
  letter-spacing:-.02em;
}

.blog-card h3 a {
  color:#26333d
}

.blog-card h3 a:hover {
  color:var(--primary)
}

.blog-card p {
  margin:0 0 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

.blog-card-more {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:auto;
  color:var(--primary);
  font-size:12px;
  font-weight:800;
}

.blog-card-more span {
  transition:transform .18s ease
}

.blog-card:hover .blog-card-more span {
  transform:translateX(4px)
}

.blog-article-hero {
  padding:82px 0 62px;
  background:     radial-gradient(circle at 85% 30%,rgba(0,110,183,.13),transparent 30%),     linear-gradient(135deg,#f8fbfd,#eef6fb);
  border-bottom:1px solid var(--line);
}

.blog-hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 160px;
  gap:42px;
  align-items:center;
}

.blog-article-hero h1 {
  max-width:900px;
  margin:10px 0 18px;
  font-size:clamp(36px,5vw,64px);
  line-height:1.04;
  letter-spacing:-.045em;
  color:#202b33;
}

.blog-article-hero p {
  max-width:780px;
  color:#5f6f79;
  font-size:16px;
  line-height:1.7;
}

.blog-hero-icon {
  display:grid;
  place-items:center;
  width:150px;
  height:150px;
  border-radius:30px;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(0,110,183,.10);
  box-shadow:0 18px 55px rgba(20,43,60,.08);
}

.blog-hero-icon img {
  width:110px;
  height:110px
}

.article-section {
  background:#fff
}

.article-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:70px;
  align-items:start;
}

.article-content {
  max-width:820px;
  color:#3f4c55;
  font-size:15px;
  line-height:1.82;
}

.article-content>p:first-child {
  font-size:18px;
  line-height:1.75;
  color:#34434d;
}

.article-content h2 {
  margin:42px 0 14px;
  font-family:var(--font-display);
  font-size:28px;
  line-height:1.18;
  letter-spacing:-.025em;
  color:#202b33;
}

.article-content h3 {
  margin:28px 0 12px;
  font-family:var(--font-display);
  color:#26333d;
}

.article-content ul, .article-content ol {
  display:grid;
  gap:8px;
  margin:18px 0 24px;
  padding-left:22px;
}

.article-content li::marker {
  color:var(--primary);
  font-weight:800
}

.article-note {
  margin:32px 0;
  padding:20px 22px;
  border-left:4px solid var(--primary);
  border-radius:0 14px 14px 0;
  background:#f3f9fd;
  color:#40515c;
}

.article-sources {
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid var(--line);
}

.article-sources h3 {
  margin-top:0
}

.article-sources ul {
  padding-left:18px
}

.article-sources a {
  color:var(--primary)
}

.article-sidebar {
  position:sticky;
  top:122px;
  display:grid;
  gap:18px;
}

.article-side-card {
  padding:26px;
  border-radius:20px;
  background:linear-gradient(145deg,#0b75b9,#005a96);
  color:#fff;
}

.article-side-card .eyebrow {
  color:rgba(255,255,255,.64)
}

.article-side-card h3 {
  margin:8px 0 12px;
  font-family:var(--font-display);
  font-size:23px;
  line-height:1.2;
}

.article-side-card p {
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.65;
}

.article-side-card .btn {
  margin-top:10px;
  background:#fff;
  color:var(--primary);
}

.article-phone {
  display:block;
  margin-top:18px;
  color:#fff;
  font-weight:800;
}

.article-side-links {
  display:grid;
  gap:10px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}

.article-side-links strong {
  margin-bottom:4px;
  font-family:var(--font-display);
}

.article-side-links a {
  padding:9px 0;
  border-bottom:1px solid var(--line);
  color:#4a5963;
  font-size:12px;
  font-weight:650;
}

.article-side-links a:last-child {
  border-bottom:0
}

.article-side-links a:hover {
  color:var(--primary)
}

@media(max-width:1020px) {
  .blog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .article-layout {
    grid-template-columns:1fr;
    gap:42px
  }
  .article-sidebar {
    position:static;
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:720px) {
  .blog-grid {
    grid-template-columns:1fr
  }
  .blog-card {
    min-height:auto
  }
  .blog-hero-grid {
    grid-template-columns:1fr
  }
  .blog-hero-icon {
    display:none
  }
  .blog-article-hero {
    padding:58px 0 46px
  }
  .blog-article-hero h1 {
    font-size:38px
  }
  .article-content h2 {
    font-size:24px
  }
  .article-sidebar {
    grid-template-columns:1fr
  }
}

/* =========================================================
   BLOG DARK THEME + GERÇEK GÖRSELLER
   Sadece blog alanları ve blog sayfaları için
========================================================= */
/* Ana sayfadaki blog alanı */ .home-blog-section.home-blog-dark {
  position:relative;
  background:     radial-gradient(circle at 20% 20%, rgba(0,110,183,.18), transparent 30%),     radial-gradient(circle at 85% 20%, rgba(255,255,255,.06), transparent 20%),     linear-gradient(180deg, #0d1720 0%, #0b141c 100%);
}

.home-blog-section.home-blog-dark .section-title, .home-blog-section.home-blog-dark .section-lead, .home-blog-section.home-blog-dark .eyebrow {
  color:#fff;
}

.home-blog-section.home-blog-dark .section-lead {
  color:rgba(255,255,255,.68);
}

.home-blog-section.home-blog-dark .eyebrow {
  color:#89d0ff;
}

.home-blog-section.home-blog-dark .btn-outline {
  border-color:rgba(255,255,255,.18);
  color:#fff;
  background:rgba(255,255,255,.04);
}

.home-blog-section.home-blog-dark .btn-outline:hover {
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* Blog sayfaları genel */ body.blog-theme {
  background:#0b141c;
}

body.blog-theme .header {
  border-bottom-color:rgba(255,255,255,.06);
}

body.blog-theme .section, body.blog-theme .blog-index-section, body.blog-theme .article-section {
  background:#0b141c;
}

body.blog-theme .footer {
  margin-top:0;
}

/* Blog kartları */ .blog-grid {
  gap:22px;
}

.blog-card {
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.025) 100%);
  box-shadow:none;
}

.blog-card:hover {
  border-color:rgba(0,110,183,.45);
  box-shadow:0 18px 48px rgba(0,0,0,.22);
}

.blog-card-media {
  display:block;
  aspect-ratio: 16 / 10;
  overflow:hidden;
}

.blog-card-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.blog-card:hover .blog-card-media img {
  transform:scale(1.05);
}

.blog-card .blog-card-meta, .blog-card h3, .blog-card p, .blog-card .blog-card-more {
  padding-left:24px;
  padding-right:24px;
}

.blog-card .blog-card-meta {
  margin:18px 0 10px;
  color:rgba(255,255,255,.52);
}

.blog-card .blog-card-meta span {
  color:#8fd6ff;
}

.blog-card h3 {
  margin:0 0 12px;
}

.blog-card h3 a {
  color:#fff;
}

.blog-card p {
  color:rgba(255,255,255,.70);
}

.blog-card .blog-card-more {
  color:#9bdcff;
  margin-top:auto;
  padding-bottom:24px;
}

/* Blog arşiv hero */ .blog-index-hero-dark {
  background:     linear-gradient(135deg, rgba(3,13,22,.92), rgba(8,20,30,.88)),     radial-gradient(circle at 80% 20%, rgba(0,110,183,.18), transparent 24%);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.blog-index-hero-dark .breadcrumbs a, .blog-index-hero-dark .breadcrumbs span, .blog-index-hero-dark h1, .blog-index-hero-dark p, .blog-index-hero-dark .eyebrow {
  color:#fff;
}

.blog-index-hero-dark p {
  color:rgba(255,255,255,.72);
}

.blog-index-hero-dark .eyebrow {
  color:#8fd6ff;
}

/* Yazı hero */ body.blog-theme .blog-article-hero {
  background:     linear-gradient(135deg, rgba(4,15,24,.98), rgba(8,20,30,.96)),     radial-gradient(circle at 80% 20%, rgba(0,110,183,.16), transparent 28%);
  border-bottom:1px solid rgba(255,255,255,.06);
}

body.blog-theme .blog-article-hero .breadcrumbs a, body.blog-theme .blog-article-hero .breadcrumbs span {
  color:rgba(255,255,255,.68);
}

body.blog-theme .blog-article-hero .eyebrow {
  color:#8fd6ff;
}

body.blog-theme .blog-article-hero h1 {
  color:#fff;
}

body.blog-theme .blog-article-hero p {
  color:rgba(255,255,255,.72);
}

.blog-hero-grid {
  grid-template-columns:minmax(0,1fr) 380px;
  gap:40px;
  align-items:center;
}

.blog-hero-media {
  height:260px;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}

.blog-hero-media img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* İçerik alanı */ body.blog-theme .article-content {
  color:rgba(255,255,255,.76);
}

body.blog-theme .article-content > p:first-child {
  color:rgba(255,255,255,.82);
}

body.blog-theme .article-content h2, body.blog-theme .article-content h3 {
  color:#fff;
}

body.blog-theme .article-note {
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.74);
  border-left-color:var(--primary);
}

body.blog-theme .article-sources {
  border-top-color:rgba(255,255,255,.10);
}

body.blog-theme .article-sources a {
  color:#9bdcff;
}

.article-feature-image {
  margin:0 0 28px;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

.article-feature-image img {
  display:block;
  width:100%;
  height:auto;
  min-height:260px;
  max-height:440px;
  object-fit:cover;
}

body.blog-theme .article-sidebar {
  color:#fff;
}

body.blog-theme .article-side-card {
  background:linear-gradient(145deg, #0e78bc, #005891);
  border:1px solid rgba(255,255,255,.06);
}

body.blog-theme .article-side-links {
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
}

body.blog-theme .article-side-links strong {
  color:#fff;
}

body.blog-theme .article-side-links a {
  color:rgba(255,255,255,.74);
  border-bottom-color:rgba(255,255,255,.08);
}

body.blog-theme .article-side-links a:hover {
  color:#9bdcff;
}

/* Mobil */ @media(max-width:1020px) {
  .blog-hero-grid {
    grid-template-columns:1fr;
  }
}

@media(max-width:720px) {
  .blog-card .blog-card-meta,   .blog-card h3,   .blog-card p,   .blog-card .blog-card-more {
    padding-left:18px;
    padding-right:18px;
  }
  .blog-card .blog-card-more {
    padding-bottom:20px;
  }
  .blog-hero-media {
    height:220px;
  }
  .article-feature-image img {
    min-height:220px;
  }
}

/* Blog arşiv sayfası başlık rengi */ .blog-theme .blog-white-title, .blog-white-title {
  color:#fff !important;
}

.blog-theme .blog-white-title .blue, .blog-white-title .blue {
  color:#fff !important;
}

/* Blog üst menü bağlantısı */ .nav-links > a[href="blog.html"] {
  white-space:nowrap;
}


/* Mikro ürünleri: 6 ürün + ana sayfa yatay carousel */
.product-grid-six {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.new-product-badge {
  position: absolute;
  z-index: 3;
  right: 20px;
  top: 19px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #625CE0;
  color: #fff;
  font-size: 9px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
  box-shadow: 0 8px 22px rgba(98,92,224,.22);
}

.product-card .product-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: 188px;
  height: 52px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 19px;
}

.product-carousel-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.product-carousel-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: #303840;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.product-carousel-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.product-carousel-btn:disabled {
  opacity: .32;
  cursor: default;
}

.product-carousel {
  position: relative;
}

.product-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px) / 3);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 2px 1px 8px;
}

.product-carousel-track::-webkit-scrollbar {
  display: none;
}

.product-carousel-card {
  scroll-snap-align: start;
  min-width: 0;
}

.product-carousel-progress {
  margin-top: 22px;
  height: 2px;
  background: #e7edf1;
  overflow: hidden;
  border-radius: 999px;
}

.product-carousel-progress span {
  display: block;
  width: 50%;
  height: 100%;
  background: var(--primary);
  border-radius: inherit;
  transition: transform .25s ease, width .25s ease;
}

.official-product-link {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.official-product-link a {
  color: var(--primary);
  font-weight: 800;
}

@media(max-width:1020px) {
  .product-grid-six {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .product-carousel-track {
    grid-auto-columns: calc((100% - 18px) / 2);
  }
}

@media(max-width:720px) {
  .product-grid-six {
    grid-template-columns: 1fr;
  }
  .product-carousel-actions {
    margin-top: 20px;
    flex-wrap: wrap;
  }
  .product-carousel-actions .btn {
    margin-top: 0;
  }
  .product-carousel-track {
    grid-auto-columns: 88%;
    gap: 14px;
  }
  .product-carousel-btn {
    width: 42px;
    height: 42px;
  }
}


/* HM Mikro Dikey Çözümler */
.vertical-solutions-note{margin:0 0 34px;padding:18px 22px;border:1px solid rgba(45,120,196,.16);border-left:4px solid #2D78C4;border-radius:14px;background:rgba(45,120,196,.045);color:#4f5963;font-size:14px;line-height:1.7}.vertical-solutions-note strong{color:#2D78C4}.vertical-solution-grid{margin-top:8px}.vertical-solution-card{position:relative}.vertical-solution-card .solution-meta{display:block;margin:-6px 0 12px;color:#7c8792;font-size:11px;line-height:1.45;font-weight:600}.vertical-solution-card h4{min-height:52px}.vertical-solution-card p{min-height:96px}.vertical-solution-cta{margin-top:34px}.mikro-vertical-highlight{margin:24px 0 42px}@media(max-width:991px){.vertical-solution-card h4,.vertical-solution-card p{min-height:0}}


/* ===== Referanslar: 54 firma logo vitrini ===== */
.reference-showcase-section{background:#f6f8fa}.reference-showcase-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;margin-bottom:34px}.reference-showcase-head .section-lead{max-width:760px}.reference-stats{display:flex;gap:12px}.reference-stat{min-width:118px;padding:20px 22px;border:1px solid #dfe6eb;border-radius:16px;background:#fff;text-align:center;box-shadow:0 12px 30px rgba(16,38,56,.04)}.reference-stat strong{display:block;font-family:'Space Grotesk',sans-serif;font-size:32px;line-height:1;color:var(--primary);letter-spacing:-1px}.reference-stat span{display:block;margin-top:7px;color:#67727d;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.reference-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 28px}.reference-filter{appearance:none;border:1px solid #dce4e9;background:#fff;color:#4b5660;border-radius:999px;padding:10px 14px;font:700 12px/1.2 Inter,Arial,sans-serif;cursor:pointer;transition:.2s ease}.reference-filter span{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;margin-left:7px;padding:0 6px;border-radius:999px;background:#eef3f6;color:#6c7780;font-size:10px}.reference-filter:hover{border-color:rgba(45,120,196,.45);color:var(--primary)}.reference-filter.active{background:var(--primary);border-color:var(--primary);color:#fff}.reference-filter.active span{background:rgba(255,255,255,.18);color:#fff}.reference-logo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.reference-logo-card{display:flex;flex-direction:column;min-width:0;margin:0;border:1px solid #e0e7ec;border-radius:16px;background:#fff;overflow:hidden;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.reference-logo-card:hover{transform:translateY(-3px);border-color:rgba(45,120,196,.28);box-shadow:0 16px 38px rgba(20,43,61,.08)}.reference-logo-card[hidden]{display:none}.reference-logo-media{display:flex;align-items:center;justify-content:center;height:138px;padding:24px 28px;border-bottom:1px solid #edf1f4;background:#fff}.reference-logo-media img{display:block;width:100%;height:100%;max-width:190px;max-height:90px;object-fit:contain}.reference-logo-card figcaption{display:flex;flex-direction:column;gap:4px;padding:15px 17px 17px}.reference-logo-card figcaption strong{color:#29333c;font-size:13px;line-height:1.4}.reference-logo-card figcaption span{color:#8a949d;font-size:10px;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.04em}.reference-empty{padding:24px;border:1px dashed #ccd6dd;border-radius:14px;text-align:center;color:#74808a}.reference-cta{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:42px;padding:30px 32px;border:1px solid rgba(45,120,196,.16);border-radius:18px;background:#fff}.reference-cta h3{margin:5px 0 7px;font-family:'Space Grotesk',sans-serif;font-size:24px;line-height:1.2;color:#26313a}.reference-cta p{margin:0;color:#6a7580;font-size:14px}.reference-cta .btn{flex:0 0 auto;margin:0}@media(max-width:1020px){.reference-showcase-head{grid-template-columns:1fr;gap:22px}.reference-stats{justify-content:flex-start}.reference-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:720px){.reference-showcase-head{margin-bottom:26px}.reference-stats{width:100%}.reference-stat{flex:1;min-width:0;padding:17px 14px}.reference-stat strong{font-size:28px}.reference-filters{flex-wrap:nowrap;overflow-x:auto;margin-left:-18px;margin-right:-18px;padding:0 18px 10px;scrollbar-width:none}.reference-filters::-webkit-scrollbar{display:none}.reference-filter{white-space:nowrap}.reference-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.reference-logo-media{height:112px;padding:18px 16px}.reference-logo-media img{max-width:145px;max-height:72px}.reference-logo-card figcaption{padding:12px 13px 14px}.reference-logo-card figcaption strong{font-size:11px}.reference-cta{align-items:flex-start;flex-direction:column;padding:24px}.reference-cta h3{font-size:21px}}


/* Ankara ilçe Mikro sayfaları - zengin içerik modülleri */
.district-rich-page .district-block{margin-top:72px}.district-answer-box{margin-top:24px;padding:20px 22px;border-left:4px solid var(--primary);border-radius:0 14px 14px 0;background:#f2f7fb;color:#46525d;font-size:14px;line-height:1.75}.district-answer-box strong{color:#25333f}.district-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.district-product-card{display:flex;flex-direction:column;min-height:265px;padding:24px;border:1px solid #e1e7ec;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(20,43,61,.04)}.district-product-card img{width:auto;height:42px;max-width:145px;object-fit:contain;object-position:left center;margin-bottom:22px}.district-product-card h3{margin:0 0 9px;font:700 19px/1.2 'Space Grotesk',sans-serif;color:#26323c}.district-product-card p{margin:0 0 20px;color:#6e7882;font-size:13px;line-height:1.65}.district-product-card a{margin-top:auto;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}.district-solution-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.district-solution-card{display:flex;flex-direction:column;min-height:235px;padding:25px;border:1px solid #dfe6ec;border-radius:18px;background:#fff}.district-solution-card>span{color:var(--primary);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.district-solution-card h3{margin:11px 0 8px;font:700 19px/1.25 'Space Grotesk',sans-serif;color:#26323c}.district-solution-card p{margin:0 0 18px;color:#6b7580;font-size:13px;line-height:1.65}.district-solution-card a{margin-top:auto;color:var(--primary);font-size:12px;font-weight:800;text-decoration:none}.district-blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.district-references{overflow:hidden}.district-ref-slider{position:relative;padding:0 48px}.district-ref-track{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory}.district-ref-track::-webkit-scrollbar{display:none}.district-ref-card{flex:0 0 calc(20% - 10px);height:118px;display:flex;align-items:center;justify-content:center;padding:20px;border:1px solid #e1e7ec;border-radius:16px;background:#fff;scroll-snap-align:start}.district-ref-card img{width:100%;height:100%;max-width:150px;max-height:70px;object-fit:contain}.district-ref-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:36px;height:36px;border:1px solid #d9e2e9;border-radius:50%;background:#fff;color:#2D78C4;font-size:24px;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(20,43,61,.08)}.district-ref-arrow.prev{left:0}.district-ref-arrow.next{right:0}.district-process .support-box strong{display:block;margin-bottom:13px;color:var(--primary);font:700 12px/1 'Space Grotesk',sans-serif;letter-spacing:.08em}.district-faq-list{display:grid;gap:10px;max-width:920px}.district-faq-list details{border:1px solid #e0e7ec;border-radius:14px;background:#fff;padding:0 20px}.district-faq-list summary{cursor:pointer;padding:18px 0;font-weight:750;color:#2d3842}.district-faq-list details p{margin:0;padding:0 0 18px;color:#6a7580;font-size:14px;line-height:1.7}.district-all-links{gap:7px}.district-all-links a{font-size:11px}.district-all-links a.is-current{background:var(--primary);border-color:var(--primary);color:#fff}
@media(max-width:1020px){.district-product-grid,.district-solution-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.district-ref-card{flex-basis:calc(33.333% - 8px)}}
@media(max-width:720px){.district-rich-page .district-block{margin-top:52px}.district-product-grid,.district-solution-grid,.district-blog-grid{grid-template-columns:1fr}.district-ref-slider{padding:0 38px}.district-ref-card{flex-basis:calc(50% - 6px);height:100px}.district-product-card,.district-solution-card{min-height:0}}

/* ===== Ankara ilçe sayfaları: blog kartı açık tema düzeltmesi =====
   Global blog kartları koyu blog sayfası için beyaz metin kullanıyor.
   İlçe landing page'lerinde kartlar açık zeminde olduğundan burada açık tema uygulanır. */
.district-blog-block .blog-card{
  background:#fff;
  border:1px solid #e1e7ec;
  box-shadow:0 12px 32px rgba(20,43,61,.05);
}
.district-blog-block .blog-card:hover{
  border-color:rgba(45,120,196,.28);
  box-shadow:0 18px 42px rgba(20,43,61,.10);
}
.district-blog-block .blog-card .blog-card-meta{
  color:#7a8791;
}
.district-blog-block .blog-card .blog-card-meta span{
  color:var(--primary);
}
.district-blog-block .blog-card h3 a{
  color:#26333d;
}
.district-blog-block .blog-card h3 a:hover{
  color:var(--primary);
}
.district-blog-block .blog-card p{
  color:#6e7882;
}
.district-blog-block .blog-card .blog-card-more{
  color:var(--primary);
}

/* ===== 2026-10 Mobil Çözümler menüsü düzeltmesi ===== */
@media(max-width:1020px){
  .nav-links{
    max-height:calc(100dvh - 108px);
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
  }
  .nav-item{
    width:100%;
  }
  .nav-item.has-submenu>a{
    position:relative;
    padding-right:42px!important;
  }
  .nav-item.has-submenu>a::after{
    content:'+';
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:7px;
    background:#f0f5f8;
    color:#4b5964;
    font:700 18px/1 Inter,Arial,sans-serif;
    transition:.18s ease;
  }
  .nav-item.has-submenu.open>a::after{
    content:'−';
    background:var(--primary-soft);
    color:var(--primary);
  }
  .nav-item.has-submenu.open>a{
    color:var(--primary);
    background:var(--primary-soft);
  }
  .solutions-menu{
    position:relative!important;
  }
  .solutions-menu .mega-dropdown{
    position:static!important;
    left:auto!important;
    width:100%!important;
    min-width:0!important;
    margin:6px 0 8px!important;
    padding:7px 8px 9px 12px!important;
    border:0!important;
    border-left:2px solid rgba(45,120,196,.24)!important;
    border-radius:0 12px 12px 0!important;
    background:#f8fafc!important;
    box-shadow:none!important;
    transform:none!important;
    opacity:1!important;
    visibility:visible!important;
    max-height:none!important;
    overflow:visible!important;
  }
  .solutions-menu:not(.open) .mega-dropdown{
    display:none!important;
  }
  .solutions-menu.open .mega-dropdown{
    display:block!important;
  }
  .solutions-menu .mega-group{
    padding:5px 0 7px!important;
    margin:0!important;
    border-radius:0!important;
  }
  .solutions-menu .mega-group + .mega-group{
    border-top:1px solid #e8eef2;
    padding-top:9px!important;
  }
  .solutions-menu .mega-title{
    padding:7px 9px 5px!important;
    color:#7d8993!important;
    font-size:9px!important;
  }
  .solutions-menu .mega-group a{
    min-height:42px;
    padding:8px 9px!important;
    border-radius:8px!important;
    font-size:13px!important;
    line-height:1.3!important;
  }
  .solutions-menu .menu-solution-icon{
    width:25px;
    height:25px;
    flex-basis:25px;
    border-radius:7px;
  }
  .solutions-menu .menu-solution-icon svg{
    width:14px;
    height:14px;
  }
  .solutions-menu .mega-all{
    margin-top:2px!important;
    padding-top:10px!important;
  }
}

@media(max-width:430px){
  .nav-links{
    left:12px;
    right:12px;
    top:82px;
    max-height:calc(100dvh - 94px);
    padding:10px;
    border-radius:15px;
  }
  .solutions-menu .mega-dropdown{
    padding-left:8px!important;
  }
  .solutions-menu .mega-group a{
    font-size:12.5px!important;
  }
}

/* Mobil mega-menu hover/transform çakışması düzeltmesi */
@media(max-width:1020px){
  .solutions-menu:hover .mega-dropdown,
  .solutions-menu.open .mega-dropdown{
    left:auto!important;
    transform:none!important;
    margin-left:0!important;
  }
  .solutions-menu.open>a{
    color:#2D78C4!important;
    background:#eef5fb!important;
  }
}


/* ===== Erişilebilirlik / WCAG AA iyileştirmeleri ===== */
.skip-link{
  position:fixed;
  top:10px;
  left:10px;
  z-index:9999;
  padding:11px 16px;
  border-radius:9px;
  background:#fff;
  color:#172028;
  font-weight:800;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  transform:translateY(-160%);
  transition:transform .16s ease;
}
.skip-link:focus{
  transform:translateY(0);
}

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:3px solid #0a78c2;
  outline-offset:3px;
}
.home-page .header:not(.is-solid) :where(a,button):focus-visible{
  outline-color:#8fd6ff;
}

/* Klavye ile mega/dropdown menü erişimi - yalnızca masaüstü.
   Android dokunma sonrası :focus-within durumunu koruduğu için mobilde uygulanmaz. */
@media(min-width:1021px){
  .nav-item:focus-within > .dropdown{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .solutions-menu:focus-within .mega-dropdown{
    transform:translate(-50%,0)!important;
  }
}

/* Slider nokta butonlarının gerçek tıklama/odak alanını büyüt */
.hm-slider-dots{
  gap:3px;
}
.hm-slider-dots button{
  position:relative;
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border-radius:999px!important;
  background:transparent!important;
}
.hm-slider-dots button::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:99px;
  background:rgba(255,255,255,.58);
  transform:translate(-50%,-50%);
  transition:.25s ease;
}
.hm-slider-dots button.is-active::before{
  width:24px;
  background:#37b6ff;
}

/* AA kontrast düzeltmeleri - küçük metinler */
.mega-title{color:#66727c!important}
.remote-support-copy p{color:#66727c!important}
.solution-no{color:#66727c!important}
.blog-card-meta{color:#66727c!important}
.district-blog-block .blog-card .blog-card-meta{color:#66727c!important}
.reference-logo-card figcaption span{color:#66727c!important}
.reference-empty{color:#66727c!important}
.reference-filter span{color:#5b6872!important}
.marketing-arrow{color:#66727c!important}

/* Hareket azaltma tercihini destekle */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ===== Demo Talebi Formu / SMTP ===== */
.hp-field{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}
.form-status.is-success{
  background:#eaf7ef!important;
  color:#176b39!important;
  border:1px solid #bfe5cc;
}
.form-status.is-error{
  background:#fff0f0!important;
  color:#a32626!important;
  border:1px solid #f0c3c3;
}
form[data-demo] button[disabled]{
  opacity:.68;
  cursor:wait;
}


/* ===== 2026-10-31 Android Chrome mobil menü stabilizasyonu ===== */
@media(max-width:1020px){
  html.mobile-menu-open,
  body.mobile-menu-open{
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  html.mobile-menu-open .header{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .nav-links{
    position:fixed!important;
    z-index:1200!important;
    top:var(--hm-mobile-menu-top,88px)!important;
    bottom:auto!important;
    left:20px!important;
    right:20px!important;
    width:auto!important;
    height:auto!important;
    max-height:calc(var(--hm-mobile-vh,100svh) - var(--hm-mobile-menu-top,88px) - 10px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    contain:layout paint!important;
    transform:translateZ(0);
  }

  .nav-links.open{
    display:flex!important;
  }

  .menu-toggle.is-active span{opacity:0}
  .menu-toggle.is-active::before{transform:rotate(45deg)!important}
  .menu-toggle.is-active::after{transform:rotate(-45deg)!important}

  .solutions-menu,
  .solutions-menu .mega-dropdown,
  .solutions-menu .mega-group{
    max-width:100%!important;
    min-width:0!important;
  }

  .solutions-menu .mega-dropdown{
    overflow-x:hidden!important;
  }

  .solutions-menu .mega-group a{
    width:100%!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
}

@media(max-width:430px){
  .nav-links{
    left:10px!important;
    right:10px!important;
    top:var(--hm-mobile-menu-top,80px)!important;
    max-height:calc(var(--hm-mobile-vh,100svh) - var(--hm-mobile-menu-top,80px) - 8px)!important;
  }
}

@supports not (height:100svh){
  @media(max-width:1020px){
    .nav-links{
      max-height:calc(100vh - var(--hm-mobile-menu-top,88px) - 10px)!important;
    }
  }
}
/* ===== Android touch/focus çakışması kesin düzeltme V3 ===== */
@media(max-width:1020px){
  .nav-item:focus-within > .dropdown{
    transform:none!important;
  }
  .solutions-menu:focus-within .mega-dropdown,
  .solutions-menu:hover .mega-dropdown,
  .solutions-menu.open .mega-dropdown{
    left:auto!important;
    right:auto!important;
    transform:none!important;
    margin-left:0!important;
  }
  .solutions-menu:not(.open) .mega-dropdown{
    display:none!important;
  }
  .solutions-menu.open .mega-dropdown{
    display:block!important;
  }
}


/* ===== 2026-10-31 Android mobil menü renk/durum düzeltmesi V4 ===== */
@media(max-width:1020px){
  /* Kapalı panel DOM'da beyaz bir katman olarak kalmasın */
  .nav-links:not(.open){
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  /* Açık mobil panel header/hero durumundan bağımsız olsun */
  .nav-links.open{
    display:flex!important;
    visibility:visible!important;
    pointer-events:auto!important;
    background:#ffffff!important;
    color:#26333d!important;
    border-color:#e1e7ec!important;
  }

  /* Ana sayfadaki "hero üzerinde beyaz link" kuralını mobil panelde geçersiz kıl */
  .home-page .header .nav-links.open > a,
  .home-page .header .nav-links.open .nav-item > a,
  .home-page .header:not(.is-solid) .nav-links.open > a,
  .home-page .header:not(.is-solid) .nav-links.open .nav-item > a,
  .home-page .header.is-solid .nav-links.open > a,
  .home-page .header.is-solid .nav-links.open .nav-item > a{
    color:#313840!important;
    background:transparent!important;
  }

  .home-page .header .nav-links.open > a:hover,
  .home-page .header .nav-links.open .nav-item > a:hover{
    color:#2D78C4!important;
    background:#eef5fb!important;
  }

  .home-page .header .nav-links.open .nav-item.open > a{
    color:#2D78C4!important;
    background:#eef5fb!important;
  }

  /* Dropdown linkleri de daima okunur kalsın */
  .nav-links.open .dropdown a,
  .nav-links.open .mega-dropdown a{
    color:#313840!important;
  }

  .nav-links.open .dropdown a:hover,
  .nav-links.open .mega-dropdown a:hover{
    color:#2D78C4!important;
    background:#eef5fb!important;
  }

  /* Mobil menü açıkken header beyaz olsun, kapanınca class kalkınca eski haline döner */
  .home-page .header.mobile-menu-active{
    background:#ffffff!important;
    border-bottom:1px solid #e1e7ec!important;
    box-shadow:0 8px 24px rgba(21,42,58,.07)!important;
  }

  .home-page .header.mobile-menu-active .menu-toggle{
    color:#313840!important;
  }
}