/* Rutin haritası: lila kart (adımlar) + videolu sağ kart */
.cc_LwkzYoivJ1_3eCEzFAa4l .routine { display: grid; grid-template-columns: 1fr 1.2fr; gap: 18px; }
.cc_LwkzYoivJ1_3eCEzFAa4l .routine > * { min-width: 0; }

.cc_LwkzYoivJ1_3eCEzFAa4l .r-left { background: var(--lav); border-radius: var(--r-xl); padding: clamp(28px, 4vw, 60px); }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-left h2 { font-size: clamp(38px, 4.4vw, 64px); margin: 16px 0 20px; }

.cc_LwkzYoivJ1_3eCEzFAa4l .toggle { display: inline-flex; background: #fff; border-radius: 999px; padding: 5px; margin: 4px 0 24px; }
.cc_LwkzYoivJ1_3eCEzFAa4l .toggle button {
  min-height: 44px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .toggle .on { background: var(--ink); color: #fff; }

.cc_LwkzYoivJ1_3eCEzFAa4l .steps { list-style: none; margin: 0; padding: 0; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li { border-top: 1px solid rgba(42, 26, 44, 0.12); animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-in 0.5s var(--ease) both; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li:nth-child(2) { animation-delay: 0.04s; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li:nth-child(3) { animation-delay: 0.08s; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li:nth-child(4) { animation-delay: 0.12s; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li:nth-child(5) { animation-delay: 0.16s; }
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-in { from { opacity: 0; transform: translateY(8px); } }

.cc_LwkzYoivJ1_3eCEzFAa4l .steps button {
  width: 100%;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: padding 0.35s var(--ease);
}
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li:hover button, .cc_LwkzYoivJ1_3eCEzFAa4l .steps li.on button { padding-left: 10px; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps .n { font-family: var(--serif); font-size: 30px; color: var(--mute); font-style: italic; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps li.on .n { color: var(--berry); }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps .t b { font-size: 16.5px; display: block; }
.cc_LwkzYoivJ1_3eCEzFAa4l .steps .t span { font-size: 14.5px; color: var(--ink-2); }

.cc_LwkzYoivJ1_3eCEzFAa4l .r-right { position: relative; overflow: hidden; min-height: 620px; border-radius: var(--r-xl); background: #EFEDEC; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right .r-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 26, 44, 0.05) 30%, rgba(42, 26, 44, 0.45)); }

/* Selected step: its product rises over the clip, re-animating on every pick */
.cc_LwkzYoivJ1_3eCEzFAa4l .r-stage {
  position: absolute;
  z-index: 1;
  inset: 22px 22px 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  pointer-events: none;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-badge {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-in 0.45s var(--ease) both;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-badge i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--berry);
  color: #fff;
  font-family: var(--serif);
  font-size: 15px;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-product {
  width: min(62%, 300px);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 55%, rgba(255, 255, 255, 0.55) 72%, transparent 73%);
  filter: drop-shadow(0 26px 40px rgba(42, 26, 44, 0.28));
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-pop 0.6s var(--ease) both;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-detail {
  margin: 0;
  max-width: 300px;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-weight: 700;
  color: var(--ink);
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-pop 0.5s var(--ease) both;
}
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-pop { from { opacity: 0; transform: translateY(24px) scale(0.92); } }

/* ── Ürün vitrini: ürünler bağlıysa video yerine adımın ürünü kemer kaide üzerinde ── */
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show {
  background:
    radial-gradient(120% 80% at 50% 0%, #fff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, var(--pearl, #FFF8F4) 0%, var(--blush) 55%, var(--lav) 100%);
  transition: background 0.6s var(--ease);
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show.r-right--night {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(160deg, #3A2238 0%, var(--ink) 60%, #1F1420 100%);
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-glitter { position: absolute; inset: 0; z-index: 0; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-halo {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 44%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 220, 232, 0.55) 45%, transparent 70%);
  filter: blur(6px);
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--night .r-halo { background: radial-gradient(circle, rgba(232, 199, 160, 0.35) 0%, rgba(160, 60, 110, 0.25) 45%, transparent 70%); }
/* Seçili ürün: ışıyan küre, dönen ince halkalar, zeminde gölge; ürün süzülerek gelir ve hafifçe salınır */
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show { min-height: 680px; }
/* z-index: auto so the stage does not isolate the product photo from the card backdrop it blends into */
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show .r-stage { inset: 22px 96px 132px 22px; z-index: auto; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-show {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  height: 100%;
  /* backwards, not both: a fill that stays in effect would keep this a separate layer and stop the
     product photo blending (multiply) into the backdrop */
  animation: r-enter 0.8s var(--ease) backwards;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-orb {
  position: absolute;
  width: min(86%, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, #fff 0%, rgba(255, 255, 255, 0.85) 22%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 50% 55%, #FFE6EE 0%, #F7CADA 52%, #EBB3C8 70%, rgba(235, 179, 200, 0) 71%);
  box-shadow: 0 50px 90px -50px rgba(116, 38, 74, 0.65);
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-breathe 7s ease-in-out infinite;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-ring {
  position: absolute;
  width: min(100%, 510px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed rgba(154, 58, 94, 0.32);
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-spin 48s linear infinite;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-ring--in {
  width: min(70%, 360px);
  border: 2px solid rgba(238, 216, 180, 0.95);
  border-top-color: transparent;
  border-left-color: transparent;
  animation-duration: 16s;
  animation-direction: reverse;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-floor {
  position: absolute;
  bottom: 4%;
  width: 46%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(116, 38, 74, 0.38), transparent);
  filter: blur(4px);
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-shadow 5s ease-in-out infinite;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show .r-product {
  position: relative;
  width: min(88%, 470px);
  height: min(92%, 470px);
  aspect-ratio: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: none;
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-float 5s ease-in-out 0.8s infinite;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-twinkle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--champ);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-twinkle 2.8s ease-in-out infinite;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-twinkle--a { top: 14%; right: 16%; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-twinkle--b { bottom: 24%; left: 12%; width: 12px; height: 12px; background: var(--berry); animation-delay: -1.3s; }

.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--night .r-orb {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 240, 220, 0.55) 0%, rgba(255, 240, 220, 0) 40%),
    radial-gradient(circle at 50% 55%, #F3DFC4 0%, #D9B98F 50%, #9C6F59 70%, rgba(156, 111, 89, 0) 71%);
  box-shadow: 0 0 120px -10px rgba(232, 199, 160, 0.45);
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--night .r-ring { border-color: rgba(238, 216, 180, 0.35); }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--night .r-ring--in { border-color: rgba(229, 154, 174, 0.8); border-top-color: transparent; border-left-color: transparent; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--night .r-floor { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); }

@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-enter {
  from { opacity: 0; transform: translateY(46px) scale(0.86); filter: blur(8px); }
  60% { filter: blur(0); }
}
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-float { 50% { transform: translateY(-14px) rotate(-1.5deg); } }
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-shadow { 50% { transform: scaleX(0.82); opacity: 0.7; } }
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-breathe { 50% { transform: scale(1.04); } }
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-spin { to { transform: rotate(360deg); } }
@keyframes cc_LwkzYoivJ1_3eCEzFAa4l_r-twinkle { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* Adım ürünleri şeridi (sağ kenar) */
.cc_LwkzYoivJ1_3eCEzFAa4l .r-strip {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-strip button {
  width: 64px;
  height: 64px;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-strip button img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; mix-blend-mode: multiply; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-strip button:hover { transform: scale(1.08); }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-strip button.on { border-color: var(--berry); box-shadow: 0 8px 18px -8px rgba(160, 60, 110, 0.6); }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show .r-cap { box-shadow: 0 20px 40px -24px rgba(42, 26, 44, 0.45); }
@media (prefers-reduced-motion: reduce) { .cc_LwkzYoivJ1_3eCEzFAa4l .r-product, .cc_LwkzYoivJ1_3eCEzFAa4l .r-detail, .cc_LwkzYoivJ1_3eCEzFAa4l .r-badge, .cc_LwkzYoivJ1_3eCEzFAa4l .r-show, .cc_LwkzYoivJ1_3eCEzFAa4l .r-orb, .cc_LwkzYoivJ1_3eCEzFAa4l .r-ring, .cc_LwkzYoivJ1_3eCEzFAa4l .r-floor, .cc_LwkzYoivJ1_3eCEzFAa4l .r-twinkle, .cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show .r-product { animation: none; } }

.cc_LwkzYoivJ1_3eCEzFAa4l .r-cap {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-md);
  background: #fff;
  animation: cc_LwkzYoivJ1_3eCEzFAa4l_r-in 0.5s var(--ease);
}
.cc_LwkzYoivJ1_3eCEzFAa4l .r-cap b { display: block; font-size: 16px; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-cap span { font-size: 14.5px; color: var(--berry); font-weight: 800; }
.cc_LwkzYoivJ1_3eCEzFAa4l .r-cap .sv-btn { min-height: 48px; }

@media (max-width: 1100px) {
  .cc_LwkzYoivJ1_3eCEzFAa4l .routine { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-right { min-height: 480px; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-stage { inset: 16px 16px 150px; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-product { width: min(58%, 220px); }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show { min-height: 560px; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show .r-stage { inset: 120px 12px 170px; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-right--show .r-product { height: min(92%, 300px); }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-halo { width: 300px; height: 300px; top: 48%; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-strip { top: 68px; left: 16px; right: 16px; flex-direction: row; justify-content: center; gap: 8px; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-strip button { width: 46px; height: 46px; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-cap { flex-direction: column; align-items: stretch; text-align: left; }
  .cc_LwkzYoivJ1_3eCEzFAa4l .r-cap .sv-btn { width: 100%; }
}