/* lotus-ui v3 (2026-10-17): v2 + WhatsApp green #1a8744 -> #178040 (4.23 -> 4.63:1 on the header cream, 5.0:1 under white on the bar). */
/* Organizasyon Lotus — shared conversion layer (2026-10-17).
   Header reservation CTA, mobile action bar, mobile folds, homepage mobile rows, FAQ accordion.
   Palette = knowledge/brands/organizasyonlotus/TOKENS.json (E-Commerce repo).
   Linked on every page by scripts/lotus_nav_sync.py. /assets/* is cached immutable for a
   year: any change ships as a NEW filename (lotus-ui.v2.css) — bump UI_CSS there and re-run. */
:root {
  --l-primary: #d96270;
  --l-primary-hover: #c45260;
  --l-secondary: #e8a0a8;
  --l-henna: #9c2a2a;
  --l-warm: #fef5f2;
  --l-ink: #2c1810;
  --l-caption: #6b5450;
  /* WhatsApp affordance, darkened from the app green so white text holds 4.5:1. */
  --l-wa: #178040;
  --l-wa-hover: #157038;
}

/* ---------- Header ---------- */
.lotus-hdr-rez,
.lotus-hdr-wa { display: none; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; border-radius: 999px; font-size: .875rem; font-weight: 600; line-height: 1; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.lotus-hdr-rez { background: var(--l-primary); color: #fff; padding: .8rem 1.15rem; }
.lotus-hdr-rez:hover { background: var(--l-primary-hover); box-shadow: 0 10px 24px -12px rgba(217, 98, 112, .85); }
.lotus-hdr-wa { width: 2.75rem; height: 2.75rem; border: 1.5px solid rgba(23, 128, 64, .4); color: var(--l-wa); }
.lotus-hdr-wa:hover { border-color: var(--l-wa); background: rgba(23, 128, 64, .07); }
.lotus-hdr-wa span { display: none; }
@media (min-width: 640px) { .lotus-hdr-rez, .lotus-hdr-wa { display: inline-flex; } }
@media (min-width: 1024px) and (max-width: 1279px) { .lotus-desk-links { column-gap: 1.1rem; } }
@media (min-width: 1280px) { .lotus-hdr-wa { width: auto; padding: 0 1rem; } .lotus-hdr-wa span { display: inline; } }

/* Mobile menu: reservation is the first thing in the panel. */
.lotus-menu-rez { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: 16px; background: var(--l-primary); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.lotus-menu-rez:hover { background: var(--l-primary-hover); }
.lotus-menu-rez small { display: block; font-weight: 400; font-size: .8rem; opacity: .92; margin-top: .2rem; }
.lotus-menu-rez svg { width: 1.35rem; height: 1.35rem; flex: none; }

/* ---------- Mobile action bar ---------- */
.lotus-bar { display: none; }
@media (max-width: 767px) {
  .lotus-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
    padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: rgba(254, 245, 242, .97); border-top: 1px solid rgba(232, 160, 168, .4);
    box-shadow: 0 -12px 30px -22px rgba(44, 24, 16, .45);
    transition: transform .2s ease;
  }
  .lotus-bar a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; border-radius: 999px; font-weight: 600; font-size: .95rem; color: #fff; }
  .lotus-bar-rez { background: var(--l-primary); }
  .lotus-bar-wa { background: var(--l-wa); }
  .lotus-typing .lotus-bar { transform: translateY(110%); }
  /* Reserve the bar's height so it never sits on the last line of the footer. */
  body { padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
  /* The bar carries WhatsApp; the homepage's floating button would sit on top of it. */
  .wa-float { display: none !important; }
  /* On the reservation page the form is the page: no bar, no reserved space. */
  body:has(#rezForm) { padding-bottom: 0; }
  body:has(#rezForm) .lotus-bar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lotus-bar { transition: none; } }

/* ---------- Mobile folds ([data-m-fold], behaviour in the nav block) ---------- */
.m-fold-btn { display: none; }
@media (max-width: 767px) {
  .m-fold.is-folded { max-height: var(--m-fold-h, 560px); overflow: hidden; position: relative; }
  .m-fold.is-folded::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none; background: linear-gradient(to bottom, rgba(254, 245, 242, 0), var(--m-fold-bg, #fef5f2) 85%); }
  .m-fold-btn {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin: -.25rem auto 2.5rem; padding: .7rem 1.4rem; min-height: 44px;
    border: 1.5px solid rgba(217, 98, 112, .45); border-radius: 999px; background: #fff;
    color: var(--l-primary); font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  }
  .m-fold-btn::after { content: '↓'; }
}

/* ---------- Homepage mobile rows ---------- */
.m-swipe-hint { display: none; }
@media (max-width: 767px) {
  .m-pad { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .m-tight-h2 { margin-bottom: 1.75rem !important; }
  .m-hide { display: none !important; }

  .lotus-hero { height: calc(100svh - 77px) !important; min-height: 560px !important; }
  .lotus-hero .m-hero-p { margin-bottom: 2rem !important; }
  .lotus-hero h1 { margin-bottom: 1.5rem !important; }

  /* Stacked full-height cards become one swipeable row. */
  .m-snap {
    display: flex !important; gap: .85rem; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    margin-left: -1.5rem; margin-right: -1.5rem; padding: 0 1.5rem .25rem; scroll-padding: 0 1.5rem;
    scrollbar-width: none;
  }
  .m-snap::-webkit-scrollbar { display: none; }
  .m-snap > * { flex: 0 0 82%; scroll-snap-align: start; margin: 0 !important; }
  .m-snap-card-img { height: 420px !important; }
  /* w-full would set the flex item's minimum width to 100% (replaced element): override it. */
  .m-snap-gallery > img { flex: 0 0 66%; width: 66% !important; min-width: 0; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
  .m-swipe-hint { display: block; text-align: center; font-size: .8rem; letter-spacing: .04em; color: var(--l-caption); margin-top: .9rem; }

  /* Side-by-side compact card instead of a full-width photo on top. */
  .m-row-card { flex-direction: row !important; align-items: flex-start !important; gap: 1rem !important; padding: 1rem !important; }
  .m-row-card > div:first-child { width: 96px !important; height: 96px !important; }
  .m-row-card h3 { font-size: 1.2rem !important; }
  .m-row-card p { margin-bottom: .5rem !important; }

  .m-short { height: 220px !important; }
  .m-short p { font-size: 1.5rem !important; }

  .m-steps { gap: 1.75rem !important; }
  .m-steps span { font-size: 2.25rem !important; margin-bottom: .5rem !important; }
  .m-steps h3 { margin-bottom: .4rem !important; }
}

/* ---------- FAQ accordion (/sss/) ---------- */
.lotus-faq > summary { list-style: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; cursor: pointer; }
.lotus-faq > summary::-webkit-details-marker { display: none; }
.lotus-faq > summary h2 { margin: 0; }
.lotus-faq > summary::after {
  content: ''; flex: none; width: .7rem; height: .7rem; margin-top: .7rem;
  border-right: 2px solid var(--l-primary); border-bottom: 2px solid var(--l-primary);
  transform: rotate(45deg); transition: transform .2s ease;
}
.lotus-faq[open] > summary::after { transform: rotate(-135deg); margin-top: 1rem; }
.lotus-faq > summary:focus-visible { outline: 2px solid var(--l-henna); outline-offset: 4px; border-radius: 4px; }
.lotus-faq > p { margin-top: .85rem; }
@media (prefers-reduced-motion: reduce) { .lotus-faq > summary::after { transition: none; } }

/* ---------- Tap targets (2026-10-17 audit) ----------
   Measured on the live site at 390px: text CTAs, footer links, the FAQ rows and the
   studio credit were 13-40px tall. Phones only; desktop layout is untouched. Height
   is added around the existing text, so nothing reflows except a few px of slack. */
@media (max-width: 767px) {
  main a.inline-flex, section a.inline-flex, section a.flex.items-center { min-height: 44px; }
  section a.inline-block.underline { padding-block: 10px; }
  nav[aria-label="Konum"] a { display: inline-flex; align-items: center; min-height: 44px; }
  .lotus-faq > summary { min-height: 44px; align-items: center; }
  .lotus-faq > summary::after, .lotus-faq[open] > summary::after { margin-top: 0; }
  footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  footer a.w-10.h-10 { width: 44px; height: 44px; }
  .cs-credit a { display: inline-block; padding-block: 16px; margin-block: -16px; }
}