/* ═══════════════════════════════════════════════════════════════════
 *   PAGE HERO — Siyah Editorial Header
 *   Kuran Okuma · Kuran Meali · Kıraat sayfalarında ortak.
 *   Hadis index.html'deki .hdl-hero stilinden bağımsız `.mv-hero-*` prefix'i.
 * ═══════════════════════════════════════════════════════════════════ */

.mv-hero {
    --mv-c:    #B87333;
    --mv-cl:   #C5A54E;
    --mv-ink:  #F5F1E8;
    --mv-ease: cubic-bezier(.16,1,.3,1);
    position: relative;
    background: radial-gradient(ellipse at top, #1C1410 0%, #0F0A07 60%, #060402 100%);
    overflow: hidden;
    padding: 70px 24px 50px;
    text-align: center;
    isolation: isolate;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* Arka plan: dönen yıldız pattern + büyük calligraphy + glow + grain */
.mv-hero-pattern {
    position: absolute; top: 50%; left: 50%;
    width: min(1200px, 140vw); height: min(1200px, 140vw);
    pointer-events: none; opacity: .055;
    animation: mvRotatePattern 300s linear infinite;
    will-change: transform; color: var(--mv-cl);
}
.mv-hero-pattern svg { width: 100%; height: 100%; }
.mv-hero-calligraphy {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-family: 'Amiri','iar-kuran-hat',serif;
    font-size: clamp(180px,36vw,520px);
    color: var(--mv-cl); opacity: .022;
    pointer-events: none; font-weight: 700;
    line-height: 1; white-space: nowrap; user-select: none;
    direction: rtl;
}
.mv-hero-glow-a {
    position: absolute; top: 40%; left: 25%;
    width: min(800px,90vw); height: min(800px,90vw);
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(184,115,51,.13) 0%, transparent 70%);
    pointer-events: none;
    animation: mvGlowPulse 16s ease-in-out infinite;
}
.mv-hero-glow-b {
    position: absolute; top: 60%; left: 75%;
    width: min(500px,60vw); height: min(500px,60vw);
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(197,165,78,.09) 0%, transparent 70%);
    pointer-events: none;
    animation: mvGlowPulse 20s ease-in-out infinite;
    animation-delay: -8s;
}
.mv-hero-grain {
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none; opacity: .4; mix-blend-mode: overlay;
}

.mv-hero-inner {
    position: relative; z-index: 2;
    max-width: 720px; margin: 0 auto;
}

/* Üst eyebrow chip */
.mv-hero-label {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 8px 22px 8px 14px;
    background: linear-gradient(135deg, rgba(197,165,78,.10), rgba(184,115,51,.06) 50%, rgba(197,165,78,.10));
    border: 1px solid transparent; border-radius: 100px;
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--mv-cl); margin-bottom: 18px; font-weight: 600;
    backdrop-filter: blur(14px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgba(197,165,78,.32),
                0 0 0 3px rgba(15,10,7,.4),
                0 6px 28px -6px rgba(197,165,78,.28),
                inset 0 1px 0 rgba(255,255,255,.08);
}
.mv-hero-label-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, var(--mv-cl), var(--mv-c));
    color: #1C1410; font-size: 10px; flex-shrink: 0;
    box-shadow: 0 0 12px rgba(197,165,78,.4), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Besmele görseli (mask SVG) */
.mv-hero-besmele {
    display: block; width: 100%; max-width: 360px;
    height: clamp(48px,7vw,72px); margin: 0 auto 22px;
    background-color: var(--mv-cl);
    -webkit-mask: url('/iar/assets/besmele-hat.svg') center/contain no-repeat;
    mask: url('/iar/assets/besmele-hat.svg') center/contain no-repeat;
    filter: drop-shadow(0 2px 12px rgba(197,165,78,.25));
}

/* Ana başlık — kinetic word animasyonu */
.mv-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px,4.5vw,48px); font-weight: 700;
    line-height: 1.1; letter-spacing: -.03em; margin-bottom: 14px;
}
.mv-hero h1 .word {
    display: inline-block; opacity: 0;
    animation: mvKineticWord 1.1s var(--mv-ease) forwards;
    background: linear-gradient(135deg, #F5F1E8 0%, #E8D5A0 40%, #D4956A 75%, #C5A54E 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 0 .04em;
}
.mv-hero h1 .word:nth-child(1) { animation-delay: .1s; }
.mv-hero h1 .word:nth-child(2) {
    animation-delay: .26s; font-style: italic;
    background: linear-gradient(135deg, #C5A54E 0%, #D4956A 60%, #B87333 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mv-hero h1 .word:nth-child(3) { animation-delay: .42s; }
.mv-hero h1 .word:nth-child(4) { animation-delay: .58s; }

/* Alt açıklama */
.mv-hero-sub {
    font-size: 14px; color: rgba(245,241,232,.5);
    max-width: 600px; margin: 0 auto 24px;
    font-weight: 300; line-height: 1.75;
}
.mv-hero-sub strong { color: var(--mv-cl); font-weight: 600; }

/* İstatistik chip — 4 kolon */
.mv-hero-stats {
    display: inline-flex; align-items: center; gap: 0;
    padding: 11px 20px;
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(184,115,51,.04));
    border: 1px solid rgba(197,165,78,.18); border-radius: 100px;
    backdrop-filter: blur(14px); margin-bottom: 4px;
    box-shadow: 0 16px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
    flex-wrap: wrap; justify-content: center;
}
.mv-hero-stat {
    display: flex; flex-direction: column; align-items: center;
    padding: 0 18px; position: relative;
}
.mv-hero-stat + .mv-hero-stat::before {
    content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 1px; height: 24px;
    background: linear-gradient(to bottom, transparent, rgba(197,165,78,.3), transparent);
}
.mv-hero-stat-num {
    font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700;
    background: linear-gradient(135deg, #E8D5A0, #C5A54E);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1; letter-spacing: -.02em;
}
.mv-hero-stat-label {
    font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(245,241,232,.45); font-weight: 600; margin-top: 5px;
}

/* ─── CTA WRAPPER + BUTONLAR (Okumaya Başla, Devam Et vb.) ─── */
.mv-hero-cta-wrap {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.mv-hero-cta {
    --cta-bg: #0F0A07;
    display: inline-flex; align-items: center; gap: 12px;
    padding: 14px 28px 14px 26px;
    background: linear-gradient(155deg, var(--cta-bg) 0%, #14100C 50%, var(--cta-bg) 100%);
    border: 1px solid var(--mv-cl);
    border-radius: 99px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px; letter-spacing: .32em; text-transform: uppercase; font-weight: 700;
    color: var(--mv-ink);
    text-decoration: none;
    position: relative; isolation: isolate;
    box-shadow:
        0 8px 22px -6px rgba(15,10,7,0.42),
        0 2px 6px rgba(15,10,7,0.22),
        inset 0 1px 0 rgba(197,165,78,0.32),
        inset 0 -8px 18px rgba(15,10,7,0.4);
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .25s ease;
}
/* Dış halo halkası */
.mv-hero-cta::before {
    content: '';
    position: absolute; inset: -5px;
    border-radius: 99px;
    border: 1px solid var(--mv-c);
    opacity: 0.35;
    transition: inset .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease, border-color .35s ease;
    pointer-events: none;
    z-index: -1;
}
.mv-hero-cta > span {
    background: linear-gradient(135deg, #FAF7F2 0%, #E8D5A0 55%, var(--mv-cl) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: letter-spacing .35s ease;
}
.mv-hero-cta i {
    color: var(--mv-cl);
    font-size: 13px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.mv-hero-cta:hover {
    transform: translateY(-2px);
    border-color: #E8D5A0;
    box-shadow:
        0 14px 34px -8px rgba(15,10,7,0.5),
        0 4px 12px rgba(15,10,7,0.25),
        inset 0 1px 0 rgba(232,213,160,0.45),
        inset 0 -10px 22px rgba(15,10,7,0.45),
        0 0 0 1px rgba(232,213,160,0.18);
}
.mv-hero-cta:hover::before {
    inset: -9px; opacity: 0.6; border-color: var(--mv-cl);
}
.mv-hero-cta:hover > span { letter-spacing: .36em; }
.mv-hero-cta:hover i { transform: translateX(3px); }
.mv-hero-cta:active { transform: translateY(0) scale(.985); }
.mv-hero-cta:focus-visible { outline: 0; }
.mv-hero-cta:focus-visible::before { inset: -9px; opacity: 0.78; border-color: var(--mv-cl); }

/* Ghost variant — secondary, transparent zemin */
.mv-hero-cta.ghost {
    background: transparent;
    border-color: rgba(197,165,78,0.45);
    box-shadow: inset 0 0 0 1px rgba(197,165,78,0.06);
}
.mv-hero-cta.ghost > span {
    -webkit-text-fill-color: rgba(245,241,232,0.85);
    background: none; color: rgba(245,241,232,0.85);
}
.mv-hero-cta.ghost::before { opacity: 0; }
.mv-hero-cta.ghost:hover {
    background: rgba(197,165,78,0.06);
    border-color: var(--mv-cl);
    box-shadow: 0 4px 14px rgba(15,10,7,0.25);
}
.mv-hero-cta.ghost:hover > span {
    -webkit-text-fill-color: var(--mv-cl);
    color: var(--mv-cl);
}

/* Mobil */
@media (max-width: 720px) {
    .mv-hero { padding: 48px 16px 36px; }
    .mv-hero-stat { padding: 0 12px; }
    .mv-hero-stat-num { font-size: 17px; }
    .mv-hero-besmele { max-width: 280px; height: 48px; }
    .mv-hero-cta { padding: 12px 22px 12px 20px; font-size: 10.5px; letter-spacing: .26em; }
    .mv-hero-cta-wrap { gap: 10px; margin-top: 22px; }
}

/* Animasyonlar */
@keyframes mvRotatePattern { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes mvGlowPulse {
    0%,100% { opacity: .8; transform: translate(-50%,-50%) scale(1); }
    50%     { opacity: 1;  transform: translate(-50%,-50%) scale(1.08); }
}
@keyframes mvKineticWord {
    to { opacity: 1; }
}