:root {
    --font-en: "Readex Pro", sans-serif;
    --font-ar: "Noto Kufi Arabic", sans-serif;
}

html,
body {
    font-family: var(--font-en);
    font-optical-sizing: auto;
}

html[lang="ar"],
html[lang="ar"] body {
    font-family: var(--font-ar);
}

.itkalem-hero {
    --mx: 50%;
    --my: 50%;
}

.itkalem-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.itkalem-hero-layer {
    position: absolute;
    inset: 0;
}

.itkalem-hero-base {
    background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.2), transparent 35%),
    radial-gradient(circle at 88% 14%, rgba(255, 255, 255, 0.16), transparent 30%),
    radial-gradient(circle at 55% 82%, rgba(237, 110, 66, 0.22), transparent 42%),
    linear-gradient(135deg, #185365 0%, #124452 100%);
}

.itkalem-hero-reveal {
    background: linear-gradient(rgba(24, 83, 101, 0.45), rgba(24, 83, 101, 0.45)),
    var(--hero-reveal-image) center/cover no-repeat,
    radial-gradient(circle at 80% 75%, rgba(244, 152, 64, 0.35), transparent 45%),
    radial-gradient(circle at 25% 78%, rgba(237, 110, 66, 0.35), transparent 40%);
    mask-image: radial-gradient(circle 200px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, 0.95) 55%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 200px at var(--mx) var(--my), #000 0, rgba(0, 0, 0, 0.95) 55%, transparent 100%);
    opacity: 0;
    transition: opacity 180ms ease;
}

.itkalem-hero.is-revealing .itkalem-hero-reveal {
    opacity: 1;
}

.itkalem-lang-switch {
    backdrop-filter: blur(4px);
}

.itkalem-how-swiper .swiper-button-next,
.itkalem-how-swiper .swiper-button-prev {
    color: var(--itkalemBranding2);
}

.itkalem-how-swiper .swiper-pagination-bullet {
    background: var(--itkalemBranding1);
    opacity: 1;
}

.itkalem-how-swiper .swiper-pagination-bullet-active {
    background: var(--itkalemBranding2);
}

@media (pointer: coarse) {
    .itkalem-hero-reveal {
        mask-image: none;
        -webkit-mask-image: none;
        opacity: 0.35;
    }
}

@media (max-width: 360px) {
    .itkalem-how-swiper .swiper-button-next,
    .itkalem-how-swiper .swiper-button-prev {
        display: none;
    }
}