/* =================================================================
   ÇÖZÜMLER SAYFASI (cozumler.html, 2026-10-29) — dokuz çözüm (zikzak), uçtan uca iş akışı.
   Hero, bölüm çubuğu, rakam kutuları, madde listesi, SSS ve talep bandı urun.css'ten (talep vitrini urunler.css);
   bu dosya yalnız sayfaya özgü düzeni ekler. Ölçüler rem (bkz. CLAUDE.md "Ölçekleme").
   ================================================================= */

/* ---------- Menü ikonları (tools/menu-ikonlari.js) açık ve koyu zeminde: kontur kalınlığı site.css .panel-oge__ikon ile aynı ---------- */
.cz-ikon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--xg); }
.cz-ikon svg { width: 1.75rem; height: 1.75rem; overflow: visible; }
.cz-ikon path, .cz-ikon ellipse, .cz-ikon circle, .cz-ikon rect { stroke: currentColor; stroke-width: var(--sw, .6); vector-effect: non-scaling-stroke; paint-order: stroke; }
.cz-ikon [fill-opacity="0"] { stroke-width: calc(var(--sw, .6) * 1.4); }

/* ---------- Hero alt bandı: sayaç yerine dört kısa değer (kullanıcı 2026-10-31: "sayaç olmasın"); bant ve düğme urun.css ---------- */
.uhero__vurgular { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.uhero__vurgular li { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem 2.5rem 1.5rem 0; }
.uhero__vurgular li + li { padding-left: 2.5rem; border-left: 1px solid rgba(255, 255, 255, .14); }
.uhero__vurgular strong { font-family: var(--font-baslik); font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.uhero__vurgular span { font-size: var(--fs-sm); line-height: 1.45; color: rgba(255, 255, 255, .7); }

/* ---------- Sekiz çözüm: medya (4:5, anasayfa kartıyla aynı kadraj) + metin; çift sıradakilerde medya sağda ---------- */
/* Çözüm listesi ve SSS kurumsal lacivert zeminde (kullanıcı 2026-11-02; önceki: beyaz): zemin urun.css .bolum--useritli, renkler aşağıda */
.czlar { display: flex; flex-direction: column; gap: 6rem; }
.cz { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: 5rem; align-items: stretch; }
.cz:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
.cz:nth-child(even) .cz__medya { order: 2; }
.cz__medya { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--yaricap); background: var(--ink); box-shadow: 0 1.5rem 3.5rem rgba(var(--ink-rgb), .16); }
.cz__medya::before { content: ""; display: block; padding-top: 125%; }   /* en az 4:5; metin uzunsa sütun boyunca uzar */
.cz__medya::after { content: ""; position: absolute; inset: auto 0 0; z-index: 1; height: 35%; background: linear-gradient(to top, rgba(var(--ink-rgb), .6), transparent); pointer-events: none; }
.cz__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }   /* kapak görseli yok (2026-10-31): doğrudan video */
.cz__no { position: absolute; left: 1.75rem; bottom: 1.25rem; z-index: 2; font-family: var(--font-baslik); font-size: 4.5rem; font-weight: 800; line-height: 1; color: #fff; }

.cz__metin { display: flex; flex-direction: column; justify-content: center; }
.cz__ust { display: flex; align-items: center; gap: 0.875rem; font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--xg-acik); }
.cz__ust .cz-ikon { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(var(--xg-rgb), .18); color: var(--xg-acik); }
.cz__baslik { margin-top: 1rem; font-family: var(--font-baslik); font-size: 2.75rem; font-weight: 700; line-height: 1.04; text-transform: uppercase; text-wrap: balance; color: #fff; }
.cz__giris { margin-top: 1.125rem; font-size: var(--fs-lg); line-height: 1.6; text-wrap: pretty; color: var(--koyu-soluk); }
.cz__rakamlar { margin-top: 1.5rem; }
.cz__maddeler { margin-top: 1.75rem; }
.cz__ekip { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--cizgi-koyu); }
.cz__grup { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.cz__etiket { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--koyu-soluk); }
.cz__eylem { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2rem; }
.cz__eylem .ok-link { color: var(--xg-acik); }
.cz__eylem .ok-link:hover { color: #fff; }
.bolum--czliste .cz__medya { border: 1px solid var(--cizgi-koyu); box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, .45); }
/* Rakam kutuları ve madde listesi (urun.css .ozellik__*) koyu zeminde */
.bolum--czliste .ozellik__rakamlar div { background: var(--ink-2); border: 1px solid var(--cizgi-koyu); }
.bolum--czliste .ozellik__rakamlar dd, .bolum--czliste .ozellik__maddeler strong { color: #fff; }
.bolum--czliste .ozellik__rakamlar dd small { color: var(--xg-acik); }
.bolum--czliste .ozellik__rakamlar dt, .bolum--czliste .ozellik__maddeler li > span { color: var(--koyu-soluk); }

/* Cihaz / yazılım / platform çipi */
.cz__cipler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.cz-cip {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.25rem 1rem 0.25rem 0.5rem;
  border: 1px solid var(--cizgi); border-radius: 2rem; background: var(--kagit);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; color: var(--ink); transition: border-color .2s, color .2s, background-color .2s;
}
.cz-cip .cz-ikon { width: 1.75rem; height: 1.75rem; }
.cz-cip .cz-ikon svg { width: 1.5rem; height: 1.5rem; }
.cz-cip > .ikon { width: 1.125rem; height: 1.125rem; margin-left: 0.375rem; color: var(--xg); }
a.cz-cip:hover, a.cz-cip:focus-visible { border-color: var(--xg); color: var(--xg-koyu); }
.cz__cipler--koyu .cz-cip { border-color: var(--cizgi-koyu); background: rgba(255, 255, 255, .04); color: #fff; }
.cz__cipler--koyu .cz-ikon, .cz__cipler--koyu .cz-cip > .ikon { color: var(--xg-acik); }
.cz__cipler--koyu a.cz-cip:hover, .cz__cipler--koyu a.cz-cip:focus-visible { border-color: var(--xg-acik); background: rgba(var(--xg-rgb), .16); color: #fff; }

/* ---------- Uçtan uca iş akışı (koyu, urun.css .bolum--useritli ışık şeridi) ---------- */
.akis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.akis__adim { position: relative; display: flex; flex-direction: column; padding: 2rem 2rem 2.25rem; background: var(--ink-2); border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); }
.akis__adim:not(:last-child)::after { content: ""; position: absolute; top: 3.5rem; right: calc(-1.5rem - 1px); width: 1.5rem; border-top: 2px dashed rgba(var(--xg-rgb), .75); }   /* adımlar arası bağ (düğüm hizasında) */
.akis__no { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--xg); font-family: var(--font-baslik); font-size: 1.25rem; font-weight: 700; color: #fff; }
.akis__ad { margin-top: 1.5rem; font-family: var(--font-baslik); font-size: 1.75rem; font-weight: 700; line-height: 1.1; text-transform: uppercase; color: #fff; }
.akis__metin { margin-top: 0.625rem; font-size: var(--fs-base); line-height: 1.55; color: var(--koyu-soluk); }
.akis .cz__cipler { margin-top: auto; padding-top: 1.5rem; }

.deger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); margin-top: 1.5rem; overflow: hidden; border: 1px solid var(--cizgi-koyu); border-radius: var(--yaricap); background: rgba(255, 255, 255, .03); }
.deger__zorluk { padding: 2rem; border-right: 1px solid var(--cizgi-koyu); }
.deger__zorluk p:last-child { font-size: var(--fs-base); line-height: 1.55; color: var(--koyu-soluk); }
.deger__xg { padding: 2rem; }
.deger__etiket, .cekirdek__etiket { margin-bottom: 1rem; font-family: var(--font-baslik); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--koyu-soluk); }
.deger__etiket--xg { color: var(--xg-acik); }
.deger__liste { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.deger__liste li { display: flex; flex-direction: column; gap: 0.75rem; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; color: #fff; }
.deger__isaret { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(var(--xg-rgb), .2); color: var(--xg-acik); }
.deger__isaret .ikon { width: 1.125rem; height: 1.125rem; }

.cekirdek { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
.cekirdek__etiket { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .cz-cip { transition: none; }
}

/* ---------- Tablet / mobil ---------- */
@media (max-width: 1100px) {
  .uhero__vurgular li { padding: 1.125rem 1.5rem 1.125rem 0; }
  .uhero__vurgular li + li { padding-left: 1.5rem; }
  .uhero__vurgular strong { font-size: 1.125rem; }
  .czlar { gap: 4.5rem; }
  .cz, .cz:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .cz:nth-child(even) .cz__medya { order: 0; }
  .cz__medya::before { padding-top: 75%; }   /* tek sütunda 4:3 */
  .cz__baslik { font-size: 2.25rem; }
  .cz__grup { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .akis { grid-template-columns: minmax(0, 1fr); }
  .akis__adim:not(:last-child)::after { top: auto; right: auto; bottom: calc(-1.5rem - 1px); left: 3.5rem; width: 0; height: 1.5rem; border-top: 0; border-left: 2px dashed rgba(var(--xg-rgb), .75); }
  .deger { grid-template-columns: minmax(0, 1fr); }
  .deger__zorluk { border-right: 0; border-bottom: 1px solid var(--cizgi-koyu); }
}
@media (max-width: 900px) {
  .uhero__vurgular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uhero__vurgular li:nth-child(3) { padding-left: 0; border-left: 0; }
  .uhero__vurgular li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
}
@media (max-width: 640px) {
  /* telefonda tek sütun, yalnız başlıklar (açıklamalar sayfadaki iş akışı ve çözüm bölümlerinde var) */
  .uhero__vurgular { grid-template-columns: minmax(0, 1fr); }
  .uhero__vurgular li, .uhero__vurgular li + li { padding: 0.75rem 0; border-left: 0; }
  .uhero__vurgular li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
  .uhero__vurgular span { display: none; }
  .uhero__vurgular strong { font-size: 1rem; }
  .cz__medya::before { padding-top: 100%; }
  .cz__no { left: 1.25rem; bottom: 1rem; font-size: 3rem; }
  .cz__baslik { font-size: 2rem; }
  .deger__zorluk, .deger__xg { padding: 1.5rem; }
  .deger__liste { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
  .deger__liste li { flex-direction: row; align-items: center; }
}