/* ============================================================
   Techify Boost — İLERİ veri görselleştirme (charts2)
   Bubble/scatter · heatmap · radar · ranking-race · histogram
   · waterfall · venn · decay · A/B race · donut · placement
   Reveal: üst kapsayıcıya .in eklenince CSS geçişleri tetiklenir.
   ============================================================ */

/* ---------- ortak eksen / izgara ---------- */
.axis-x, .axis-y { stroke: var(--line-soft); stroke-width: 1; }
.axis-label { fill: var(--mute); font-size: 10px; }
.chart-cap { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; font-size: 12px; color: var(--mute); }
.chart-cap .ck { display: inline-flex; align-items: center; gap: 7px; }
.chart-cap .ck i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.chart-cap .ck .dot { border-radius: 50%; }

/* ============================================================
   1) BUBBLE / SCATTER  (Google Ads — kelime matrisi)
   ============================================================ */
.scatter { position: relative; height: 340px; margin: 8px 0 4px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scatter .gl { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-soft); }
.scatter .bub {
  position: absolute; transform: translate(-50%, 50%) scale(0);
  border-radius: 50%; opacity: 0;
  transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff;
  border: 2px solid var(--card);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  cursor: default;
}
.scatter .bub.good { background: linear-gradient(135deg, #16a34a, #5e8e3e); }
.scatter .bub.mid  { background: linear-gradient(135deg, #f59e0b, #f0a93b); }
.scatter .bub.low  { background: linear-gradient(135deg, #94a3b8, #b6c0cc); }
.in .scatter .bub { transform: translate(-50%, 50%) scale(1); opacity: 0.92; }
.scatter .bub:hover { opacity: 1; z-index: 3; }
.scatter-axis-x { text-align: center; font-size: 11px; color: var(--mute); margin-top: 8px; font-weight: 600; }
.scatter-axis-y { position: absolute; left: -52px; top: 50%; transform: rotate(-90deg); transform-origin: center; font-size: 11px; color: var(--mute); font-weight: 600; white-space: nowrap; }
.scatter-wrap { position: relative; padding-left: 14px; }

/* ============================================================
   2) HEATMAP  (Google Ads — gün/saat)
   ============================================================ */
.heatmap { display: grid; gap: 4px; }
.heatmap .hm-cell {
  aspect-ratio: 1.6 / 1; border-radius: 5px; background: var(--bg-3);
  opacity: 0; transform: scale(.6);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
  position: relative;
}
.in .heatmap .hm-cell { opacity: 1; transform: scale(1); }
.heatmap .hm-row-label, .heatmap .hm-col-label { font-size: 10.5px; color: var(--mute); display: flex; align-items: center; }
.heatmap .hm-col-label { justify-content: center; }
.heat-legend { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--mute); margin-top: 14px; }
.heat-scale { display: flex; gap: 3px; }
.heat-scale i { width: 16px; height: 11px; border-radius: 2px; display: inline-block; }

/* ============================================================
   3) DONUT  (bütçe / dağılım)
   ============================================================ */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; }
.donut { width: 168px; height: 168px; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 22; stroke-linecap: butt; }
.donut .seg { stroke-dasharray: var(--dash); stroke-dashoffset: var(--off); }
.donut-holder { position: relative; width: 168px; height: 168px; opacity: 0; transform: scale(.85); transition: opacity .6s ease, transform .7s cubic-bezier(.34,1.56,.64,1); }
.in .donut-holder { opacity: 1; transform: scale(1); }
.donut-holder .dc { position: absolute; inset: 0; display: grid; place-items: center; transform: none; }
.donut-holder .dc b { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--headline); }
.donut-holder .dc span { font-size: 11px; color: var(--mute); }
.donut-legend { display: flex; flex-direction: column; gap: 10px; }
.donut-legend .dl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
.donut-legend .dl i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.donut-legend .dl b { margin-left: auto; font-family: var(--font-display); color: var(--headline); }

/* ============================================================
   4) WATERFALL  (ROAS / harcama→gelir)
   ============================================================ */
.waterfall { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; height: 250px; align-items: end; padding-top: 24px; }
.wf-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 8px; }
.wf-bar-area { position: relative; width: 100%; flex: 1; }
.wf-bar { position: absolute; left: 15%; width: 70%; border-radius: 6px 6px 0 0; height: 0; bottom: 0; transition: height 1s cubic-bezier(.22,1,.36,1); }
.wf-bar.base { background: linear-gradient(180deg, var(--violet), var(--green-2)); }
.wf-bar.add { background: linear-gradient(180deg, #16a34a, #5e8e3e); }
.wf-bar.sub { background: repeating-linear-gradient(45deg,#ef4444 0 6px,#f87171 6px 12px); }
.wf-bar.total { background: linear-gradient(180deg, #0b2e24, var(--violet)); }
.wf-bar .wf-v { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--headline); white-space: nowrap; font-family: var(--font-display); }
.wf-label { font-size: 11px; color: var(--mute); text-align: center; line-height: 1.2; }
.wf-connector { position: absolute; top: 0; right: -10px; width: 10px; border-top: 1px dashed var(--mute); opacity: .5; }

/* ============================================================
   5) RANKING RACE  (SEO — ters eksenli pozisyon/zaman)
   ============================================================ */
.rank-chart { position: relative; }
.rank-svg { width: 100%; height: 260px; display: block; overflow: visible; }
.rank-svg .rg { stroke: var(--line-soft); stroke-width: 1; }
.rank-svg .rline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rank-svg .rdot { stroke-width: 2; }
.rank-svg .ylab, .rank-svg .xlab { fill: var(--mute); font-size: 10px; }
.rank-svg .goal { stroke: #16a34a; stroke-width: 1.5; stroke-dasharray: 4 4; }
.rank-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.rank-legend .rl { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text); }
.rank-legend .rl i { width: 16px; height: 3px; border-radius: 2px; display: inline-block; }

/* ============================================================
   6) HISTOGRAM  (SEO — pozisyon dağılımı)
   ============================================================ */
.histogram { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; height: 230px; align-items: end; }
.hg-col { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 9px; }
.hg-bar-wrap { width: 100%; flex: 1; display: flex; align-items: flex-end; }
.hg-bar { width: 64%; margin: 0 auto; height: 0; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, var(--violet), var(--green-2)); transition: height 1.1s cubic-bezier(.22,1,.36,1); position: relative; }
.hg-bar .hv { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--headline); }
.hg-x { font-size: 11px; color: var(--dim); text-align: center; font-weight: 600; }
.hg-x small { display: block; color: var(--mute); font-weight: 400; font-size: 10px; }

/* ============================================================
   7) RADAR / SPIDER  (topikal otorite)
   ============================================================ */
.radar-wrap { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; justify-content: center; }
.radar { width: 300px; height: 300px; }
.radar .rgrid { fill: none; stroke: var(--line-soft); stroke-width: 1; }
.radar .raxis { stroke: var(--line-soft); stroke-width: 1; }
.radar .rarea { fill: rgba(0,128,96,0.18); stroke: var(--violet); stroke-width: 2; transform: scale(0); transform-origin: center; transition: transform 1.1s cubic-bezier(.34,1.56,.64,1); }
[data-theme="dark"] .radar .rarea { fill: rgba(95,191,71,0.20); stroke: var(--green); }
.in .radar .rarea { transform: scale(1); }
.radar .rvert { fill: var(--violet); }
[data-theme="dark"] .radar .rvert { fill: var(--green); }
.radar .rlbl { fill: var(--dim); font-size: 10.5px; font-weight: 600; }
.radar-legend { display: flex; flex-direction: column; gap: 12px; max-width: 220px; }
.radar-legend .rd { font-size: 13px; color: var(--dim); display: flex; gap: 9px; align-items: flex-start; }
.radar-legend .rd .lucide { width: 16px; height: 16px; color: var(--violet); flex-shrink: 0; margin-top: 2px; }
[data-theme="dark"] .radar-legend .rd .lucide { color: var(--green); }

/* ============================================================
   8) A/B RACE BARS  (Meta — kreatif testi)
   ============================================================ */
.race { display: flex; flex-direction: column; gap: 16px; }
.race-row { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.race-thumb { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 22px; position: relative; }
.race-thumb .lucide { width: 26px; height: 26px; }
.race-main .rt { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-size: 13px; }
.race-main .rt b { color: var(--headline); font-weight: 600; }
.race-main .rt .win { margin-left: auto; font-size: 11px; font-weight: 700; color: #16a34a; display: inline-flex; align-items: center; gap: 4px; background: rgba(22,163,74,0.12); padding: 3px 9px; border-radius: 20px; }
.race-main .rt .roas { margin-left: auto; font-family: var(--font-display); font-weight: 700; color: var(--violet); }
[data-theme="dark"] .race-main .rt .roas { color: var(--green); }
.race-main .rt .win + .roas { margin-left: 10px; }
.race-track { height: 16px; background: var(--bg-3); border-radius: 9px; overflow: hidden; }
.race-fill { height: 100%; width: 0; border-radius: 9px; transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.race-fill.w { background: linear-gradient(90deg, #16a34a, #5e8e3e); }
.race-fill.n { background: linear-gradient(90deg, var(--mute), #b6c0cc); opacity: .7; }
.race-thumb.c1 { background: linear-gradient(135deg,#16a34a,#5e8e3e); }
.race-thumb.c2 { background: linear-gradient(135deg,#2563eb,#7c3aed); }
.race-thumb.c3 { background: linear-gradient(135deg,#f59e0b,#f0a93b); }
.race-thumb.c4 { background: linear-gradient(135deg,#ec4899,#f43f5e); }

/* ============================================================
   9) DECAY CURVE  (Meta — kreatif yorgunluğu)
   ============================================================ */
.decay-svg { width: 100%; height: 240px; display: block; overflow: visible; }
.decay-svg .dg { stroke: var(--line-soft); stroke-width: 1; }
.decay-svg .freq { fill: none; stroke: #2563eb; stroke-width: 2.5; stroke-linecap: round; }
.decay-svg .ctr { fill: none; stroke: #ef4444; stroke-width: 2.5; stroke-linecap: round; }
.decay-svg .zone { fill: rgba(239,68,68,0.08); }
.decay-svg .zlbl { fill: #ef4444; font-size: 10.5px; font-weight: 700; }
.decay-svg .ax { fill: var(--mute); font-size: 10px; }
.decay-svg .marker { stroke: #ef4444; stroke-width: 1.5; stroke-dasharray: 4 3; }

/* ============================================================
   10) VENN  (Meta — kitle örtüşmesi)
   ============================================================ */
.venn { width: 100%; max-width: 380px; margin: 0 auto; display: block; }
.venn circle { mix-blend-mode: multiply; opacity: 0; transform: scale(.4); transform-origin: center; transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .6s ease; }
[data-theme="dark"] .venn circle { mix-blend-mode: screen; }
.in .venn circle { opacity: .55; transform: scale(1); }
.venn .vlbl { fill: var(--headline); font-size: 12px; font-weight: 700; }
.venn .vnum { fill: var(--card); font-size: 13px; font-weight: 800; }

/* ============================================================
   11) PLACEMENT STACK  (Meta — yerleşim dağılımı)
   ============================================================ */
.pstack { display: flex; height: 46px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.pseg { height: 100%; width: 0; transition: width 1.1s cubic-bezier(.22,1,.36,1); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; min-width: 0; white-space: nowrap; }
.pstack-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12.5px; color: var(--dim); }
.pstack-legend .pl { display: inline-flex; align-items: center; gap: 7px; }
.pstack-legend .pl i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ============================================================
   STAT STRIP (akademik küçük metrikler)
   ============================================================ */
.stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); }
.stat-strip .ss { padding: 18px 20px; border-right: 1px solid var(--line-soft); }
.stat-strip .ss:last-child { border-right: none; }
.stat-strip .ss .sv { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--headline); }
.stat-strip .ss .sl { font-size: 12px; color: var(--mute); margin-top: 3px; }
.stat-strip .ss .sd { font-size: 11px; font-weight: 700; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.stat-strip .ss .sd.up { color: #16a34a; }
.stat-strip .ss .sd.dn { color: #ef4444; }
.stat-strip .ss .sd .lucide { width: 13px; height: 13px; }
@media (max-width: 760px) { .stat-strip { grid-template-columns: 1fr 1fr; } .stat-strip .ss:nth-child(2){border-right:none;} }

@media (max-width: 700px) {
  .scatter-axis-y { display: none; }
  .donut-wrap, .radar-wrap { flex-direction: column; }
}