/* =========================================================
   Rehber yazilarinda animasyonlu anlatim bloklari ([[anim:ad]])
   Tetik: dp-izle.js ekrana girince .is-gorundu ekler.
   JS yoksa (.js sinifi yok) her sey son haliyle gorunur.
   ========================================================= */

.ra {
  margin: 2.2rem 0;
  padding: clamp(1.1rem, 3vw, 1.7rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ra figcaption {
  margin-top: 1.2rem;
  font-size: var(--fs-sm);
  color: var(--ink-dim);
  line-height: 1.5;
}

/* ---------- Takvim ---------- */
.ra-takvim__yol {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}
.ra-takvim__cizgi {
  position: absolute; left: 9px; right: 0; top: 8px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--line-strong), var(--line-strong) 80%, transparent);
}
.ra-takvim__cizgi span {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0.3);
  transition: transform 1.3s var(--ease) 0.2s;
}
.js .ra-takvim:not(.is-gorundu) .ra-takvim__cizgi span { transform: scaleX(0); }

.ra-durak { position: relative; display: grid; gap: 0.2rem; padding-top: 1.7rem; transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(0.25s + var(--i) * 0.2s); }
.js .ra-takvim:not(.is-gorundu) .ra-durak { opacity: 0; transform: translateY(10px); }
.ra-durak__nokta {
  position: absolute; left: 0; top: 0;
  width: 19px; height: 19px; border-radius: 50%;
  border: 3px solid var(--line-strong); background: var(--surface);
}
.ra-durak--gecti .ra-durak__nokta,
.ra-durak--bugun .ra-durak__nokta { border-color: var(--accent); background: var(--accent); }
.ra-durak--bugun .ra-durak__nokta::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 2px solid var(--accent);
  animation: ra-nabiz 1.8s var(--ease) infinite;
}
.ra-durak__rozet {
  justify-self: start;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  margin-bottom: 0.15rem;
}
@media (min-width: 641px) {
  /* Masaustunde noktanin yaninda; sutunun metnini asagi itmesin */
  .ra-durak__rozet { position: absolute; top: -1px; left: 28px; margin: 0; white-space: nowrap; }
}
.ra-durak__tarih { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); }
.ra-durak--gelecek .ra-durak__tarih { color: var(--ink-dim); }
.ra-durak__ad { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.ra-durak__alt { font-size: var(--fs-xs); color: var(--ink-dim); line-height: 1.4; }

.ra-takvim__maliyet {
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px dashed var(--line);
  display: grid; gap: 0.55rem;
}
.ra-takvim__baslik { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.2rem; }
.ra-cubuk { display: grid; grid-template-columns: 3.4rem 1fr 3.6rem; align-items: center; gap: 0.7rem; font-size: var(--fs-sm); }
.ra-cubuk__yil { color: var(--ink-2); }
.ra-cubuk__tutar { font-family: var(--font-display); font-weight: 700; text-align: right; }
.ra-cubuk__iz { height: 12px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ra-cubuk__iz span {
  display: block; height: 100%; border-radius: inherit;
  width: calc(var(--oran) * 100%);
  background: linear-gradient(90deg, #F4A261, var(--accent) 60%, #C2410C);
  transform-origin: left;
  transition: transform 0.9s var(--ease);
  transition-delay: calc(1s + var(--i) * 0.25s);
}
.js .ra-takvim:not(.is-gorundu) .ra-cubuk__iz span { transform: scaleX(0); }

@media (max-width: 640px) {
  .ra-takvim__yol { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 2rem; }
  .ra-takvim__cizgi { left: 8px; right: auto; top: 9px; bottom: 0; width: 3px; height: auto;
    background: linear-gradient(180deg, var(--line-strong), var(--line-strong) 80%, transparent); }
  .ra-takvim__cizgi span { transform-origin: top; transform: scaleY(0.36); }
  .js .ra-takvim:not(.is-gorundu) .ra-takvim__cizgi span { transform: scaleY(0); }
  .ra-durak { padding-top: 0; }
  .ra-durak__nokta { left: -2rem; top: 0; }
}

/* ---------- Masaustu / web karsilastirma ---------- */
.ra-karsi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.4rem;
}
.ra-karsi figcaption { grid-column: 1 / -1; }
.ra-karsi__panel { border-radius: 12px; padding: 0.8rem 0.6rem 0.4rem; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.ra-karsi__panel--eski { background: var(--surface-2); }
.ra-karsi__panel--yeni { background: var(--accent-soft); transition-delay: 0.35s; }
.js .ra-karsi:not(.is-gorundu) .ra-karsi__panel { opacity: 0; transform: translateY(12px); }
.ra-karsi__etiket { display: block; text-align: center; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.ra-karsi__panel--yeni .ra-karsi__etiket { color: var(--accent-deep); }
.ra-karsi svg { display: block; width: 100%; height: auto; }
.ra-karsi__ok svg { width: 100%; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.ra-hat { stroke-width: 1.6; }
.ra-hat--kopuk { stroke: var(--line-strong); stroke-dasharray: 4 5; }
.ra-hat--canli { stroke: var(--accent); opacity: 0.45; }
.ra-cihaz rect, .ra-cihaz path, .ra-cihaz line { fill: var(--surface); stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.ra-cihaz circle { fill: var(--ink); }
.ra-cihaz text { font: 600 11px var(--font-body); fill: var(--ink-2); text-anchor: middle; }
.ra-karsi__panel--eski .ra-cihaz { opacity: 0.42; }
.ra-carpi circle { fill: #fff; stroke: #D93025; stroke-width: 1.6; }
.ra-carpi path { stroke: #D93025; stroke-width: 2; stroke-linecap: round; }
.ra-carpi { animation: ra-yanip 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 0.45s); }
.ra-merkez rect { fill: var(--dark); }
.ra-merkez--eski path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
.ra-merkez text { font: 700 13px var(--font-display); fill: #fff; text-anchor: middle; }
.ra-merkez .ra-merkez__alt { font: 500 10px var(--font-body); fill: var(--ink-onDarkDim); }
.ra-merkez--yeni .ra-merkez__alt { fill: var(--ink-2); font-size: 11px; }
.ra-merkez--yeni circle { fill: #34A853; animation: ra-yanip 1.2s ease-in-out infinite; }
.ra-uyari, .ra-iyi { font: 600 11px var(--font-body); text-anchor: middle; }
.ra-uyari { fill: #C5221F; }
.ra-iyi { fill: #2F8A57; }
.ra-veri { fill: var(--accent); }
.ra-veri--geri { fill: #34A853; }

@media (max-width: 640px) {
  .ra-karsi { grid-template-columns: 1fr; }
  .ra-karsi__ok { width: 2rem; justify-self: center; transform: rotate(90deg); }
}

/* ---------- Karar yolu ---------- */
.ra-karar__satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr) 1.6rem minmax(0, 1.1fr);
  align-items: center;
}
.ra-karar__satir + .ra-karar__satir { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.ra-karar__adim, .ra-karar__sonuc {
  padding: 0.6rem 0.75rem; border-radius: 10px;
  font-size: var(--fs-sm); line-height: 1.35;
}
.ra-karar__adim { background: var(--surface-2); color: var(--ink-2); }
.ra-karar__sonuc { font-weight: 700; color: var(--ink); }
.ra-karar__sonuc--iyi { background: #E7F4EC; color: #1F6E43; }
.ra-karar__sonuc--tasi { background: var(--accent-soft); color: var(--accent-deep); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ra-karar__bag { height: 2px; background: var(--accent); transform-origin: left; }
.ra-karar__satir > * { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: calc(0.2s + var(--s) * 0.9s + var(--k) * 0.2s); }
.js .ra-karar:not(.is-gorundu) .ra-karar__adim,
.js .ra-karar:not(.is-gorundu) .ra-karar__sonuc { opacity: 0; transform: translateX(-8px); }
.js .ra-karar:not(.is-gorundu) .ra-karar__bag { transform: scaleX(0); }

@media (max-width: 640px) {
  .ra-karar__satir { grid-template-columns: 1fr; justify-items: start; }
  .ra-karar__adim, .ra-karar__sonuc { width: 100%; }
  .ra-karar__bag { width: 2px; height: 0.8rem; margin-left: 1.2rem; transform-origin: top; }
  .js .ra-karar:not(.is-gorundu) .ra-karar__bag { transform: scaleY(0); }
}

/* ---------- Ortak ---------- */
@keyframes ra-nabiz {
  0%   { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes ra-yanip {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .ra *, .ra *::after { animation: none !important; transition: none !important; }
  .ra-veri { display: none; }
}