/* ============================================================
   MEDYA ZİRVE — Tema önizleme barı + sahne
   ============================================================ */
:root { --mz-grad: linear-gradient(110deg, #a78bfa, #818cf8 45%, #22d3ee); --mz-bar-h: 60px; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: 'Space Grotesk', system-ui, sans-serif; background: #0a0a12; overflow: hidden; }

/* ---------- Üst bar ---------- */
.mz-bar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--mz-bar-h); z-index: 100;
    display: flex; align-items: center; gap: 1rem; padding: 0 1rem;
    background: rgba(12,12,20,.82); backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255,255,255,.08); color: #f4f4f8;
}
.mz-brand { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; font-weight: 700; }
.mz-brand-name { font-size: 1.02rem; letter-spacing: -.01em; }
.mz-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    padding: .25rem .55rem; border-radius: 100px; background: rgba(167,139,250,.16); color: #c4b5fd; border: 1px solid rgba(167,139,250,.3); }
.mzi { width: 15px; height: 15px; }

.mz-meta { display: flex; flex-direction: column; align-items: center; line-height: 1.1; margin: 0 auto; text-align: center; }
.mz-cat { font-size: .64rem; text-transform: uppercase; letter-spacing: .14em; color: #22d3ee; }
.mz-theme-name { font-size: .98rem; font-weight: 600; margin: .1rem 0 0; }

.mz-tools { display: flex; align-items: center; gap: .55rem; }
.mz-devices { display: flex; gap: .15rem; padding: .2rem; border-radius: 100px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.mz-dev { display: grid; place-items: center; width: 32px; height: 30px; border: 0; background: none; color: #9a9ab0; border-radius: 100px; cursor: pointer; transition: .2s; }
.mz-dev:hover { color: #fff; }
.mz-dev.active { background: var(--mz-grad); color: #fff; }
.mz-link { display: inline-flex; align-items: center; gap: .3rem; color: #c8c8d8; text-decoration: none; font-size: .86rem; font-weight: 500; padding: .5rem .7rem; border-radius: 100px; transition: .2s; white-space: nowrap; }
.mz-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.mz-order { display: inline-flex; align-items: center; gap: .4rem; background: var(--mz-grad); color: #fff; text-decoration: none; font-weight: 600; font-size: .88rem;
    padding: .55rem 1rem; border-radius: 100px; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(129,140,248,.7); transition: transform .25s, box-shadow .25s; }
.mz-order:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -8px rgba(129,140,248,.9); }

/* ---------- Sahne ---------- */
.mz-stage { position: fixed; inset: var(--mz-bar-h) 0 0 0; overflow-y: auto; overflow-x: hidden;
    background: #0a0a12 radial-gradient(60% 50% at 50% 0%, rgba(129,140,248,.10), transparent 70%);
    padding: 0; scroll-behavior: smooth; }
.mz-frame { width: 100%; min-height: 100%; margin: 0 auto; background: #fff; transition: max-width .45s cubic-bezier(.22,1,.36,1); overflow: hidden; }

.mz-stage[data-device="tablet"] { padding: 1.5rem; }
.mz-stage[data-device="tablet"] .mz-frame { max-width: 834px; min-height: calc(100% - 3rem); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.08); }

.mz-stage[data-device="mobile"] { padding: 1.5rem; }
.mz-stage[data-device="mobile"] .mz-frame { max-width: 390px; min-height: calc(100% - 3rem); border-radius: 26px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.08); }

/* ---------- Sağ alt sipariş kartı ---------- */
.mz-cta { position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 120; width: 320px; max-width: calc(100vw - 2rem);
    display: flex; gap: .85rem; padding: 1.1rem; border-radius: 18px; color: #f4f4f8;
    background: rgba(18,18,28,.9); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 24px 60px -20px rgba(0,0,0,.8); animation: mzPop .6s cubic-bezier(.22,1,.36,1) .4s both; }
@keyframes mzPop { from { opacity: 0; transform: translateY(24px) scale(.96); } }
.mz-cta-icon { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--mz-grad); color: #fff; }
.mz-cta-icon svg { width: 22px; height: 22px; }
.mz-cta-body strong { font-size: .98rem; }
.mz-cta-body p { margin: .25rem 0 .7rem; font-size: .82rem; color: #b8b8cc; font-family: 'Inter', sans-serif; line-height: 1.45; }
.mz-cta-body b { color: #c4b5fd; }
.mz-cta-btn { display: inline-flex; align-items: center; gap: .4rem; background: #25D366; color: #fff; text-decoration: none; font-weight: 600; font-size: .85rem; padding: .5rem .9rem; border-radius: 100px; transition: transform .2s; }
.mz-cta-btn:hover { transform: translateY(-1px); }
.mz-cta-close { position: absolute; top: .5rem; right: .5rem; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #9a9ab0; cursor: pointer; }
.mz-cta-close:hover { color: #fff; background: rgba(255,255,255,.16); }
.mz-cta.mz-cta-min { width: auto; padding: .7rem; }
.mz-cta.mz-cta-min .mz-cta-body, .mz-cta.mz-cta-min .mz-cta-close { display: none; }

/* ---------- Responsive bar ---------- */
@media (max-width: 860px) {
    .mz-meta { display: none; }
    .mz-devices { display: none; }
    .mz-order span { display: none; }
    .mz-order { padding: .55rem; }
}
@media (max-width: 560px) {
    .mz-hide-sm { display: none; }
    .mz-cta { right: .8rem; left: .8rem; bottom: .8rem; width: auto; }
}