/* =========================================================
   QrMenum — Customer Menus (Çalışan Menüler)
   Real-customer screenshots showcase.

   Layout:
     - Section: light surface, soft tint background
     - Header: eyebrow + title + sub (left/center)
     - Featured: 3 phone-bezel cards (desktop), 1 (mobile)
     - Marquee: continuous horizontal scroll, infinite loop
     - CTA: "See all" link

   Card anatomy:
     .cm-card
       .cm-card__bezel      → rounded phone frame (520:1126 ratio = ~0.46)
         .cm-card__notch
         .cm-card__img      → object-fit cover
       .cm-card__meta       → sector chip + title + location
   ========================================================= */

.customer-menus {
  position: relative;
  padding: var(--sp-10) 0 var(--sp-9);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(230, 22, 115, 0.04) 0%, transparent 60%),
    var(--surface-tint);
  overflow: hidden;
}

.customer-menus__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--sp-8);
  padding: 0 var(--gutter);
}

.customer-menus__eyebrow {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--brand-magenta);
  margin-bottom: var(--sp-4);
}

.customer-menus__title {
  font-family: var(--ff-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-d-100);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
}

.customer-menus__title .accent {
  background: var(--grad-text-magenta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.customer-menus__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--ink-d-60);
  margin: 0;
}

/* ---------- Featured (3 büyük kart) ---------- */
.customer-menus__featured {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-7);
  max-width: var(--container-lg);
  margin: 0 auto var(--sp-9);
  padding: 0 var(--gutter);
  align-items: end;
}

.customer-menus__featured .cm-card {
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width: 880px) {
  .customer-menus__featured {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
  .customer-menus__featured .cm-card:nth-child(3) {
    display: none; /* mobilde 2 öne çıkan + marquee */
  }
}

@media (max-width: 520px) {
  .customer-menus__featured {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
  .customer-menus__featured .cm-card:nth-child(2),
  .customer-menus__featured .cm-card:nth-child(3) {
    display: none;
  }
}

/* ---------- Phone bezel card ---------- */
.cm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  transition: transform var(--dur-base) var(--ease-out);
}

.cm-card:hover {
  transform: translateY(-6px);
}

.cm-card__bezel {
  position: relative;
  width: 100%;
  aspect-ratio: 520 / 1126;
  background: #0a0a10;
  border-radius: 38px;
  padding: 10px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 -1px 0 rgba(0, 0, 0, 0.4) inset,
    0 18px 50px rgba(15, 15, 22, 0.18),
    0 4px 12px rgba(15, 15, 22, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cm-card__notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 20%;
  height: 18px;
  background: rgba(10, 10, 16, 0.53);
  border-radius: 14px;
  z-index: 2;
  pointer-events: none;
}

.cm-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  background: var(--surface-3);
}

/* Marquee içindeki kartlar küçük */
.customer-menus__marquee .cm-card {
  width: 180px;
  flex: 0 0 180px;
}
.customer-menus__marquee .cm-card__bezel {
  border-radius: 26px;
  padding: 7px;
}
.customer-menus__marquee .cm-card__img {
  border-radius: 19px;
}
.customer-menus__marquee .cm-card__notch {
  width: 30%;
  height: 12px;
  top: 10px;
}

/* ---------- Card meta (sector chip + title) ---------- */
.cm-card__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: 0 var(--sp-2);
}

.cm-card__sector {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-2);
  color: var(--ink-d-80);
  border: 1px solid var(--line);
}
.cm-card__sector--cafe        { background: #f6efe6; color: #6b4a22; border-color: #e6d8c1; }
.cm-card__sector--restaurant  { background: #e6f1eb; color: #1f5a3a; border-color: #c6dfd0; }
.cm-card__sector--hotel       { background: #e8eaf7; color: #2a3270; border-color: #c8cce8; }
.cm-card__sector--bar         { background: #1c1820; color: #e2d4ee; border-color: #2e2738; }
.cm-card__sector--fine_dining { background: #fce8f1; color: #b41464; border-color: #f4c5da; }

.cm-card__title {
  font-family: var(--ff-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-d-100);
  line-height: 1.3;
}

.cm-card__location {
  font-size: var(--fs-xs);
  color: var(--ink-d-60);
}

/* Marquee kart meta küçültme */
.customer-menus__marquee .cm-card__meta {
  display: none; /* marquee'de sade kalsın */
}

/* ---------- Marquee ---------- */
.customer-menus__marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0 0 var(--sp-8);
  padding: var(--sp-4) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.customer-menus__marquee-track {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: max-content;
  animation: cm-marquee 60s linear infinite;
  will-change: transform;
}

.customer-menus__marquee:hover .customer-menus__marquee-track {
  animation-play-state: paused;
}

@keyframes cm-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .customer-menus__marquee-track {
    animation: none;
  }
}

/* ---------- CTA ---------- */
.customer-menus__cta {
  display: flex;
  justify-content: center;
  padding: 0 var(--gutter);
}

.customer-menus__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background: var(--ink-d-100);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-card);
}

.customer-menus__cta-link:hover {
  transform: translateY(-2px);
  background: var(--brand-magenta);
  box-shadow: var(--shadow-card-hover), 0 8px 24px rgba(230, 22, 115, 0.25);
}

.customer-menus__cta-link svg {
  transition: transform var(--dur-base) var(--ease-out);
}

.customer-menus__cta-link:hover svg {
  transform: translateX(4px);
}

/* ---------- Full grid (detay sayfa) ---------- */
.customer-menus--full {
  padding: var(--sp-8) 0 var(--sp-9);
}

.customer-menus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-6) var(--sp-5);
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.customer-menus__grid .cm-card {
  max-width: 260px;
  margin: 0 auto;
}

@media (max-width: 520px) {
  .customer-menus__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-4) var(--sp-3);
  }
  .customer-menus__grid .cm-card__bezel {
    border-radius: 26px;
    padding: 6px;
  }
  .customer-menus__grid .cm-card__img {
    border-radius: 20px;
  }
}