/* Sunum ekleri: hizmet ekosistemi sayfası, paylaşım modu, yazdırma. app.css'ten sonra yüklenir. */

/* ---------- Genel bakış: ekosistem tanıtımı ---------- */
.eko-tanitim { background: linear-gradient(180deg, #fff 0%, var(--zemin) 100%); }
.eko-tanitim-ic { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2em; align-items: center; }
.eko-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.eko-mini li { display: flex; align-items: center; gap: .55em; background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--renk); border-radius: 10px; padding: .55em .7em; font-size: .9rem; font-weight: 600; color: var(--ana-koyu); }
.eko-mini svg { width: 17px; height: 17px; color: var(--renk); flex: 0 0 17px; }
@media (max-width: 820px) { .eko-tanitim-ic { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .eko-mini { grid-template-columns: 1fr; } }

/* ---------- Değer zinciri ---------- */
.zincir { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
.zincir li { position: relative; background: #fff; border: 1px solid var(--cizgi); border-top: 4px solid var(--renk); padding: 1em 1.1em 1.1em 1.1em; margin-right: 18px; border-radius: 12px; }
.zincir li:not(:last-child)::after { content: "→"; position: absolute; right: -17px; top: 50%; transform: translateY(-50%); color: var(--g-soluk); font-weight: 700; }
.zincir li:last-child { margin-right: 0; background: var(--vurgu-acik); }
.zincir .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--renk); color: #fff; font-size: .78rem; font-weight: 800; margin-bottom: .5em; }
.zincir b { display: block; color: var(--ana-koyu); font-size: 1.02rem; }
.zincir small { display: block; color: var(--soluk); margin-top: .25em; font-size: .84rem; }
@media (max-width: 900px) {
  .zincir { grid-template-columns: 1fr; gap: 18px; }
  .zincir li { margin-right: 0; }
  .zincir li:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -19px; transform: translateX(-50%); }
}

/* ---------- Hizmet kartları ---------- */
.eko-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1em; }
.eko-kart { background: #fff; border: 1px solid var(--cizgi); border-top: 4px solid var(--renk); border-radius: 14px; padding: 1.2em 1.25em; display: flex; flex-direction: column; gap: .7em; }
.eko-kart header { display: flex; gap: .8em; align-items: flex-start; }
.eko-kart header h3 { margin: 0; }
.eko-kart header .canli-rozet { margin-left: auto; white-space: normal; text-align: right; }
.eko-kart > p { margin: 0; font-size: .93rem; }
.eko-ikon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--renk, var(--vurgu)) 14%, #fff); color: var(--renk, var(--vurgu)); }
.eko-ikon svg { width: 22px; height: 22px; }
.eko-ikon.kucuk-ikon { flex-basis: 32px; width: 32px; height: 32px; border-radius: 8px; }
.eko-ikon.kucuk-ikon svg { width: 17px; height: 17px; }
.eko-deger { font-size: .88rem; background: var(--zemin); border-radius: 8px; padding: .55em .75em; }
.eko-akis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3em; align-items: center; font-size: .78rem; }
.eko-akis li { background: #fff; border: 1px solid var(--cizgi); border-radius: 999px; padding: .2em .65em; color: var(--metin); font-weight: 600; }
.eko-akis li:not(:last-child)::after { content: "›"; margin-left: .55em; color: var(--g-soluk); }
.eko-alt { display: flex; flex-direction: column; gap: .45em; margin-top: auto; }
.eko-alt svg { width: 13px; height: 13px; vertical-align: -2px; }
.eko-paketler { display: flex; flex-wrap: wrap; gap: .3em; }
.eko-kart > .btn { align-self: flex-start; }

/* ---------- Matris ---------- */
.matris td, .matris th { vertical-align: middle; }
.matris .tik { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--yesil-acik); color: #006300; font-weight: 800; }
.matris .yok { color: var(--g-eksen); }

/* ---------- Entegrasyon diyagramı ---------- */
.entegrasyon { display: flex; flex-direction: column; gap: .9em; }
.ent-satir { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .7em; align-items: stretch; }
.ent-kutu { background: #fff; border: 1px solid var(--cizgi); border-radius: 12px; padding: .75em 1em; display: flex; flex-direction: column; justify-content: center; }
.ent-kutu b { color: var(--ana-koyu); }
.ent-kutu small { color: var(--soluk); font-size: .82rem; }
.ent-kutu.sonuc { flex-direction: row; align-items: center; gap: .55em; background: color-mix(in srgb, var(--renk) 10%, #fff); border-color: var(--renk); }
.ent-kutu.sonuc svg { width: 20px; height: 20px; color: var(--renk); flex: 0 0 20px; }
.ent-ok { align-self: center; color: var(--g-soluk); font-weight: 700; font-size: 1.2rem; }
@media (max-width: 760px) {
  .ent-satir { grid-template-columns: 1fr; gap: .3em; }
  .ent-ok { transform: rotate(90deg); justify-self: center; }
}

/* ---------- Platform: hizmet katmanı ---------- */
.katman { border: 1px solid var(--cizgi); border-radius: 14px; overflow: hidden; background: #fff; }
.katman-ust { display: flex; flex-wrap: wrap; gap: .45em; padding: 1em; background: linear-gradient(135deg, var(--vurgu-acik), #fff); }
.katman-oge { display: inline-flex; align-items: center; gap: .4em; padding: .35em .75em; border-radius: 999px; background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid var(--renk); font-size: .85rem; font-weight: 600; color: var(--ana-koyu); }
.katman-oge svg { width: 15px; height: 15px; color: var(--renk); }
.katman-alt { padding: .8em 1em; background: var(--ana-koyu); color: #c9d6e4; font-size: .88rem; text-align: center; letter-spacing: .02em; }

/* ---------- Paylaşım modu ---------- */
.paylasim-serit { background: var(--sari-acik); border-bottom: 1px solid #f1dca7; color: #5c4409; font-size: .9rem; }
.paylasim-serit .kap { display: flex; justify-content: space-between; align-items: center; gap: 1em; flex-wrap: wrap; padding-top: .55em; padding-bottom: .55em; }
.paylasim-serit svg { width: 16px; height: 16px; vertical-align: -3px; }
.paylas-ipucu { position: fixed; right: 18px; bottom: 18px; z-index: 20; display: inline-flex; align-items: center; gap: .45em; padding: .6em 1em; border-radius: 999px; background: var(--ana-koyu); color: #fff !important; font-weight: 600; font-size: .88rem; box-shadow: 0 8px 24px rgba(11, 36, 64, .3); text-decoration: none !important; }
.paylas-ipucu svg { width: 16px; height: 16px; }
.paylas-kilit { max-width: 480px; margin: 2em auto; padding: 2em; }
.paylas-kilit h1 { margin-top: .6em; font-size: 1.4rem; }
.sunum-etiket.koyu { background: var(--ana-koyu); color: #fff; border-color: var(--ana-koyu); }
.sayfa-secim { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .45em 1em; }
.sayfa-secim .onay { font-weight: 500; background: var(--zemin); border-radius: 8px; padding: .5em .7em; }
.paylas-link input { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; }

/* ---------- Yazdırma belgesi ---------- */
.yazdir-govde { background: #fff; }
.yazdir-kapak { background: linear-gradient(135deg, var(--ana-koyu), var(--ana)); color: #fff; padding: 2.4em 0; }
.yazdir-kapak h1 { color: #fff; margin: .4em 0 .2em; }
.yazdir-kapak p { color: #cfe0f0; margin: .2em 0; }
.yazdir-kapak strong { color: #fff; }
.yazdir-arac { display: flex; gap: .6em; flex-wrap: wrap; margin: 1.2em 0 .6em; }
.yazdir-arac .btn.ikincil { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.yazdir-icindekiler { color: #cfe0f0; columns: 2; font-size: .9rem; margin: .6em 0 0; padding-left: 1.2em; }
.yazdir-sayfa { break-before: page; }
.yazdir-sayfa .sunum-band { padding: 1.6em 0 1.4em; }
@media print {
  .yazdir-arac, .paylas-ipucu, .paylasim-serit, .sunum-menu, .sunum-gezinti, .site-ust, .site-alt, .hesap fieldset { display: none !important; }
  .yazdir-kapak { min-height: 60vh; }
  .yazdir-sayfa .sunum-band, .yazdir-kapak { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grafik-tablo { display: none; }
  .eko-kart, .zincir li, .kart, .rakam { break-inside: avoid; }
}