/* Lavender editorial theme inspired by the supplied directory-page reference. */
:root {
  --primary: #7554b8;
  --primary-light: #a88bea;
  --primary-dark: #54398e;
  --secondary: #8a79b6;
  --accent: #c6b4f1;
  --bg: #f7f5fb;
  --bg-card: #fff;
  --bg-surface: #efebf7;
  --bg-glass: rgba(117,84,184,.055);
  --border: rgba(76,58,112,.13);
  --border-hover: rgba(117,84,184,.36);
  --text-primary: #29243a;
  --text-secondary: #6f687d;
  --text-muted: #91899f;
  --navbar-bg: rgba(255,255,255,.94);
  --hero-art-bg: linear-gradient(120deg,#a894dc 0%,#8d72c8 55%,#7355af 100%);
  --shadow-glow: 0 12px 34px rgba(90,65,145,.13);
  --shadow-card: 0 8px 28px rgba(54,39,89,.08);
}

[data-theme="dark"] {
  --primary: #b49be9;
  --primary-light: #c9b8f2;
  --primary-dark: #9275d0;
  --secondary: #b2a3d8;
  --accent: #d1c0f5;
  --bg: #1f1b29;
  --bg-card: #292435;
  --bg-surface: #342e42;
  --bg-glass: rgba(255,255,255,.055);
  --border: rgba(232,222,255,.12);
  --border-hover: rgba(180,155,233,.4);
  --text-primary: #f3effa;
  --text-secondary: #c4bdd1;
  --text-muted: #a49bb2;
  --navbar-bg: rgba(31,27,41,.95);
  --hero-art-bg: linear-gradient(120deg,#44365e 0%,#382b50 55%,#2d2440 100%);
  --shadow-glow: 0 12px 34px rgba(0,0,0,.25);
  --shadow-card: 0 8px 28px rgba(0,0,0,.22);
}

body { background: var(--bg); }
.navbar { box-shadow: 0 2px 18px rgba(45,34,70,.045); }
.nav-link.active { background: rgba(117,84,184,.1); }
.hero {
  background: linear-gradient(112deg,#f1ecfb 0%,#f8f6fc 54%,#ebe4f8 100%);
}
body[data-theme="dark"] .hero {
  background: linear-gradient(112deg,#292238 0%,#211d2c 54%,#30263f 100%);
}
.hero-bg-glow { background: radial-gradient(ellipse at 78% 34%,rgba(160,132,220,.18),transparent 54%); }
.title-gradient, .gradient-text {
  background: linear-gradient(115deg,#7654b8,#a58ae0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-visual > div { background: rgba(255,255,255,.88) !important; border-color: rgba(117,84,184,.15) !important; }
.hero-visual h2 { color: var(--text-primary) !important; }
.recipe-card, .step-card, .ingredients-panel, .camera-section, .chat-container {
  box-shadow: var(--shadow-card);
}
.recipe-card { border-radius: 18px; }
.recipe-card:hover { transform: translateY(-4px); }
.recipe-img { height: 178px; }
.recipe-info { padding: 18px; }
.recipe-tags span { background: #f2eef9; border-color: transparent; color: #70599c; }
body[data-theme="dark"] .recipe-tags span { background: #383047; color: #c7b8e7; }
.filter-chip:hover, .filter-chip.active {
  background: rgba(117,84,184,.1);
  border-color: rgba(117,84,184,.38);
  color: var(--primary);
}
.btn-primary, .btn-scan-nav { background: linear-gradient(130deg,#8060c2,#6849a9); }
.btn-primary:hover, .btn-scan-nav:hover { box-shadow: 0 8px 22px rgba(104,73,169,.24); }
.section-tag, .hero-badge { color: #7052aa; }
.hero-badge { background: rgba(255,255,255,.74); border-color: rgba(117,84,184,.15); }
.step-number { color: #8a6cc6; }
.cat-card.active, .cat-card:hover { border-color: #8a6cc6; box-shadow: 0 8px 24px rgba(117,84,184,.12); }

/* Immersive, full-bleed recipe hero. The brand lavender stays in the UI controls. */
.hero {
  min-height: 100svh;
  height: 100svh;
  padding: 0;
  display: block;
  isolation: isolate;
  background: #221c2d;
}
.hero-container {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  margin: 0;
  display: block;
}
.hero-visual {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  pointer-events: none;
}
.hero-photo-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: auto;
}
.hero-photo-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,rgba(24,19,32,.82) 0%,rgba(24,19,32,.64) 36%,rgba(24,19,32,.14) 72%,rgba(24,19,32,.08) 100%),linear-gradient(0deg,rgba(24,19,32,.44),transparent 35%);
}
.hero-visual > .hero-photo-stage {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.hero-photo-stage > .relative {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  background: #382f40;
}
.hero-food-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
  transform: translate3d(var(--drag-x,0),0,0) scale(1.07);
  transform-origin: center;
  will-change: transform;
  animation: hero-photo-arrive .8s ease both, hero-photo-drift 20s ease-in-out infinite alternate;
}
.hero-photo-stage { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.hero-photo-stage.is-dragging { cursor: grabbing; }
.hero-photo-stage.is-dragging .hero-food-photo { transition: none; }
.hero-photo-stage.is-paused .hero-food-photo { animation-play-state: paused; }
.hero-photo-stage:focus-visible { outline: 2px solid #c6b4f1; outline-offset: -5px; }
.hero-food-photo.slide-next {
  animation: hero-photo-arrive .8s ease both, hero-photo-drift 20s ease-in-out infinite alternate, hero-slide-in-from-right .42s cubic-bezier(.2,.7,.2,1);
}
.hero-food-photo.slide-previous {
  animation: hero-photo-arrive .8s ease both, hero-photo-drift 20s ease-in-out infinite alternate, hero-slide-in-from-left .42s cubic-bezier(.2,.7,.2,1);
}
@keyframes hero-slide-in-from-right {
  from { transform: translate3d(calc(var(--drag-x,0px) + 3vw),0,0) scale(1.07); }
  to { transform: translate3d(var(--drag-x,0px),0,0) scale(1.07); }
}
@keyframes hero-slide-in-from-left {
  from { transform: translate3d(calc(var(--drag-x,0px) - 3vw),0,0) scale(1.07); }
  to { transform: translate3d(var(--drag-x,0px),0,0) scale(1.07); }
}
.hero-slide-indicator {
  position: absolute;
  z-index: 3;
  bottom: 30px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
  pointer-events: none;
}
.hero-slide-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  transition: width .22s ease, background .22s ease;
}
.hero-slide-indicator span.active { width: 20px; background: #c6b4f1; }
.hero-recipe-meta {
  position: absolute;
  z-index: 4;
  right: max(32px,calc((100vw - 1200px)/2));
  bottom: 56px;
  width: min(300px,calc(100vw - 48px));
  padding: 18px 20px;
  color: #fff;
  background: rgba(31,25,41,.64);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  pointer-events: none;
}
.hero-recipe-meta-label { display: block; margin-bottom: 6px; color: #d6c5f7; font-size: .65rem; font-weight: 800; letter-spacing: .16em; }
.hero-recipe-meta h2 { margin: 0 0 11px; color: #fff !important; font: 600 1.18rem var(--font-body); }
.hero-recipe-meta-details { display: flex; gap: 8px; flex-wrap: wrap; }
.hero-recipe-meta-details span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: rgba(255,255,255,.9); background: rgba(255,255,255,.1); border-radius: 999px; font-size: .76rem; }
.hero-recipe-meta-details i { color: #d6c5f7; font-style: normal; }
.hero-motion-toggle {
  position: absolute;
  z-index: 5;
  top: clamp(88px,12vh,124px);
  right: max(32px,calc((100vw - 1200px)/2));
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: rgba(255,255,255,.92);
  background: rgba(31,25,41,.48);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.hero-motion-toggle:hover { background: rgba(31,25,41,.72); transform: scale(1.05); }
.hero-motion-toggle:focus-visible { outline: 2px solid #d6c5f7; outline-offset: 3px; }
.hero-motion-toggle svg { width: 15px; height: 15px; }
@keyframes hero-photo-arrive {
  from { opacity: .35; }
  to { opacity: 1; }
}
@keyframes hero-photo-drift {
  from { transform: translate3d(var(--drag-x,0),0,0) scale(1.07); object-position: center 48%; }
  to { transform: translate3d(var(--drag-x,0),0,0) scale(1.13); object-position: center 54%; }
}
.hero-photo-caption {
  position: absolute;
  z-index: 4;
  top: 112px;
  right: clamp(24px,7vw,110px);
  display: grid;
  gap: 5px;
  min-width: 205px;
  padding: 14px 18px;
  color: #fff;
  background: rgba(32,26,42,.42);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 13px;
  backdrop-filter: blur(14px);
}
.hero-photo-caption p { color: rgba(255,255,255,.72); font-size: .66rem; font-weight: 700; letter-spacing: .16em; }
.hero-photo-caption h2 { color: #fff !important; font: 600 1rem var(--font-body); }
.hero-photo-caption span { color: #e4d8ff; font-size: .78rem; }
.hero-recipe-switcher {
  position: absolute;
  z-index: 4;
  right: clamp(24px,7vw,110px);
  bottom: 42px;
  display: flex;
  gap: 8px;
  padding: 7px;
  background: rgba(30,24,40,.5);
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}
.hero-recipe-switcher button {
  padding: 10px 15px;
  color: rgba(255,255,255,.8);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font: 600 .8rem var(--font-body);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.hero-recipe-switcher button:hover { transform: translateY(-1px); color: white; }
.hero-recipe-switcher button.active { color: white; background: var(--primary); box-shadow: 0 5px 18px rgba(45,30,72,.28); }
.hero-ingredient-tags {
  position: absolute;
  z-index: 4;
  left: clamp(24px,7vw,110px);
  bottom: 44px;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.hero-ingredient-tags span {
  padding: 7px 12px;
  color: #fff;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 999px;
  font-size: .75rem;
  backdrop-filter: blur(10px);
}
.hero-content {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: max(24px,calc((100vw - 1200px)/2));
  width: min(610px,55vw);
  padding: 0;
  transform: translateY(-47%);
}
.hero-content h1 { color: #fff; font-size: clamp(3rem,6.4vw,6rem); line-height: .99; letter-spacing: -.035em; }
.hero-content .title-gradient { background: linear-gradient(110deg,#ddcffb,#a990e0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-content .title-accent { color: #fff; }
.hero-content .hero-desc { max-width: 475px; color: rgba(255,255,255,.82); }
.hero-content .hero-note { margin-top: 22px; color: rgba(255,255,255,.7); font-size: .84rem; }
.hero-badge { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.24); backdrop-filter: blur(10px); }
.hero-badge .badge-dot { background: #d4c1ff; }
.hero-content .btn-secondary { color: #fff; border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.08); }
.hero-content .btn-secondary:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.64); }
.hero-scroll-hint { z-index: 4; bottom: 24px; left: 50%; color: rgba(255,255,255,.72); }
.hero-scroll-hint .scroll-dot { border-color: rgba(255,255,255,.72); }
#app:has(#page-home.active) .navbar:not(.scrolled) {
  color: #fff;
  background: linear-gradient(180deg,rgba(28,22,36,.56),rgba(28,22,36,0));
  border-color: transparent;
}
#app:has(#page-home.active) .navbar:not(.scrolled) .nav-logo,
#app:has(#page-home.active) .navbar:not(.scrolled) .nav-link,
#app:has(#page-home.active) .navbar:not(.scrolled) .theme-toggle,
#app:has(#page-home.active) .navbar:not(.scrolled) .btn-avatar { color: #fff; }
#app:has(#page-home.active) .navbar:not(.scrolled) .nav-logo span { background-image: linear-gradient(120deg,#fff,#ddcffb); }
#app:has(#page-home.active) .navbar:not(.scrolled) .nav-link.active { color: #fff; background: rgba(255,255,255,.12); }
#app:has(#page-home.active) .navbar:not(.scrolled) .theme-toggle,
#app:has(#page-home.active) .navbar:not(.scrolled) .btn-avatar { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); }

@media (min-width: 980px) {
  .resep-header { text-align: left; max-width: 1200px; margin: 0 auto; padding-left: 24px; }
  .resep-filters { align-items: start; }
  .filter-chips { gap: 9px; }
  .recipes-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
  .recipes-grid .recipe-card { display: grid; grid-template-columns: minmax(140px,38%) 1fr; min-height: 184px; }
  .recipes-grid .recipe-img { grid-column: 1; grid-row: 1 / span 2; height: 100%; min-height: 184px; }
  .recipes-grid .recipe-info { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .recipes-grid .recipe-badge-diff { left: calc(38% + 12px); }
}

@media (max-width: 600px) {
  .recipe-img { height: 160px; }
}

@media (max-width: 900px) {
  .hero { min-height: 92svh; height: 92svh; }
  .hero-content { top: auto; bottom: 122px; left: 24px; width: min(640px,calc(100% - 48px)); transform: none; }
  .hero-content h1 { font-size: clamp(2.6rem,9vw,4.7rem); }
  .hero-content .hero-desc { max-width: 560px; }
  .hero-photo-caption { top: 88px; right: 18px; min-width: 0; padding: 10px 13px; }
  .hero-photo-caption p { font-size: .57rem; }
  .hero-photo-caption h2 { font-size: .86rem; }
  .hero-recipe-switcher { right: 18px; bottom: 20px; gap: 2px; }
  .hero-recipe-switcher button { padding: 9px 11px; font-size: .72rem; }
  .hero-ingredient-tags { display: none; }
  .hero-scroll-hint { display: none; }
  .hero-photo-stage::before { background: linear-gradient(0deg,rgba(24,19,32,.85) 0%,rgba(24,19,32,.6) 40%,rgba(24,19,32,.12) 100%); }
}

@media (max-width: 600px) {
  .hero { min-height: max(810px,100svh); height: max(810px,100svh); }
  .hero-content { bottom: 130px; }
  .hero-content h1 { font-size: clamp(2.55rem,12vw,3.6rem); }
  .hero-content .hero-desc { font-size: .98rem; margin-bottom: 22px; }
  .hero-content .hero-cta { flex-direction: row; gap: 10px; }
  .hero-content .btn-primary, .hero-content .btn-secondary { width: auto; padding: 12px 14px; font-size: .78rem; }
  .hero-recipe-switcher { left: 18px; right: auto; bottom: 22px; }
}

/* Keep the hero copy and floating controls in separate, predictable zones. */
.hero-content .hero-note,
.hero-ingredient-tags,
.hero-photo-stage > .relative > .pointer-events-none.absolute.bottom-3.left-3 {
  display: none;
}
.hero-content { width: min(800px, 62vw); }
.hero-content h1 { font-size: clamp(3rem,4.35vw,5.1rem); line-height: 1.02; }
.hero-content .hero-badge { margin-bottom: 14px; padding: 6px 12px; font-size: .78rem; letter-spacing: .01em; }
#app:has(#page-home.active) .navbar { border: 0 !important; box-shadow: none; }
.hero-photo-caption { right: clamp(24px,5vw,76px); }
.hero-recipe-switcher { right: clamp(24px,5vw,76px); }

@media (max-width: 900px) {
  .hero { min-height: max(820px,100svh); height: max(820px,100svh); }
  .hero-content {
    top: 104px;
    bottom: 104px;
    left: 24px;
    width: min(620px,calc(100% - 48px));
    transform: none;
  }
  .hero-content h1 { font-size: clamp(2.7rem,7.2vw,4.4rem); line-height: 1.02; }
  .hero-content .hero-desc { max-width: 500px; margin: 18px 0 22px; }
  .hero-content .hero-cta { flex-wrap: wrap; gap: 10px; }
  .hero-content .btn-primary, .hero-content .btn-secondary { min-height: 48px; }
  .hero-recipe-meta { right: 18px; bottom: 82px; width: min(280px,calc(100vw - 36px)); padding: 13px 15px; }
  .hero-recipe-meta h2 { font-size: 1rem; margin-bottom: 8px; }
  .hero-recipe-meta-details span { padding: 5px 8px; font-size: .7rem; }
  .hero-photo-caption { top: 88px; right: 18px; }
  .hero-recipe-switcher { left: 18px; right: 18px; bottom: 20px; justify-content: center; }
  .hero-photo-stage .relative > button { display: none; }
}

@media (max-width: 600px) {
  .hero { min-height: max(880px,100svh); height: max(880px,100svh); }
  .hero-content { top: 102px; bottom: 110px; left: 18px; width: calc(100% - 36px); }
  .hero-content h1 { font-size: clamp(2.45rem,10.5vw,3.5rem); }
  .hero-content .hero-desc { max-width: 100%; font-size: .94rem; }
  .hero-content .hero-cta { display: grid; grid-template-columns: 1fr; }
  .hero-content .btn-primary, .hero-content .btn-secondary { width: 100%; justify-content: center; }
  .hero-recipe-meta { right: 16px; bottom: 76px; width: min(270px,calc(100vw - 32px)); }
  .hero-photo-caption { top: 18px; right: 16px; padding: 8px 11px; }
  .hero-photo-caption p { display: none; }
  .hero-photo-caption h2 { font-size: .78rem; }
  .hero-photo-caption span { font-size: .68rem; }
  .hero-recipe-switcher { left: 12px; right: 12px; bottom: 14px; gap: 2px; padding: 5px; }
  .hero-recipe-switcher button { flex: 1; padding: 10px 6px; font-size: .7rem; white-space: nowrap; }
}

/* The five-ingredient cards keep their full image and readable text on desktop. */
@media (min-width: 980px) {
  .recipes-grid.mini { grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); }
  .recipes-grid.mini .recipe-card { display: block; min-height: 0; }
  .recipes-grid.mini .recipe-img { height: 178px; min-height: 0; }
  .recipes-grid.mini .recipe-info { padding: 18px; }
}

/* Prevent the quick-recipe time badge from squeezing or clipping its title. */
.qr-item { min-height: 82px; overflow: visible; }
.qr-photo { flex: 0 0 52px; }
.qr-info { min-width: 0; }
.qr-name { overflow-wrap: anywhere; }
.qr-time { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 480px) {
  .qr-item { gap: 10px; padding: 12px; }
  .qr-photo { width: 44px; height: 44px; flex-basis: 44px; }
  .qr-time { padding: 4px 7px; font-size: .72rem; }
}

@media (max-width: 1100px) {
  .navbar { padding-inline: clamp(12px,3vw,24px); }
  .nav-container { min-width: 0; gap: 12px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    position: fixed;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    padding: 16px;
    gap: 4px;
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--border);
    z-index: 999;
  }
  .nav-links.open .nav-link,
  #app:has(#page-home.active) .navbar:not(.scrolled) .nav-links.open .nav-link { color: var(--text-primary); }
  .nav-links.open .nav-link.active { color: var(--primary); background: var(--bg-surface); }
  .nav-actions { flex: 0 0 auto; gap: 8px; }
  .btn-hamburger { display: flex; color: currentColor; }
  .btn-hamburger span { background: currentColor; }
  .btn-scan-nav { width: 40px; height: 40px; flex: 0 0 40px; justify-content: center; padding: 0; font-size: 0; }
  .btn-scan-nav span { display: none !important; }
  .btn-scan-nav::before { content: "+"; font-size: 1.35rem; line-height: 1; }
}

@media (max-width: 480px) {
  .nav-logo { gap: 7px; font-size: 1.18rem; }
  .logo-icon { width: 32px; height: 32px; }
  .nav-actions { gap: 6px; }
  .theme-toggle { width: 38px; min-height: 38px; padding: 0; }
  .theme-toggle span { display: none; }
  .btn-avatar, .btn-hamburger { width: 36px; height: 38px; justify-content: center; align-items: center; }
  .btn-hamburger { padding: 7px; }
}

@media (max-width: 600px) {
  .hero-motion-toggle { top: 84px; right: 16px; width: 36px; height: 36px; }
}