/* ===== Desa Marketing / Meta Ads — modern editorial UI ===== */
.meta-marketing{display:grid;gap:18px}
.meta-head{
  position:relative;overflow:hidden;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding:24px 26px;border:1px solid #dfe7eb;border-radius:16px;background:
  radial-gradient(circle at 88% 18%,rgba(195,170,148,.18),transparent 28%),
  linear-gradient(135deg,#fff 0%,#f8fbfc 70%,#f2f6f8 100%);
  box-shadow:0 10px 28px rgba(15,23,31,.05)
}
.meta-head:after{content:'';position:absolute;right:-65px;bottom:-85px;width:220px;height:220px;border-radius:50%;border:1px solid rgba(96,123,133,.12)}
.meta-head>div{position:relative;z-index:1}
.meta-head h2{margin:0;font-size:34px;line-height:1;letter-spacing:-.045em;font-weight:800;color:#172228}
.meta-head p{margin:9px 0 0;color:#6b7a82;font-size:13px;line-height:1.65;max-width:660px}
.meta-kicker{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:#8d765f;margin-bottom:10px}
.meta-kicker-dot{width:7px;height:7px;border-radius:50%;background:#607b85;box-shadow:0 0 0 5px rgba(96,123,133,.10)}
.meta-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meta-actions select,.meta-actions button{height:40px;border:1px solid #dce5ea;border-radius:9px;background:#fff;padding:0 12px;color:#223038;box-shadow:0 1px 3px rgba(15,23,31,.03)}
.meta-actions button:hover{border-color:#bfcdd4}
.meta-actions .btn.primary{background:#26353d;color:#fff;border-color:#26353d}
.meta-sync{font-size:10px;color:#84929a;margin:-8px 2px 0 auto}
.meta-tabs{display:flex;gap:3px;flex-wrap:wrap;border-bottom:1px solid #e1e8ec;padding:0}
.meta-tab{position:relative;border:0;background:transparent;padding:11px 13px;color:#7a878e;font-size:12px;font-weight:700;border-radius:0}
.meta-tab:after{content:'';position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:transparent}
.meta-tab:hover{color:#344850}
.meta-tab.active{color:#1f3038;background:transparent}
.meta-tab.active:after{background:#607b85}
.meta-pane{display:none}.meta-pane.active{display:block}
.meta-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.meta-kpi{
  background:#fff;border:1px solid #e2e9ed;border-radius:11px;padding:16px 16px 14px;
  box-shadow:0 2px 10px rgba(15,23,31,.025);min-height:112px;position:relative
}
.meta-kpi:before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:2px;background:#dfe7eb;border-radius:2px}
.meta-kpi:nth-child(-n+3):before{background:#607b85}
.meta-kpi span{display:block;font-size:9px;color:#87939a;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.meta-kpi strong{display:block;margin-top:9px;font-size:24px;letter-spacing:-.035em;color:#172228}
.meta-kpi small{display:block;margin-top:8px;font-size:10px;color:#738189}
.meta-grid2{display:grid;grid-template-columns:1.45fr .55fr;gap:12px}
.meta-grid2 .panel,.meta-report-box .panel{border-radius:12px!important}
.meta-chart{height:255px;display:flex;align-items:flex-end;gap:10px;padding:22px 4px 28px;border-top:1px solid #edf2f4;position:relative}
.meta-chart:before,.meta-chart:after{content:'';position:absolute;left:0;right:0;border-top:1px dashed #edf2f4}
.meta-chart:before{top:34%}.meta-chart:after{top:67%}
.meta-bar-wrap{flex:1;min-width:26px;height:100%;display:flex;align-items:flex-end;justify-content:center;position:relative;z-index:1}
.meta-bar{width:64%;max-width:34px;border-radius:5px 5px 1px 1px;background:linear-gradient(180deg,#6f8c96,#526e78);min-height:8px;box-shadow:0 6px 12px rgba(82,110,120,.14)}
.meta-bar-wrap label{position:absolute;bottom:-20px;font-size:9px;color:#8a979e}
.meta-mini-list{display:grid;gap:0}
.meta-mini-row{display:flex;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #edf2f4}
.meta-mini-row:first-child{border-top:0}
.meta-mini-row b{font-size:12px;color:#25343c}.meta-mini-row span{font-size:11px;color:#78868d}
.meta-table{width:100%;border-collapse:collapse}
.meta-table th{text-align:left;font-size:9px;color:#86939a;text-transform:uppercase;letter-spacing:.09em;padding:12px 10px;border-bottom:1px solid #dfe7eb;background:#fafcfd}
.meta-table td{font-size:12px;padding:13px 10px;border-bottom:1px solid #edf2f4;vertical-align:middle}
.meta-table td:first-child{font-weight:700;color:#223038}
.meta-table tr:hover td{background:#fbfcfd}
.meta-positive{color:#2f6b49;font-weight:700}.meta-negative{color:#8a5a4c;font-weight:700}
.meta-creative-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.meta-creative{background:#fff;border:1px solid #dfe7eb;border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(15,23,31,.035);transition:.18s ease}
.meta-creative:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(15,23,31,.07);border-color:#ccd9df}
.meta-thumb{aspect-ratio:4/5;background:#edf2f4 center/cover no-repeat;position:relative}
.meta-thumb:after{content:'';position:absolute;inset:auto 0 0;height:32%;background:linear-gradient(180deg,transparent,rgba(12,18,21,.24))}
.meta-creative-body{padding:13px}
.meta-creative-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.meta-creative-title b{font-size:13px;line-height:1.35;color:#1f2d34}.meta-creative-title small{display:block;color:#7c8990;font-size:10px;margin-top:5px;line-height:1.45}
.meta-label{display:inline-flex;padding:5px 7px;border-radius:5px;background:#eef4f6;color:#506b76;font-size:8px;font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.meta-label.best{background:#e7f1ea;color:#356348}.meta-label.warn{background:#f3ece8;color:#845d4e}
.meta-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.meta-metric{background:#f9fbfc;border:1px solid #edf2f4;border-radius:6px;padding:8px}
.meta-metric span{display:block;font-size:7px;color:#8a969d;text-transform:uppercase;letter-spacing:.07em}.meta-metric b{display:block;margin-top:4px;font-size:11px;color:#26353d}
.meta-funnel{display:grid;gap:11px;padding-top:4px}
.meta-funnel-row{display:grid;grid-template-columns:165px 1fr 54px;gap:12px;align-items:center}
.meta-funnel-row label{font-size:12px;color:#53656e}
.meta-funnel-track{height:8px;background:#edf2f4;border-radius:999px;overflow:hidden}
.meta-funnel-fill{height:100%;background:linear-gradient(90deg,#607b85,#839ba4);border-radius:999px}
.meta-funnel-row b{text-align:right;font-size:12px;color:#23333b}
.meta-report-box{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.meta-best{display:flex;gap:15px;align-items:center}
.meta-best img{width:88px;height:110px;object-fit:cover;border-radius:8px;border:1px solid #dfe7eb}
.meta-best b{font-size:14px;color:#213139}
.meta-empty{padding:22px;border:1px dashed #d6e0e5;border-radius:10px;background:#fbfdfe;color:#718089;text-align:center}
.meta-toolbar-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.meta-toolbar-row .search{min-width:260px;box-shadow:none}
.meta-sort{display:flex;gap:6px;flex-wrap:wrap}
.meta-sort button{border:1px solid #e0e7eb;background:#fff;border-radius:7px;padding:8px 10px;font-size:10px;color:#687880;font-weight:700}
.meta-sort button.active{background:#26353d;color:#fff;border-color:#26353d}
@media(max-width:1180px){.meta-kpis{grid-template-columns:repeat(3,1fr)}.meta-creative-grid{grid-template-columns:repeat(2,1fr)}.meta-grid2{grid-template-columns:1fr}}
@media(max-width:800px){
  .meta-head{align-items:flex-start;padding:20px}.meta-head h2{font-size:28px}.meta-kpis{grid-template-columns:repeat(2,1fr)}
  .meta-creative-grid{grid-template-columns:1fr}.meta-report-box{grid-template-columns:1fr}.meta-funnel-row{grid-template-columns:120px 1fr 42px}
  .meta-hidden-mobile{display:none}.meta-actions{width:100%}.meta-actions select,.meta-actions button{flex:1}.meta-sync{margin:-8px 0 0}
}
@media(max-width:520px){.meta-kpis{grid-template-columns:1fr 1fr}.meta-kpi{min-height:104px;padding:14px}.meta-kpi strong{font-size:20px}.meta-funnel-row{grid-template-columns:100px 1fr 38px}}