/* ═══════════════════════════════════════════════════════════════════════════
   DDoS Portalı Showcase — Müşteri Portalı mock görselleri
   ═══════════════════════════════════════════════════════════════════════════ */

.ddos-portal-section { border-top: 1px solid var(--border); }

.ddos-portal-eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--a) !important; margin-bottom: .4rem;
}

.ddos-portal-sub {
  font-size: 1rem; color: var(--text-sec) !important; max-width: 640px;
  margin: 0 auto; line-height: 1.7;
}

/* Mock ekran kartı */
.ddos-portal-mock-wrap {
  background: #fff !important;
  border: 1px solid rgba(13,45,110,0.12) !important;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.dpm-header {
  background: #0d1f4a !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.dpm-logo {
  font-size: 13px !important; font-weight: 700 !important;
  color: #ffffff !important; white-space: nowrap !important;
}
.dpm-logo em { font-style: normal !important; color: #f59e0b !important; }

.dpm-title {
  font-size: 11px !important; color: rgba(255,255,255,0.55) !important;
  flex: 1 !important; overflow: hidden !important;
  text-overflow: ellipsis !important; white-space: nowrap !important;
}

.dpm-body { padding: 14px 16px !important; }

/* İstatistik satırı */
.dpm-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important; margin-bottom: 12px !important;
}

.dpm-stat {
  background: var(--bg) !important;
  border-radius: 7px !important;
  padding: 8px 10px !important;
}

.dpm-stat-l {
  font-size: 10px !important; color: var(--text-sec) !important;
  margin-bottom: 3px !important; display: block !important;
}

.dpm-stat-v {
  font-size: 15px !important; font-weight: 700 !important;
  color: var(--text) !important; display: block !important;
}
.dpm-stat-v.orange { color: #d97706 !important; }
.dpm-stat-v.blue   { color: #1d6fc4 !important; }
.dpm-stat-v.green  { color: #059669 !important; }

/* Grafik alanı */
.dpm-chart {
  background: var(--bg) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  height: 80px !important;
}

/* Accordion tabları */
.dpm-tabs { display: flex !important; gap: 4px !important; }
.dpm-tab {
  flex: 1 !important; text-align: center !important; padding: 4px 0 !important;
  border-radius: 5px !important; font-size: 11px !important;
  background: var(--bg) !important; color: var(--text-sec) !important;
  cursor: default !important;
}
.dpm-tab.active {
  background: #0d1f4a !important; color: #ffffff !important;
  font-weight: 600 !important;
}

/* Accordion satırları */
.dpm-ac-row {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 6px 0 !important; border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important;
}
.dpm-ac-row.open {
  background: rgba(13,45,110,0.04) !important; border-radius: 5px !important;
  padding: 6px 6px !important; margin-bottom: 2px !important;
}
.dpm-ac-arr  { color: var(--text-sec) !important; font-size: 10px !important; }
.dpm-ac-pfx  {
  font-weight: 700 !important; color: #1d6fc4 !important;
  font-family: monospace !important; flex: 1 !important; font-size: 11px !important;
}
.dpm-ac-mbps {
  font-weight: 700 !important; color: #dc2626 !important;
  font-size: 11px !important; text-align: right !important; min-width: 72px !important;
}
.dpm-ac-gb {
  font-size: 10px !important; color: var(--text-sec) !important;
  text-align: right !important; min-width: 56px !important;
}

.dpm-ac-ip {
  display: flex !important; align-items: center !important; gap: 6px !important;
  padding: 4px 0 4px 18px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 10px !important;
}
.dpm-ac-ip:last-of-type { border-bottom: none !important; }
.dpm-ac-ip-addr  {
  flex: 1 !important; color: var(--text-sec) !important;
  font-family: monospace !important;
}
.dpm-ac-ip-mbps  {
  color: var(--text) !important; font-weight: 600 !important;
  min-width: 72px !important; text-align: right !important;
}

/* Badge */
.dpm-badge {
  display: inline-block !important; font-size: 10px !important;
  font-weight: 600 !important; padding: 2px 8px !important;
  border-radius: 4px !important;
}
.dpm-badge.green  { background: #d1fae5 !important; color: #065f46 !important; }
.dpm-badge.orange { background: #fef3c7 !important; color: #92400e !important; }

/* Fatura */
.dpm-bill-row {
  display: flex !important; justify-content: space-between !important;
  padding: 5px 0 !important; border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important; color: var(--text-sec) !important;
}
.dpm-bill-row span:last-child { color: var(--text) !important; font-weight: 600 !important; }

.dpm-bill-total {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; padding: 8px 0 0 !important;
  font-size: 12px !important; font-weight: 600 !important; color: var(--text) !important;
}
.dpm-bill-total-val { font-size: 20px !important; font-weight: 700 !important; color: #1d6fc4 !important; }

/* Bant dilimi */
.dpm-band {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 7px 0 !important; border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important;
}
.dpm-band-range { flex: 1 !important; color: var(--text) !important; font-weight: 500 !important; }
.dpm-band-price { font-weight: 700 !important; color: var(--text) !important; }
.dpm-band-price.free { color: #059669 !important; }
.dpm-band-price.blue { color: #1d6fc4 !important; }

.dpm-band.active {
  background: rgba(29,111,196,0.07) !important;
  border-radius: 7px !important; padding: 7px 8px !important; margin: 2px 0 !important;
  border: 1px solid rgba(29,111,196,0.25) !important;
}

.dpm-band-badge {
  font-size: 10px !important; font-weight: 600 !important;
  background: #dbeafe !important; color: #1e40af !important;
  padding: 1px 7px !important; border-radius: 4px !important;
}

/* Caption */
.ddos-portal-caption { padding: .9rem .25rem .25rem !important; }
.ddos-portal-caption h4 {
  font-size: 1rem !important; font-weight: 700 !important;
  color: var(--text) !important; margin-bottom: .3rem !important;
}
.ddos-portal-caption p {
  font-size: .875rem !important; color: var(--text-sec) !important;
  line-height: 1.6 !important; margin: 0 !important;
}

/* Alt not */
.ddos-portal-footnote {
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
  background: rgba(245,158,11,0.08) !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
  border-radius: var(--r) !important;
  padding: 1rem 1.25rem !important;
  font-size: .9rem !important; color: var(--text-sec) !important;
}
.ddos-portal-footnote strong { color: var(--text) !important; }

@media (max-width: 767px) {
  .dpm-stats { grid-template-columns: repeat(2, 1fr) !important; }
  .dpm-ac-gb  { display: none !important; }
}