/* Home page slider, the poster deck (inc/hero-carousel.php). The older .hero-slider / .salon-* rules in style.css match nothing here. */

.hero-carousel {
  --hc-radius: 14px;
  --hc-peek-x: 44px;
  --hc-peek-y: 42px;
  --hc-accent: #efb18b;
  --hc-shadow: 12, 2, 14;
  --hc-ease: cubic-bezier(.22, .9, .24, 1);
  --hc-delay: 4.5s;
  position: relative;
  min-width: 0;
  width: 100%;
  color: #fff;
}

/* The deck. Back posters sit up and to the right, so the stage leaves room there. */
.hc-stage { position: relative; width: 100%; aspect-ratio: var(--hc-ratio, 1.5); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hc-deck .hc-stage { width: calc(100% - var(--hc-peek-x)); margin-top: var(--hc-peek-y); }

.hc-card {
  --x: 0px; --y: 0px; --r: 0deg; --s: 1;
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--hc-radius);
  background: #2a0e2e;
  box-shadow: 0 30px 60px -26px rgba(var(--hc-shadow), .9), 0 12px 24px -14px rgba(var(--hc-shadow), .6);
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)) scale(var(--s));
  transform-origin: 50% 60%;
  transition: transform .72s var(--hc-ease), opacity .5s var(--hc-ease), filter .72s var(--hc-ease), box-shadow .3s ease-out, display .72s allow-discrete;
}
/* A printed edge: a hairline of light on dark posters, invisible on white ones. */
.hc-card::after { position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); pointer-events: none; content: ""; }
.hc-card[data-pos="0"] { z-index: 3; }
.hc-card[data-pos="1"] { --x: 22px; --y: -20px; --r: 1.2deg; --s: .97; z-index: 2; filter: brightness(.8) saturate(.9); cursor: pointer; }
.hc-card[data-pos="2"] { --x: 42px; --y: -38px; --r: 2.4deg; --s: .94; z-index: 1; filter: brightness(.64) saturate(.85); cursor: pointer; box-shadow: 0 16px 34px -20px rgba(var(--hc-shadow), .8); }
.hc-card[data-pos="rest"] { --x: 42px; --y: -38px; --r: 2.4deg; --s: .94; z-index: 0; display: none; opacity: 0; }
/* Taken off the top: a short, quiet move to the left; it should not compete with the poster arriving. */
.hc-card[data-pos="exit"], .hc-card[data-pos="enter"] { --x: -11%; --y: 4%; --r: -4.5deg; --s: .98; z-index: 4; opacity: 0; filter: blur(10px); pointer-events: none; }
/* Blur as it fades, so the two posters never read as a double exposure. */
.hc-card[data-pos="exit"] { transition: transform .5s var(--hc-ease), opacity .28s ease-out, filter .28s ease-out, display .5s allow-discrete; }
.hc-card[data-pos="enter"] { transition: none; }
.hc-card[data-pos="1"] .hc-open, .hc-card[data-pos="2"] .hc-open { pointer-events: none; }
.hc-card.is-dragging { transition: none; cursor: grabbing; }
@starting-style { .hc-card[data-pos="2"] { opacity: 0; } }

.hc-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.hc-open:focus-visible { outline: none; }
.hc-card:has(.hc-open:focus-visible) { box-shadow: 0 0 0 3px var(--hc-accent), 0 30px 60px -26px rgba(var(--hc-shadow), .9); }
.hc-image { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; -webkit-user-drag: none; }
.hc-card--fit .hc-image { object-fit: contain; }
.hc-backdrop { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; filter: blur(26px) brightness(.62); }

/* "Büyüt" appears where a pointer can hover; on touch the whole poster is the button. */
.hc-zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; display: none; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: 999px; color: #fff; background: rgba(28, 7, 30, .78); font-size: .76rem; font-weight: 800; line-height: 1; opacity: 0; transform: translateY(4px); transition: opacity .18s ease-out, transform .18s ease-out; }
.hc-zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (hover: hover) {
  .hc-zoom { display: inline-flex; }
  .hc-card[data-pos="0"]:hover { box-shadow: 0 38px 70px -26px rgba(var(--hc-shadow), .95), 0 14px 28px -14px rgba(var(--hc-shadow), .65); }
  .hc-card[data-pos="0"]:hover .hc-zoom, .hc-open:focus-visible .hc-zoom { opacity: 1; transform: none; }
}

/* Under the deck: one segment per poster, as on a story. The one showing fills while it is shown. */
.hc-bar { display: flex; align-items: center; gap: 16px; width: calc(100% - var(--hc-peek-x)); margin-top: 20px; }
.hc-steps { display: flex; flex: 1; gap: 4px; min-width: 0; }
.hc-step { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); }
.hc-step i { position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .62); transform: scaleX(0); transform-origin: left; }
.hc-step.is-done i { transform: scaleX(1); }
.hc-step.is-active i { background: var(--hc-accent); animation: hc-fill var(--hc-delay) linear forwards; }
.hero-carousel.is-paused .hc-step.is-active i, .hero-carousel.is-holding .hc-step.is-active i { animation-play-state: paused; }
@keyframes hc-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hc-buttons { display: flex; flex: none; gap: 6px; }
.hc-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: 10px; color: #fff; background: rgba(255, 255, 255, .04); cursor: pointer; touch-action: manipulation; transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, transform .1s ease-out; }
.hc-btn:hover { border-color: rgba(239, 177, 139, .7); color: #ffd9c2; background: rgba(239, 177, 139, .12); }
.hc-btn:active { transform: scale(.96); }
.hc-btn:focus-visible { outline: 3px solid rgba(239, 177, 139, .75); outline-offset: 2px; }
.hc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hc-btn .hc-icon-play { display: none; fill: currentColor; stroke-width: 1.4; }
.hero-carousel.is-paused .hc-icon-pause { display: none; }
.hero-carousel.is-paused .hc-icon-play { display: inline; }

@media (max-width: 700px) {
  .hero-carousel { --hc-radius: 11px; --hc-peek-x: 22px; --hc-peek-y: 21px; }
  .hc-card[data-pos="1"] { --x: 11px; --y: -10px; --r: 1deg; }
  .hc-card[data-pos="2"], .hc-card[data-pos="rest"] { --x: 21px; --y: -19px; --r: 2deg; }
  .hc-bar { gap: 12px; margin-top: 16px; }
  .hc-buttons { gap: 4px; }
  .hc-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-card, .hc-zoom, .hc-btn { transition: none; }
  .hc-step.is-active i { animation: none; transform: scaleX(1); }
}