/* ============================================================
   MAGAZINE HERO
   ============================================================ */
.mz-hero {
    --mz-navy: var(--color-primary-navy, #0b2a5b);
    --mz-blue: var(--color-royal-blue, #1464d9);
    --mz-muted: var(--color-text-secondary, #5b6b86);
    --mz-border: var(--color-border, #e3eaf5);
    position: relative;
    padding: 2.5rem 0 3rem;
    overflow: hidden;
    background: linear-gradient(135deg, #F0F6FF 0%, #FFFFFF 60%, #F5F9FF 100%);
}
.mz-hero::before,
.mz-hero::after { content: ''; position: absolute; pointer-events: none; }
.mz-hero::before { top: -30%; left: -10%; width: 640px; height: 640px; background: radial-gradient(circle, rgba(22,139,255,.15), transparent 70%); }
.mz-hero::after  { bottom: -25%; right: -10%; width: 460px; height: 460px; background: radial-gradient(circle, rgba(212,162,58,.10), transparent 70%); }

.mz-inner {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center; gap: 2.5rem;
}

/* --- Text --- */
.mz-copy { max-width: 560px; text-align: right; }
.mz-badge {
    display: inline-block; margin-bottom: 1.25rem; padding: .4rem 1rem;
    border: 1px solid rgba(20,100,217,.15); border-radius: 999px;
    background: var(--color-sky-blue, #e6f0ff); color: var(--mz-blue);
    font-size: .8rem; font-weight: 600;
}
.mz-title { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 1.25rem; font-size: 3rem; font-weight: 900; line-height: 1.3; }
.mz-title-1 { color: var(--mz-navy); }
.mz-title-2 {
    background: linear-gradient(135deg, #D4A23A 0%, #E8C66A 50%, #D4A23A 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mz-desc { margin: 0 0 1.75rem; color: var(--mz-muted); font-size: 1.05rem; line-height: 2; }

/* --- Search --- */
.mz-search {
    display: flex; gap: .5rem; max-width: 460px; margin-bottom: 1.25rem; padding: .35rem;
    border: 1px solid var(--mz-border); border-radius: 999px; background: #fff;
    box-shadow: 0 8px 24px rgba(11,42,91,.07);
}
.mz-search:focus-within { border-color: var(--mz-blue); box-shadow: 0 8px 24px rgba(20,100,217,.16); }
.mz-search input {
    flex: 1; min-width: 0; padding: 0 1rem; border: 0; outline: 0; background: transparent;
    color: var(--mz-navy); font: inherit; font-size: .95rem;
}
.mz-search button {
    padding: .65rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(135deg, #D4A23A, #E8C66A); color: var(--mz-navy);
    font: inherit; font-weight: 700; transition: transform .2s;
}
.mz-search button:hover { transform: translateY(-1px); }

/* --- Category chips --- */
.mz-chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.mz-chip {
    padding: .45rem 1.1rem; border: 1px solid var(--mz-border); border-radius: 999px;
    background: #fff; color: var(--mz-navy); font-size: .9rem; font-weight: 500; text-decoration: none;
    transition: all .2s;
}
.mz-chip:hover, .mz-chip.is-active { border-color: var(--mz-blue); background: var(--mz-blue); color: #fff; }
.mz-search button:focus-visible, .mz-chip:focus-visible { outline: 3px solid #E8C66A; outline-offset: 2px; }

/* --- Visual --- */
.mz-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; min-width: 0; }

/* انیمیشن iframe */
.mz-animation {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 380px;
    height: 380px;
    border: none;
    background: transparent;
    display: block;
    overflow: hidden;
}

.mz-ring {
    position: absolute; inset: 4% 6%; border: 1.5px dashed rgba(20,100,217,.28); border-radius: 50%;
    animation: mz-spin 40s linear infinite;
}
.mz-ring::after {
    content: ''; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px;
    border-radius: 50%; background: radial-gradient(circle at 30% 30%, #F6DC95, #C0812A);
    box-shadow: 0 0 14px rgba(212,162,58,.6);
}
.mz-float {
    position: absolute; z-index: 2; display: flex; align-items: center; gap: .65rem;
    padding: .6rem .9rem; border: 1px solid rgba(20,100,217,.14); border-radius: 14px;
    background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(11,42,91,.12); animation: mz-bob 6s ease-in-out infinite;
}
.mz-float b { display: block; color: var(--mz-navy); font-size: .9rem; }
.mz-float small { color: var(--mz-muted); font-size: .72rem; }
.mz-ico {
    display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px;
    background: linear-gradient(135deg, #0a63f0, #00b4ff);
}
.mz-ico svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mz-f1 { top: 6%;  right: 0; }
.mz-f2 { top: 44%; left: -2%; animation-delay: -2s; }
.mz-f3 { bottom: 6%; right: 6%; animation-delay: -4s; }

@keyframes mz-spin { to { transform: rotate(360deg); } }
@keyframes mz-bob  { 50% { transform: translateY(-9px); } }

/* --- Responsive --- */
@media (max-width: 992px) {
    .mz-inner { grid-template-columns: 1fr; text-align: center; }
    .mz-copy { margin: 0 auto; text-align: center; }
    .mz-title { align-items: center; font-size: 2.25rem; }
    .mz-search { margin-inline: auto; }
    .mz-chips { justify-content: center; }
    .mz-animation { max-width: 320px; height: 320px; }
}
@media (max-width: 640px) {
    .mz-hero { padding: 2rem 0; }
    .mz-title { font-size: 1.75rem; }
    .mz-float { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mz-ring, .mz-float { animation: none; } }