/* ═══════════════════════════════════════════════════════════════
   DPS Bilişim — premium katman (kx.css'in üstüne biner)
   Marka renkleri: sarı #FFCC54 (Panel → Ayarlar → Site görünümü → Ana renk, --kx-kirmizi) + koyu arduvaz #262C38 + beyaz/gri.
   Açık zeminde sarı yazı okunmadığı için metin vurgusu işaretleyici (marker) etkisiyle, koyu zeminde doğrudan sarı verilir.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --dps-arduvaz: #262C38;
  --dps-arduvaz-2: #1C212B;
  --dps-arduvaz-3: #323A4A;
  --dps-cizgi-koyu: rgba(255,255,255,.12);
  --dps-sari-yazi: color-mix(in srgb, var(--kx-kirmizi) 42%, #2B1F00);   /* açık zeminde okunur koyu amber */
  --dps-sari-yumusak: color-mix(in srgb, var(--kx-kirmizi) 22%, transparent);
  --kx-murekkep: #1E2430;
  --kx-murekkep-2: var(--dps-arduvaz);
  --kx-gri: #F3F4F6;
  --kx-cizgi: #E3E6EB;
  --kx-yazi: #2A303C;
  --kx-soluk: #566070;
  --kx-soluk-2: #8590A0;
  --kx-koyu-yazi: #C9CFDA;
  --kx-koyu-soluk: #9BA5B5;
  --kx-kirmizi-koyu: color-mix(in srgb, var(--kx-kirmizi) 84%, #fff);
  --kx-kirmizi-acik: color-mix(in srgb, var(--kx-kirmizi) 70%, #fff);
}

/* ── Temel ───────────────────────────────────────────────────── */
body.kx { background: #fff; color: var(--kx-murekkep); }
.kx :focus-visible { outline-color: var(--dps-sari-yazi); }
.kx .kx-z-koyu :focus-visible, .kx .kx-ust :focus-visible, .kx .kx-alt :focus-visible, .kx .kx-cekmece :focus-visible { outline-color: var(--kx-kirmizi); }
::selection { background: var(--kx-kirmizi); color: #1B1F29; }

/* Zeminler */
.kx-z-koyu { background: var(--dps-arduvaz); color: #fff; }
.kx-z-gri { background: var(--kx-gri); }
.kx-z-koyu + .kx-z-koyu { border-top: 1px solid var(--dps-cizgi-koyu); padding-top: var(--kx-bosluk); }

/* Başlıklarda *vurgu*: açıkta marker, koyuda sarı yazı */
.kx-s { font-family: var(--kx-f-d); font-style: normal; font-weight: 800; font-size: 1em; letter-spacing: inherit; color: inherit;
        background: linear-gradient(transparent 58%, var(--dps-sari-yumusak) 58%, color-mix(in srgb, var(--kx-kirmizi) 62%, transparent) 94%, transparent 94%);
        padding: 0 .06em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kx-z-koyu .kx-s, .kx-alt .kx-s, .kx-cekmece .kx-s { color: var(--kx-kirmizi); background: none; padding: 0; margin: 0; }

/* Etiket: küçük sarı çizgi */
.kx-etiket { color: var(--kx-soluk); letter-spacing: .18em; }
.kx-etiket::before { flex: 0 0 22px; width: 22px; height: 3px; border-radius: 3px; background: var(--kx-kirmizi); }
.kx-z-koyu .kx-etiket, .kx-alt .kx-etiket { color: var(--kx-koyu-soluk); }

/* Vurgu rengini açık zeminde okunur tona çeviren kurallar */
.kx-tumu:hover, .kx-panel-tumu:hover, a.kx-kart:hover .kx-kart-baslik, .kx-is-not, .kx-slayt-sayac, .kx-adim-no,
.kx-paket-liste li::before, .kx-buyuk-baglanti:hover, a.kx-satir:hover .kx-satir-ok, a.kx-bant:hover .kx-bant-ok { color: var(--dps-sari-yazi) !important; }
.kx-z-koyu .kx-tumu:hover, .kx-z-koyu .kx-adim-no, .kx-z-koyu a.kx-satir:hover .kx-satir-ok, .kx-z-koyu a.kx-bant:hover .kx-bant-ok,
.kx-z-koyu .kx-buyuk-baglanti:hover, .kx-z-koyu .kx-paket-liste li::before, .kx-z-koyu a.kx-kart:hover .kx-kart-baslik { color: var(--kx-kirmizi) !important; }
.kx-cerez a { color: var(--dps-sari-yazi); }

/* ── Düğmeler: sarı zemin, koyu yazı ─────────────────────────── */
body.kx .kx-dugme { background: var(--kx-kirmizi); border-color: var(--kx-kirmizi); color: #1B1F29 !important; font-weight: 700; }
body.kx .kx-dugme::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); }
body.kx .kx-dugme:hover { background: var(--kx-kirmizi-koyu); border-color: var(--kx-kirmizi-koyu); box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--kx-kirmizi) 80%, #000); }
body.kx .kx-dugme-cizgi { background: transparent; color: var(--kx-murekkep) !important; border-color: color-mix(in srgb, var(--kx-murekkep) 28%, transparent); }
body.kx .kx-dugme-cizgi:hover { background: var(--kx-murekkep); border-color: var(--kx-murekkep); color: #fff !important; box-shadow: none; }
body.kx .kx-z-koyu .kx-dugme-cizgi, body.kx .kx-alt .kx-dugme-cizgi { color: #fff !important; border-color: rgba(255,255,255,.3); }
body.kx .kx-z-koyu .kx-dugme-cizgi:hover, body.kx .kx-alt .kx-dugme-cizgi:hover { background: transparent; border-color: var(--kx-kirmizi); color: var(--kx-kirmizi) !important; }
.kx .site-dugme { background: var(--kx-kirmizi); color: #1B1F29; font-weight: 700; }
.kx-hap[aria-pressed="true"] { background: var(--dps-arduvaz); border-color: var(--dps-arduvaz); }

/* ── Üst menü: her sayfada koyu arduvaz ───────────────────────── */
.kx-ust, .kx-ust-koyu { background: rgba(28,33,43,.92); color: #fff; }
.kx-ust.kaydi { border-bottom-color: var(--dps-cizgi-koyu); box-shadow: 0 14px 34px -22px rgba(0,0,0,.7); }
.kx-ust::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kx-kirmizi) 70%, transparent), transparent); opacity: .55; pointer-events: none; }
.kx-logo img { height: 46px; }
.kx-ust-koyu .kx-logo img, .kx-alt .kx-logo img, .kx-cekmece .kx-logo img { filter: none; }
.kx-menu > ul > li > a { opacity: .8; }
.kx-menu > ul > li > a:hover, .kx-menu > ul > li.aktif > a, .kx-menu > ul > li.acik > a { opacity: 1; color: var(--kx-kirmizi); }
.kx-menu > ul > li.aktif > a { border-bottom-color: var(--kx-kirmizi); }
.kx-panel { background: var(--dps-arduvaz-2); color: #fff; border-top: 1px solid var(--dps-cizgi-koyu); box-shadow: 0 40px 70px -30px rgba(0,0,0,.7); }
.kx-panel-liste { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 12px; }
.kx-panel-liste a { padding: 13px 14px; font-weight: 600; font-size: 15px; border-radius: 12px; color: #E8EBF1; }
.kx-panel-liste a:hover, .kx-panel-liste a[aria-current] { background: rgba(255,255,255,.07); color: var(--kx-kirmizi); }
.kx-panel-tumu { color: #fff; }
.kx-panel-tumu:hover { color: var(--kx-kirmizi) !important; }
.kx-panel .kx-etiket { color: var(--kx-koyu-soluk); }
.kx-cekmece { background: var(--dps-arduvaz-2); }
.kx-cekmece-liste a[aria-current] { color: var(--kx-kirmizi); }
.kx-ust-cta { min-height: 46px; }

/* ── Ana sayfa vitrini ───────────────────────────────────────── */
.kx-vitrin { position: relative; isolation: isolate; overflow: hidden; background: var(--dps-arduvaz-2); padding: clamp(88px, 11vw, 160px) 0 0; }
.kx-vitrin-arka { position: absolute; inset: 0; z-index: -3; }
.kx-vitrin-arka img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: .5; filter: saturate(.75) contrast(1.05); }
.kx-vitrin::before { content: ''; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(52% 58% at 88% 6%, color-mix(in srgb, var(--kx-kirmizi) 24%, transparent), transparent 70%),
    linear-gradient(90deg, rgba(28,33,43,.97) 0%, rgba(28,33,43,.86) 40%, rgba(28,33,43,.46) 100%),
    linear-gradient(180deg, transparent 55%, var(--dps-arduvaz-2) 100%); }
.kx-vitrin-izgara { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: radial-gradient(70% 80% at 80% 15%, #000, transparent 75%); mask-image: radial-gradient(70% 80% at 80% 15%, #000, transparent 75%); }
.kx-vitrin-ic { position: relative; }
.kx-vitrin-metin { max-width: 880px; }
.kx-vitrin-baslik { margin: 0 0 28px; font-size: clamp(44px, 6.8vw, 100px); line-height: .98; font-weight: 800; color: #fff; text-wrap: balance; }
.kx-vitrin-yazi { margin: 0 0 40px; max-width: 580px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.65; color: var(--kx-koyu-yazi); }
.kx-vitrin-seridi { position: relative; margin-top: clamp(64px, 9vw, 128px); border-top: 1px solid var(--dps-cizgi-koyu); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
@supports (backdrop-filter: blur(8px)) { .kx-vitrin-seridi { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } }
.kx-vitrin-rakamlar { margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kx-vitrin-rakamlar > div { padding: 30px 28px 32px 0; position: relative; }
.kx-vitrin-rakamlar > div + div { padding-left: 32px; border-left: 1px solid var(--dps-cizgi-koyu); }
.kx-vitrin-rakamlar dt { font-size: clamp(26px, 3vw, 42px); line-height: 1.05; font-weight: 800; color: var(--kx-kirmizi); margin: 0 0 8px; }
.kx-vitrin-rakamlar dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--kx-koyu-soluk); }

/* ── Sayfa başlığı (koyu): ızgara + sarı ışıma ────────────────── */
.kx-sb.kx-z-koyu { position: relative; isolation: isolate; overflow: hidden; background: var(--dps-arduvaz-2); }
.kx-sb.kx-z-koyu::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(48% 90% at 92% 0%, color-mix(in srgb, var(--kx-kirmizi) 20%, transparent), transparent 70%), linear-gradient(180deg, var(--dps-arduvaz-2), var(--dps-arduvaz)); }
.kx-sb.kx-z-koyu::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 100% at 85% 0%, #000, transparent 75%); mask-image: radial-gradient(70% 100% at 85% 0%, #000, transparent 75%); }
.kx-sb-baslik { font-size: clamp(38px, 5.4vw, 80px); line-height: 1; text-wrap: balance; }
.kx-sb.kx-z-koyu .kx-sb-baslik { color: #fff; }

/* ── Hizmet kartları ─────────────────────────────────────────── */
.kx-izgara-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 28px; }
.kx-kart { gap: 0; background: #fff; border: 1px solid var(--kx-cizgi); border-radius: 22px; overflow: hidden; position: relative;
           transition: transform .45s var(--kx-egri), box-shadow .45s var(--kx-egri), border-color .3s; }
a.kx-kart:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--kx-kirmizi) 80%, #fff); box-shadow: 0 30px 50px -30px rgba(28,33,43,.45); }
.kx-kart::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kx-kirmizi); transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--kx-egri); }
a.kx-kart:hover::after { transform: scaleX(1); }
.kx-kart-gorsel { border-radius: 0; background: #fff; border-bottom: 1px solid var(--kx-cizgi); }
.kx-kart-gorsel.kx-oran-45, .kx-kart-gorsel.kx-oran-43 { aspect-ratio: 4 / 3; }
.kx-z-gri .kx-kart-gorsel { background: #fff; }
.kx-kart .kx-no { padding: 22px 26px 0; font: 700 12px/1 var(--kx-f); letter-spacing: .14em; color: var(--dps-sari-yazi); }
.kx-kart-baslik { padding: 10px 26px 0; font-size: 22px; line-height: 1.2; }
.kx-kart-yazi { padding: 10px 26px 28px; font-size: 15px; line-height: 1.6; }
.kx-z-koyu .kx-kart { background: var(--dps-arduvaz-3); border-color: var(--dps-cizgi-koyu); }
.kx-z-koyu .kx-kart-gorsel { border-color: var(--dps-cizgi-koyu); }
.kx-z-koyu .kx-kart .kx-no { color: var(--kx-kirmizi); }

/* ── Liste görünümü ──────────────────────────────────────────── */
.kx-satir-gorsel { background: #fff; border: 1px solid var(--kx-cizgi); object-fit: contain; padding: 4px; }

/* ── Adımlar / değerler ──────────────────────────────────────── */
.kx-z-koyu .kx-adimlar-cizgi > *, .kx-z-koyu .kx-adimlar-kart { border-color: var(--dps-cizgi-koyu); }
.kx-adimlar-kart { border-radius: 22px; }
.kx-z-koyu .kx-adimlar-kart { background: var(--dps-arduvaz-3); }

/* ── Bant ────────────────────────────────────────────────────── */
.kx-bant.kx-z-koyu { background: var(--dps-arduvaz-2); border-top: 1px solid var(--dps-cizgi-koyu); }
a.kx-bant.kx-z-koyu:hover { background: var(--dps-arduvaz); }
.kx-bant-baslik { font-weight: 800; }

/* ── Çözüm ortakları logoları ────────────────────────────────── */
.kx-logolar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.kx-logo-kart { display: flex; align-items: center; justify-content: center; aspect-ratio: 5 / 3; padding: 22px; background: #fff; border: 1px solid var(--kx-cizgi); border-radius: 20px; text-decoration: none;
                transition: transform .4s var(--kx-egri), box-shadow .4s var(--kx-egri), border-color .3s; }
.kx-logo-kart img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .7; mix-blend-mode: multiply; transition: filter .4s, opacity .4s; }
.kx-logo-kart:hover { transform: translateY(-4px); border-color: var(--kx-kirmizi); box-shadow: 0 24px 40px -28px rgba(28,33,43,.5); }
.kx-logo-kart:hover img { filter: none; opacity: 1; }
.kx-z-koyu .kx-logo-kart { border-color: transparent; }

/* ── Makale (hizmet sayfası) ─────────────────────────────────── */
.kx-mk-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(40px, 6vw, 100px); align-items: start; }
.kx-mk-yan { position: sticky; top: calc(var(--kx-ust-yuk) + 28px); display: flex; flex-direction: column; gap: 20px; }
.kx-mk-metin .kx-h2 { margin-bottom: 28px; }
.kx-mk-yazi { font-size: 18px; line-height: 1.8; color: var(--kx-yazi); max-width: 780px; }
.kx-mk-yazi > :first-child { margin-top: 0; }
.kx-mk-yazi p { margin: 0 0 1.15em; color: var(--kx-soluk); }
.kx-mk-yazi h3 { display: flex; align-items: center; gap: 14px; margin: 2.1em 0 .75em; font: 800 clamp(22px, 2.2vw, 28px)/1.2 var(--kx-f-d); letter-spacing: -.02em; color: var(--kx-murekkep); }
.kx-mk-yazi h3::before { content: ''; flex: 0 0 8px; width: 8px; height: 28px; border-radius: 4px; background: var(--kx-kirmizi); }
.kx-mk-yazi h3:first-child { margin-top: 0; }
.kx-mk-yazi ul { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; gap: 10px; }
.kx-mk-yazi li { position: relative; padding: 14px 18px 14px 46px; background: var(--kx-gri); border-radius: 14px; line-height: 1.6; color: var(--kx-yazi); font-size: 17px; }
.kx-mk-yazi li::before { content: ''; position: absolute; left: 18px; top: 22px; width: 12px; height: 12px; border-radius: 3px; background: var(--kx-kirmizi); box-shadow: 0 0 0 4px var(--dps-sari-yumusak); }
.kx-mk-yazi strong { color: var(--kx-murekkep); font-weight: 700; }
.kx-mk-yazi a { color: var(--kx-murekkep); text-decoration: underline; text-decoration-color: var(--kx-kirmizi); text-decoration-thickness: 3px; text-underline-offset: 4px; font-weight: 600; }
.kx-mk-yazi a:hover { background: var(--dps-sari-yumusak); }
.kx-z-gri .kx-mk-yazi li { background: #fff; }
.kx-mk-gorsel { margin: 0; padding: 12px; background: #fff; border: 1px solid var(--kx-cizgi); border-radius: 22px; box-shadow: 0 24px 40px -34px rgba(28,33,43,.45); overflow: hidden; }
.kx-mk-gorsel img { display: block; width: 100%; height: auto; max-height: 340px; object-fit: contain; border-radius: 12px; }
.kx-mk-teklif { position: relative; overflow: hidden; padding: 28px; border-radius: 22px; background: var(--dps-arduvaz); color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; isolation: isolate; }
.kx-mk-teklif::before { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kx-kirmizi) 40%, transparent), transparent 70%); z-index: -1; }
.kx-mk-teklif .kx-mini { color: var(--kx-koyu-soluk); }
.kx-mk-teklif p { margin: 4px 0 6px; font-size: 24px; line-height: 1.2; font-weight: 800; }
.kx-mk-tel { font: 800 22px/1.2 var(--kx-f-d); letter-spacing: -.01em; color: var(--kx-kirmizi); text-decoration: none; margin-bottom: 14px; }
.kx-mk-tel:hover { text-decoration: underline; }
.kx-mk-liste { padding: 24px 24px 12px; border: 1px solid var(--kx-cizgi); border-radius: 22px; background: #fff; }
.kx-mk-liste ul { list-style: none; margin: 14px 0 0; padding: 0; }
.kx-mk-liste li + li { border-top: 1px solid var(--kx-cizgi); }
.kx-mk-liste a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font: 600 15px/1.3 var(--kx-f); text-decoration: none; color: var(--kx-yazi); transition: color .2s, padding .3s var(--kx-egri); }
.kx-mk-liste a::after { content: '→'; opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .3s var(--kx-egri); }
.kx-mk-liste a:hover { color: var(--kx-murekkep); padding-left: 6px; }
.kx-mk-liste a:hover::after { opacity: 1; transform: none; }
.kx-mk-liste a[aria-current] { color: var(--kx-murekkep); font-weight: 800; }
.kx-mk-liste a[aria-current]::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--kx-kirmizi); margin-right: -2px; order: -1; }

/* ── Metin + görsel: ürün görselleri beyaz kartta ─────────────── */
.kx-mg-gorsel { background: #fff; border-radius: 24px; border: 1px solid var(--kx-cizgi); padding: 14px; }
.kx-mg-gorsel img { object-fit: contain; border-radius: 14px; }
.kx-maddeler li::before { background: var(--kx-kirmizi); box-shadow: 0 0 0 4px var(--dps-sari-yumusak); }

/* ── Alt bilgi ───────────────────────────────────────────────── */
.kx-alt { background: var(--dps-arduvaz-2); position: relative; }
.kx-alt-kapanis h2 { font-weight: 800; }
.kx-alt-sosyal a:hover { color: #1B1F29; }
.kx-alt a:hover { color: var(--kx-kirmizi); }
.kx-alt .kx-dugme:hover { color: #1B1F29 !important; }
.kx-yukari { background: var(--dps-arduvaz); border: 1px solid var(--dps-cizgi-koyu); }

/* ── Form ────────────────────────────────────────────────────── */
.kx-form input:focus, .kx-form select:focus, .kx-form textarea:focus { border-color: var(--kx-murekkep); box-shadow: 0 0 0 4px var(--dps-sari-yumusak); }
.kx-harita { border-radius: 22px; filter: grayscale(.25) contrast(1.02); }

/* ── Telefon ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .kx-mk-ic { grid-template-columns: minmax(0, 1fr); }
  .kx-mk-yan { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
  .kx-mk-gorsel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .kx-vitrin { padding-top: 72px; }
  .kx-vitrin-baslik { font-size: clamp(38px, 11vw, 52px); }
  .kx-vitrin-rakamlar { grid-template-columns: minmax(0, 1fr); }
  .kx-vitrin-rakamlar > div, .kx-vitrin-rakamlar > div + div { padding: 20px 0; border-left: 0; }
  .kx-vitrin-rakamlar > div + div { border-top: 1px solid var(--dps-cizgi-koyu); }
  .kx-izgara-4 { gap: 18px; }
  .kx-mk-yazi { font-size: 17px; }
  .kx-mk-yazi li { font-size: 16px; padding: 12px 14px 12px 40px; }
  .kx-mk-yazi li::before { left: 14px; top: 19px; }
  .kx-logo img { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .kx-kart, .kx-logo-kart, .kx-kart::after { transition: none; } }

/* Menü küçük görselleri: beyaz zeminli ürün fotoğrafları için ince çerçeve */
.kx-panel-gorsel { background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.kx-panel-gorsel img { object-fit: contain; padding: 2px; }