/* ClickSambo — Meta Ads tanıtım mockup bileşenleri (tarayıcı çerçevesi, KPI, grafik, lead tablosu, akış).
   Ana sayfa (meta-promo) ve /meta-ads-protection sayfası ortak kullanır. Prefix: csm- */

.csm-frame{position:relative;width:100%;background:#0f1a2e;border-radius:18px;box-shadow:0 30px 80px rgba(10,20,40,.35);border:1px solid rgba(255,255,255,.08);overflow:hidden;font-family:Nunito,Mulish,sans-serif;color:#1a2b4a;text-align:left}
.csm-frame-light{box-shadow:0 22px 60px rgba(26,43,74,.14);border:1px solid #e2e6ee}
.csm-chrome{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#16233b}
.csm-dot{width:10px;height:10px;border-radius:50%;background:#2b3a55}
.csm-dot:nth-child(1){background:#ff5f57}.csm-dot:nth-child(2){background:#febc2e}.csm-dot:nth-child(3){background:#28c840}
.csm-url{margin-left:8px;flex:1;background:#0f1a2e;border-radius:6px;padding:4px 10px;font-size:11px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.csm-body{background:#f4f6fb;padding:14px}
.csm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.csm-brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:13px;color:#1a2b4a}
.csm-logo{height:18px;width:auto;display:block}
.csm-brand i{width:22px;height:22px;border-radius:6px;background:#FF3800;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-style:normal}
.csm-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}
.csm-pill-meta{background:linear-gradient(90deg,#0081FB,#0064E0);color:#fff}
.csm-pill-ok{background:#e8f5e9;color:#2e7d32}
.csm-pill-ok::before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.csm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.csm-kpi{background:#fff;border:1px solid #e6e9f0;border-radius:10px;padding:10px 12px}
.csm-kpi small{display:block;font-size:10px;font-weight:700;color:#8a94a6;text-transform:uppercase;letter-spacing:.4px}
.csm-kpi strong{display:block;font-size:19px;font-weight:900;color:#1a2b4a;line-height:1.2;margin-top:2px}
.csm-kpi.red strong{color:#e53e3e}.csm-kpi.green strong{color:#22c55e}
.csm-kpi em{font-style:normal;font-size:10px;font-weight:800;color:#22c55e}
.csm-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:8px}
.csm-card{background:#fff;border:1px solid #e6e9f0;border-radius:10px;padding:10px 12px;min-width:0}
.csm-card h6{margin:0 0 8px;font-size:11px;font-weight:800;color:#1a2b4a;display:flex;justify-content:space-between;align-items:center}
.csm-legend{display:flex;gap:8px;font-size:9px;font-weight:700;color:#8a94a6}
.csm-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:3px;vertical-align:middle}
.csm-bars{display:flex;align-items:flex-end;gap:4px;height:74px}
.csm-bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;border-radius:3px 3px 0 0;overflow:hidden;background:#eef1f6}
.csm-bar span{display:block;width:100%;flex:0 0 auto}
.csm-bar .c{background:#38B2AC}.csm-bar .f{background:#F56565}
.csm-rows{display:flex;flex-direction:column;gap:6px}
.csm-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;font-size:10px;font-weight:700;color:#3d4a60}
.csm-row .t{display:flex;flex-direction:column;gap:3px;min-width:0}
.csm-row .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.csm-row .l{height:5px;border-radius:4px;background:#eef1f6;overflow:hidden}
.csm-row .l i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#0081FB,#0064E0)}
.csm-row .l i.f{background:#F56565}
.csm-row .v{font-weight:900;color:#1a2b4a}

/* Lead tablosu */
.csm-table{width:100%;border-collapse:collapse;font-size:10.5px}
.csm-table th{font-weight:800;color:#8a94a6;text-transform:uppercase;letter-spacing:.4px;font-size:9px;text-align:left;padding:6px 8px;border-bottom:1px solid #e6e9f0;white-space:nowrap}
.csm-table td{padding:6px 6px;border-bottom:1px solid #eef1f6;vertical-align:middle;color:#1a2b4a;white-space:nowrap}
.csm-table td:nth-child(4){white-space:normal;min-width:110px}
.csm-table th{padding-left:6px;padding-right:6px}
.csm-table tr:last-child td{border-bottom:0}
.csm-score{display:inline-flex;align-items:center;justify-content:center;min-width:28px;padding:2px 7px;border-radius:999px;font-weight:900;font-size:10px}
.csm-score.g{background:#e8f5e9;color:#2e7d32}.csm-score.o{background:#fff3e0;color:#ef6c00}.csm-score.r{background:#ffebee;color:#c62828}
.csm-chip{display:inline-block;padding:2px 7px;border-radius:999px;background:#eef1f6;color:#3d4a60;font-size:9px;font-weight:700;margin:1px 2px 1px 0;white-space:nowrap}
.csm-chip.r{background:#ffebee;color:#c62828}
.csm-btns{display:inline-flex;gap:4px}
.csm-btn{padding:2px 8px;border-radius:5px;border:1px solid #cfd6e2;background:#fff;font-size:9px;font-weight:800;color:#5a6578}
.csm-btn.ok{border-color:#2e7d32;color:#2e7d32;background:#e8f5e9}
.csm-btn.err{border-color:#c62828;color:#c62828;background:#ffebee}
.csm-stage{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:9.5px;font-weight:800;background:#eef1f6;color:#3d4a60}
.csm-stage.q{background:#e8f5e9;color:#2e7d32}.csm-stage.d{background:#ffebee;color:#c62828}
.csm-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:10px;color:#8a94a6;font-weight:700;flex-wrap:wrap}

/* Akış diyagramı (enforcement / feedback) */
.csm-flow{display:flex;align-items:stretch;gap:0;width:100%}
.csm-flow-node{flex:1;min-width:0;background:#fff;border:1px solid #e2e6ee;border-radius:14px;padding:16px 14px;text-align:center;position:relative}
.csm-flow-node i{display:flex;width:42px;height:42px;border-radius:12px;margin:0 auto 10px;align-items:center;justify-content:center;background:#eef1f6;color:#1a2b4a}
.csm-flow-node i svg{width:22px;height:22px}
.csm-flow-node i.red{background:rgba(229,62,62,.12);color:#e53e3e}
.csm-flow-node i.blue{background:rgba(0,129,251,.12);color:#0064E0}
.csm-flow-node i.green{background:rgba(34,197,94,.12);color:#16a34a}
.csm-flow-node i.navy{background:#1a2b4a;color:#fff}
.csm-flow-node strong{display:block;font-size:14px;font-weight:800;color:#1a2b4a;line-height:1.3}
.csm-flow-node small{display:block;font-size:12px;color:#5a6578;margin-top:4px;line-height:1.45}
.csm-flow-arrow{flex:0 0 34px;display:flex;align-items:center;justify-content:center;color:#b6bfcd}
.csm-flow-arrow svg{width:22px;height:22px}
.csm-flow.dark .csm-flow-node{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.csm-flow.dark .csm-flow-node strong{color:#fff}
.csm-flow.dark .csm-flow-node small{color:rgba(255,255,255,.6)}
.csm-flow.dark .csm-flow-arrow{color:rgba(255,255,255,.35)}

/* Yüzen kartlar */
.csm-float{background:#fff;border-radius:14px;padding:14px 18px;box-shadow:0 20px 60px rgba(26,43,74,.18);display:flex;align-items:center;gap:12px;animation:csmBob 4.5s ease-in-out infinite}
.csm-float i{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.csm-float i svg{width:20px;height:20px;color:#fff}
.csm-float i.red{background:#e53e3e}.csm-float i.green{background:#22c55e}.csm-float i.blue{background:linear-gradient(135deg,#0081FB,#0064E0)}
.csm-float small{display:block;font-size:11px;font-weight:700;color:#8a94a6}
.csm-float strong{display:block;font-size:20px;font-weight:900;color:#1a2b4a;line-height:1.15}
@keyframes csmBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* Platform rozetleri */
.csm-platforms{display:flex;gap:8px;flex-wrap:wrap}
.csm-platform{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:800;color:#fff}
.csm-platform.fb{background:#1877F2}
.csm-platform.ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.csm-platform.an{background:#1a2b4a;border:1px solid rgba(255,255,255,.2)}
.csm-platform svg{width:14px;height:14px}

@media (max-width:720px){
  .csm-kpis{grid-template-columns:repeat(3,1fr);gap:6px}
  .csm-kpi strong{font-size:15px}
  .csm-grid{grid-template-columns:1fr}
  .csm-flow{flex-direction:column}
  .csm-flow-arrow{flex-basis:26px;transform:rotate(90deg)}
  .csm-table th:nth-child(2),.csm-table td:nth-child(2){display:none}
}