/* =========================================================
   Marketing Mockups — ana sayfalara ilhamla eklenecek telefon
   içi mockup component'leri (tanıtım landing'den port).

   Kapsam:
     .mm-frame     — telefon çerçevesi + notch (ortak wrapper)
     .mm-screen    — 252×496 ekran (ortak inner)
     .mm-lw-*      — Yasa uyumu / beslenme telefon ekranı
     .mm-qr-*      — QR standee kartı
     .mm-ai-*      — AI asistan sohbet ekranı
     .mm-op-*      — Outlet picker (çoklu şube)

   Ana site tema değişkenleriyle (--brand-magenta) uyumlu,
   spesifik değerler (altın #C8A97E vb.) sabit hex.
   ========================================================= */

/* ---------- Ortak telefon çerçevesi ---------- */
.mm-stage{display:flex;justify-content:center;margin:1.5rem auto;position:relative;max-width:340px}
.mm-glow{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:76%;height:82%;border-radius:50%;filter:blur(48px);z-index:0;background:radial-gradient(circle,rgba(230,22,115,.18),rgba(230,22,115,.04) 55%,transparent 72%);pointer-events:none}
.mm-phone{position:relative;z-index:1;width:270px;border-radius:42px;padding:9px;background:linear-gradient(#0b0b0b,#1a1a1a);box-shadow:0 1px 0 rgba(245,241,232,.06) inset,0 44px 90px -34px rgba(0,0,0,.92),0 0 0 1px rgba(0,0,0,.6)}
.mm-notch{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:60px;height:5px;border-radius:3px;background:rgba(245,241,232,.14);z-index:9}
.mm-screen{position:relative;border-radius:34px;overflow:hidden;width:252px;height:496px;background:#0d0d0d}

/* =========================================================
   1) Yasa uyumu ürün ekranı (.mm-lw-*)
   Büyük kalori + 4 alerjen ızgarası + Denetime hazır
   ========================================================= */
.mm-lw-inner{position:absolute;inset:0;background:#fff;padding:22px 18px 20px;display:flex;flex-direction:column;overflow:hidden;text-align:left}
.mm-lw-brand{font-family:'Playfair Display',Georgia,serif;font-size:17px;color:#1a1a1a;text-align:center;margin-bottom:4px}
.mm-lw-brand span{display:block;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.42);margin-top:4px}
.mm-lw-badge{align-self:center;margin:14px 0 16px;display:inline-flex;align-items:center;gap:6px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#e61673;padding:6px 12px;border-radius:999px;background:rgba(230,22,115,.08);border:1px solid rgba(230,22,115,.22)}
.mm-lw-badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mm-lw-dish{font-family:'Playfair Display',Georgia,serif;font-size:20px;color:#1a1a1a;text-align:center;margin:0 0 4px;line-height:1.15}
.mm-lw-cat{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.42);text-align:center;margin-bottom:16px;font-weight:600}
.mm-lw-kcal{text-align:center;margin-bottom:16px}
.mm-lw-kcal .n{font-family:'Inter Tight','Inter',sans-serif;font-size:44px;font-weight:800;color:#1a1a1a;line-height:1;letter-spacing:-.02em}
.mm-lw-kcal .u{display:block;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:rgba(0,0,0,.42);margin-top:5px;font-weight:600}
.mm-lw-alg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:#faf7f2;border-radius:12px;border:1px solid rgba(0,0,0,.06)}
.mm-lw-alg-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.mm-lw-alg-ic{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid rgba(0,0,0,.06)}
.mm-lw-alg-ic svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-lw-alg-ic.gluten{color:#c58a3a}
.mm-lw-alg-ic.dairy{color:#4e7bb6}
.mm-lw-alg-ic.soy{color:#8a5a2e}
.mm-lw-alg-ic.egg{color:#c8a97e}
.mm-lw-alg-item span{font-size:8.5px;color:rgba(0,0,0,.55);font-weight:600;letter-spacing:.02em;text-align:center}
.mm-lw-foot{margin-top:auto;padding-top:12px;text-align:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#c4145f;font-weight:700}

/* =========================================================
   2) QR standee kartı (.mm-qr-*)
   Marka + QR kod (JS-inject) + "Menü için okutun"
   ========================================================= */
.mm-qr-scene{width:264px;height:356px;border-radius:26px;background:linear-gradient(160deg,#efe7d9,#dccbb4);display:flex;align-items:center;justify-content:center;box-shadow:0 44px 90px -34px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.4)}
.mm-qr-card{width:172px;background:#fff;border-radius:16px;padding:18px 16px 16px;text-align:center;box-shadow:0 22px 44px -18px rgba(0,0,0,.45);position:relative}
.mm-qr-card::before{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:34px;height:9px;border-radius:0 0 6px 6px;background:#d8cbb2}
.mm-qr-brand{font-family:'Playfair Display',Georgia,serif;font-size:19px;color:#1a1a1a;line-height:1}
.mm-qr-brand span{display:block;font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:rgba(0,0,0,.42);margin-top:5px}
.mm-qr-code{width:112px;height:112px;margin:14px auto 12px}
.mm-qr-cta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#876F46;font-weight:700}

/* =========================================================
   3) AI asistan sohbet ekranı (.mm-ai-*)
   Magenta avatar + kullanıcı bubble + kart cevap
   ========================================================= */
.mm-ai-inner{position:absolute;inset:0;background:linear-gradient(180deg,#faf6ee 0%,#f2ede0 100%);padding:24px 16px;display:flex;flex-direction:column;gap:12px;overflow:hidden;text-align:left}
.mm-ai-head{display:flex;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.07)}
.mm-ai-av{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#e61673,#c4145f);display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 6px 14px -6px rgba(230,22,115,.55)}
.mm-ai-av svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
.mm-ai-title{font-size:13px;font-weight:700;color:#1a1a1a;line-height:1.2}
.mm-ai-sub{font-size:10px;color:rgba(0,0,0,.5);margin-top:2px}
.mm-ai-msg{background:#fff;padding:11px 13px;border-radius:14px;border:1px solid rgba(0,0,0,.06);border-bottom-left-radius:4px;font-size:12.5px;line-height:1.5;color:#2a231c}
.mm-ai-msg.me{align-self:flex-end;background:linear-gradient(135deg,#e61673 0%,#c4145f 100%);color:#fff;border:0;border-bottom-right-radius:4px;border-bottom-left-radius:14px;max-width:82%}
.mm-ai-card{background:#fff;border-radius:14px;padding:12px;border:1px solid rgba(230,22,115,.14);box-shadow:0 8px 20px -12px rgba(230,22,115,.28)}
.mm-ai-card-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,.08);font-size:12px}
.mm-ai-card-row:last-child{border-bottom:0}
.mm-ai-card-row b{font-family:'Inter Tight','Inter',sans-serif;color:#1a1a1a;font-weight:700}
.mm-ai-card-row .v{color:#c4145f;font-weight:700;font-variant-numeric:tabular-nums}
.mm-ai-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.mm-ai-tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.mm-ai-tag.gf{background:#eef7f0;color:#2e7d52}
.mm-ai-tag.high{background:rgba(230,22,115,.10);color:#c4145f}
.mm-ai-tag.veg{background:#f0f6ec;color:#5f8770}
.mm-ai-foot{margin-top:auto;text-align:center;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#c4145f;font-weight:700}

/* =========================================================
   4) Outlet picker (.mm-op-*)
   Multi-şube seçim ekranı (Aurora branches)
   ========================================================= */
.mm-op-inner{position:absolute;inset:0;background:#fff;padding:24px 16px;display:flex;flex-direction:column;overflow:hidden}
.mm-op-title{font-family:'Playfair Display',Georgia,serif;font-size:21px;color:#1a1a1a;text-align:center}
.mm-op-sub{font-size:10px;color:rgba(0,0,0,.45);text-align:center;margin:3px 0 18px}
.mm-op-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;border:1px solid rgba(0,0,0,.08);margin-bottom:11px;box-shadow:0 6px 16px -10px rgba(0,0,0,.25);text-align:left}
.mm-op-thumb{width:52px;height:52px;border-radius:11px;flex:0 0 auto;box-shadow:0 4px 10px -4px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.14)}
.mm-op-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mm-op-name{display:block;font-size:14.5px;font-weight:600;color:#1a1a1a;line-height:1.2;letter-spacing:-.005em}
.mm-op-addr{display:block;font-size:11px;color:rgba(0,0,0,.5);line-height:1.3}
.mm-op-open{display:inline-flex;align-items:center;gap:4px;margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#2e7d52;background:#eef7f0;padding:3px 9px;border-radius:999px}
.mm-op-open::before{content:"";width:5px;height:5px;border-radius:50%;background:#2e7d52;flex:0 0 auto}
.mm-op-chev{width:14px;height:14px;color:rgba(0,0,0,.3);flex:0 0 auto}
.mm-op-chev svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2}

/* =========================================================
   Related Feature Card Grid — /beslenme-degerleri §4 + tekrar kullanılabilir
   3-4 kart yatay grid, ilgili sayfalara link
   ========================================================= */
.nd-related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.75rem}
@media (max-width:768px){.nd-related__grid{grid-template-columns:1fr;max-width:420px;margin:1.5rem auto 0}}
.nd-related__card{position:relative;display:flex;flex-direction:column;gap:.65rem;padding:1.4rem 1.35rem 1.25rem;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:16px;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 24px rgba(0,0,0,.16);text-decoration:none;color:inherit;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.nd-related__card:hover{transform:translateY(-2px);border-color:rgba(230,22,115,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 32px rgba(0,0,0,.22),0 0 22px rgba(230,22,115,.14)}
.nd-related__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#e61673,#c4145f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 16px -4px rgba(230,22,115,.32)}
.nd-related__ic svg{width:22px;height:22px}
.nd-related__title{font-family:'Inter Tight','Inter',sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.005em;color:var(--porcelain,#F5F1E8)}
.nd-related__desc{font-size:.85rem;line-height:1.5;color:rgba(245,241,232,.62)}
.nd-related__arrow{position:absolute;top:1.25rem;right:1.25rem;width:16px;height:16px;color:rgba(245,241,232,.35);transition:color .3s ease,transform .3s ease}
.nd-related__card:hover .nd-related__arrow{color:rgba(230,22,115,.9);transform:translateX(3px)}
/* Light tema override (page-detail) */
body.page-detail .nd-related__card{background:rgba(15,15,22,.03);border-color:rgba(15,15,22,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 24px rgba(0,0,0,.06)}
body.page-detail .nd-related__card:hover{border-color:rgba(230,22,115,.24);box-shadow:0 12px 32px rgba(0,0,0,.10),0 0 22px rgba(230,22,115,.10)}
body.page-detail .nd-related__title{color:#1a1a1a}
body.page-detail .nd-related__desc{color:rgba(0,0,0,.6)}
body.page-detail .nd-related__arrow{color:rgba(0,0,0,.35)}

/* =========================================================
   AI mockup grid (yapay-zeka sayfası — 3 asistan yan yana)
   ========================================================= */
.mm-ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:1100px;margin:2rem auto}
@media (max-width:900px){.mm-ai-grid{grid-template-columns:1fr;max-width:340px}}
.mm-ai-grid .mm-stage{margin:0 auto}
.mm-ai-grid .mm-phone{transform:scale(.9);transform-origin:center top}
@media (max-width:900px){.mm-ai-grid .mm-phone{transform:none}}