/* Hero örneği: günlük plan ve onu destekleyen küçük çalışma kartları. */
.vitrin-bento .hero-plan-sahnesi { padding: 132px 0 0; min-width: 0; }
.vitrin-bento .hero-plan-sahnesi::before { inset: auto; top: 50%; left: 50%; width: calc(100% + 24px); aspect-ratio: 1; border: 1px solid var(--kenar-rengi); border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 72px, var(--kenar-rengi) 73px 74px, transparent 75px 104px); transform: translate(-50%, -50%) scale(1.25); pointer-events: none; }
.hero-plan-sahnesi .gorsel-etiket { position: absolute; top: 0; left: 4px; margin: 0; font-size: 10px; letter-spacing: .1em; }
.hp-seri { position: absolute; z-index: 3; top: 112px; right: max(-55px, calc((1400px - 100vw) / 2 - 55px)); display: flex; align-items: center; gap: 12px; padding: 14px 18px; border: 4px solid var(--kart-zemin); border-radius: 20px; background: var(--purple); color: var(--card); box-shadow: 0 12px 28px -16px rgba(var(--renk-mor-rgb),.5); transform: rotate(11.5deg); }
.hp-seri-ikon { display: grid; place-items: center; background: var(--card); color: var(--purple); width: 38px; height: 38px; border-radius: 12px; letter-spacing: 2px; font-size: 17px; }
.hp-seri strong { display: block; font: 500 19px/1.2 var(--font-display); }
.hp-seri small { display: block; margin-top: 4px; font-size: 10px; }
.hp-seri > span:last-child { font-size: 24px; padding-left: 5px; }
.hp-plan { position: relative; z-index: 1; transform: rotate(3.5deg); background: var(--kart-zemin); padding: 22px 22px 58px; border: 1px solid var(--kenar-rengi); border-radius: 26px; box-shadow: 0 24px 50px -28px rgba(var(--renk-lacivert-rgb),.28), 0 0 0 7px rgba(255,255,255,.6); }
.hp-plan-baslik { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.hp-gunes { width: 42px; height: 42px; display: grid; place-items: center; flex: none; font-size: 32px; border-radius: 14px; color: var(--purple); background: var(--mor-zemin-yumusak); }
.hp-plan-baslik p { font-size: 10px; color: var(--ikincil-metin); margin-bottom: 4px; }
.hp-plan-baslik h3 { font: 500 22px/1.15 var(--font-display); letter-spacing: -.025em; color: var(--baslik-rengi); }
.hp-bugun { margin-left: auto; font-size: 10px; color: var(--ikincil-metin); }
.hp-plan-icerik { display: grid; grid-template-columns: minmax(0,1fr) 138px; gap: 16px; }
.hp-gorevler { list-style: none; padding: 0; margin: 0; }
.hp-gorevler li { display: flex; align-items: center; gap: 10px; min-height: 57px; border-bottom: 1px solid var(--kenar-rengi); }
.hp-gorevler li:last-child { border: 0; }
.hp-gorevler li > div { min-width: 0; }
.hp-durum { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--mor-kenar); border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.hp-bitti .hp-durum { background: var(--purple); border-color: var(--purple); color: var(--card); }
.hp-gorevler strong { display: block; color: var(--baslik-rengi); font-size: 13px; font-weight: 600; }
.hp-gorevler small { display: block; color: var(--ikincil-metin); font-size: 11px; margin-top: 5px; }
.hp-sure { margin-left: auto; flex: none; font-size: 11px; color: var(--ikincil-metin); }
.hp-siradaki .hp-durum { background: var(--mor-zemin-yumusak); border-color: transparent; color: var(--purple); }
.hp-gorevler em { font-style: normal; font-size: 8px; color: var(--purple); background: var(--mor-zemin-yumusak); border-radius: 4px; padding: 3px 5px; margin-left: 4px; }
.hp-ozet { padding: 12px 8px 8px; border-radius: 18px; text-align: center; background: var(--kart-zemin-alt); }
.hp-halka { position: relative; width: 120px; height: 120px; margin: 0 auto 12px; }
.hp-halka svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-width: 13; }
.hp-halka-zemin { stroke: var(--mor-zemin-yumusak); }
.hp-halka-dolum { stroke: var(--purple); stroke-linecap: round; }
.hp-halka > div { position: absolute; inset: 18px; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.hp-halka strong { font: 500 30px/1 var(--font-display); color: var(--baslik-rengi); }
.hp-halka span { font-size: 9px; margin-top: 6px; color: var(--ikincil-metin); }
.hp-gorev-sayisi { font-size: 11px; color: var(--baslik-rengi); }
.hp-gorev-sayisi > span { color: var(--purple); font-size: 10px; margin-right: 4px; }
.hp-toplam { font-size: 9px; color: var(--ikincil-metin); margin-top: 6px; }
.hp-motivasyon { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 7px; text-align: left; }
.hp-motivasyon > span { color: var(--yellow); font-size: 26px; }
.hp-motivasyon p { font-size: 9px; line-height: 1.6; color: var(--ikincil-metin); }
.hp-motivasyon strong { color: var(--baslik-rengi); font-weight: 500; }
.hp-plan-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.hp-kazanım { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--baslik-rengi); }
.hp-kazanım > span { background: var(--green); color: var(--navy); display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; }
.hp-plan-alt a { background: var(--purple); color: var(--card); padding: 13px 17px; border-radius: 99px; font-size: 11px; font-weight: 500; }
.hp-plan-alt a > span { margin-left: 12px; }
.hp-mini-kartlar { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-top: -32px; }
.hp-hafta { padding: 17px; background: var(--kart-zemin); border: 1px solid var(--kenar-rengi); border-radius: 20px; box-shadow: 0 14px 30px -22px rgba(var(--renk-lacivert-rgb),.25); }
.hp-hafta { min-height: 129px; transform: translate(30px, -53px) rotate(-4deg); }
.hp-hafta-baslik { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.hp-hafta-baslik strong { font: 500 14px/1.2 var(--font-display); color: var(--baslik-rengi); }
.hp-hafta-baslik > span { font-size: 9px; color: var(--ikincil-metin); }
.hp-hafta-baslik > span > span { color: var(--yellow); margin-left: 3px; }
.hp-gunler { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; text-align: center; }
.hp-gunler > span { font-size: 10px; color: var(--ikincil-metin); border-radius: 8px; padding-block: 7px; background: var(--kart-zemin-alt); }
.hp-gunler b { display: grid; place-items: center; width: 18px; height: 18px; margin: 6px auto 0; font-size: 13px; font-weight: 400; color: var(--muted); }
.hp-gun-tamam b, .hp-gun-bugun b { background: var(--purple); color: var(--card); border-radius: 50%; font-size: 10px; }
.hp-gunler .hp-gun-bugun { background: var(--mor-zemin-yumusak); color: var(--purple); }
.hp-gun-ara { opacity: .65; }
.vitrin-bento .hp-ornek-notu { max-width: none; margin-top: 48px; text-align: center; font-size: 10px; }

.hp-hedef { position: absolute; z-index: 3; top: 64px; left: -110px; display: flex; align-items: center; gap: 12px; padding: 15px 19px; border: 1px solid var(--kenar-rengi); border-radius: 20px; background: var(--kart-zemin); box-shadow: 0 18px 34px -20px rgba(var(--renk-lacivert-rgb),.28); transform: rotate(-6deg); }
.hp-hedef-onay { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--green) 16%, var(--kart-zemin)); color: color-mix(in srgb, var(--green) 45%, var(--navy)); }
.hp-hedef p { margin: 0 0 3px; font-size: 11px; color: var(--ikincil-metin); }
.hp-hedef strong { display: block; font: 500 20px/1.2 var(--font-display); color: var(--baslik-rengi); }
.hp-hedef strong > span { font-size: 17px; }
.hp-hedef small { display: block; margin-top: 5px; font-size: 9px; color: var(--ikincil-metin); }

.hp-check { display: block; width: 14px; height: 14px; flex: none; }

/* Bağımsız translate, kartların mevcut transform konumunu ve eğimini korur. */
@keyframes hp-suzulme {
  0%, 100% { translate: 0 0; }
  50% { translate: var(--hp-salinti-x, 0px) var(--hp-salinti-y, -6px); }
}
@keyframes hp-daire-nabzi {
  0%, 100% { transform: translate(-50%, -50%) scale(1.25); opacity: .55; }
  50% { transform: translate(-50%, -50%) scale(1.28125); opacity: .9; }
}
@media (prefers-reduced-motion: no-preference) {
  .vitrin-bento .hero-plan-sahnesi::before { animation: hp-daire-nabzi 16s ease-in-out infinite; }
  .hero-plan-sahnesi :is(.hp-plan, .hp-hedef, .hp-seri, .hp-hafta) {
    animation: hp-suzulme var(--hp-dongu) ease-in-out var(--hp-gecikme) infinite;
  }
  .hp-plan { --hp-dongu: 14.5s; --hp-gecikme: -4s; --hp-salinti-y: -14px; }
  .hp-hedef { --hp-dongu: 10.5s; --hp-gecikme: -1.5s; --hp-salinti-x: -2px; --hp-salinti-y: -18px; }
  .hp-seri { --hp-dongu: 13s; --hp-gecikme: -7s; --hp-salinti-x: -2px; --hp-salinti-y: -17px; }
  .hp-hafta { --hp-dongu: 11.5s; --hp-gecikme: -8.5s; --hp-salinti-x: -1px; --hp-salinti-y: -20px; }
  .hero-plan-sahnesi .hp-plan:is(:hover, :focus-within) { animation-play-state: paused; }
}

/* ---- Telefon (22 Ekim): örnek plan sahnesi tek sütun; yüzen kartlar akışa girer, kenardan taşmaz. ---- */
@media (max-width: 767px) {
  .vitrin-bento .hero-plan-sahnesi { padding: 12px 0 0; }
  .hp-seri { display: none; }
  .hp-hedef { position: relative; top: auto; left: auto; width: fit-content; max-width: 100%; margin: 0 0 16px 4px; padding: 12px 16px; transform: rotate(-2deg); }
  .hp-plan { transform: rotate(1deg); padding: 18px 16px; border-radius: 22px; }
  .hp-plan-baslik { margin-bottom: 14px; }
  .hp-plan-baslik h3 { font-size: 19px; }
  .hp-plan-icerik { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hp-ozet { display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; padding: 12px 14px; }
  .hp-halka { grid-row: 1 / span 3; width: 92px; height: 92px; margin: 0; }
  .hp-halka > div { inset: 14px; }
  .hp-halka strong { font-size: 24px; }
  .hp-motivasyon { margin-top: 4px; justify-content: flex-start; }
  .hp-motivasyon > span { font-size: 22px; }
  .hp-plan-alt { flex-wrap: wrap; margin-top: 14px; }
  .hp-plan-alt a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 18px; }
  .hp-mini-kartlar { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  .hp-hafta { min-height: 0; transform: rotate(-1deg); }
}