/*
  تم دوام یدک — بر پایه‌ی رنگ لوگو: سرمه‌ای برای متن و پس‌زمینه‌های تیره،
  قرمز فقط برای کنش (خرید، افزودن، تأیید) و خاکستری برای همه چیز دیگر — در
  فروشگاه قطعه، تشخیص «کدام دکمه سفارش می‌دهد» مهم‌تر از زیبایی است.
  فونت: در صورت افزودن فایل Vazirmatn به wwwroot/lib/fonts خودکار استفاده می‌شود؛
  در غیر این صورت به فونت‌های سیستمی فارسی برمی‌گردد.
*/

:root {
    --ak-ink: #0b2a5b;
    --ak-ink-soft: #3a5686;
    --ak-muted: #7b8794;
    --ak-cream: #f4f6f8;
    --ak-cream-deep: #e8ecf0;
    --ak-line: #d7dde3;
    --ak-red: #e2231a;
    --ak-red-deep: #b8170f;
    --ak-red-soft: #fdeceb;
    --ak-white: #ffffff;
    --ak-danger: #c02a24;
    --ak-success: #1f7a4d;

    --ak-radius: 10px;
    --ak-radius-sm: 6px;
    --ak-shadow: 0 2px 14px rgba(11, 42, 91, .09);
    --ak-shadow-lg: 0 12px 34px rgba(11, 42, 91, .16);

    --bs-body-font-family: 'Vazirmatn', 'Segoe UI', Tahoma, 'Iranian Sans', sans-serif;
}

html {
    font-size: 15px;
}

body {
    font-family: var(--bs-body-font-family);
    background: var(--ak-cream);
    color: var(--ak-ink);
    line-height: 1.9;
}

/* اعداد فارسی در متن روان خوانده می‌شوند ولی قیمت و کد رهگیری باید لاتین بماند */
.ak-num {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    direction: ltr;
    display: inline-block;
    unicode-bidi: embed;
}

a {
    text-decoration: none;
    color: var(--ak-ink);
    transition: color .18s ease;
}

a:hover {
    color: var(--ak-red-deep);
}

/* ---------- هدر ---------- */

.ak-topbar {
    background: var(--ak-ink);
    color: var(--ak-cream-deep);
    font-size: .82rem;
    padding: .45rem 0;
}

.ak-header {
    background: var(--ak-white);
    border-bottom: 1px solid var(--ak-line);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.ak-logo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.5px;
    color: var(--ak-ink);
}

.ak-logo span {
    color: var(--ak-red);
}

.ak-logo {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.ak-logo img {
    height: 52px;
    width: auto;
    display: block;
}

.ak-logo.ak-logo-sm img {
    height: 40px;
}

.ak-footer-logo {
    height: 64px;
    width: auto;
}

@media (max-width: 991.98px) {
    .ak-logo img {
        height: 42px;
    }
}

.ak-search {
    background: var(--ak-cream);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius);
    padding: .1rem .35rem;
}

.ak-search input {
    border: 0;
    background: transparent;
    box-shadow: none !important;
}

.ak-nav {
    background: var(--ak-white);
    border-bottom: 1px solid var(--ak-line);
}

.ak-nav a {
    display: inline-block;
    padding: .7rem 0;
    font-size: .93rem;
    font-weight: 500;
    color: var(--ak-ink-soft);
}

.ak-nav a:hover {
    color: var(--ak-red-deep);
}

.ak-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--ak-line);
    background: var(--ak-white);
}

.ak-badge-count {
    position: absolute;
    top: -4px;
    inset-inline-start: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--ak-red);
    color: var(--ak-white);
    font-size: .7rem;
    line-height: 20px;
    text-align: center;
}

/* ---------- دکمه‌ها ---------- */

.btn-ak {
    background: var(--ak-ink);
    color: var(--ak-white);
    border: 1px solid var(--ak-ink);
    border-radius: var(--ak-radius-sm);
    padding: .6rem 1.4rem;
    font-weight: 600;
    transition: background .18s ease, border-color .18s ease;
}

.btn-ak:hover {
    background: var(--ak-red-deep);
    border-color: var(--ak-red-deep);
    color: var(--ak-white);
}

.btn-ak-outline {
    background: transparent;
    color: var(--ak-ink);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius-sm);
    padding: .6rem 1.4rem;
    font-weight: 600;
}

.btn-ak-outline:hover {
    border-color: var(--ak-red);
    color: var(--ak-red-deep);
}

/* دکمه اصلی قرمز است نه تیره: در صفحه‌ای پر از جدول و مشخصات فنی، کاربر باید
   بدون خواندن بفهمد کدام دکمه سفارش می‌دهد. */
.btn-ak {
    background: var(--ak-red);
    border-color: var(--ak-red);
}

.btn-ak:hover {
    background: var(--ak-red-deep);
    border-color: var(--ak-red-deep);
}

/* ---------- کارت محصول ---------- */

.ak-card {
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s ease, transform .2s ease;
}

.ak-card:hover {
    box-shadow: var(--ak-shadow-lg);
    transform: translateY(-3px);
}

.ak-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--ak-cream-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ak-card-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 1rem;
}

.ak-card-media .ak-placeholder {
    color: var(--ak-muted);
    font-size: 2.4rem;
}

.ak-card-body {
    padding: .9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ak-card-brand {
    font-size: .78rem;
    color: var(--ak-muted);
    letter-spacing: .5px;
}

.ak-card-title {
    font-size: .95rem;
    font-weight: 600;
    margin: .15rem 0 .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.9em;
}

.ak-chip {
    display: inline-block;
    font-size: .72rem;
    padding: .12rem .55rem;
    border-radius: 20px;
    background: var(--ak-cream-deep);
    color: var(--ak-ink-soft);
    margin-inline-end: .25rem;
}

.ak-price {
    font-size: 1.05rem;
    font-weight: 700;
}

/* قیمت قبل از تخفیف: یک خط قرمز مورب روی عدد کشیده می‌شود و درصد تخفیف کوچک کنارش می‌نشیند */
.ak-price-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .45rem;
    line-height: 1.6;
}

.ak-price-old {
    position: relative;
    display: inline-block;
    padding: 0 .15rem;
    font-size: .82rem;
    color: var(--ak-muted);
}

.ak-price-old::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline: -.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ak-red);
    transform: rotate(-12deg);
}

.ak-off {
    padding: .02rem .45rem;
    font-size: .7rem;
    font-weight: 700;
    color: var(--ak-red-deep);
    background: var(--ak-red-soft);
    border-radius: 20px;
}

.ak-discount {
    background: var(--ak-danger);
    color: var(--ak-white);
    border-radius: 20px;
    padding: .05rem .5rem;
    font-size: .75rem;
    font-weight: 700;
}

.ak-out-of-stock {
    color: var(--ak-muted);
    font-size: .88rem;
}

/* ---------- امتیازها (ماندگاری، پراکندگی) ---------- */

.ak-meter {
    display: flex;
    gap: 3px;
}

.ak-meter i {
    width: 22px;
    height: 5px;
    border-radius: 3px;
    background: var(--ak-line);
    display: block;
}

.ak-meter i.on {
    background: var(--ak-red);
}

/* ---------- بخش‌ها ---------- */

.ak-section {
    margin: 2.5rem 0;
}

.ak-section-title {
    font-size: 1.25rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.1rem;
}

.ak-section-title::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 3px;
    background: var(--ak-red);
}

.ak-panel {
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius);
    padding: 1.25rem;
}

/* ---------- فهرست سازگاری خودرو ---------- */

.ak-note {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--ak-cream);
    border: 1px solid var(--ak-line);
    border-radius: 20px;
    padding: .3rem .8rem;
    font-size: .85rem;
    margin: 0 0 .4rem .4rem;
}

/* ---------- فیلتر ---------- */

.ak-filter-group {
    border-bottom: 1px solid var(--ak-line);
    padding: .9rem 0;
}

.ak-filter-group:last-child {
    border-bottom: 0;
}

.ak-filter-title {
    font-weight: 600;
    font-size: .92rem;
    margin-bottom: .6rem;
}

/* ---------- انتخاب حجم ---------- */

.ak-variant {
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius-sm);
    padding: .7rem .9rem;
    cursor: pointer;
    background: var(--ak-white);
    transition: border-color .15s ease, background .15s ease;
}

.ak-variant:hover {
    border-color: var(--ak-red);
}

.ak-variant.selected {
    border-color: var(--ak-red);
    background: #fdfaf2;
    box-shadow: inset 0 0 0 1px var(--ak-red);
}

.ak-variant.disabled {
    opacity: .5;
    cursor: not-allowed;
}

/* ---------- خط زمانی سفارش ---------- */

.ak-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.ak-timeline li {
    position: relative;
    padding-inline-start: 1.6rem;
    padding-bottom: 1.1rem;
}

.ak-timeline li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .45rem;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--ak-red);
}

.ak-timeline li::after {
    content: "";
    position: absolute;
    inset-inline-start: 5px;
    top: 1.2rem;
    bottom: 0;
    width: 1px;
    background: var(--ak-line);
}

.ak-timeline li:last-child::after {
    display: none;
}

/* ---------- فوتر ---------- */

.ak-footer {
    background: var(--ak-ink);
    color: var(--ak-cream-deep);
    margin-top: 3rem;
    padding: 2.5rem 0 1.2rem;
}

.ak-footer a {
    color: var(--ak-cream-deep);
    font-size: .9rem;
}

.ak-footer a:hover {
    color: var(--ak-red);
}

.ak-footer h6 {
    color: var(--ak-white);
    font-weight: 700;
    margin-bottom: .9rem;
}

/* ---------- موبایل ---------- */

@media (max-width: 767.98px) {
    html {
        font-size: 14px;
    }

    .ak-card-title {
        min-height: 2.7em;
    }
}

/* ---------- علاقه‌مندی، مقایسه و هشدار ---------- */

/* کارت باید مرجع موقعیت دکمه قلب باشد، وگرنه قلب روی کل صفحه جابه‌جا می‌شود. */
.ak-card {
    position: relative;
}

.ak-card-wish {
    z-index: 2;
}

.ak-heart {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--ak-border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    line-height: 1;
    font-size: 1.15rem;
    color: var(--ak-muted);
    cursor: pointer;
    transition: color .15s ease, transform .15s ease;
}

.ak-heart:hover {
    color: #d33;
    transform: scale(1.08);
}

.ak-heart.on {
    color: #d33;
    border-color: #d33;
}

/* نت مشترک در جدول مقایسه باید فوراً به چشم بیاید. */
.ak-chip-shared {
    background: var(--ak-red-soft, #fdeceb);
    border-color: var(--ak-red, #b8170f);
    color: #7a1410;
    font-weight: 700;
}

.ak-compare th {
    vertical-align: middle;
}

.ak-compare tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.ak-compare tbody tr:nth-child(odd) {
    background: rgba(0, 0, 0, .015);
}

/* ---------- قطعه‌یاب ---------- */

.ak-finder-hero {
    background: linear-gradient(135deg, var(--ak-cream-deep), #fff);
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    padding: 2rem 1rem;
}

.ak-step-title {
    font-weight: 700;
    margin-bottom: .75rem;
}

.ak-choice-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* رادیو و چک‌باکس پنهان می‌شوند و خود برچسب نقش دکمه را می‌گیرد. */
.ak-choice input,
.ak-note-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.ak-choice {
    position: relative;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    padding: .55rem 1rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin: 0;
}

.ak-choice:hover {
    border-color: var(--ak-red, #b8170f);
}

.ak-choice:has(input:checked) {
    border-color: var(--ak-red, #b8170f);
    background: var(--ak-red-soft, #fdeceb);
    font-weight: 700;
}

.ak-note-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.ak-note-chip {
    position: relative;
    border: 1px solid var(--ak-border);
    border-radius: 999px;
    padding: .3rem .8rem;
    font-size: .875rem;
    cursor: pointer;
    margin: 0;
}

.ak-note-chip:has(input:checked) {
    border-color: var(--ak-red, #b8170f);
    background: var(--ak-red-soft, #fdeceb);
    font-weight: 700;
}

.ak-note-chip-dislike:has(input:checked) {
    border-color: #d33;
    background: #fdecec;
    color: #a11;
}

/* کارت نتیجه: امتیاز تطابق بالای کارت محصول می‌نشیند. */
.ak-match {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ak-border);
    border-radius: var(--ak-radius);
    overflow: hidden;
    background: #fff;
}

.ak-match .ak-card {
    border: 0;
    border-radius: 0;
}

.ak-match-score {
    background: var(--ak-red-soft, #fdeceb);
    border-bottom: 1px solid var(--ak-border);
    padding: .4rem .75rem;
    font-weight: 700;
    font-size: .9rem;
}

.ak-match-reasons {
    border-top: 1px solid var(--ak-border);
    padding: .75rem;
    background: #fcfcfc;
}

.ak-match-reasons li {
    margin-bottom: .2rem;
}

/* ---------- باشگاه مشتریان ---------- */

.ak-tier-card {
    background: linear-gradient(135deg, #14110f 0%, #2a2320 100%);
    color: #f7f4ef;
    border-radius: var(--ak-radius);
    padding: 1.25rem;
}

.ak-tier-progress {
    background: rgba(255, 255, 255, .15);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.ak-tier-progress > div {
    background: #b8973f;
    height: 100%;
    border-radius: 999px;
    transition: width .3s ease;
}

/* --- مسیر راهنما (breadcrumb) --- */
.ak-breadcrumbs ol {
    padding: 0;
}

.ak-breadcrumbs a {
    color: var(--ak-muted, #6c757d);
    text-decoration: none;
}

.ak-breadcrumbs a:hover {
    color: var(--ak-red, #b8170f);
    text-decoration: underline;
}


/* --- گالری تصویر --- */
.ak-gallery-main {
    position: relative;
    border-radius: var(--ak-radius);
    overflow: hidden;
    cursor: zoom-in;
}

.ak-gallery-image {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ak-gallery-image.is-active {
    display: block;
}

.ak-gallery-nav,
.ak-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: rgba(255, 255, 255, .85);
    color: #222;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.ak-gallery-nav.prev { right: .5rem; }
.ak-gallery-nav.next { left: .5rem; }

.ak-gallery-zoom {
    position: absolute;
    top: .5rem;
    left: .5rem;
    border: 0;
    background: rgba(255, 255, 255, .85);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
}

.ak-gallery-counter,
.ak-lightbox-counter {
    position: absolute;
    bottom: .5rem;
    right: .5rem;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: .75rem;
}

.ak-gallery-thumbs {
    display: flex;
    gap: .5rem;
    margin-top: .5rem;
    overflow-x: auto;
    padding-bottom: .25rem;
}

.ak-gallery-thumb {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    padding: 2px;
    background: #fff;
    border: 1px solid var(--ak-border, #e6e0d8);
    border-radius: 8px;
    cursor: pointer;
}

.ak-gallery-thumb.is-active {
    border-color: var(--ak-red, #b8170f);
    box-shadow: 0 0 0 1px var(--ak-red, #b8170f);
}

.ak-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- نمای بزرگ --- */
.ak-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.ak-lightbox[hidden] {
    display: none;
}

.ak-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ak-lightbox-close {
    position: absolute;
    top: 1rem;
    left: 1rem;
    border: 0;
    background: rgba(255, 255, 255, .9);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.ak-lightbox-nav.prev { right: 1rem; }
.ak-lightbox-nav.next { left: 1rem; }

.ak-lightbox-counter {
    bottom: 1rem;
    right: 50%;
    transform: translateX(50%);
}


/* --- نوار مقایسه --- */
.ak-compare-bar {
    position: sticky;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 2px solid var(--ak-red, #b8170f);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
    padding: .6rem 0;
}

.ak-compare-bar.is-hidden {
    display: none;
}

.ak-compare-bar-close {
    border: 0;
    background: transparent;
    font-size: 1.25rem;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 0 .25rem;
}

.ak-compare-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--ak-border, #e6e0d8);
    border-radius: 999px;
    padding: .2rem .6rem .2rem .2rem;
    background: #fbf9f5;
    max-width: 220px;
}

.ak-compare-chip img,
.ak-compare-chip-placeholder {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ak-compare-chip-name {
    font-size: .8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ak-compare-chip-remove {
    border: 0;
    background: transparent;
    color: #b04a4a;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .2rem;
}

@media (max-width: 576px) {
    .ak-compare-chip-name { display: none; }
    .ak-compare-bar { padding: .5rem 0; }
}


/* ---------- اسلایدشو محصولات ویژه ---------- */

/* نسبت ۸:۳ برای تصویر افقی اسلاید (پیشنهاد آپلود: ۱۶۰۰×۶۰۰). object-fit: cover
   یعنی انحراف جزئی از این ابعاد هم تمیز برش می‌خورد. */
.ak-hero-slider .carousel-item {
    aspect-ratio: 8 / 3;
    background: var(--ak-cream-deep);
}

.ak-hero-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ak-hero-slider .carousel-caption {
    background: linear-gradient(0deg, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 60%);
    border-radius: 0 0 var(--ak-radius) var(--ak-radius);
    bottom: 0;
    padding-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
    .ak-hero-slider .carousel-item {
        aspect-ratio: 4 / 3;
    }

    .ak-hero-slider .carousel-caption h3 {
        font-size: 1.1rem;
    }
}

/* ---------- هیرو صفحه اصلی ---------- */

.ak-hero {
    background: linear-gradient(135deg, var(--ak-ink) 0%, #163f7d 100%);
    color: var(--ak-white);
    border-radius: var(--ak-radius);
    padding: 3rem 1.25rem;
    text-align: center;
}

.ak-hero h1 {
    font-size: 2rem;
}

.ak-hero-lead {
    color: #b6c2cd;
}

/* انتخابگر خودرو: روی موبایل ستونی، روی دسکتاپ یک نوار افقی جمع‌وجور */
.ak-hero-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    max-width: 680px;
    margin: 0 auto;
}

.ak-hero-picker .form-select {
    flex: 1 1 260px;
    min-width: 0;
}

.ak-hero-picker .form-control {
    flex: 0 1 130px;
}

.ak-hero-link {
    color: var(--ak-white);
    border-color: #46596a;
}

.ak-hero-link:hover {
    color: var(--ak-ink);
    background: var(--ak-white);
    border-color: var(--ak-white);
}


/* ---------- پنل‌های مدیریت و فروشنده ---------- */

/* بوت‌استرپ برای آیتم فعال آبی خودش را می‌گذارد؛ اینجا به رنگ برند برمی‌گردد
   تا پنل و سایت یک سامانه به نظر برسند، نه دو محصول. */
.list-group-item.active {
    background-color: var(--ak-red);
    border-color: var(--ak-red);
    color: var(--ak-white);
}

.btn-primary {
    background-color: var(--ak-red);
    border-color: var(--ak-red);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ak-red-deep);
    border-color: var(--ak-red-deep);
}

.bg-primary {
    background-color: var(--ak-red) !important;
}

.text-primary {
    color: var(--ak-red-deep) !important;
}

a.link-primary,
.form-check-input:checked {
    background-color: var(--ak-red);
    border-color: var(--ak-red);
}


/* ---------- مجله فنی ---------- */

/* بالای صفحه‌ی مجله: سرمه‌ای برند، با درخشش قرمز ملایم گوشه */
.ak-mag-hero {
    position: relative;
    overflow: hidden;
    color: var(--ak-white);
    border-radius: 16px;
    padding: 2.4rem 2.2rem 1.7rem;
    margin-bottom: 1.8rem;
    background:
        radial-gradient(900px 320px at 100% -30%, rgba(226, 35, 26, .38), transparent 60%),
        linear-gradient(135deg, #0b2a5b 0%, #123b7d 55%, #1a4b99 100%);
    box-shadow: var(--ak-shadow-lg);
}

.ak-mag-hero::after {
    content: "⚙";
    position: absolute;
    inset-inline-end: -1.2rem;
    bottom: -3.8rem;
    font-size: 13rem;
    line-height: 1;
    opacity: .07;
    pointer-events: none;
}

.ak-mag-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .3px;
    padding: .2rem .8rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    margin-bottom: .8rem;
}

.ak-mag-hero-title {
    font-size: clamp(1.45rem, 2.8vw, 2.1rem);
    font-weight: 800;
    margin: 0 0 .5rem;
    line-height: 1.6;
}

.ak-mag-hero-lead {
    max-width: 640px;
    margin: 0 0 1.3rem;
    color: rgba(255, 255, 255, .82);
    font-size: .98rem;
}

.ak-mag-tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ak-mag-tabs a {
    color: var(--ak-white);
    font-size: .88rem;
    font-weight: 600;
    padding: .38rem 1.1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    transition: background .18s ease, border-color .18s ease;
}

.ak-mag-tabs a:hover {
    background: rgba(255, 255, 255, .22);
    color: var(--ak-white);
}

.ak-mag-tabs a.is-active {
    background: var(--ak-red);
    border-color: var(--ak-red);
}

/* جلد مطلب: اگر عکس نباشد یا نیاید، همین پس‌زمینه‌ی رنگی با نماد نوع مطلب دیده می‌شود */
.ak-mag-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, #0b2a5b, #2a5fb0);
}

.ak-mag-cover.is-news {
    background: linear-gradient(135deg, #5c1410, #c0281f);
}

.ak-mag-cover.is-review {
    background: linear-gradient(135deg, #0b3b4a, #1d8a8a);
}

.ak-mag-ph {
    font-size: 3.4rem;
    opacity: .55;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .25));
}

.ak-mag-cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ak-mag-badge {
    position: absolute;
    top: .75rem;
    inset-inline-start: .75rem;
    font-size: .72rem;
    font-weight: 700;
    padding: .18rem .7rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, .94);
    color: var(--ak-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.ak-mag-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    padding: .14rem .7rem;
    border-radius: 20px;
    background: var(--ak-cream-deep);
    color: var(--ak-ink-soft);
}

.ak-mag-pill.is-new {
    background: var(--ak-red-soft);
    color: var(--ak-red-deep);
}

/* کارت مطلب */
.ak-mag-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    color: inherit;
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius);
    transition: box-shadow .2s ease, transform .2s ease;
}

.ak-mag-card:hover {
    color: inherit;
    transform: translateY(-4px);
    box-shadow: var(--ak-shadow-lg);
}

.ak-mag-card:hover .ak-mag-cover img,
.ak-mag-featured:hover .ak-mag-cover img {
    transform: scale(1.05);
}

.ak-mag-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1rem 1.15rem 1.15rem;
}

.ak-mag-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .8rem;
    font-size: .78rem;
    color: var(--ak-muted);
}

.ak-mag-title {
    margin: .5rem 0 .4rem;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.85;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ak-mag-excerpt {
    flex: 1;
    margin: 0;
    font-size: .86rem;
    color: var(--ak-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ak-mag-more {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .85rem;
    font-size: .84rem;
    font-weight: 700;
    color: var(--ak-red);
}

.ak-mag-more::after {
    content: "←";
    transition: transform .2s ease;
}

.ak-mag-card:hover .ak-mag-more::after,
.ak-mag-featured:hover .ak-mag-more::after,
.ak-mag-more:hover::after {
    transform: translateX(-5px);
}

/* مطلب شاخص */
.ak-mag-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    overflow: hidden;
    color: inherit;
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    box-shadow: var(--ak-shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}

.ak-mag-featured:hover {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: var(--ak-shadow-lg);
}

.ak-mag-featured .ak-mag-cover {
    aspect-ratio: auto;
    min-height: 320px;
}

.ak-mag-featured .ak-mag-ph {
    font-size: 5rem;
}

.ak-mag-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.2rem;
}

.ak-mag-featured-title {
    margin: .9rem 0 .7rem;
    font-size: clamp(1.25rem, 2.2vw, 1.7rem);
    font-weight: 800;
    line-height: 1.8;
}

.ak-mag-featured-excerpt {
    margin: 0;
    color: var(--ak-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ak-mag-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--ak-white);
    border: 1px dashed var(--ak-line);
    border-radius: 16px;
}

.ak-mag-empty-icon {
    display: block;
    font-size: 2.8rem;
    margin-bottom: .5rem;
}

.ak-mag-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    margin-top: 2rem;
}

.ak-mag-pager-info {
    font-size: .88rem;
    color: var(--ak-muted);
}

/* صفحه‌ی مطلب */
.ak-art-head,
.ak-art-sheet {
    max-width: 860px;
    margin-inline: auto;
}

.ak-art-head {
    margin-bottom: 1.4rem;
}

.ak-art-back {
    display: inline-block;
    margin-bottom: 1rem;
    margin-inline-end: .6rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ak-ink-soft);
}

.ak-art-title {
    margin: .7rem 0 .9rem;
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1.75;
}

.ak-art-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1.3rem;
    font-size: .85rem;
    color: var(--ak-muted);
}

.ak-art-cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 980px;
    margin: 0 auto 1.8rem;
    aspect-ratio: 21 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b2a5b, #2a5fb0);
    box-shadow: var(--ak-shadow-lg);
}

.ak-art-cover.is-news {
    background: linear-gradient(135deg, #5c1410, #c0281f);
}

.ak-art-cover.is-review {
    background: linear-gradient(135deg, #0b3b4a, #1d8a8a);
}

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

.ak-art-sheet {
    padding: 2rem 2.4rem;
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: 16px;
    box-shadow: var(--ak-shadow);
}

.ak-art-lead {
    margin: 0 0 1.6rem;
    padding: .5rem 1.1rem;
    font-size: 1.12rem;
    color: var(--ak-ink-soft);
    background: linear-gradient(to left, var(--ak-red-soft), transparent 70%);
    border-inline-start: 4px solid var(--ak-red);
    border-radius: 0 var(--ak-radius-sm) var(--ak-radius-sm) 0;
}

/* متن مطلب: خروجی ویرایشگر (تیتر، لیست، جدول، نقل‌قول، تصویر) */
.ak-article-body {
    font-size: 1.06rem;
    line-height: 2.25;
    overflow-wrap: anywhere;
}

.ak-article-body > :first-child {
    margin-top: 0;
}

.ak-article-body p {
    margin: 0 0 1.15rem;
}

.ak-article-body h2 {
    margin: 2.3rem 0 .9rem;
    padding-inline-start: .85rem;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.8;
    border-inline-start: 4px solid var(--ak-red);
}

.ak-article-body h3 {
    margin: 1.9rem 0 .7rem;
    font-size: 1.22rem;
    font-weight: 700;
}

.ak-article-body h4 {
    margin: 1.5rem 0 .6rem;
    font-size: 1.06rem;
    font-weight: 700;
    color: var(--ak-ink-soft);
}

.ak-article-body ul,
.ak-article-body ol {
    margin: 0 0 1.25rem;
    padding-inline-start: 1.7rem;
}

.ak-article-body li {
    margin-bottom: .4rem;
}

.ak-article-body li::marker {
    color: var(--ak-red);
    font-weight: 700;
}

.ak-article-body a {
    color: #1a4b99;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.ak-article-body a:hover {
    color: var(--ak-red-deep);
}

.ak-article-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.3rem;
    color: var(--ak-ink-soft);
    background: var(--ak-cream);
    border-inline-start: 4px solid var(--ak-ink);
    border-radius: var(--ak-radius-sm);
}

.ak-article-body blockquote p:last-child {
    margin-bottom: 0;
}

.ak-article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4rem auto;
    border-radius: var(--ak-radius);
}

.ak-article-body figure {
    margin: 1.4rem 0;
}

.ak-article-body figcaption {
    margin-top: -.6rem;
    text-align: center;
    font-size: .84rem;
    color: var(--ak-muted);
}

.ak-article-body table {
    display: block;
    width: 100%;
    margin: 1.5rem 0;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .95rem;
    line-height: 1.9;
}

.ak-article-body th,
.ak-article-body td {
    padding: .6rem .9rem;
    border: 1px solid var(--ak-line);
}

.ak-article-body th {
    color: var(--ak-white);
    background: var(--ak-ink);
}

.ak-article-body tbody tr:nth-child(even) {
    background: var(--ak-cream);
}

.ak-article-body code,
.ak-article-body pre {
    direction: ltr;
    text-align: left;
    font-size: .9rem;
    background: var(--ak-cream);
    border-radius: var(--ak-radius-sm);
}

.ak-article-body code {
    padding: .1rem .4rem;
}

.ak-article-body pre {
    margin: 1.4rem 0;
    padding: 1rem 1.2rem;
    overflow-x: auto;
    border: 1px solid var(--ak-line);
}

.ak-article-body pre code {
    padding: 0;
    background: none;
}

@media (max-width: 767.98px) {
    .ak-mag-hero {
        padding: 1.7rem 1.3rem 1.3rem;
    }

    .ak-mag-featured {
        grid-template-columns: 1fr;
    }

    .ak-mag-featured .ak-mag-cover {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .ak-mag-featured-body {
        padding: 1.3rem 1.2rem 1.5rem;
    }

    .ak-art-cover {
        aspect-ratio: 16 / 10;
    }

    .ak-art-sheet {
        padding: 1.3rem 1.2rem;
    }

    .ak-article-body {
        font-size: 1rem;
        line-height: 2.1;
    }
}


/* ---------- عرضه‌ها در پنل مدیریت محصول ---------- */

.ak-offers {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-bottom: 1.4rem;
}

.ak-offers-empty {
    margin-bottom: 1.2rem;
    padding: 1.2rem;
    text-align: center;
    font-size: .9rem;
    color: var(--ak-muted);
    background: var(--ak-cream);
    border: 1px dashed var(--ak-line);
    border-radius: var(--ak-radius);
}

.ak-offer {
    overflow: hidden;
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius);
}

.ak-offer.is-inactive .ak-offer-head {
    opacity: .65;
}

.ak-offer-head {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
}

.ak-offer-pack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    line-height: 1.2;
    color: var(--ak-white);
    background: linear-gradient(135deg, var(--ak-ink), #1a4b99);
    border-radius: 12px;
}

.ak-offer-pack b {
    font-size: 1.4rem;
}

.ak-offer-pack span {
    font-size: .65rem;
    opacity: .8;
}

.ak-offer-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .5rem;
    font-weight: 700;
}

.ak-offer-meta {
    margin-top: .1rem;
    font-size: .78rem;
    color: var(--ak-muted);
}

.ak-offer-price {
    text-align: end;
}

.ak-offer-final {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.5;
}

.ak-offer-final small {
    font-size: .72rem;
    font-weight: 500;
    color: var(--ak-muted);
}

.ak-offer-old {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    font-size: .8rem;
    color: var(--ak-muted);
}

.ak-offer-off {
    padding: .05rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    color: var(--ak-red-deep);
    background: var(--ak-red-soft);
    border-radius: 20px;
}

.ak-offer-actions {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.ak-offer-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem 1.3rem;
    padding: .55rem 1rem;
    font-size: .82rem;
    color: var(--ak-ink-soft);
    background: var(--ak-cream);
    border-top: 1px solid var(--ak-line);
}

.ak-offer-stat b {
    color: var(--ak-ink);
}

.ak-offer-stock {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-inline-start: auto;
}

.ak-offer-stock .form-control {
    width: 84px;
}

.ak-offer-edit {
    padding: 1rem;
    background: #fbfcfd;
    border-top: 1px solid var(--ak-line);
}

.ak-offer-new {
    background: #fbfcfd;
    border-style: dashed;
}

.ak-offer-new-title {
    padding: .8rem 1rem .6rem;
    font-size: .95rem;
    font-weight: 700;
}

.ak-offer-group {
    height: 100%;
    padding: .8rem .9rem .9rem;
    background: var(--ak-white);
    border: 1px solid var(--ak-line);
    border-radius: var(--ak-radius);
}

.ak-offer-group-title {
    margin-bottom: .55rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--ak-ink-soft);
}

.ak-offer-summary {
    padding: .45rem .7rem;
    font-size: .82rem;
    line-height: 1.8;
    color: var(--ak-ink-soft);
    background: var(--ak-cream);
    border: 1px dashed var(--ak-line);
    border-radius: var(--ak-radius-sm);
}

.ak-offer-more summary {
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ak-ink-soft);
}

@media (max-width: 767.98px) {
    .ak-offer-head {
        grid-template-columns: auto 1fr;
    }

    .ak-offer-price {
        grid-column: 1 / -1;
        text-align: start;
    }

    .ak-offer-old {
        justify-content: flex-start;
    }

    .ak-offer-actions {
        grid-column: 1 / -1;
    }

    .ak-offer-stock {
        width: 100%;
        margin-inline-start: 0;
    }
}