/* ============================================================
   Ürün Detay Modalı — bottom sheet (mobil) / ortalı modal (masaüstü)
   İçerik _detail fragment'i olarak JS ile #pdModalBody'e basılır.
   ============================================================ */
.pd-modal {
    position: fixed;
    inset: 0;
    z-index: 200;                 /* header (~50) + bottom-nav (~60) üstünde */
    display: flex;
    align-items: flex-end;        /* mobil: alttan yükselir */
    justify-content: center;
    /* Kenarlarda + altta birkaç px boşluk → tam-ekran değil, yüzen "modal" hissi.
       env(safe-area) çentikli telefonlarda home-bar'a saygı duyar. */
    padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
}
.pd-modal[hidden] { display: none; }

.pd-modal__backdrop {
    position: absolute;
    inset: 0;
    /* Buzlu cam: blur + saturate; düz siyah yerine alttan (sheet'in yükseldiği
       yönden) hafif marka-tonlu bir parıltı → premium his. */
    background:
        radial-gradient(130% 92% at 50% 100%,
            color-mix(in srgb, var(--color-primary, #c8a97e) 24%, transparent) 0%,
            transparent 58%),
        rgba(8, 10, 16, 0.56);
    -webkit-backdrop-filter: blur(6px) saturate(1.12);
    backdrop-filter: blur(6px) saturate(1.12);
    opacity: 0;
    transition: opacity 0.34s ease;
}
.pd-modal.is-open .pd-modal__backdrop { opacity: 1; }

.pd-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 93dvh;
    background: var(--color-bg, #fff);
    border-radius: 24px;                 /* dört köşe yuvarlak (yüzen sheet) */
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36), 0 2px 10px rgba(0, 0, 0, 0.20);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.40s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
    outline: none;
}
/* İnce gradient kenar çizgisi — markadan (primary→secondary) türeyen, mask
   tekniğiyle 1.5px halka. İçeriği bozmaz; sadece kenarda parlar. */
.pd-modal__sheet::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-primary, #c8a97e) 92%, #fff) 0%,
        color-mix(in srgb, var(--color-primary, #c8a97e) 28%, transparent) 32%,
        transparent 50%,
        color-mix(in srgb, var(--color-secondary, var(--color-primary, #c8a97e)) 55%, transparent) 76%,
        color-mix(in srgb, var(--color-secondary, var(--color-primary, #c8a97e)) 88%, #fff) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 8;
}
.pd-modal.is-open .pd-modal__sheet { transform: translateY(0); }
.pd-modal.is-dragging .pd-modal__sheet { transition: none; }

/* Sürükleme tutamağı (mobil) */
.pd-modal__grip {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: grab;
    touch-action: none;
}
.pd-modal__grip span {
    width: 42px; height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Kapat düğmesi (sağ üst) */
.pd-modal__close {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 6;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.36);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}
.pd-modal__close:hover { background: rgba(0, 0, 0, 0.52); }
.pd-modal__close:active { transform: scale(0.90); }

/* Kaydırınca beliren buzlu-cam başlık şeridi — ürün adı sabitlenir; mevcut
   kapat düğmesi (z üstte) bunun üzerinde durur. Tema-uyumlu (bg + text var). */
.pd-modal__topbar {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 0 60px 0 20px;             /* sağda kapat düğmesine yer */
    border-radius: 24px 24px 0 0;
    background: color-mix(in srgb, var(--color-bg, #fff) 76%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #c8a97e) 26%, transparent);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: none;
}
.pd-modal.is-scrolled .pd-modal__topbar {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.pd-modal__topbar-title {
    font-family: var(--font-display, inherit);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    letter-spacing: 0.1px;
    color: var(--color-text, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Kaydırınca sürükleme tutamağı solar (başlık şeridi devralır) */
.pd-modal__grip { transition: opacity 0.2s ease; }
.pd-modal.is-scrolled .pd-modal__grip { opacity: 0; }

.pd-modal__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;              /* Firefox — çubuk gizli, scroll açık */
    -ms-overflow-style: none;           /* eski Edge/IE */
}
.pd-modal__scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* WebKit/Blink */
.pd-modal__body { min-height: 60px; }

/* Fetch sırasında spinner katmanı */
.pd-modal__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg, #fff);
    z-index: 4;
}
.pd-modal.is-loaded .pd-modal__spinner { display: none; }
.pd-modal__spin {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(128, 128, 128, 0.22);
    border-top-color: var(--color-primary, #c8a97e);
    animation: pdModalSpin 0.7s linear infinite;
}
@keyframes pdModalSpin { to { transform: rotate(360deg); } }

/* Modal içindeki detay hero'su köşe kırpması sheet'e uyar. Detay kartı
   sayfadakiyle aynı .pd-* stillerini kullanır — ekstra override gerekmez. */
.pd-modal .pd-hero { border-radius: 0; }

/* Sayfa scroll kilidi — modal açıkken body sabitlenir (top JS ile set edilir) */
body.pd-modal-open {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

/* Garsona Göster modalı, ürün modalının üstünde kalsın (body'ye taşınır) */
body > #waiterHelpModal.waiter-help-backdrop { z-index: 260; }

/* ── Masaüstü / geniş tablet: ortalı modal ─────────────────────────── */
@media (min-width: 768px) {
    .pd-modal { align-items: center; padding: 28px; }
    .pd-modal__sheet {
        max-width: 560px;
        max-height: 88dvh;
        border-radius: 22px;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
        transform: translateY(20px) scale(0.98);
        opacity: 0;
        transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.24s ease;
    }
    .pd-modal.is-open .pd-modal__sheet { transform: translateY(0) scale(1); opacity: 1; }
    .pd-modal.is-dragging .pd-modal__sheet { transition: none; }
    .pd-modal__grip { display: none; }         /* masaüstünde sürükleme yok */
}

/* ── Hareket azaltma tercihi ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pd-modal__sheet,
    .pd-modal__backdrop { transition: opacity 0.18s ease; }
    .pd-modal__sheet { transform: none; opacity: 1; }
    .pd-modal:not(.is-open) .pd-modal__sheet { opacity: 0; }
}