/* =========================================================================
   /dijital-pazarlama/ — yorunge hero, platform sahneleri, sizan huni,
   ornek rapor. Etiketler data-t ile CSS'ten basiliyor (sayfa metnine
   girmiyor); "hareketi azalt" tercihinde her sey son halinde sabit.
   ========================================================================= */
.dp-yorunge [data-t]::before, .dp-kanal__sahne [data-t]::before { content: attr(data-t); }

/* ---------- Hero: yorunge ---------- */
.dp-yorunge { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin-inline: auto; }
.dp-yorunge__hat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-halka { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 7; transform-origin: 200px 200px; animation: dpDon 60s linear infinite; }
.dp-halka--ic { stroke: rgba(237, 109, 30, 0.35); animation-direction: reverse; animation-duration: 40s; }
.dp-yol { fill: none; stroke: var(--line); stroke-width: 1.5; }
.dp-parca { fill: var(--accent); }
@keyframes dpDon { to { transform: rotate(360deg); } }

.dp-dugum {
  position: absolute; left: var(--x); top: var(--y); z-index: 2;
  display: grid; justify-items: center; gap: 6px;
  translate: -50% -50%;
  animation: dpSuzul 5s ease-in-out infinite; animation-delay: calc(var(--g) * -0.8s);
}
.dp-dugum > svg {
  box-sizing: content-box; padding: 13px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 14px 30px -16px rgba(23, 18, 15, 0.35);
}
.dp-dugum small { font-size: 12px; font-weight: 600; color: var(--ink-2); white-space: nowrap; padding: 2px 8px; border-radius: 99px; background: rgba(250, 248, 245, 0.85); }
@keyframes dpSuzul { 50% { transform: translateY(-7px); } }

.dp-merkez {
  position: absolute; left: 50%; top: 50%; z-index: 3; translate: -50% -50%;
  width: 46%; padding: 16px 16px 14px; border-radius: 20px;
  background: var(--dark); color: #fff; text-align: center;
  box-shadow: 0 30px 60px -28px rgba(23, 18, 15, 0.8), 0 0 0 8px rgba(237, 109, 30, 0.12);
}
.dp-merkez > small { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-onDarkDim); }
.dp-merkez > b { display: block; margin: 2px 0 10px; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem); letter-spacing: -0.02em; }
.dp-merkez__akis { position: relative; height: 34px; }
.dp-merkez__akis span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: #fff;
  opacity: 0; animation: dpAkis 9s infinite; animation-delay: calc(var(--g) * 3s);
}
.dp-merkez__akis i { font-style: normal; }
@keyframes dpAkis {
  0%   { opacity: 0; transform: translateY(10px); }
  4%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* ---------- Kanallar ---------- */
.dp-kanallar { padding-top: var(--section); }
.dp-kanal { position: relative; overflow: hidden; padding-block: clamp(3rem, 6vw, 6rem); }
.dp-kanal__izgara { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.dp-kanal--meta .dp-kanal__metin { order: 2; }

.dp-kanal__marka { display: flex; align-items: center; gap: 14px; margin: 0; }
.dp-kanal__logolar { display: flex; }
.dp-kanal__logolar svg { box-sizing: content-box; padding: 9px; border-radius: 50%; background: #fff; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.35); }
.dp-kanal__logolar svg + svg { margin-left: -10px; }
.dp-kanal__marka b { display: block; font-size: 1.05rem; }
.dp-kanal__marka small { display: block; font-size: var(--fs-sm); opacity: 0.7; }
.dp-kanal__metin h3 { margin: 1.1rem 0 0.8rem; font-family: var(--font-display); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.06; letter-spacing: -0.03em; }
.dp-kanal__lede { margin: 0 0 1.4rem; font-size: var(--fs-lead); line-height: 1.55; max-width: 52ch; }
.dp-kanal__liste { display: grid; gap: 0.75rem; margin: 0 0 1.6rem; padding: 0; list-style: none; }
.dp-kanal__liste li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.dp-kanal__liste li > span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.dp-kime { padding: 1.1rem 1.3rem; border-radius: 16px; }
.dp-kime h4 { margin: 0 0 0.7rem; font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.dp-kime ul { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.dp-kime li { display: flex; gap: 8px; align-items: flex-start; }
.dp-kime li svg { flex: none; margin-top: 3px; }

.dp-kanal__sahne { position: relative; }

/* Google */
.dp-kanal--google-ads {
  background:
    radial-gradient(40% 50% at 95% 10%, rgba(66, 133, 244, 0.10), transparent 70%),
    radial-gradient(35% 45% at 70% 95%, rgba(251, 188, 5, 0.14), transparent 70%),
    #fff;
  border-top: 1px solid var(--line);
}
.dp-kanal--google-ads::before { content: ''; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%); }
.dp-kanal--google-ads .dp-kanal__metin { color: #3C4043; }
.dp-kanal--google-ads h3 { color: #202124; }
.dp-kanal--google-ads .dp-kanal__liste li:nth-child(4n+1) > span { background: #E8F0FE; color: #4285F4; }
.dp-kanal--google-ads .dp-kanal__liste li:nth-child(4n+2) > span { background: #FCE8E6; color: #EA4335; }
.dp-kanal--google-ads .dp-kanal__liste li:nth-child(4n+3) > span { background: #FEF7E0; color: #E8A600; }
.dp-kanal--google-ads .dp-kanal__liste li:nth-child(4n+4) > span { background: #E6F4EA; color: #34A853; }
.dp-kanal--google-ads .dp-kime { background: #F8F9FA; border: 1px solid #E8EAED; }
.dp-kanal--google-ads .dp-kime svg { color: #34A853; }

.dp-serp { position: relative; z-index: 1; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid #E8EAED; box-shadow: 0 30px 60px -36px rgba(32, 33, 36, 0.45); font-family: Arial, var(--font-body); }
.dp-serp__kutu { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-radius: 99px; border: 1px solid #DFE1E5; box-shadow: 0 1px 6px rgba(32, 33, 36, 0.18); font-size: 16px; color: #202124; }
.dp-serp__sorgu { flex: 1; white-space: nowrap; clip-path: inset(0 0 0 0); animation: dpYaz 9s steps(20, end) infinite; }
@keyframes dpYaz { 0% { clip-path: inset(0 100% 0 0); } 22%, 95% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.dp-serp__ara { width: 18px; height: 18px; border: 2.5px solid #4285F4; border-radius: 50%; position: relative; }
.dp-serp__ara::after { content: ''; position: absolute; width: 8px; height: 2.5px; background: #4285F4; right: -7px; bottom: -4px; transform: rotate(45deg); border-radius: 2px; }
.dp-serp__sekmeler { display: flex; gap: 20px; padding: 12px 6px 0; border-bottom: 1px solid #EBEBEB; font-size: 13px; color: #5F6368; }
.dp-serp__sekmeler span { padding-bottom: 9px; }
.dp-serp__sekmeler .on { color: #1A73E8; border-bottom: 3px solid #1A73E8; }
.dp-serp__reklam { padding: 14px 6px 4px; animation: dpBelir 9s var(--ease) infinite; }
.dp-serp__reklam p { margin: 0; }
.dp-serp__sp { font-size: 13px; color: #202124; margin-bottom: 8px !important; }
.dp-serp__site { display: flex; align-items: center; gap: 10px; }
.dp-serp__site i { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); box-shadow: inset 0 0 0 6px #F1F3F4, inset 0 0 0 13px var(--accent); }
.dp-serp__site span { display: grid; line-height: 1.25; font-size: 14px; color: #202124; }
.dp-serp__site small { font-size: 12px; color: #4D5156; }
.dp-serp__baslik { margin-top: 8px !important; font-size: 20px; line-height: 1.3; color: #1A0DAB; }
.dp-serp__metin { margin-top: 4px !important; font-size: 14px; line-height: 1.55; color: #4D5156; }
.dp-serp__linkler { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px !important; font-size: 14px; color: #1A0DAB; }
@keyframes dpBelir { 0%, 22% { opacity: 0; transform: translateY(10px); } 28%, 95% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.dp-harita {
  position: relative; z-index: 2; width: 70%; margin: -14px 0 0 auto;
  border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #E8EAED;
  box-shadow: 0 30px 60px -30px rgba(32, 33, 36, 0.5); transform: rotate(1.5deg);
  font-family: Arial, var(--font-body);
  animation: dpBelir 9s 0.4s var(--ease) infinite;
}
.dp-harita__zemin { position: relative; height: 130px; background: #E8F0E3; overflow: hidden; }
.dp-harita__zemin::before { content: ''; position: absolute; inset: 0; background: radial-gradient(30% 40% at 80% 20%, #CFE6C8, transparent 70%), radial-gradient(25% 30% at 15% 80%, #BFDDF7, transparent 70%); }
.dp-harita__yol { position: absolute; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px #DADCE0; }
.dp-harita__yol--1 { left: -10%; right: -10%; top: 58%; height: 9px; transform: rotate(-8deg); }
.dp-harita__yol--2 { top: -10%; bottom: -10%; left: 38%; width: 8px; transform: rotate(14deg); }
.dp-harita__yol--3 { left: 55%; right: -10%; top: 22%; height: 6px; transform: rotate(18deg); background: #FDE293; box-shadow: none; }
.dp-harita__pin { position: absolute; left: var(--x); top: var(--y); translate: -50% -100%; }
.dp-harita__pin--soluk { width: 12px; height: 12px; border-radius: 50%; background: #9AA0A6; border: 2px solid #fff; translate: -50% -50%; }
.dp-harita__pin--ana svg { filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); animation: dpZipla 9s infinite; }
@keyframes dpZipla { 0%, 30% { transform: translateY(-30px); opacity: 0; } 36% { transform: none; opacity: 1; } 39% { transform: translateY(-6px); } 42%, 100% { transform: none; opacity: 1; } }
.dp-harita__kart { padding: 12px 14px 14px; }
.dp-harita__kart p { margin: 0 0 10px; display: grid; line-height: 1.3; }
.dp-harita__kart b { font-size: 15px; color: #202124; }
.dp-harita__kart small { font-size: 12px; color: #188038; }
.dp-harita__dugmeler { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-harita__dugmeler span { padding: 6px 12px; border-radius: 99px; border: 1px solid #DADCE0; font-size: 12.5px; color: #1A73E8; }
.dp-harita__dugmeler .on { background: #1A73E8; border-color: #1A73E8; color: #fff; animation: dpBas 9s infinite; }
@keyframes dpBas { 0%, 55% { transform: none; } 58% { transform: scale(0.9); } 62%, 100% { transform: none; } }

.dp-rozet {
  position: absolute; z-index: 4; right: -8px; top: 34%;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 99px;
  background: #fff; color: #111; font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: 0 18px 34px -16px rgba(0, 0, 0, 0.45); transform: rotate(3deg);
  animation: dpPop 9s cubic-bezier(0.2, 1.5, 0.4, 1) infinite;
}
.dp-rozet::after { order: -1; content: ''; width: 10px; height: 10px; border-radius: 50%; background: #34A853; box-shadow: 0 0 0 4px rgba(52, 168, 83, 0.22); }
.dp-rozet--yesil { background: #34A853; color: #fff; right: auto; left: -14px; top: auto; bottom: 58px; transform: rotate(-3deg); }
.dp-rozet--yesil::after { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3); }
@keyframes dpPop { 0%, 60% { opacity: 0; scale: 0.6; } 66%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }

/* Meta */
.dp-kanal--meta {
  color: #fff;
  background:
    radial-gradient(40% 55% at 10% 15%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(125deg, #4F5BD5 0%, #962FBF 32%, #D62976 64%, #FA7E1E 100%);
}
.dp-kanal--meta h3 { color: #fff; }
.dp-kanal--meta .dp-kanal__lede, .dp-kanal--meta .dp-kanal__liste { color: rgba(255, 255, 255, 0.92); }
.dp-kanal--meta .dp-kanal__liste li > span { background: rgba(255, 255, 255, 0.18); color: #fff; }
.dp-kanal--meta .dp-kime { background: rgba(23, 18, 15, 0.22); border: 1px solid rgba(255, 255, 255, 0.18); }
.dp-kanal--meta .dp-kanal__sahne { display: flex; justify-content: center; align-items: center; min-height: 520px; }

.dp-hikaye {
  position: relative; width: 250px; aspect-ratio: 9 / 16; padding: 10px;
  border-radius: 28px; overflow: hidden; color: #fff;
  background:
    radial-gradient(60% 40% at 70% 25%, #FFE2B8, transparent 70%),
    radial-gradient(70% 50% at 20% 75%, #E9853A, transparent 70%),
    linear-gradient(170deg, #F4B36C, #A9440B);
  border: 6px solid #111; box-shadow: 0 40px 70px -30px rgba(30, 10, 40, 0.85);
  transform: rotate(-4deg) translateX(-90px);
}
.dp-hikaye__bar { display: flex; gap: 4px; }
.dp-hikaye__bar i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.4); overflow: hidden; }
.dp-hikaye__bar i:first-child { background: #fff; }
.dp-hikaye__bar i:nth-child(2)::after { content: ''; display: block; height: 100%; background: #fff; animation: dpIlerle 9s linear infinite; transform-origin: left; }
@keyframes dpIlerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.dp-hikaye__ust { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; }
.dp-hikaye__av { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px #fff; }
.dp-hikaye__ust small { opacity: 0.8; }
.dp-hikaye__ic { position: absolute; left: 16px; right: 16px; bottom: 74px; display: grid; gap: 6px; }
.dp-hikaye__ic small { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.9; }
.dp-hikaye__ic b { font-family: var(--font-display); font-size: 27px; line-height: 1.02; letter-spacing: -0.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); }
.dp-hikaye__ic span { justify-self: start; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.9); color: #A9440B; font-size: 12px; font-weight: 600; }
.dp-hikaye__cta { position: absolute; left: 14px; right: 14px; bottom: 16px; padding: 11px; border-radius: 12px; background: #fff; color: #111; text-align: center; font-size: 13px; font-weight: 600; animation: dpBas 9s infinite; animation-delay: -1.6s; }

.dp-formk {
  position: absolute; z-index: 2; right: -10px; bottom: 20px; width: 240px;
  padding: 16px; border-radius: 20px; background: #fff; color: #111;
  box-shadow: 0 34px 60px -26px rgba(30, 10, 40, 0.8); transform: rotate(3deg);
  animation: dpFormGel 9s var(--ease) infinite;
}
@keyframes dpFormGel { 0%, 40% { opacity: 0; transform: translateY(60px) rotate(3deg); } 48%, 95% { opacity: 1; transform: rotate(3deg); } 100% { opacity: 0; transform: rotate(3deg); } }
.dp-formk__ust { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.dp-formk__ust b { margin-left: 4px; font-size: 14px; }
.dp-formk label { display: grid; gap: 2px; margin-bottom: 8px; padding: 7px 10px; border-radius: 10px; background: #F2F2F5; }
.dp-formk label small { font-size: 10.5px; color: #737373; }
.dp-formk label span { font-size: 13px; }
.dp-formk__gonder { display: grid; margin-top: 4px; }
.dp-formk__gonder span { grid-area: 1 / 1; padding: 10px; border-radius: 10px; text-align: center; font-size: 13px; font-weight: 600; }
.dp-formk__gonder .once { background: #0866FF; color: #fff; animation: dpOnce 9s infinite; }
.dp-formk__gonder .sonra { background: #E6F4EA; color: #188038; opacity: 0; animation: dpSonra 9s infinite; }
@keyframes dpOnce { 0%, 58% { opacity: 1; transform: none; } 60% { transform: scale(0.94); } 62%, 100% { opacity: 0; } }
@keyframes dpSonra { 0%, 61% { opacity: 0; } 63%, 100% { opacity: 1; } }
.dp-kanal--meta .dp-rozet { right: auto; left: 0; top: 18%; transform: rotate(-3deg); animation-name: dpPop2; }
@keyframes dpPop2 { 0%, 64% { opacity: 0; scale: 0.6; } 70%, 95% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }

/* Remarketing */
.dp-kanal--remarketing { background: var(--dark); color: var(--ink-onDarkDim); }
.dp-kanal--remarketing h3 { color: #fff; }
.dp-kanal--remarketing .dp-kanal__marka b { color: #fff; }
.dp-kanal--remarketing .dp-kanal__liste li > span { background: rgba(237, 109, 30, 0.16); color: var(--accent); }
.dp-kanal--remarketing .dp-kime { background: var(--dark-2); border: 1px solid var(--line-onDark); }
.dp-kanal--remarketing .dp-kime h4 { color: #fff; }
.dp-kanal--remarketing .dp-kime svg { color: var(--accent); }

.dp-yolculuk { position: relative; aspect-ratio: 560 / 300; }
.dp-yolculuk__hat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dp-yolculuk__hat path { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 2; stroke-dasharray: 2 8; stroke-linecap: round; }
.dp-yolculuk__kisi { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.dp-durak {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; justify-items: center; gap: 8px;
}
.dp-durak b, .dp-durak > svg {
  box-sizing: content-box; display: grid; place-items: center;
  width: 30px; height: 30px; padding: 7px; border-radius: 50%;
  background: var(--dark-2); border: 1px solid var(--line-onDark); color: #fff; font-size: 15px;
}
.dp-durak--son b { background: #34A853; border-color: #34A853; }
.dp-durak i {
  position: absolute; top: calc(100% + 6px); font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  color: #fff; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.08);
}
.dp-durak:nth-of-type(2) i, .dp-durak--son i { top: auto; bottom: calc(100% + 6px); }

/* ---------- Huni ---------- */
.dp-huni { display: grid; gap: 14px; }
.dp-huni__satir { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.dp-huni__ad { display: flex; gap: 12px; align-items: flex-start; }
.dp-huni__ad > span { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(237, 109, 30, 0.14); color: var(--accent); }
.dp-huni__ad h3 { margin: 0; font-size: 1.05rem; }
.dp-huni__ad p { margin: 2px 0 0; font-size: var(--fs-sm); }
.dp-huni__cubuk { position: relative; display: flex; justify-content: center; }
.dp-huni__cubuk > span {
  position: relative; display: grid; place-items: center;
  width: var(--w); min-width: 150px; height: 54px; border-radius: 14px;
  background: linear-gradient(90deg, #C2550F, #ED6D1E 50%, #C2550F);
  color: #fff; font-size: var(--fs-sm); white-space: nowrap;
  box-shadow: 0 16px 30px -18px rgba(237, 109, 30, 0.8);
  transform-origin: center; animation: dpCubuk 1s var(--ease) both; animation-delay: calc(var(--g) * 0.15s);
}
@keyframes dpCubuk { from { transform: scaleX(0.2); opacity: 0; } }
.dp-damla {
  position: absolute; top: 46px; left: calc(50% + max(var(--w), 150px) / 2 - 12px);
  width: 7px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #ED6D1E; opacity: 0;
  animation: dpDamla 2.4s ease-in infinite;
}
.dp-damla:nth-of-type(2) { left: calc(50% - max(var(--w), 150px) / 2 + 8px); animation-delay: 0.8s; }
.dp-damla:nth-of-type(3) { left: calc(50% + max(var(--w), 150px) / 4); animation-delay: 1.6s; }
@keyframes dpDamla { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 15% { opacity: 1; transform: translateY(4px) scale(1); } 100% { opacity: 0; transform: translateY(46px) scale(0.8); } }
.dp-huni__kayip { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.dp-huni__kayip strong { color: #FF9A5C; }
.dp-not { margin: 1rem 0 0; font-size: var(--fs-xs); opacity: 0.65; }

/* ---------- Ornek rapor ---------- */
.dp-rapor { border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); overflow: hidden; }
.dp-rapor__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); background: #FBF9F6; }
.dp-rapor__nokta { display: flex; gap: 6px; }
.dp-rapor__nokta i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.dp-rapor__ust small { color: var(--ink-dim); font-size: var(--fs-xs); }
.dp-rapor__kaynak { display: flex; gap: 8px; margin-left: auto; }
.dp-rapor__izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dp-metrik { position: relative; padding: 22px 22px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dp-metrik:nth-child(3n) { border-right: 0; }
.dp-metrik:nth-child(n+4) { border-bottom: 0; }
.dp-metrik p { margin: 0; }
.dp-metrik__ad { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2); }
.dp-metrik__ad svg { color: var(--accent); }
.dp-metrik__deger { display: flex; align-items: center; gap: 10px; margin-top: 10px !important; font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -0.03em; color: var(--ink); }
.dp-metrik__deger span { display: inline-flex; gap: 4px; }
.dp-metrik__cizgi { position: absolute; right: 22px; top: 52px; width: 72px; height: 30px; overflow: visible; }
.dp-metrik__cizgi path { fill: none; stroke: #34A853; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; animation: dpCiz 2s var(--ease) both; }
.dp-metrik:nth-child(4) .dp-metrik__cizgi path { stroke: #34A853; }
@keyframes dpCiz { from { stroke-dashoffset: 120; } }
.dp-metrik__metin { margin-top: 8px !important; font-size: var(--fs-sm); color: var(--ink-dim); max-width: 34ch; }
.dp-metrik--ana { background: linear-gradient(180deg, var(--accent-soft), transparent); }

/* ---------- Duyarli ---------- */
@media (max-width: 899px) {
  .dp-kanal__izgara { grid-template-columns: minmax(0, 1fr); }
  .dp-kanal--meta .dp-kanal__metin { order: 0; }
  .dp-kanal--meta .dp-kanal__sahne { min-height: 480px; }
  .dp-huni__satir { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line-onDark); }
  .dp-huni__cubuk { justify-content: flex-start; }
  .dp-damla { display: none; }
  .dp-rapor__izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-metrik:nth-child(n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .dp-metrik:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) {
  .dp-dugum > svg { padding: 9px; width: 22px; height: 22px; }
  .dp-dugum small { font-size: 10.5px; }
  .dp-merkez { width: 54%; padding: 12px 10px; }
  .dp-merkez__akis span { font-size: 10.5px; }
  .dp-harita { width: 88%; }
  .dp-rozet { right: 0; }
  .dp-hikaye { width: 200px; transform: rotate(-4deg) translateX(-62px); }
  .dp-formk { width: 200px; }
  .dp-durak i { font-size: 10.5px; }
  .dp-rapor__izgara { grid-template-columns: minmax(0, 1fr); }
  .dp-metrik:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .dp-metrik:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-yorunge *, .dp-kanal__sahne *, .dp-huni *, .dp-rapor * { animation: none !important; }
  .dp-yolculuk__kisi, .dp-parca { display: none; }
  .dp-merkez__akis span { opacity: 0; }
  .dp-merkez__akis span:first-child { opacity: 1; }
  .dp-formk__gonder .once { opacity: 0; }
  .dp-formk__gonder .sonra { opacity: 1; }
}