/* ============================================================
   Müşteri menüsü — duyuru penceresi + "telefona ekle" kartı
   Views/Shared/_MenuDuyuru.cshtml ve wwwroot/js/qrs/menu-pwa.js ile gelir.

   Hareket dili menu.css'ten ödünç alınır (--m-ease-cekmece / --m-sure-*);
   dosya tek başına yüklenirse de çalışsın diye her değişkenin yedeği var.
   ============================================================ */

/* ---------- Duyuru penceresi ---------- */

.m-duyuru{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  /* Telefonda alt çubuk kartı kesmesin */
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
}
.m-duyuru[hidden]{display:none}

.md-ortu{
  position:absolute;inset:0;
  background:rgba(23,22,26,.56);
  opacity:0;
  transition:opacity 180ms var(--ease,cubic-bezier(.2,.7,.2,1));
}
@supports (backdrop-filter:blur(2px)){
  .md-ortu{backdrop-filter:blur(3px) saturate(1.05)}
}
.m-duyuru.acik .md-ortu{opacity:1}

.md-kart{
  position:relative;
  width:min(100%,400px);
  max-height:min(86vh,640px);
  overflow:auto;
  overscroll-behavior:contain;
  background:var(--white,#FFFDF9);
  color:var(--ink,#17161A);
  border:1px solid var(--line,#D8D0BF);
  border-radius:20px;
  /* Gerçek gölge: kaydırma + yumuşak dağılım. Renkli hale değil. */
  box-shadow:0 18px 44px -18px rgba(23,22,26,.45), 0 2px 6px rgba(23,22,26,.08);

  opacity:0;
  transform:translateY(10px) scale(.97);
  transition:opacity 220ms var(--m-ease-cekmece,cubic-bezier(.22,1,.36,1)),
             transform 220ms var(--m-ease-cekmece,cubic-bezier(.22,1,.36,1));
  /* Pencere ekranın ortasında durur, bir tetiğe bağlı değil: merkez doğru köken. */
  transform-origin:center;
}
.m-duyuru.acik .md-kart{opacity:1;transform:none}

/* Kartın kendi kaydırma çubuğu: tarayıcı varsayılanı kağıt dünyasına ait değil. */
.md-kart{scrollbar-width:thin;scrollbar-color:var(--line-2,#C7BEA9) transparent}
.md-kart::-webkit-scrollbar{width:8px}
.md-kart::-webkit-scrollbar-track{background:transparent}
.md-kart::-webkit-scrollbar-thumb{background:var(--line-2,#C7BEA9);border-radius:99px;border:2px solid var(--white,#FFFDF9)}

/* Kapatma — görünen daire 40px, dokunma alanı 44px (::after ile genişletilir). */
.md-kapat{
  position:absolute;top:10px;right:10px;z-index:2;
  width:40px;height:40px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line,#D8D0BF);
  background:var(--paper,#F6F1E7);
  color:var(--ink-2,#34323B);
  transition:transform 160ms var(--ease,cubic-bezier(.2,.7,.2,1)),
             background-color 160ms var(--ease,cubic-bezier(.2,.7,.2,1));
}
.md-kapat::after{content:"";position:absolute;inset:-2px;border-radius:50%}
.md-kapat svg{width:17px;height:17px}
.md-kapat:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .md-kapat:hover{background:var(--paper-2,#EDE6D8)}
}

/* Görsel yuvası: oran sabit, dosya inmeden de yerini tutar — kart zıplamaz. */
.md-gorsel{
  aspect-ratio:16/9;
  background:var(--paper-2,#EDE6D8);
  border-bottom:1px solid var(--line,#D8D0BF);
  border-radius:19px 19px 0 0;
  overflow:hidden;
}
.md-gorsel img{width:100%;height:100%;object-fit:cover}

.md-govde{padding:22px 20px 20px}
.md-gorsel + .md-govde{padding-top:18px}

.md-bas{display:flex;align-items:flex-start;gap:12px;padding-right:44px}
.md-mark{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--paper-2,#EDE6D8);
  color:var(--ink,#17161A);
}
.md-mark svg{width:17px;height:17px}
.md-bas h2{
  margin:0;flex:1;min-width:0;
  font-family:var(--font-display,'Fraunces',Georgia,serif);
  font-size:21px;font-weight:600;line-height:1.18;letter-spacing:-.02em;
  text-wrap:balance;
  /* Uzun başlık kırpılmaz; kart yerine kaydırılır. */
  overflow-wrap:anywhere;
}

.md-metin{
  margin:12px 0 0;
  font-size:14.5px;line-height:1.55;
  color:var(--ink-2,#34323B);
  overflow-wrap:anywhere;
}

.md-kod{
  margin:14px 0 0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:10px;
  background:var(--paper-2,#EDE6D8);
  border:1px dashed var(--line-2,#C7BEA9);
}
.md-kod span{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3,#5C5966);
}
.md-kod b{
  font-family:var(--font-mono,'JetBrains Mono',Consolas,monospace);
  font-size:15px;font-weight:600;letter-spacing:.06em;
  color:var(--ink,#17161A);
  /* Kod seçilebilir olmalı: misafir kopyalayıp DoyHadi'ye yapıştırıyor. */
  user-select:all;-webkit-user-select:all;
}

.md-sure{
  margin:12px 0 0;
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;line-height:1.4;
  color:var(--ink-3,#5C5966);
  font-variant-numeric:tabular-nums;
}
.md-sure svg{width:14px;height:14px;flex:0 0 auto}

.md-islem{display:grid;gap:8px;margin-top:20px}
.md-islem .btn{height:46px;font-size:14.5px}
/* Birincil eylem mürekkep zeminde: vurgu rengi işletmeye göre değişiyor,
   beyaz yazıyla 4.5:1'i tutacağının garantisi yok. Mürekkep her temada tutar. */
.md-islem .md-birincil{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;
}
.md-islem .md-birincil svg{width:15px;height:15px;opacity:.8}

/* ---------- Telefona ekle (Bilgi çekmecesi içinde) ---------- */

.m-pwa[hidden]{display:none}
.m-pwa-ipucu[hidden],.m-pwa-dugme[hidden]{display:none}

.m-pwa-dugme{
  width:100%;height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.m-pwa-dugme svg{width:16px;height:16px}

.m-pwa-ipucu{
  font-size:13.5px;line-height:1.5;
  color:var(--ink-2,#34323B);
  white-space:normal;
}
.m-pwa-ipucu b{font-weight:600}

/* ---------- Odak ---------- */
/* Tarayıcının mavi halkası bu dünyaya ait değil; halka mürekkepten çizilir. */
.m-duyuru :focus-visible,
.m-pwa :focus-visible{
  outline:2px solid var(--ink,#17161A);
  outline-offset:2px;
  border-radius:10px;
}
.md-kapat:focus-visible{border-radius:50%}

/* ---------- Dar ekran ---------- */
@media (max-width:360px){
  .md-govde{padding:20px 16px 16px}
  .md-bas h2{font-size:19px}
  .md-islem .btn{height:44px}
}

/* ---------- Azaltılmış hareket ---------- */
/* Hareket kalkar, belirme kalır: kartın birdenbire var olması da rahatsız eder. */
@media (prefers-reduced-motion:reduce){
  .md-kart{
    transform:none;
    transition:opacity 150ms linear;
  }
  .m-duyuru.acik .md-kart{transform:none}
  .md-ortu{transition:opacity 150ms linear}
  .md-kapat{transition:none}
  .md-kapat:active{transform:none}
}