/* CEPASS ana sayfası v3 (2026-10-31) — kullanıcının verdiği 935×1683 tasarım görseline birebir yerleşim.
   Ekran maketleri resim değil HTML/SVG'dir (her çözünürlükte keskin); kahraman ve çağrı bandındaki parçacık dalgası
   site.js içindeki <canvas data-dalga> çizimidir. Ortak belirteçler site.css'ten gelir. */

/* ---------- kahraman ---------- */
/* v4 (2026-11-01): kraliyet mavisi kahraman — açık mavi parlama + sol altta parçacık dalgası */
.kahraman { position: relative; overflow: hidden; color: #fff; padding: 34px 0 40px; background:
  radial-gradient(45% 70% at 80% 40%, rgba(96, 165, 250, 0.32), transparent 70%),
  radial-gradient(40% 70% at 6% 100%, rgba(56, 189, 248, 0.22), transparent 70%),
  radial-gradient(60% 90% at 35% 0%, rgba(26, 95, 214, 0.45), transparent 70%),
  linear-gradient(115deg, #082a7c 0%, #0b3ca6 42%, #0a3494 70%, #072a7a 100%); }
.kahraman::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent); }
.kahraman-dalga { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.kahraman-ic { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.kahraman h1 { color: #fff; font-size: 47px; line-height: 1.16; font-weight: 700; letter-spacing: -0.025em; margin: 0 0 22px; }
.kahraman h1 span { background: linear-gradient(90deg, #2fd3f5, #4cc3ff 60%, #63b3ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kahraman-ozet { font-size: 17px; line-height: 1.7; color: #c8d2ea; max-width: 560px; margin: 0 0 24px; }
.kahraman-cipler { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kahraman-cipler a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 9px; background: rgba(255, 255, 255, 0.03); color: #eef2fc; font-size: 12px; font-weight: 500; white-space: nowrap; transition: border-color 0.15s, background 0.15s; }
.kahraman-cipler a:hover { text-decoration: none; border-color: var(--cyan); background: rgba(47, 211, 245, 0.08); }
.kahraman-cipler .i { width: 15px; height: 15px; color: #9ec5ff; }
.kahraman-dugmeler { gap: 18px; margin-bottom: 40px; }
.kahraman-dugmeler .btn-lg { min-width: 220px; }
.kahraman-dugmeler .btn-ghost { min-width: 176px; }
.guven-seridi { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 14px; background: linear-gradient(90deg, rgba(6, 27, 85, 0.62), rgba(6, 27, 85, 0.3)); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.guven-baslik { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.3; color: #fff; flex: none; padding-right: 14px; border-right: 1px solid rgba(255, 255, 255, 0.16); }
.guven-baslik .i { width: 32px; height: 32px; color: #cfe0ff; stroke-width: 1.5; }
.guven-seridi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.guven-seridi li { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 11.5px; font-weight: 500; color: #e6ecfa; white-space: nowrap; border-left: 1px solid rgba(255, 255, 255, 0.12); }
.guven-seridi li:first-child { border-left: 0; padding-left: 0; }
.guven-seridi li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #9fb6e6; flex: none; }

/* ---------- pano maketi (koyu) ---------- */
.kahraman-pano { margin: 0; }
.kahraman-pano figcaption { margin-top: 10px; text-align: right; font-size: 12px; color: rgba(214, 224, 245, 0.55); }
.pano { display: grid; grid-template-columns: 134px minmax(0, 1fr); border-radius: 18px; overflow: hidden; background: #0a1f5c; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 90px rgba(3, 15, 52, 0.55), 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 120px rgba(96, 165, 250, 0.25); font-size: 12px; color: #c4cfe8; }
.pano-yan { background: #08194d; padding: 16px 10px; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.pano-logo { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 18px; font: 700 17px/1 var(--font); color: #fff; }
.pano-logo > span { display: inline-flex; align-items: center; }
.pano-logo .logo-yildiz, .dk-logo .logo-yildiz { width: 2.2em; height: 2.2em; margin: -0.62em -1.47em -0.62em -0.12em; }
.pano-logo .i { width: 14px; height: 14px; color: #8094c0; }
.pano-yan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pano-yan li { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 8px; font-size: 11px; font-weight: 500; color: #a9b7d8; white-space: nowrap; }
.pano-yan li .i { width: 14px; height: 14px; color: #8ea2cf; }
.pano-yan li.aktif { background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4); }
.pano-yan li.aktif .i { color: #fff; }
.pano-ana { padding: 14px 14px 14px; min-width: 0; }
.pano-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #8ea2cf; }
.pano-ust .i { width: 16px; height: 16px; }
.pano-ust-sag { display: flex; align-items: center; gap: 14px; }
.pano-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #38bdf8, #2563eb); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pano-kartlar { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pk { position: relative; background: linear-gradient(180deg, #13307a, #0f296a); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 12px; padding: 11px 11px 10px; min-height: 128px; display: flex; flex-direction: column; min-width: 0; }
.pk p { margin: 0; }
.pk-baslik { font-size: 10.5px; line-height: 1.3; font-weight: 600; color: #e7edfb; margin-bottom: 8px !important; }
.pk-sayi { font-size: 30px; font-weight: 600; color: #fff; line-height: 1.1; margin: 4px 0 10px !important; }
.pk-satir { display: flex; justify-content: space-between; font-size: 11px; color: #b5c2e0; margin-bottom: 6px !important; }
.pk-satir span:last-child { color: #fff; font-weight: 600; }
.pk-bag { margin-top: auto !important; font-size: 10.5px; font-weight: 500; color: #60a5fa; text-decoration: underline; text-underline-offset: 2px; }
.pk-bag.yesil { color: #4ade80; }
.pk-uyum { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 8px; }
.pk-uyum .pk-baslik { grid-column: 1 / -1; }
.pk-gosterge { position: relative; width: 66px; height: 66px; grid-row: span 2; }
.pk-gosterge svg { width: 100%; height: 100%; }
.pk-gosterge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.pk-gosterge .gs-iz { stroke: rgba(255, 255, 255, 0.1); }
.pk-gosterge strong, .pk-halka strong { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: #fff; }
.pk-etiket { align-self: center; font-size: 11px; font-weight: 600; color: #fff; }
.pk-alt { grid-column: 1 / -1; margin-top: auto !important; font-size: 9.5px; color: #8ea2cf; }
.pk-dosya { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: 8px; }
.pk-dosya .pk-baslik { grid-column: 1 / -1; }
.pk-halka { position: relative; width: 64px; height: 64px; }
.pk-halka svg { width: 100%; height: 100%; }
.pk-halka circle { fill: none; stroke-width: 11; }
.pk-halka .hl-iz { stroke: rgba(255, 255, 255, 0.08); }
.pk-halka .hl-mavi { stroke: #3b82f6; }
.pk-halka .hl-sari { stroke: #facc15; }
.pk-halka .hl-kirmizi { stroke: #ef4444; }
.pk-lejant { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: center; font-size: 9.5px; color: #b5c2e0; }
.pk-lejant li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.pk-lejant li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pk-lejant b { color: #fff; font-weight: 600; margin-left: auto; }
.pk-lejant .l-mavi::before { background: #3b82f6; }
.pk-lejant .l-sari::before { background: #facc15; }
.pk-lejant .l-kirmizi::before { background: #ef4444; }
.pk-dosya .pk-bag { grid-column: 1 / -1; }
.pk-durumlar { list-style: none; margin: 2px 0 8px; padding: 0; display: grid; gap: 8px; font-size: 11px; }
.pk-durumlar li { display: flex; align-items: center; gap: 7px; }
.pk-durumlar li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06); }
.pk-durumlar b { margin-left: auto; color: #fff; font-weight: 600; }
.pk-durumlar .d-yesil::before { background: #22c55e; }
.pk-durumlar .d-sari::before { background: #facc15; }
.pk-durumlar .d-kirmizi::before { background: #ef4444; }
.pk-qr img { width: 66px; height: 66px; border-radius: 6px; background: #fff; padding: 3px; }
.pk-kod { margin-top: 7px !important; font-size: 9.5px; font-weight: 600; color: #dbe4f7; letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-uyari { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 11px 14px; border-radius: 10px; background: linear-gradient(90deg, #fde2c4 0%, #feead6 45%, #fff4e8 100%); border: 1px solid #fbd2a6; color: #3a2a1b; font-size: 11px; }
.pu-ikon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: #f7841e; flex: none; }
.pu-ikon .i { width: 26px; height: 26px; stroke-width: 2; fill: #fdba74; }
.pu-metin { flex: 1; min-width: 0; line-height: 1.45; color: #4a3826; }
.pu-metin strong { display: block; font-size: 12px; color: #241608; }
.pu-bag { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; color: #1d4ed8; text-decoration: underline; white-space: nowrap; }
.pu-bag .i { width: 13px; height: 13px; }

/* ---------- öne çıkan 4 kart ---------- */
.ozellikler-bant { padding: 26px 0 6px; }
.ozk-dizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ozk { display: block; padding: 24px 24px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--text); box-shadow: 0 2px 10px rgba(13, 27, 62, 0.04); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.ozk:hover { text-decoration: none; transform: translateY(-4px); border-color: #d6def0; box-shadow: 0 22px 44px rgba(13, 27, 62, 0.1); }
.ozk h3 { font-size: 18px; margin: 16px 0 8px; }
.ozk p { margin: 0; font-size: 14.5px; line-height: 1.65; color: #4e5873; }
.ozk-ikon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.ozk-ikon .i { width: 30px; height: 30px; stroke-width: 1.7; }
.ozk-ikon.mavi { background: #e8f0ff; color: #2563eb; }
.ozk-ikon.mavi .i { fill: #c9dbff; }
.ozk-ikon.yesil { background: #e3f7ea; color: #16a34a; border-radius: 50%; }
.ozk-ikon.yesil .i { fill: #b9ecc9; }
.ozk-ikon.turuncu { background: #fff1e3; color: #f7841e; }
.ozk-ikon.mor { background: #efeaff; color: #6d4aff; }

/* ---------- nasıl çalışır ---------- */
.nasil { padding: 28px 0 22px; }
.bolum-baslik { text-align: center; font-size: 32px; font-weight: 700; margin: 0 0 22px; }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.adimlar li { position: relative; text-align: center; }
.adimlar li:not(:last-child)::after { content: ''; position: absolute; top: 36px; left: calc(50% + 66px); right: calc(-50% + 52px); height: 1.5px; background: linear-gradient(90deg, #d4dbe8, #b9c4d8); }
.adimlar li:not(:last-child)::before { content: ''; position: absolute; top: 32px; right: calc(-50% + 53px); width: 8px; height: 8px; border-top: 1.5px solid #b9c4d8; border-right: 1.5px solid #b9c4d8; transform: rotate(45deg); }
.adim-ust { position: relative; display: block; width: 74px; height: 74px; margin: 0 auto 16px; }
.adim-no { position: absolute; left: -46px; top: 23px; width: 28px; height: 28px; border-radius: 50%; background: #eaf1ff; color: var(--brand); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.adim-ikon { width: 74px; height: 74px; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(13, 27, 62, 0.08); display: flex; align-items: center; justify-content: center; color: var(--brand); }
.adim-ikon .i { width: 32px; height: 32px; stroke-width: 1.7; }
.adim-ikon.yesil { background: #e9f8ef; border-color: #d3f0dd; }
.adim-ikon.yesil .i { color: #fff; fill: #16a34a; stroke: #16a34a; }
.adim-ikon.yesil .i { stroke: #fff; }
.adimlar h3 { font-size: 15.5px; margin: 0 0 6px; }
.adimlar p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 auto; max-width: 210px; }

/* ---------- vitrin kartları (3 ürün bölümü) ---------- */
.vitrin { padding: 8px 0; }
.vitrin-kart { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 54px; align-items: center; padding: 16px 46px 16px 16px; border: 1px solid #edf1f7; border-radius: 22px; background: #fff; box-shadow: 0 12px 36px rgba(13, 27, 62, 0.05); }
.vitrin-kart.ters { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); padding: 16px 16px 16px 52px; }
.vitrin-metin h2 { font-size: 30px; font-weight: 700; margin-bottom: 8px; }
.vitrin-metin > p { font-size: 16px; color: #4e5873; margin-bottom: 14px; }
.tik-liste { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.tik-liste li { position: relative; padding-left: 34px; font-size: 15.5px; color: var(--dark); }
.tik-liste li::before { content: ''; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: var(--ink); }
.tik-liste li::after { content: ''; position: absolute; left: 7px; top: 7px; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* teknik dosya maketi (açık) */
.maket { border: 1px solid #e1e7f1; border-radius: 14px; background: #fff; box-shadow: 0 16px 40px rgba(13, 27, 62, 0.08); overflow: hidden; font-size: 12.5px; color: var(--dark); }
.maket p { margin: 0; }
.maket-dosya { display: grid; grid-template-columns: 172px minmax(0, 1fr); }
.md-yan { background: #f7f9fd; border-right: 1px solid #e8edf5; padding: 14px 12px; }
.md-gezinti { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px !important; color: #9aa6bf; }
.md-gezinti span { display: inline-flex; gap: 2px; padding: 4px 6px; border-radius: 7px; background: #e9eefb; color: var(--brand); }
.md-gezinti .i { width: 13px; height: 13px; }
.md-yan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.md-yan li { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 8px; font-weight: 500; }
.md-yan li .i { width: 17px; height: 17px; color: #f0a52a; fill: #fbd27a; stroke-width: 1.4; }
.md-yan li.acik { background: #fff; box-shadow: 0 1px 4px rgba(13, 27, 62, 0.06); }
.md-yan li.acik .i { color: #7aa7f5; fill: #d6e5ff; }
.md-ana { padding: 14px 16px 10px; min-width: 0; }
.md-baslik { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px !important; }
.md-satir { display: grid; grid-template-columns: minmax(0, 2.3fr) 0.6fr 1.15fr 0.7fr; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid #eef1f6; }
.md-satir:last-child { border-bottom: 0; }
.md-satir span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-satir span:first-child { display: flex; align-items: center; gap: 8px; }
.md-satir .i { width: 16px; height: 16px; color: #5b8def; fill: #e3ecff; stroke-width: 1.5; }
.md-bas { font-size: 11px; font-weight: 600; color: var(--muted); padding-top: 4px; }
.md-satir .onayli { color: #16a34a; font-weight: 600; }

/* doğrulama kartı */
.dogrulama-karti { border: 1px solid #dde4f0; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 20px 46px rgba(13, 27, 62, 0.1); }
.dogrulama-karti p { margin: 0; }
.dk-ust { display: flex; align-items: center; gap: 8px; padding: 14px 22px; background: linear-gradient(90deg, #0a2a7c, #0d3fa6); color: #fff; font-size: 15px; font-weight: 600; }
.dk-logo { display: inline-flex; align-items: center; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.dk-govde { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.dk-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 14px; border-right: 1px solid #eef1f6; }
.dk-qr img { width: 168px; height: 168px; image-rendering: pixelated; }
.dk-qr p { font-size: 11.5px; color: var(--muted); font-weight: 500; letter-spacing: 0.02em; text-align: center; word-break: break-all; }
.dk-bilgi { padding: 16px 22px 12px; min-width: 0; }
.dk-durum { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: #15803d; margin-bottom: 14px !important; }
.dk-durum > .i { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #16a34a; color: #fff; stroke-width: 3; flex: none; }
.dk-durum > span::first-letter { text-transform: uppercase; }
.dogrulama-karti dl { margin: 0 0 12px; display: grid; gap: 6px; }
.dogrulama-karti dl div { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; font-size: 13.5px; }
.dogrulama-karti dt { color: var(--muted); }
.dogrulama-karti dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.dk-alt { font-size: 13.5px; font-weight: 600; color: #15803d; margin-bottom: 10px !important; }
.dk-bilgi .link-more { font-size: 13.5px; }
.dk-not { padding: 8px 22px; background: var(--surface-2); border-top: 1px solid #eef1f6; font-size: 11.5px; color: var(--muted); text-align: right; }

/* mevzuat maketi */
.maket-mevzuat { padding: 16px; background: linear-gradient(180deg, #fbfcff, #fff); }
.mm-baslik { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px !important; }
.mm-sayilar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.mm-sayilar p { display: flex; flex-direction: column; gap: 2px; padding: 11px 12px; border: 1px solid #e6ebf4; border-radius: 10px; background: #fff; }
.mm-sayilar span { font-size: 10.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.mm-sayilar b { font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.mm-sayilar small { font-size: 10.5px; color: var(--muted); }
.mm-sayilar .kritik { border-color: #fbd3ad; background: #fffaf4; }
.mm-sayilar .kritik small { color: #dc2626; font-weight: 600; }
.mm-tablo { border: 1px solid #e6ebf4; border-radius: 10px; padding: 10px 12px 4px; background: #fff; }
.mm-tablo-baslik { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px !important; }
.mm-tablo-baslik .i { width: 14px; height: 14px; color: var(--muted); }
.mm-satir { display: grid; grid-template-columns: 1.25fr 2fr 0.7fr 0.8fr 0.9fr; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eef1f6; font-size: 11.5px; }
.mm-satir:last-child { border-bottom: 0; }
.mm-satir span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-bas { font-size: 10.5px; font-weight: 600; color: var(--muted); }
.mm-satir .on { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.mm-satir .on::before { content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.on.yuksek { color: #dc2626; } .on.yuksek::before { background: #dc2626; }
.on.orta { color: #ea8a1a; } .on.orta::before { background: #f59e0b; }
.on.dusuk { color: #16a34a; } .on.dusuk::before { background: #22c55e; }

/* ---------- entegrasyonlar ---------- */
.entegrasyon { padding: 24px 0 10px; }
.entegrasyon .bolum-baslik { margin-bottom: 18px; }
.ent-dizi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.ent-dizi li { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(13, 27, 62, 0.03); min-width: 0; }
.ent-dizi strong { display: block; font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.25; }
.ent-dizi small { display: block; font-size: 12px; color: var(--muted); line-height: 1.3; }
.ent-ikon { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.ent-ikon .i { width: 24px; height: 24px; }
.ent-ikon.lacivert { background: #e7edfb; color: #1e3a8a; }
.ent-ikon.mavi { background: #e8f0ff; color: #2563eb; }
.ent-ikon.sari { background: #fff6dc; color: #b7791f; }
.ent-ikon.sari .i { fill: #facc15; }
.ent-ikon.yesil { background: #e3f7ea; color: #15803d; }
.ent-ikon.yesil .i { fill: #86efac; }
.ent-ikon.gri { background: #eef1f6; color: #64748b; }
.ent-not { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---------- rakamlar ---------- */
.rakamlar { padding: 16px 0 20px; }
.rk-dizi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.rk { display: flex; align-items: center; gap: 20px; margin: 0; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 2px 10px rgba(13, 27, 62, 0.04); }
.rk-ikon { width: 74px; height: 74px; flex: none; border-radius: 50%; background: #eef3fb; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.rk-ikon .i { width: 36px; height: 36px; stroke-width: 1.7; }
.rk:nth-child(2) .rk-ikon, .rk:nth-child(3) .rk-ikon { color: #1d4ed8; }
.rk:nth-child(4) .rk-ikon { color: #3b82f6; }
.rk-metin { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.rk-metin strong { display: block; font-size: 33px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 4px; }
.rk-yazi .rk-metin { font-size: 18px; font-weight: 600; line-height: 1.4; max-width: 150px; }

/* ---------- çağrı bandı ---------- */
.cagri { padding: 10px 0 40px; }
.cagri-kart { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 40px; align-items: center; padding: 38px 56px; border-radius: 22px; background: radial-gradient(60% 140% at 80% 50%, rgba(96, 165, 250, 0.32), transparent 70%), linear-gradient(110deg, #0e46b6 0%, #0b3aa0 40%, #082c80 75%, #072772 100%); box-shadow: 0 26px 60px rgba(8, 42, 120, 0.3); }
.cagri-dalga { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cagri-metin, .cagri-dugmeler { position: relative; z-index: 1; }
.cagri-metin h2 { color: #fff; font-size: 32px; font-weight: 700; margin-bottom: 12px; }
.cagri-metin p { color: #cbd5ec; font-size: 16.5px; margin: 0; max-width: 640px; }
.cagri-dugmeler { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.cagri-dugmeler .btn-lg { min-width: 196px; }

/* ---------- duyarlı ---------- */
@media (max-width: 1240px) {
  .kahraman h1 { font-size: 46px; }
  .pano { grid-template-columns: 150px minmax(0, 1fr); }
  .ent-dizi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rk-metin strong { font-size: 30px; }
}
@media (max-width: 1100px) {
  .kahraman-ic { grid-template-columns: 1fr; gap: 50px; }
  .kahraman-metin { max-width: 720px; }
  .kahraman-pano { max-width: 820px; }
  .ozk-dizi, .rk-dizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vitrin-kart, .vitrin-kart.ters { grid-template-columns: 1fr; gap: 30px; padding: 20px; }
  .vitrin-kart.ters .vitrin-metin { order: 0; }
  .vitrin-metin { padding: 6px 12px 10px; }
  .cagri-kart { grid-template-columns: 1fr; padding: 40px 36px; }
  .cagri-dugmeler { justify-content: flex-start; }
}
@media (max-width: 900px) {
  .adimlar { grid-template-columns: 1fr; gap: 0; max-width: 520px; margin: 0 auto; }
  .adimlar li { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; column-gap: 18px; text-align: left; padding: 0 0 26px; }
  .adimlar li:not(:last-child)::after { top: 78px; bottom: 6px; left: 37px; right: auto; width: 1.5px; height: auto; background: linear-gradient(180deg, #d4dbe8, #b9c4d8); }
  .adimlar li:not(:last-child)::before { display: none; }
  .adim-ust { grid-row: span 2; margin: 0; }
  .adim-no { left: auto; right: -8px; top: -6px; width: 26px; height: 26px; background: var(--brand); color: #fff; box-shadow: 0 0 0 3px #fff; }
  .adimlar h3 { align-self: end; margin-top: 10px; }
  .adimlar p { margin: 0; max-width: none; }
}
@media (max-width: 760px) {
  .kahraman { padding: 40px 0 46px; }
  .kahraman h1 { font-size: 36px; }
  .kahraman-ozet { font-size: 16px; }
  .kahraman-dugmeler .btn-lg, .kahraman-dugmeler .btn-ghost { min-width: 0; flex: 1 1 200px; }
  .guven-seridi { flex-direction: column; align-items: flex-start; }
  .guven-baslik { border-right: 0; padding-right: 0; }
  .guven-seridi li { padding: 0 10px; font-size: 12.5px; }
  .pano { grid-template-columns: 1fr; }
  .pano-yan { display: none; }
  .pano-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pu-bag { display: none; }
  .bolum-baslik { font-size: 27px; }
  .ozk-dizi, .rk-dizi { grid-template-columns: 1fr; }
  .vitrin-metin h2 { font-size: 26px; }
  .maket-dosya { grid-template-columns: 1fr; }
  .md-yan { display: none; }
  .md-satir { grid-template-columns: minmax(0, 2fr) 0.6fr 0.8fr; }
  .md-satir span:nth-child(3) { display: none; }
  .mm-sayilar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-satir { grid-template-columns: 1.2fr 1.6fr 0.9fr; }
  .mm-satir span:nth-child(3), .mm-satir span:nth-child(5) { display: none; }
  .dk-govde { grid-template-columns: 1fr; }
  .dk-qr { border-right: 0; border-bottom: 1px solid #eef1f6; }
  .dogrulama-karti dl div { grid-template-columns: 112px minmax(0, 1fr); }
  .ent-dizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cagri-kart { padding: 32px 22px; }
  .cagri-metin h2 { font-size: 26px; }
  .cagri-dugmeler .btn-lg { min-width: 0; flex: 1 1 200px; }
}
@media (max-width: 420px) {
  .pano-kartlar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pk { min-height: 0; padding: 10px; }
  .pk-uyum, .pk-dosya { grid-column: 1 / -1; }
  .ent-dizi { grid-template-columns: 1fr; }
}

/* ---------- v4 ana sayfa arama alanı (site sayfaları + Çalışma Alanı modülleri; dizin /assets/arama.json) ---------- */
.kahraman-ara { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; max-width: 560px; height: 50px; margin: -6px 0 22px; padding: 0 12px 0 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 14px 34px rgba(4, 20, 70, 0.28); color: var(--muted); }
.kahraman-ara:focus-within { box-shadow: 0 0 0 4px rgba(47, 211, 245, 0.45), 0 14px 34px rgba(4, 20, 70, 0.28); }
.kahraman-ara > .i { width: 19px; height: 19px; color: var(--royal-700); }
.kahraman-ara input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 14.5px var(--font); color: var(--ink); }
.kahraman-ara input::placeholder { color: #7a8399; }
.kahraman-ara kbd { font: 600 11px var(--font); padding: 1px 7px; border: 1px solid var(--line-2); border-radius: 5px; color: var(--muted); background: var(--surface-2); }
.kahraman-ara-sonuc { position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px rgba(4, 20, 70, 0.3); max-height: 380px; overflow-y: auto; }
.kahraman-ara-sonuc a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.kahraman-ara-sonuc a:hover, .kahraman-ara-sonuc a[aria-selected='true'] { background: var(--surface-2); text-decoration: none; }
.kahraman-ara-sonuc a span { grid-column: 1; font-size: 12.5px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kahraman-ara-sonuc a em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: #e8f0ff; color: var(--royal-700); }
.kahraman-ara-sonuc a em.modul { background: #fff1e3; color: #c2570c; }
.kahraman-ara-sonuc .bos { padding: 10px 12px; font-size: 13.5px; color: var(--muted); }
@media (max-width: 760px) { .kahraman-ara { height: 48px; margin-top: -4px; } .kahraman-ara kbd { display: none; } }

/* ---------- v7 modüller ayrıntılı (#moduller-detay): işletme türü kartları, modül kartları, ayrıntı pencereleri ---------- */
.md { padding: 40px 0 30px; }
.md-eyebrow { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--royal-700); }
.md-baslik { max-width: 760px; margin: 0 0 16px; font-size: 40px; line-height: 1.15; font-weight: 700; color: var(--ink); }
.md-baslik span { font-weight: 500; color: var(--muted); }
.md-giris { max-width: 760px; margin: 0 0 30px; color: var(--text); }
.md-giris a { font-weight: 600; color: var(--royal-700); }
.md-hedef { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.md-hedef a { display: grid; grid-template-columns: 40px 1fr; gap: 2px 12px; align-content: start; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--text); box-shadow: 0 2px 10px rgba(13, 27, 62, 0.04); transition: border-color 0.2s, box-shadow 0.2s; }
.md-hedef a:hover { text-decoration: none; border-color: var(--royal-600); box-shadow: var(--shadow-sm); }
.md-hedef strong { align-self: center; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.md-hedef span:last-child { grid-column: 2; font-size: 13px; line-height: 1.45; color: var(--muted); }
.md-ikon { grid-row: span 2; width: 40px; height: 40px; border-radius: 10px; background: var(--surface); color: var(--royal-700); display: flex; align-items: center; justify-content: center; }
.md-ikon .i { width: 21px; height: 21px; }
.md-genis { position: relative; margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center; padding: 24px 26px; border: 1px solid #c9d8f5; border-radius: 18px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.md-genis h3 { margin: 0 0 8px; font-size: 18px; }
.md-genis p:last-child { margin: 0; max-width: 680px; color: var(--text); font-size: 14.5px; }
.md-izgara { margin-top: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.md-kart { position: relative; padding: 26px 24px 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }
.md-kart h3 { margin: 0 34px 12px 0; font-size: 17px; line-height: 1.35; }
.md-kart p { margin: 0; color: var(--text); font-size: 14.5px; line-height: 1.6; }
.md-kart h3 button, .md-genis h3 button { display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.md-kart h3 button .i { flex: 0 0 auto; width: 21px; height: 21px; color: var(--royal-700); }
/* Kartın tamamı tıklanabilir: düğmenin örtüsü kartı kaplar (düğme başlıkta kalır, erişilebilir ad başlıktır). */
.md-kart h3 button::after, .md-genis h3 button::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.md-kart:hover, .md-genis:hover { border-color: var(--royal-600); box-shadow: var(--shadow-sm); }
.md-kart:hover { transform: translateY(-2px); }
.md-kart:focus-within, .md-genis:focus-within { outline: 3px solid rgba(26, 95, 214, 0.35); outline-offset: 2px; }
.md-kart h3 button:focus-visible, .md-genis h3 button:focus-visible { outline: none; }
.md-ok { position: absolute; top: 26px; right: 22px; width: 16px; height: 16px; color: var(--muted); transform: rotate(-45deg); }
.md-cipler { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.md-cipler li { padding: 5px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 13px; line-height: 1.4; color: var(--muted); }
.md-cipler-sag { margin: 0; flex-direction: column; align-items: flex-end; }
.md-dahil { margin-top: 34px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.md-dahil ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.md-dahil a { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); }
.md-dahil a .i { width: 17px; height: 17px; color: var(--muted); }
.md-dahil a:hover { color: var(--royal-700); }
.md-pencere { width: min(680px, calc(100vw - 32px)); max-height: min(88vh, 920px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--text); box-shadow: 0 30px 80px rgba(5, 13, 34, 0.35); overflow: hidden; }
.md-pencere::backdrop { background: rgba(6, 27, 85, 0.38); backdrop-filter: blur(3px); }
.md-p-ic { display: flex; flex-direction: column; max-height: min(88vh, 920px); }
.md-p-ust { display: grid; grid-template-columns: 40px 1fr 36px; gap: 14px; align-items: start; padding: 22px 22px 16px; border-bottom: 1px solid var(--line); }
.md-p-ust .md-ikon { grid-row: auto; }
.md-p-ust h3 { margin: 0 0 4px; font-size: 20px; color: var(--ink); }
.md-p-ust p { margin: 0; font-size: 14px; color: var(--muted); }
.md-kapat { width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.md-kapat:hover { background: var(--surface-2); color: var(--ink); }
.md-p-govde { overflow-y: auto; padding: 18px 22px 8px; font-size: 15px; line-height: 1.65; }
.md-etiket { margin: 20px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--royal-700); }
.md-ozellik { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.md-ozellik li { position: relative; padding-left: 28px; }
.md-ozellik li::before { content: ''; position: absolute; left: 4px; top: 0.35em; width: 6px; height: 11px; border-right: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(40deg); }
.md-ozellik strong { display: block; font-weight: 600; color: var(--ink); }
.md-ozellik span { display: block; font-size: 14px; color: var(--muted); }
.md-kimler { margin: 0; display: grid; gap: 4px; }
.md-kimler dt { font-weight: 600; color: var(--ink); margin-top: 8px; }
.md-kimler dd { margin: 0; font-size: 14px; color: var(--muted); }
.md-not { margin: 18px 0 10px; padding: 10px 12px; border-radius: 10px; background: #fff7ec; font-size: 13.5px; }
.md-p-alt { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
@media (max-width: 1100px) {
  .md-hedef, .md-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-baslik { font-size: 34px; }
}
@media (max-width: 760px) {
  .md { padding: 28px 0 20px; }
  .md-hedef, .md-izgara, .md-genis { grid-template-columns: 1fr; }
  .md-cipler-sag { align-items: flex-start; }
  .md-baslik { font-size: 28px; }
  .md-p-alt { justify-content: stretch; }
  .md-p-alt .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---------- 2026-11-04: CE uygunluk beyanı (DoC) hazırlama modülü + CEPASS logolu örnek beyan ---------- */
.beyan-bolum { position: relative; margin: 34px 0 26px; padding: 64px 0; background: radial-gradient(1100px 420px at 85% 10%, rgba(26, 95, 214, 0.1), transparent 70%), linear-gradient(180deg, #f4f7fd, #eef3fb); border-top: 1px solid #e3e9f4; border-bottom: 1px solid #e3e9f4; overflow: hidden; }
.beyan-izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr); gap: 56px; align-items: center; }
.beyan-metin h2 { font-size: 34px; line-height: 1.22; font-weight: 700; margin: 0 0 14px; color: var(--royal-ink); }
.beyan-metin h2 span { color: var(--royal-600); }
.beyan-giris { font-size: 16.5px; color: #4e5873; margin: 0 0 24px; max-width: 620px; }
.beyan-adimlar { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; counter-reset: ba; }
.beyan-adimlar li { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 16px 16px 16px 14px; background: #fff; border: 1px solid #e3e9f4; border-radius: 16px; box-shadow: 0 8px 22px rgba(13, 27, 62, 0.05); counter-increment: ba; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.beyan-adimlar li:hover { transform: translateY(-3px); border-color: #c7d5f0; box-shadow: 0 16px 32px rgba(13, 27, 62, 0.1); }
.beyan-adimlar li::after { content: counter(ba); position: absolute; top: 12px; right: 14px; font-size: 12px; font-weight: 700; color: var(--orange); }
.ba-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; color: #fff; background: linear-gradient(145deg, var(--royal-600), var(--royal-900)); box-shadow: 0 10px 20px -8px rgba(13, 71, 184, 0.55); }
.ba-ico .i { width: 23px; height: 23px; }
.beyan-adimlar h3 { margin: 2px 0 4px; font-size: 16px; font-weight: 700; color: var(--royal-ink); }
.beyan-adimlar p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #56607a; }
.beyan-ek { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 24px; padding: 12px 14px; border-radius: 12px; background: #fff7ee; border: 1px solid #fde1c2; font-size: 14px; color: #5b4630; }
.beyan-ek .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--orange-dark); }
.beyan-ek b { color: var(--royal-ink); }
.beyan-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.beyan-not { margin: 0; font-size: 12.5px; color: var(--muted); }

/* örnek beyan belgesi (A4 kâğıt görünümü) */
.beyan-belge { position: relative; margin: 0; }
.beyan-belge::before { content: ''; position: absolute; inset: 22px -18px -14px 26px; border-radius: 10px; background: #dfe7f6; transform: rotate(2.4deg); }
.bb-kagit { position: relative; overflow: hidden; padding: 30px 32px 22px; background: #fff; border-radius: 8px; border-top: 6px solid var(--royal-700); box-shadow: 0 30px 70px rgba(13, 27, 62, 0.18), 0 2px 6px rgba(13, 27, 62, 0.06); color: #1c2540; font-size: 12.5px; line-height: 1.5; }
.bb-filigran { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-28deg); font-size: 120px; font-weight: 800; letter-spacing: 0.1em; color: rgba(13, 71, 184, 0.045); pointer-events: none; user-select: none; }
.bb-ust { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #e6ebf5; }
.bb-logo { display: inline-flex; align-items: center; gap: 2px; font: 700 23px/1 var(--font); color: var(--royal-ink); letter-spacing: -0.005em; }
.bb-logo .logo-yildiz { width: 40px; height: 40px; margin-right: -6px; }
.bb-baslik-kap { text-align: right; }
.bb-baslik { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--royal-800); }
.bb-alt { margin: 2px 0 0; font-size: 11.5px; font-style: italic; color: var(--muted); }
.bb-meta { position: relative; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 10px; padding: 8px 12px; border-radius: 8px; background: #f3f6fc; font-size: 11.5px; color: #56607a; }
.bb-meta b { color: var(--royal-ink); font-weight: 600; }
.bb-maddeler { position: relative; list-style: none; margin: 0; padding: 0; }
.bb-maddeler > li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px dashed #e3e8f1; }
.bb-maddeler > li:last-child { border-bottom: 0; }
.bb-no { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--royal-700); color: #fff; font-size: 11px; font-weight: 700; }
.bb-maddeler p { margin: 0; }
.bb-etiket { font-size: 10.5px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--royal-700); margin-bottom: 1px !important; }
.bb-liste { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.bb-liste li { padding-left: 14px; position: relative; }
.bb-liste li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.bb-liste b { color: var(--royal-ink); }
.bb-imza { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: end; margin-top: 12px; padding-top: 12px; border-top: 2px solid #e6ebf5; }
.bb-imza-sol p { margin: 0; }
.bb-imza-cizgi { display: block; width: 150px; height: 40px; margin: 4px 0 2px; fill: none; stroke: #1b3d8f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bb-ce { width: 70px; height: 50px; fill: #0b1f4d; }
.bb-qr { text-align: center; }
.bb-qr img { display: block; width: 92px; height: 92px; padding: 4px; border: 1px solid #e3e8f1; border-radius: 8px; background: #fff; }
.bb-qr p { margin: 4px 0 0; font-size: 10.5px; font-weight: 600; color: var(--royal-700); }
.bb-dip { position: relative; display: flex; justify-content: space-between; gap: 10px; margin: 14px -32px -22px; padding: 9px 32px; background: var(--royal-ink); color: #c9d5f2; font-size: 10.5px; }
.beyan-belge figcaption { position: relative; margin-top: 22px; text-align: center; font-size: 12.5px; color: var(--muted); }

@media (max-width: 1080px) {
  .beyan-izgara { grid-template-columns: 1fr; gap: 44px; }
  .beyan-belge { max-width: 620px; margin: 0 auto; width: 100%; }
}
@media (max-width: 760px) {
  .beyan-bolum { padding: 48px 0; }
  .beyan-metin h2 { font-size: 27px; }
  .beyan-adimlar { grid-template-columns: 1fr; }
  .beyan-belge::before { display: none; }
  .bb-kagit { padding: 22px 16px 18px; font-size: 12px; }
  .bb-ust { flex-direction: column; align-items: flex-start; }
  .bb-baslik-kap { text-align: left; }
  .bb-imza { grid-template-columns: 1fr auto; }
  .bb-imza-sol { grid-column: 1 / -1; }
  .bb-dip { margin: 14px -16px -18px; padding: 9px 16px; flex-direction: column; }
  .bb-filigran { font-size: 72px; }
}

/* ---------- 2026-11-04: tanıtım videosu (gerçek ekranlarla üye olma + ürün turu) ---------- */
.tanitim-video { padding: 72px 0 40px; }
.tv-izgara { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 52px; align-items: center; }
.tv-metin h2 { font-size: 34px; line-height: 1.22; font-weight: 700; margin: 0 0 14px; color: var(--royal-ink); }
.tv-metin h2 span { color: var(--royal-600); }
.tv-giris { font-size: 16.5px; color: #4e5873; margin: 0 0 20px; }
.tv-bolumler { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tv-bolum { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--dark); font: 500 13.5px var(--font); text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; }
.tv-bolum:hover { border-color: var(--royal-600); color: var(--royal-700); }
.tv-bolum[aria-current='true'] { border-color: var(--orange); background: #fff7ee; color: var(--royal-ink); }
.tv-zaman { flex: none; min-width: 44px; padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--royal-700); font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.tv-bolum[aria-current='true'] .tv-zaman { background: var(--orange); color: #fff; }
.tv-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }
.tv-oynatici { margin: 0; }
.tv-oynatici video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--royal-950); box-shadow: 0 30px 70px rgba(13, 27, 62, 0.22); }
.tv-oynatici figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--muted); }
@media (max-width: 1080px) {
  .tv-izgara { grid-template-columns: 1fr; gap: 32px; }
  .tv-oynatici { order: -1; }
}
@media (max-width: 760px) {
  .tanitim-video { padding: 48px 0 24px; }
  .tv-metin h2 { font-size: 27px; }
  .tv-bolumler { grid-template-columns: 1fr; }
  .tv-oynatici video { border-radius: 12px; }
}

/* ---------- 2026-11-04 (kullanıcı isteği): kahraman (hero) zemini beyaz ----------
   Yazılar lacivert, vurgulu kelime kraliyet mavisi; arama kutusu ve çipler çizgili; parçacık dalgası açık mavi (site.js DALGA.kahraman).
   Koyu pano maketi beyaz zeminde kontrast olarak kalır. */
.kahraman { color: var(--ink); background: #fff; }
.kahraman::after { background: var(--line); }
.kahraman h1 { color: var(--royal-ink); }
.kahraman h1 span { background: linear-gradient(90deg, var(--royal-600), #1f8ef1 60%, #18a5e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kahraman-ozet { color: #4e5873; }
.kahraman-cipler a { border-color: var(--line-2); background: #fff; color: var(--royal-ink); }
.kahraman-cipler a:hover { border-color: var(--royal-600); background: var(--surface-2); }
.kahraman-cipler .i { color: var(--royal-700); }
.kahraman-ara { background: #fff; border: 1px solid var(--line-2); box-shadow: 0 12px 30px rgba(13, 27, 62, 0.08); }
.kahraman-ara:focus-within { border-color: var(--royal-600); box-shadow: 0 0 0 4px rgba(26, 95, 214, 0.15), 0 12px 30px rgba(13, 27, 62, 0.08); }
.kahraman .btn-ghost { background: #fff; color: var(--royal-ink); border-color: var(--line-2); }
.kahraman .btn-ghost:hover { background: var(--royal-ink); border-color: var(--royal-ink); color: #fff; }
.kahraman .guven-seridi { border-color: var(--line); background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kahraman .guven-baslik { color: var(--royal-ink); border-right-color: var(--line); }
.kahraman .guven-baslik .i { color: var(--royal-700); }
.kahraman .guven-seridi li { color: #4e5873; border-left-color: var(--line); }
.kahraman .guven-seridi li::before { border-color: var(--royal-600); }
.kahraman-pano figcaption { color: var(--muted); }

/* 2026-11-04: kahraman üst etiketi (CE ürün pasaportu · online hizmetler) ve demo bağlantısı */
.kahraman-ust { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px 6px 10px; border: 1px solid #f9c89a; border-radius: 999px; background: #fff6ec; color: var(--orange-dark); font-size: 13px; font-weight: 600; }
.kahraman-ust .i { width: 17px; height: 17px; }
.kahraman-demo { margin: -26px 0 30px; font-size: 14px; color: var(--muted); }
.kahraman-demo a { font-weight: 600; }