.ab-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 38px
}

.ab-pagination a,
.ab-pagination span {
    display: inline-flex;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    border: 1px solid #e2d7e9;
    border-radius: 6px;
    background: #fff;
    color: #705780
}

.ab-pagination .current {
    background: #35263f;
    border-color: #35263f;
    color: #fff
}

@font-face {
    font-family: AkooonBlog;
    src: url('../assets/plex-arabic-400.ttf')
}

@font-face {
    font-family: AkooonBlog;
    src: url('../assets/plex-arabic-600.ttf');
    font-weight: 600
}

.ak-blog {
    --ab-ink: #302737;
    --ab-muted: #756b7e;
    --ab-pink: #ec0f68;
    font-family: AkooonBlog, Arial, sans-serif;
    color: var(--ab-ink);
    background: #f6f4f8;
    line-height: 1.8;
    padding-bottom: 70px
}

.ak-blog * {
    box-sizing: border-box
}

.ak-blog [hidden] {
    display: none !important
}

.ab-wrap {
    width: min(1240px, calc(100% - 40px));
    margin: auto
}

.ab-hero {
    padding: 65px 0 42px;
    text-align: center
}

.ab-eyebrow {
    color: #a12f70;
    font-size: 13px;
    letter-spacing: .03em;
    margin: 0 0 14px
}

.ab-hero h1 {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.4;
    font-weight: 600;
    margin: 0
}

.ab-hero h1 span {
    background: linear-gradient(100deg, #9d79b3, #ec0f68);
    color: transparent;
    background-clip: text
}

.ab-hero>p:last-child {
    font-size: 18px;
    color: var(--ab-muted);
    max-width: 660px;
    margin: 20px auto 0
}

.ab-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: center;
    border-block: 1px solid #e3dbe8;
    padding: 20px 0;
    margin-bottom: 35px
}

.ab-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.ab-chip {
    font: inherit;
    font-size: 13px;
    display: inline-block;
    border: 1px solid #e2d7e9;
    border-radius: 30px;
    background: white;
    color: #705780;
    padding: 8px 18px;
    text-decoration: none;
    cursor: pointer
}

.ab-chip[aria-pressed=true],
.ab-chip[aria-current=page] {
    background: #35263f;
    color: white;
    border-color: #35263f
}

.ab-search {
    display: flex;
    border: 1px solid #dfd4e5;
    background: white;
    border-radius: 30px;
    overflow: hidden;
    max-width: 100%
}

.ab-search input {
    font: inherit;
    font-size: 13px;
    border: 0;
    background: transparent;
    padding: 11px 16px;
    width: 200px;
    min-width: 0;
    color: var(--ab-ink)
}

.ab-search button {
    font: inherit;
    font-size: 12px;
    background: #eee5f4;
    color: #5f3e70;
    border: 0;
    padding: 10px 18px;
    cursor: pointer
}

.ab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px 24px
}

.ab-card {
    min-width: 0;
    background: white;
    border: 1px solid #e8e0ed;
    border-radius: 22px;
    overflow: hidden
}

.ab-card:first-child {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    margin-bottom: 8px
}

.ab-art {
    min-height: 230px;
    background: #eadff1;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.7
}

.ab-art::before,
.ab-art::after {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    border: 36px solid #ffffff66;
    border-radius: 50%;
    z-index: -1;
    inset: auto -35px -75px auto
}

.ab-art::after {
    width: 130px;
    height: 130px;
    border-width: 1px;
    inset: -40px auto auto -30px
}

.ab-art b {
    font-size: clamp(32px, 4vw, 62px);
    font-weight: 600;
    color: #78588b;
    line-height: 1.5;
    text-align: center;
    padding: 25px;
    max-width: 100%
}

.ab-card:nth-child(3n+2) .ab-art {
    background: #fbd8e7
}

.ab-card:nth-child(3n+2) .ab-art b {
    color: #a12f70
}

.ab-card:nth-child(3n) .ab-art {
    background: #e2f0ff
}

.ab-card:nth-child(3n) .ab-art b {
    color: #2c2362
}

.ab-card:first-child .ab-art {
    aspect-ratio: auto;
    min-height: 355px;
    background: #a12f70
}

.ab-card:first-child .ab-art b {
    color: white;
    font-size: clamp(44px, 5vw, 70px)
}

.ab-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0
}

.ab-body {
    padding: 26px
}

.ab-card:first-child .ab-body {
    padding: 40px;
    align-self: center
}

.ab-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--ab-muted);
    margin-bottom: 12px
}

.ab-category {
    color: #a12f70;
    background: #f9ecf3;
    border-radius: 20px;
    padding: 4px 12px
}

.ab-body h2 {
    font-size: 22px;
    line-height: 1.6;
    font-weight: 600;
    margin: 0 0 12px
}

.ab-card:first-child h2 {
    font-size: 32px
}

.ab-body h2 a {
    color: inherit;
    text-decoration: none
}

.ab-body p {
    color: var(--ab-muted);
    font-size: 15px;
    line-height: 1.95;
    margin: 0 0 20px
}

.ab-read {
    color: #a12f70;
    font: inherit;
    font-size: 13px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 5px
}

.ab-status {
    font-size: 12px;
    color: var(--ab-muted);
    margin: 0 0 18px
}

.ab-empty {
    text-align: center;
    padding: 55px;
    border: 1px dashed #ccb9d6;
    border-radius: 20px
}

.ab-footer-note {
    margin: 30px auto 0;
    color: var(--ab-muted);
    font-size: 12px;
    text-align: center
}

.ab-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 40px
}

.ab-pagination .page-numbers {
    padding: 8px 17px;
    border-radius: 12px;
    background: white;
    color: #705780;
    border: 1px solid #e2d7e9;
    text-decoration: none
}

.ab-pagination .current {
    background: #a12f70;
    color: white
}

.ab-dialog {
    border: 1px solid #e1d4e8;
    border-radius: 24px;
    padding: 35px;
    width: min(620px, calc(100% - 32px));
    color: #302737;
    background: #fff;
    font-family: AkooonBlog, Arial, sans-serif
}

.ab-dialog::backdrop {
    background: #26132f99;
    backdrop-filter: blur(4px)
}

.ab-dialog h2 {
    font-size: 27px;
    line-height: 1.6
}

.ab-dialog p {
    line-height: 1.95;
    color: #756b7e
}

.ab-dialog button {
    font: inherit;
    border: 0;
    border-radius: 20px;
    background: #a12f70;
    color: white;
    padding: 9px 25px;
    cursor: pointer
}

.ak-blog :focus-visible,
.ab-dialog :focus-visible {
    outline: 3px solid #9d79b3;
    outline-offset: 4px
}

@media(max-width:800px) {
    .ab-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .ab-card:first-child .ab-body {
        padding: 25px
    }

    .ab-card:first-child h2 {
        font-size: 25px
    }

    .ab-toolbar {
        align-items: flex-start;
        flex-direction: column
    }

    .ab-search {
        width: 100%
    }

    .ab-search input {
        flex: 1;
        width: 0
    }

    .ab-hero {
        padding-top: 40px
    }
}

@media(max-width:550px) {
    .ab-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px
    }

    .ab-card:first-child {
        display: block
    }

    .ab-card:first-child .ab-art {
        min-height: 250px
    }

    .ab-card:first-child .ab-art b {
        font-size: 48px
    }

    .ab-hero>p:last-child {
        font-size: 16px
    }

    .ab-body,
    .ab-card:first-child .ab-body {
        padding: 23px
    }

    .ab-card:first-child h2,
    .ab-body h2 {
        font-size: 23px
    }

    .ab-chip {
        padding: 7px 14px
    }

    .ab-hero h1 {
        font-size: 37px
    }

    .ab-wrap {
        width: calc(100% - 32px)
    }
}

/* Single article detail */
.article-page{background:#f6f4f8;color:#302737}.ak-article{padding-bottom:1px}.article-breadcrumb{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:#81718b;padding:28px 0}.article-breadcrumb a{color:#795488}.article-head{max-width:920px;margin:auto;text-align:center;padding:25px 0 34px}.article-tag{display:inline-block;color:#a12f70;background:#f9e4ee;padding:6px 17px;border-radius:24px;font-size:12px}.article-head h1{font-size:clamp(34px,4.6vw,61px);font-weight:600;line-height:1.5;letter-spacing:-.8px;margin:20px 0}.article-head .deck{max-width:740px;margin:0 auto;font-size:19px;line-height:1.95;color:#796d82}.article-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:24px;color:#87758f;font-size:12px}.article-cover{max-width:1000px;min-height:330px;margin:0 auto 58px;border-radius:28px;overflow:hidden;background:linear-gradient(120deg,#a12f70,#9d79b3);position:relative;display:flex;align-items:center;justify-content:center;gap:32px;padding:40px;isolation:isolate}.article-cover:before{content:'';position:absolute;width:430px;height:430px;border:75px solid #ffffff16;border-radius:50%;inset:auto -110px -280px auto;z-index:-1}.article-cover.has-image:after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#4b1239c9,#39214796);z-index:-1}.article-cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.cover-message{color:white;font-size:clamp(30px,4vw,50px);line-height:1.5;font-weight:600;max-width:430px}.cover-note{background:#fffffff2;border:1px solid white;border-radius:18px;padding:26px;color:#674675;width:290px;box-shadow:0 20px 45px #58244230;transform:rotate(-4deg)}[dir=ltr] .cover-note{transform:rotate(4deg)}.cover-note b{font-size:15px;display:block;margin-bottom:16px}.cover-note span{display:flex;gap:10px;align-items:center;font-size:13px;padding-block:9px;border-bottom:1px solid #e9dfed}.cover-note span:before{content:'✓';color:#a12f70;background:#f5e5ee;width:22px;height:22px;text-align:center;border-radius:50%;flex:none}.article-layout{max-width:1120px;margin:auto;display:grid;grid-template-columns:230px minmax(0,740px);gap:65px;align-items:start;padding-bottom:70px}.article-layout--without-toc{grid-template-columns:minmax(0,740px);justify-content:center}.article-toc{position:sticky;top:28px;border-inline-start:2px solid #e2d5e8;padding-inline-start:20px}.article-toc h2{font-size:15px;font-weight:600;margin:0 0 15px}.article-toc a{display:block;color:#83718e;font-size:13px;line-height:1.8;padding:9px 0;text-decoration:none}.article-toc .article-toc-level-3{padding-inline-start:14px;font-size:12px}.article-toc a:hover{color:#a12f70}.article-copy{min-width:0}.article-copy p,.article-copy li{font-size:18px;line-height:2;color:#65596f}.article-copy p{margin:0 0 22px}.article-copy h2,.article-copy h3{scroll-margin-top:25px;font-weight:600}.article-copy h2{font-size:29px;line-height:1.6;margin:0 0 18px}.article-copy h3{font-size:23px;line-height:1.7;margin:30px 0 14px}.article-copy ul,.article-copy ol{padding-inline-start:23px;margin:18px 0}.article-copy li{margin-bottom:10px}.article-copy strong{color:#42314e;font-weight:600}.article-copy blockquote{padding:25px 30px;border-inline-start:4px solid #ec0f68;background:#f3eaf7;border-radius:16px;margin:28px 0;font-size:24px;line-height:1.8;color:#794b8f}.article-copy img{max-width:100%;height:auto;border-radius:20px}.article-takeaway{padding:28px;background:#fff;border:1px solid #e7dce9;border-radius:20px;margin-top:28px}.article-takeaway h2{margin-bottom:12px}.article-takeaway p{margin-bottom:0}.article-action{background:#302337;border-radius:24px;padding:30px;color:white;margin-top:36px}.article-action h2{font-size:25px;color:white}.article-action p{color:#dacfe1;font-size:16px}.article-action a{display:inline-flex;align-items:center;gap:20px;border-radius:30px;background:#ec0f68;color:white;text-decoration:none;padding:12px 24px;font-size:14px}.article-back{display:inline-block;color:#a12f70;font-size:14px;margin-top:26px;text-underline-offset:5px}.article-page a:focus-visible{outline:3px solid #9d79b3;outline-offset:4px}.article-related{max-width:1120px;margin:auto;border-top:1px solid #e4dce9;padding:40px 0 65px}.article-related h2{font-size:26px;margin-bottom:22px}.article-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.article-related a{display:block;border:1px solid #e3d5eb;background:white;border-radius:18px;padding:25px;color:#4a3655;text-decoration:none}.article-related a small{display:block;color:#a12f70;margin-bottom:8px}.article-related a b{font-size:21px;font-weight:600}.article-related a p{font-size:15px;color:#87758f;line-height:1.9;margin:8px 0 0}
@media(max-width:850px){.article-layout{grid-template-columns:minmax(0,1fr);gap:30px}.article-toc{position:static;border:1px solid #e4d8eb;border-radius:18px;padding:20px;background:white}.article-toc nav{display:flex;flex-wrap:wrap;gap:5px 22px}.article-cover{gap:22px;padding:30px}.cover-note{width:260px}.article-head .deck{font-size:17px}}@media(max-width:550px){.article-head{padding-top:10px}.article-head h1{font-size:33px}.article-cover{flex-direction:column;gap:24px;padding:30px 22px;margin-bottom:30px}.cover-message{font-size:31px;text-align:center}.cover-note{width:min(100%,280px);padding:20px}.article-copy p,.article-copy li{font-size:17px}.article-copy h2{font-size:25px}.article-copy blockquote{font-size:21px;padding:22px}.article-layout{padding-bottom:40px}.article-related-grid{grid-template-columns:1fr}.article-action{padding:24px}}