/* =========================
       Peyda
    ========================== */
@font-face {
    font-family: "Peyda";
    src: url("./fonts/PeydaWeb.woff2") format("woff2"), url("./fonts/PeydaWeb.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f6f7fb;
    --card: #ffffff;
    --muted: #6b7280;
    --text: #0f172a;
    --primary: #f5a400;
    --primary-dark: #e39600;
    --blue: #1677ff;
    --border: #e6eaf0;
    --soft: #f8fafc;
    --shadow-sm: 0 6px 18px rgba(2, 6, 23, 0.06);
    --shadow-md: 0 16px 40px rgba(2, 6, 23, 0.10);
    --radius-lg: 18px;
    --radius-xl: 24px;
    --transition: 220ms cubic-bezier(.2,.8,.2,1);
}

* {
    box-sizing: border-box
}

body {
    cursor: url("image/airplane_cursor.png") 16 16, auto;
    margin: 0;
    font-family: "Peyda","Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    direction: rtl;
}

.container {
    width: min(1300px, 92vw);
    margin-inline: auto;

}

/* --------------------------- Topbar ----------------------------*/
.topbar {
    background: #0b1324;
    color: #fff;
    font-size: 12px;
    padding: 8px 0;
}

    .topbar .row {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: space-between;
        opacity: .9;
    }

    .topbar a {
        color: #fff;
        text-decoration: none;
        opacity: .85
    }

        .topbar a:hover {
            opacity: 1
        }

/* --------------------------- Hero ----------------------------*/
/* =========================
   HERO (Split Layout)
========================= */
.field .label {
    font-size: 12px;
    color: #94a3b8;
    transition: 0.3s;
}

.field:focus-within .label {
    color: #2563eb;
    transform: translateY(-2px);
}
.hero {
    position: relative;
    padding: 26px 0 40px;
}

.hero-shell {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: visible; /* مهم برای city/passenger popup */
    box-shadow: var(--shadow-md);
    background: #fff;
    border: 1px solid #eef0f6;
    margin-top: -170px;
    /* در ساختار جدید، min-height لازم نیست */
    min-height: unset;
}

/* ✅ ساختار دو بخشی: بالا تصویر/بک‌گراند، پایین تب + فرم */
.hero-shell--split {
    display: grid;
    grid-template-rows: 180px auto; /* ارتفاع بخش بالایی */
    gap: 14px;
    padding: 10px;
}

/* ✅ بخش بالایی بک‌گراند/عکس */
.hero-top {
    position: relative;
    overflow: hidden; /* بک‌گراند داخل خودش کات شود */
    background: #fff;
    min-height: 500px;
    bottom:120px;
}

/* استیج بک‌گراند فقط داخل بخش بالایی */
.hero-bg-stage {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 0px !important;
}

.hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transform: translateY(0);
    will-change: transform, opacity;
    filter: saturate(1.05);
}

/* ✅ بک‌گراندهای تب‌ها */
.bg-domestic {
    background-image: radial-gradient(900px 420px at 10% 85%, rgba(37,99,235,.10), transparent 60%), radial-gradient(700px 380px at 90% 10%, rgba(14,165,233,.12), transparent 60%), linear-gradient(135deg, #ffffff, #f2f7ff, #eef6ff);
}

.bg-international {
    background-image: radial-gradient(900px 420px at 15% 80%, rgba(245,164,0,.11), transparent 60%), radial-gradient(700px 380px at 85% 15%, rgba(250,204,21,.14), transparent 60%), linear-gradient(135deg, #ffffff, #fff7e8, #fff3d6);
}

.bg-train {
    background-image: radial-gradient(900px 420px at 10% 85%, rgba(79,70,229,.10), transparent 60%), radial-gradient(700px 380px at 90% 10%, rgba(100,116,139,.12), transparent 60%), linear-gradient(135deg, #ffffff, #f6f7ff, #f1f5ff);
}

.bg-bus {
    background-image: radial-gradient(900px 420px at 10% 85%, rgba(16,185,129,.10), transparent 60%), radial-gradient(700px 380px at 90% 10%, rgba(20,184,166,.12), transparent 60%), linear-gradient(135deg, #ffffff, #f2fff9, #ecfdf5);
}

.bg-tour {
    background-image: radial-gradient(900px 420px at 10% 85%, rgba(244,63,94,.08), transparent 60%), radial-gradient(700px 380px at 90% 10%, rgba(236,72,153,.10), transparent 60%), linear-gradient(135deg, #ffffff, #fff1f6, #ffeef8);
}

.bg-hotel {
    background-image: radial-gradient(900px 420px at 10% 85%, rgba(139,92,246,.10), transparent 60%), radial-gradient(700px 380px at 90% 10%, rgba(217,70,239,.10), transparent 60%), linear-gradient(135deg, #ffffff, #f7f1ff, #f9ecff);
}

.bg-villa {
    background-image: radial-gradient(900px 420px at 10% 85%, rgba(249,115,22,.10), transparent 60%), radial-gradient(700px 380px at 90% 10%, rgba(132,204,22,.10), transparent 60%), linear-gradient(135deg, #ffffff, #fff7ed, #f7fee7);
}

/* انیمیشن بک‌گراند */
.bg-enter {
    transform: translateY(30%);
    opacity: 0;
    animation: bgSlideUp 520ms cubic-bezier(.2,.8,.2,1) forwards;
}

.bg-exit {
    opacity: 1;
    animation: bgFadeOut 240ms ease forwards;
}

@keyframes bgSlideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes bgFadeOut {
    to {
        opacity: 0;
    }
}

/* ✅ محتوا پایین */
.hero-content {
    position: relative;
    z-index: 2;
    padding: 0; /* کنترل با نسخه پایین */
}

.hero-content--bottom {
    padding: 0px 10px 16px;
}

/* =========================
   TABS
========================= */

.search-btn {
    position: relative;
    overflow: hidden;
}

    .search-btn::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.4), transparent );
        transform: translateX(-120%);
    }

    .search-btn:hover::after {
        transform: translateX(120%);
        transition: transform 1s ease;
    }

.tabs {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 6px 4px 16px;
    border-bottom: 1px solid rgba(2,6,23,.06);
    font-family: peyda;
}

.tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 10px 12px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #0f172a;
    transition: var(--transition);
    font-family: peyda;
    font-weight: 800;
}

    .tab:hover {
        background: rgba(2,6,23,0.04);
    }

    .tab.active {
        background: #fff;
        border-color: rgba(22,119,255,.18);
        box-shadow: var(--shadow-sm);
        color: var(--blue);
    }

    .tab .icon {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        border-radius: 10px;
        background: rgba(2,6,23,.05);
        transition: var(--transition);
        font-size: 14px;
    }

    .tab.active .icon {
        background: rgba(22,119,255,.10);
    }

.badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #e6f7ec;
    color: #067647;
    border: 1px solid #c9f0d7;
    margin-inline-start: 2px;
}

.tabs-underline {
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(22,119,255,.22), transparent);
    opacity: .6;
    margin-top: -12px;
}

/* =========================
   FORM ZONE
========================= */

.form-zone {
    padding: 14px 2px 10px;
    position: relative;
}

.form-panel {
    display: none;
    animation: panelFade 180ms ease;
}

    .form-panel.active {
        display: block;
    }

@keyframes panelFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    height: 36px;
    border-radius: 999px;
    background: var(--soft);
    border: 1px solid var(--border);
    font-size: 12.5px;
    color: #0f172a;
    cursor: pointer;
    user-select: none;
    position: relative;
}

    .pill select {
        appearance: none;
        background: transparent;
        border: none;
        outline: none;
        font-family: inherit;
        font-size: 12.5px;
        padding-inline: 6px 18px;
        cursor: pointer;
    }

    .pill::after {
        content: "▾";
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 10px;
        color: #64748b;
        pointer-events: none;
    }

.search-row {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    align-items: stretch;
}

.search-btn {
    border: none;
    background: var(--primary);
    color: #111827;
    font-weight: 800;
    font-size: 15.5px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s;
    box-shadow: 0 10px 24px rgba(245,164,0,.22);
    min-width: 160px;
    height: 56px;
}

    .search-btn:hover {
        background: var(--primary-dark);
        transform: translateY(-2px);
        box-shadow: 0 12px 30px rgba(37,99,235,.3);
    }

    .search-btn:active {
        transform: translateY(0);
    }

.fields-grid {
    display: flex;
    flex: 1;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
}

.field {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    min-width: 0;
    transition: var(--transition);
    flex: 1 1 170px;
    position: relative;
    overflow: visible;
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid #e5e7eb;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease !important;
}
    .field:hover {
        border-color: #93c5fd !important;
        box-shadow: 0 6px 18px rgba(37,99,235,.12) !important;
        transform: translateY(-1px) !important;
    }
    .field:focus-within,
    .field.is-filled {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37,99,235,.18), 0 10px 28px rgba(37,99,235,.18) !important;
        transform: translateY(-1px) !important;
    }
    .field label {
        font-size: 12px !important;
        color: #6b7280 !important;
        transition: color .2s ease !important;
    }

    .field:focus-within label,
    .field.is-filled label {
        color: #2563eb !important;
        font-weight: 600 !important;
    }

    .field.compact {
        flex: 0 0 64px;
        justify-content: center;
        padding: 0;
    }

    .field:focus-within,
    .field.is-open {
        border-color: rgba(22,119,255,.35);
        box-shadow: 0 0 0 4px rgba(22,119,255,.08);
    }

    .field .label {
        font-size: 11px;
        color: #7a8597;
        min-width: 54px;
        white-space: nowrap;
    }

    .field input {
        border: none;
        outline: none;
        background: transparent;
        width: 100%;
        font-size: 13.5px;
        font-family: inherit;
        color: #0f172a;
        min-width: 0;
    }

        .field input::placeholder {
            color: #9aa3b2;
        }

    /* فیلدهایی که select دارند */
    .field.has-select {
        padding-left: 30px;
    }

        .field.has-select select {
            appearance: none;
            border: none;
            outline: none;
            background: transparent;
            width: 100%;
            font-size: 13.5px;
            font-family: inherit;
            color: #0f172a;
            cursor: pointer;
        }

        .field.has-select::after {
            content: "▾";
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            color: #64748b;
            pointer-events: none;
        }

.swap-btn {
    width: 40px;
    height: 56px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--transition);
    font-weight: 700;
}

    .swap-btn:hover {
        border-color: rgba(22,119,255,.35);
        background: rgba(22,119,255,.04);
    }

@media (max-width: 1100px) {
    .fields-grid {
        flex-wrap: wrap;
    }
}

@media (max-width: 920px) {
    .search-row {
        flex-direction: column;
    }

    .search-btn {
        width: 100%;
    }
}

/* =========================
   CITY SELECT
========================= */

.city-select {
    position: relative;
    width: 100%;
}

    .city-select .value-btn {
        width: 100%;
        height: 100%;
        background: transparent;
        border: 0;
        outline: 0;
        cursor: pointer;
        font-family: inherit;
        font-size: 13.5px;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        color: #0f172a;
    }

        .city-select .value-btn .placeholder {
            color: black;
        }

.city-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(380px, 90vw);
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(2,6,23,.12);
    z-index: 9999;
    display: none;
    overflow: hidden;
}

    .city-popup.open {
        display: block;
    }

    .city-popup .search {
        padding: 10px;
        border-bottom: 1px solid #eef1f6;
        background: #fbfcff;
    }

        .city-popup .search input {
            width: 100%;
            height: 40px;
            border-radius: 10px;
            border: 1px solid #e6eaf0;
            padding: 0 12px;
            font-family: inherit;
            font-size: 12.5px;
            outline: none;
        }

            .city-popup .search input:focus {
                border-color: rgba(22,119,255,.35);
                box-shadow: 0 0 0 3px rgba(22,119,255,.08);
            }

.city-list {
    max-height: 260px;
    overflow: auto;
}

.city-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: 120ms ease;
}

    .city-item:hover {
        background: #f8fafc;
    }

    .city-item .title {
        font-size: 13.5px;
        font-weight: 600;
    }

    .city-item .sub {
        font-size: 11px;
        color: #6b7280;
        margin-top: 2px;
    }

.badge-mini {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #e0e7ff;
}

/* =========================
   PASSENGER SELECT
========================= */

.passenger-select {
    position: relative;
    width: 100%;
}

    .passenger-select .value-btn {
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-family: inherit;
        font-size: 13.5px;
        color: #0f172a;
    }

.passenger-popup {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: min(360px, 90vw);
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(2,6,23,.12);
    z-index: 9999;
    display: none;
    overflow: hidden;
}

    .passenger-popup.open {
        display: block;
    }

    .passenger-popup .rows {
        padding: 10px 12px 8px;
    }

.pass-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #f1f5f9;
}

    .pass-row:last-child {
        border-bottom: none;
    }

    .pass-row .titles {
        text-align: right;
    }

        .pass-row .titles .main {
            font-size: 13px;
            font-weight: 600;
        }

        .pass-row .titles .sub {
            font-size: 11px;
            color: #6b7280;
            margin-top: 2px;
        }

    .pass-row .counter {
        display: flex;
        align-items: center;
        gap: 8px;
    }

.pass-btn {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 16px;
}

    .pass-btn:hover {
        background: #e0f2fe;
        border-color: #bfdbfe;
    }

.pass-count {
    min-width: 20px;
    text-align: center;
    font-weight: 600;
}

.passenger-popup-footer {
    padding: 8px 12px 10px;
    border-top: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #6b7280;
    background: #fbfcff;
}

/* =========================
   DRP (DATE RANGE PICKER)
========================= */

.drp {
    position: fixed;
    width: min(720px, 94vw);
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(2,6,23,.12);
    z-index: 9999;
    display: none;
    overflow: hidden;
}

    .drp.open {
        display: block;
    }

.drp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #eef1f6;
    background: #fbfcff;
    font-size: 11.5px;
    color: #6b7280;
}

    .drp-header .linkish {
        color: var(--blue);
        cursor: pointer;
        font-weight: 500;
        user-select: none;
    }

.drp-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 10px 10px 2px;
    gap: 8px;
}

@media (max-width: 760px) {
    .drp-body {
        grid-template-columns: 1fr;
    }
}

.month {
    padding: 6px 8px 14px;
}

.month-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 800;
    font-size: 13.8px;
    margin-bottom: 8px;
    position: relative;
}

.month-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-weight: 800;
}

    .month-nav.prev {
        right: 6px;
    }

    .month-nav.next {
        left: 6px;
    }

.weekdays,
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

    .weekdays span {
        text-align: center;
        font-size: 10.5px;
        color: #94a3b8;
        padding: 2px 0 6px;
        font-weight: 600;
    }

.day {
    position: relative;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    cursor: pointer;
    transition: 150ms ease;
    user-select: none;
}

    .day.muted {
        color: #cbd5e1;
        cursor: default;
    }

    .day:hover:not(.muted) {
        background: rgba(2,6,23,.05);
    }

    .day.start,
    .day.end {
        background: var(--primary);
        color: #111827;
        font-weight: 800;
    }

    .day.in-range {
        background: #ffd98a;
        color: #111827;
    }

    .day .tip {
        position: absolute;
        top: -30px;
        right: 50%;
        transform: translateX(50%);
        background: #0f172a;
        color: #fff;
        font-size: 10.2px;
        padding: 4px 7px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: 120ms ease;
    }

    .day:hover .tip {
        opacity: 1;
    }

.drp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-top: 1px solid #eef1f6;
    background: #fbfcff;
}

    .drp-footer .note {
        font-size: 11px;
        color: #6b7280;
    }

.drp-confirm {
    border: none;
    background: #7db7ee;
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    padding: 8px 20px;
    cursor: pointer;
    font-family: inherit;
}

/* =========================
   TOUR CARDS
========================= */

.tour-type-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.tour-type {
    flex: 1 1 260px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 6px 14px rgba(2,6,23,.04);
}

    .tour-type.active {
        border-color: rgba(22,119,255,.35);
        box-shadow: 0 10px 22px rgba(22,119,255,.10);
    }

    .tour-type .title {
        font-weight: 800;
        font-size: 13.8px;
    }

    .tour-type .sub {
        font-size: 11px;
        color: var(--muted);
        margin-top: 2px;
    }

.radio-dot {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    border: 2px solid #cbd5e1;
    position: relative;
    flex: 0 0 auto;
}

.tour-type.active .radio-dot {
    border-color: var(--blue);
}

    .tour-type.active .radio-dot::after {
        content: "";
        position: absolute;
        inset: 4px;
        background: var(--blue);
        border-radius: 999px;
    }

/* =========================
   OPTIONAL RESPONSIVE TWEAK
========================= */

@media (max-width: 1200px) {
    .hero-shell--split {
        grid-template-rows: 160px auto;
    }

    .hero-top {
        min-height: 160px;
    }
}

@media (max-width: 768px) {
    .hero-shell--split {
        grid-template-rows: 140px auto;
        padding: 8px;
    }

    .hero-top {
        min-height: 140px;
        border-radius: 16px;
    }
}

/* --------------------------- Misc sections ----------------------------*/
.section {
    padding: 26px 0;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

    .section-title h3 {
        margin: 0;
        font-size: 18px;
    }

    .section-title .hint {
        font-size: 12px;
        color: var(--muted);
    }

.promo-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 14px;
}

@media (max-width: 980px) {
    .promo-grid {
        grid-template-columns: 1fr;
    }
}

.promo-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 18px 16px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

    .promo-card .tag {
        display: inline-block;
        padding: 4px 8px;
        font-size: 10px;
        border-radius: 999px;
        background: rgba(22,119,255,.08);
        color: var(--blue);
        border: 1px solid rgba(22,119,255,.18);
        margin-bottom: 8px;
    }

    .promo-card h4 {
        margin: 0 0 6px;
        font-size: 16px;
    }

    .promo-card p {
        margin: 0;
        color: var(--muted);
        font-size: 12.5px;
        line-height: 1.7;
    }

    .promo-card .cta {
        margin-top: 12px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 10px;
        background: #0f172a;
        color: #fff;
        text-decoration: none;
        font-size: 12px;
    }
/* =============================
   TRS FEATURE (Isolated styles)
   ============================= */
.trs-feature {
    padding: 28px 0;
    font-family: "Peyda","Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.trs-feature__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 0.95fr 1.85fr;
    gap: 18px;
    align-items: stretch;
}

/* ---------------- LEFT COLUMN ---------------- */
.trs-lt {
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    padding: 22px 22px 18px;
    box-shadow: 0 10px 26px rgba(2,6,23,.06);
    position: relative;
    overflow: hidden;
}

.trs-lt__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.trs-lt__bar {
    width: 4px;
    height: 26px;
    background: #1d4ed8;
    border-radius: 999px;
}

.trs-lt__title {
    font-size: 18px;
    margin: 0;
    color: #0f172a;
    font-weight: 800;
}

.trs-lt__desc {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.8;
    color: #475569;
}

.trs-lt-card {
    border: 1px solid #e6eaf0;
    border-radius: 14px;
    overflow: hidden;
    background: #fbfdff;
    box-shadow: 0 8px 18px rgba(2,6,23,.05);
}

.trs-lt-card__media {
    height: 210px;
    background: #eef2f7;
}

.trs-lt-card__img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.trs-lt-card__body {
    padding:40px 14px 12px;
}

.trs-lt-card__title {
    margin: 0 0 10px;
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
}

.trs-lt-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.trs-lt-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e6eaf0;
    padding: 6px 8px;
    border-radius: 10px;
}

.trs-lt-card__price-label {
    color: #64748b;
}

.trs-lt-card__price-value {
    font-weight: 800;
}

.trs-lt-card__price-cur {
    color: #64748b;
}

.trs-lt-card__btn {
    border: none;
    cursor: pointer;
    border-radius: 10px;
    padding: 8px 12px;
    background: #f5a400;
    color: #111827;
    font-weight: 800;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 180ms ease;
}

    .trs-lt-card__btn:hover {
        filter: brightness(.96);
        transform: translateY(-1px);
    }

.trs-lt-card__btn-icon {
    display: inline-flex;
}

.trs-lt__cta {
    display: inline-flex;
    margin-top: 14px;
    font-size: 12px;
    text-decoration: none;
    color: #1d4ed8;
    font-weight: 600;
}

/* ---------------- RIGHT HERO AREA ---------------- */
.trs-hero {
    position: relative;
    min-height: 320px;
}

.trs-hero__main {
    background: radial-gradient(900px 420px at 10% 85%, rgba(255,255,255,.07), transparent 60%), radial-gradient(700px 380px at 85% 10%, rgba(255,255,255,.08), transparent 60%), linear-gradient(135deg, #f5a400, #e39600);
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 34px rgba(2,6,23,.12);
    height: 100%;
    padding: 26px 26px 18px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    position: relative;
}

.trs-hero__content {
    color: #fff;
    padding-left: 10px;
}

.trs-hero__title {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.1vw, 28px);
    font-weight: 900;
    letter-spacing: -0.2px;
}

.trs-hero__text {
    margin: 0 0 16px;
    font-size: 12.8px;
    line-height: 1.8;
    color: rgba(255,255,255,.92);
    max-width: 34ch;
}

.trs-hero__btn {
    display: inline-flex;
    text-decoration: none;
    background: #ffffff;
    color: #0f172a;
    font-weight: 800;
    font-size: 12.5px;
    padding: 10px 14px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.trs-hero__art{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0;
    position: relative;
    right: 57%;
    width: 46%;
    bottom: -70px;
}

.trs-hero__doodle {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 2px dashed rgba(255,255,255,.35);
    border-radius: 18px;
    left: 8%;
    top: 50%;
    transform: translateY(-50%) rotate(-14deg);
    opacity: .65;
}

/* ---------------- MINI CARDS (overlay) ---------------- */
.trs-mini {
    position: absolute;
    background: #1b138a;
    color: #fff;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    padding: 12px 12px 10px;
    width: min(280px, 40vw);
    box-shadow: 0 10px 24px rgba(2,6,23,.18);
}

.trs-mini__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.trs-mini__dot {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: rgba(255,255,255,.12);
    display: inline-block;
}

.trs-mini__title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 800;
}

.trs-mini__desc {
    margin: 0 0 10px;
    font-size: 10.8px;
    line-height: 1.6;
    color: rgba(255,255,255,.88);
}

.trs-mini--stories {
    top: 14px;
    left: 18px;
    background: #1f138f;
}

.trs-mini--testi {
    bottom: 14px;
    right: 18px;
    background: #1f138f;
}

/* ---------------- STORIES STRIP ---------------- */
.trs-stories {
    display: flex;
    gap: 8px;
    overflow: auto;
    padding-bottom: 2px;
}

.trs-story-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    padding: 2px;
    background: linear-gradient(135deg, #60a5fa, #f472b6, #facc15);
    cursor: pointer;
}

.trs-story-avatar__inner {
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: #0b1324;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.12);
}

.trs-story-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------------- TESTIMONIALS ---------------- */
.trs-testi {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 10px;
    padding: 10px 10px 8px;
}

.trs-testi__name {
    font-size: 11.5px;
    font-weight: 800;
    margin-bottom: 6px;
}

.trs-testi__text {
    font-size: 10.6px;
    line-height: 1.6;
    color: rgba(255,255,255,.9);
    min-height: 42px;
}

.trs-testi__bullets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.trs-testi__bullet {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,.25);
}

    .trs-testi__bullet.is-active {
        background: #fff;
    }

/* ---------------- STORY MODAL ---------------- */
.trs-story-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    font-family: inherit;
}

    .trs-story-modal.is-open {
        display: block;
    }

.trs-story-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,.6);
    backdrop-filter: blur(6px);
}

.trs-story-modal__panel {
    position: relative;
    width: min(420px, 92vw);
    height: min(760px, 92vh);
    background: #05070f;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    margin: 4vh auto 0;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

.trs-story-modal__top {
    position: relative;
    padding: 10px 12px 8px;
    background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
    z-index: 2;
}

.trs-story-progress {
    display: grid;
    grid-auto-flow: column;
    gap: 6px;
    margin-bottom: 10px;
}

.trs-story-progress__seg {
    height: 3px;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    overflow: hidden;
}

.trs-story-progress__fill {
    height: 100%;
    width: 0%;
    background: #fff;
    transform-origin: right center;
}

.trs-story-modal__meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.trs-story-modal__avatar {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.15);
}

.trs-story-modal__meta-text {
    color: #fff;
}

.trs-story-modal__name {
    font-size: 11.5px;
    font-weight: 800;
}

.trs-story-modal__time {
    font-size: 10px;
    opacity: .8;
    margin-top: 1px;
}

.trs-story-modal__controls {
    position: absolute;
    left: 10px;
    top: 44px;
    display: flex;
    gap: 6px;
}

.trs-story-modal__ctl {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 10.5px;
    padding: 5px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.trs-story-modal__ctl--ghost {
    background: transparent;
}

.trs-story-modal__stage {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.trs-story-slide {
    width: 100%;
    height: 100%;
    position: relative;
}

.trs-story-slide__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .95;
}

.trs-story-slide__caption {
    position: absolute;
    bottom: 18px;
    right: 14px;
    left: 14px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    color: #fff;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.7;
    text-align: right;
    backdrop-filter: blur(6px);
}

.trs-story-modal__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 3;
}

.trs-story-modal__nav--prev {
    right: 0;
}

.trs-story-modal__nav--next {
    left: 0;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
    .trs-feature__container {
        grid-template-columns: 1fr;
    }

    .trs-hero {
        min-height: 360px;
    }

    .trs-mini {
        position: static;
        width: 100%;
        margin-top: 10px;
    }

    .trs-hero__main {
        grid-template-columns: 1fr;
        text-align: right;
    }

    .trs-hero__text {
        max-width: 100%;
    }

    .trs-hero__art {
        justify-content: flex-end;
    }
}
/* ===============================
   LAST MINUTE CAROUSEL (ADD-ON)
   کلاس‌ها اختصاصی trs- هستند
================================ */

.trs-lt-carousel {
    position: relative;
    margin-top: 10px;
}

.trs-lt-carousel__viewport {
    overflow: hidden;
    border-radius: 14px; /* هماهنگ با کارت */
    perspective: 900px; /* برای حس سه‌بعدی */
}

.trs-lt-carousel__track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
    transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

    /* هر اسلاید همان کارت خودت است */
    .trs-lt-carousel__track > .trs-lt-card {
        flex: 0 0 100%;
        min-width: 100%;
        transform-style: preserve-3d;
        transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 420ms cubic-bezier(.2,.8,.2,1), filter 420ms cubic-bezier(.2,.8,.2,1);
    }

/* حالت‌های سه‌بعدی */
.trs-lt-card.is-active {
    transform: translateZ(0) scale(1);
    opacity: 1;
    filter: none;
}

.trs-lt-card.is-prev {
    transform: translateZ(-30px) scale(.96) rotateY(6deg);
    opacity: .75;
    filter: saturate(.9);
}

.trs-lt-card.is-next {
    transform: translateZ(-30px) scale(.96) rotateY(-6deg);
    opacity: .75;
    filter: saturate(.9);
}

/* دکمه‌های ناوبری */
.trs-lt-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e6eaf0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(2,6,23,.08);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    transition: 160ms ease;
    z-index: 2;
}

    .trs-lt-carousel__nav:hover {
        transform: translateY(-50%) scale(1.04);
        border-color: rgba(22,119,255,.35);
        background: #f8fafc;
    }

/* جای‌گذاری پیکان‌ها */
.trs-lt-carousel__nav--prev {
    right: 8px;
}

.trs-lt-carousel__nav--next {
    left: 8px;
}

/* حالت غیر فعال */
.trs-lt-carousel__nav.is-disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

/* موبایل */
@media (max-width: 520px) {
    .trs-lt-carousel__nav {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 16px;
    }
}
/* Fix RTL carousel issue */
.trs-lt-carousel__viewport,
.trs-lt-carousel__track {
    direction: ltr;
}

/* keep content RTL */
.trs-lt-card {
    direction: rtl;
}

footer {
    padding: 30px 0 60px;
    color: var(--muted);
    font-size: 12px;
}

.hero-bg-stage {
    border-radius: 0px !important;
    overflow: hidden;
}
/* =========================
   Two Images Side by Side
========================= */

.two-images {
    padding: 26px 0;
}

.two-images__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: stretch;
}

.two-images__item {
    margin: 0;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(2,6,23,.06);
}

    .two-images__item img {
        width: 100%;
        height: 260px; /* می‌تونی تغییر بدی */
        object-fit: cover;
        display: block;
    }

/* Responsive */
@media (max-width: 768px) {
    .two-images__container {
        grid-template-columns: 1fr;
    }

    .two-images__item img {
        height: 220px;
    }
}
/* =========================
   Wide Banner Section
========================= */

.wide-banner {
    padding: 26px 0;
}

.wide-banner__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

.wide-banner__card {
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(2,6,23,.06);
    position: relative;
}

/* خود تصویر */
.wide-banner__img {
    width: 100%;
    height: clamp(160px, 22vw, 280px); /* ارتفاع منعطف */
    object-fit: cover; /* عکس کشیده قشنگ پر میشه */
    display: block;
    filter: brightness(0.7);
}

/* اگر خواستی متن روی بنر داشته باشی */
.wide-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(-40deg, rgba(2, 6, 23, .45), rgba(2, 6, 23, .18), rgba(2, 6, 23, 0));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 18px 22px;
    direction: ltr;
}

.wide-banner__content {
    color: #fff;
    text-align: right;
    max-width: 46ch;
}

.wide-banner__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.22);
    margin-bottom: 8px;
}

.wide-banner__title {
    margin: 0 0 6px;
    font-size: clamp(16px, 1.6vw, 22px);
    font-weight: 900;
}

.wide-banner__text {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    opacity: .95;
}

/* CTA اختیاری */
.wide-banner__cta {
    display: inline-flex;
    margin-top: 10px;
    text-decoration: none;
    background: #f5a400;
    color: #111827;
    font-weight: 900;
    font-size: 11.5px;
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(245,164,0,.25);
}

    .wide-banner__cta:hover {
        filter: brightness(.98);
        transform: translateY(-1px);
    }

/* موبایل */
@media (max-width: 520px) {
    .wide-banner__overlay {
        padding: 14px 14px;
        background: linear-gradient(180deg, rgba(2,6,23,.15), rgba(2,6,23,.55) );
        align-items: flex-end;
    }
}

/* =========================
   Navy App Promo Section
========================= */

.app-promo {
    --navy: #0b1324;
    --navy-2: #0f1b33;
    --accent: #f5a400;
    padding: 28px 0;
}

.app-promo__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
    background: radial-gradient(900px 420px at 10% 85%, rgba(255,255,255,.06), transparent 60%), radial-gradient(700px 380px at 90% 15%, rgba(255,255,255,.08), transparent 60%), linear-gradient(135deg, var(--navy), var(--navy-2));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(2,6,23,.14);
    padding: 28px 26px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* ---------------- Content ---------------- */
.app-promo__content {
    color: #fff;
}

.app-promo__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    margin-bottom: 10px;
}

.app-promo__title {
    margin: 0 0 10px;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 900;
    letter-spacing: -0.2px;
}

.app-promo__text {
    margin: 0 0 18px;
    font-size: 12.8px;
    line-height: 1.8;
    color: rgba(255,255,255,.9);
    max-width: 42ch;
}

.app-promo__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.app-promo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: 180ms ease;
}

.app-promo__btn--primary {
    background: var(--accent);
    color: #111827;
    box-shadow: 0 10px 22px rgba(245,164,0,.25);
}

    .app-promo__btn--primary:hover {
        filter: brightness(.97);
        transform: translateY(-1px);
    }

.app-promo__btn--ghost {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
}

    .app-promo__btn--ghost:hover {
        background: rgba(255,255,255,.14);
    }

/* ---------------- Media ---------------- */
.app-promo__media {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 160%;
    height: 0px;
}

    .app-promo__media img {
        width: 70%;
        height: auto;
        display: block;
        object-fit: contain;
        filter: drop-shadow(0 12px 26px rgba(0,0,0,.22));
    }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
    .app-promo__container {
        grid-template-columns: 1fr;
        text-align: right;
    }

    .app-promo__text {
        max-width: 100%;
    }
}
/* =========================
   VISA STRIP (5 per row)
========================= */
img.trs-hero__person {
    width: 246%;
    padding-top: 85px;
    padding-left: 61px;
}
.visa-strip {000
    padding: 18px 0 28px;
}

.visa-strip__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* 5 کارت در هر ردیف */
.visa-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

/* کارت اصلی */
.visa-card {
    --bg: #0f172a;
    --flag: none;
    position: relative;
    height: 110px;
    border-radius: 22px;
    background: #ffffff; /* 👈 حالت عادی سفید */
    border: 1px solid #e5e7eb;
    overflow: hidden;
    text-decoration: none;
    color: #0f172a;
    box-shadow: 0 8px 18px rgba(2,6,23,.08);
    transition: 220ms ease;
    isolation: isolate;
}

    /* پرچم محو در بک‌گراند */
    .visa-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: var(--flag);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: .85; /* 👈 واضح */
        transition: 260ms ease;
        z-index: 0;
    }

    /* یک لایه خیلی لطیف برای خوانایی متن */
    .visa-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 135deg, color-mix(in oklab, var(--bg), #000 6%), var(--bg) );
        opacity: 0; /* 👈 مخفی */
        transition: 220ms ease;
        z-index: 1;
    }

/* محتوا */
.visa-card__content {
    position: relative;
    z-index: 2;
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    opacity: 0; /* 👈 مخفی */
    transform: translateY(6px); /* 👈 حرکت ظریف */
    transition: 220ms ease;
    pointer-events: none;
}
.visa-card:hover .visa-card__content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


.visa-card__title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.visa-card__subtitle {
    font-size: 11.5px;
    opacity: .85;
    font-weight: 600;
}

/* هاور */
.visa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(2,6,23,.18);
    color: #ffffff;
}
    .visa-card:hover .visa-card__subtitle {
        opacity: .9;
    }

    .visa-card:hover::before {
        opacity: .18; /* 👈 پرچم محو */
        transform: scale(1.05);
    }
    .visa-card:hover::after {
        opacity: 0.6; /* 👈 رنگ کشور ظاهر می‌شود */
    }
/* فوکوس برای دسترس‌پذیری */
.visa-card:focus-visible {
    outline: 3px solid rgba(255,255,255,.35);
    outline-offset: 3px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1200px) {
    .visa-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 980px) {
    .visa-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 680px) {
    .visa-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    .visa-grid {
        grid-template-columns: 1fr;
    }
}
/* ====== Section Header ====== */
.visa-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.visa-section-head__right {
    text-align: right;
}

.visa-section-head__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.visa-section-head__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
}

.visa-section-head__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

/* لینک اختیاری سمت چپ */
.visa-section-head__link {
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #1677ff;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(22,119,255,.06);
    border: 1px solid rgba(22,119,255,.14);
    transition: 160ms ease;
}

    .visa-section-head__link:hover {
        background: rgba(22,119,255,.12);
    }

/* ریسپانسیو تیتر */
@media (max-width: 680px) {
    .visa-section-head {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ===============================
   DOMESTIC TOURS (Unique Cards)
================================ */

.dom-tours {
    padding: 28px 0 34px;
}

/* Head */
.dom-tours__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dom-tours__titlebox {
    text-align: right;
}

.dom-tours__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.dom-tours__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
}

.dom-tours__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.dom-tours__link {
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    color: #1677ff;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(22,119,255,.06);
    border: 1px solid rgba(22,119,255,.14);
    transition: 160ms ease;
}

    .dom-tours__link:hover {
        background: rgba(22,119,255,.12);
    }

/* Grid */
.dom-tours__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}

@media (max-width: 1100px) {
    .dom-tours__grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 820px) {
    .dom-tours__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .dom-tours__grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 520px) {
    .dom-tours__grid {
        grid-template-columns: 1fr;
    }
}

/* ===============================
   Unique Card Structure
================================ */
.dom-tour-card {
    --accent: #1677ff;
    position: relative;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6eaf0;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(2,6,23,.06);
    transition: 220ms cubic-bezier(.2,.8,.2,1);
}


    /* برش گوشه خاص */
    .dom-tour-card::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 64px;
        height: 64px;
        background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 22%, #ffffff), transparent 70%);
        clip-path: polygon(0 0,100% 0,100% 100%);
        opacity: .55;
        pointer-events: none;
    }

    /* Hover */
    .dom-tour-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--accent) 30%, #e6eaf0);
        box-shadow: 0 14px 40px rgba(2,6,23,.10);
    }

/* Media */
.dom-tour-card__media {
    position: relative;
    display: block;
    height: 170px;
    overflow: hidden;
    border-bottom: 1px solid #eef1f6;
}

    .dom-tour-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
        transition: 260ms ease;
        filter: saturate(1.05);
    }

.dom-tour-card:hover .dom-tour-card__media img {
    transform: scale(1.07);
}

/* یک لایه مسیر سفر خیلی محو */
.dom-tour-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='360' height='200' viewBox='0 0 360 200'>\
    <path d='M20 150 C80 90, 140 170, 210 110 S320 60, 340 90' fill='none' stroke='white' stroke-width='2' stroke-dasharray='6 8' opacity='0.35'/>\
    <circle cx='20' cy='150' r='4' fill='white' opacity='0.35'/>\
    <circle cx='210' cy='110' r='4' fill='white' opacity='0.35'/>\
  </svg>");
    background-repeat: no-repeat;
    background-position: 12px 12px;
    opacity: .35;
    pointer-events: none;
}

/* City pill floating */
.dom-tour-card__citypill {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    color: #0f172a;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(6px);
}

/* Body */
.dom-tour-card__body {
    padding: 14px 14px 12px;
}

/* Top row */
.dom-tour-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.dom-tour-card__title {
    margin: 0;
    font-size: 14.4px;
    font-weight: 900;
    color: #0f172a;
}

.dom-tour-card__rate {
    font-size: 10.5px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    color: #065f46;
    background: #ecfdf5;
    border: 1px solid #c7f9df;
}

/* Chips */
.dom-tour-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

    .dom-tour-card__chips .chip {
        font-size: 10.3px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 999px;
        background: #f8fafc;
        border: 1px solid #e6eaf0;
        color: #0f172a;
    }

/* Meta line */
.dom-tour-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 10.6px;
    color: #6b7280;
    margin-bottom: 12px;
}

/* Footer */
.dom-tour-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Price with accent edge */
.dom-tour-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, #ffffff), #ffffff );
    border: 1px solid color-mix(in oklab, var(--accent) 20%, #e6eaf0);
}

    .dom-tour-card__price .label {
        font-size: 10px;
        color: #64748b;
    }

    .dom-tour-card__price .value {
        font-size: 13px;
        font-weight: 900;
        color: #0f172a;
    }

    .dom-tour-card__price .cur {
        font-size: 10px;
        color: #64748b;
    }

/* CTA */
.dom-tour-card__cta {
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 900;
    color: #0f172a;
    padding: 8px 10px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--accent) 14%, #ffffff);
    border: 1px solid color-mix(in oklab, var(--accent) 28%, #e6eaf0);
    transition: 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .dom-tour-card__cta .arrow {
        font-weight: 900;
        opacity: .7;
    }

    .dom-tour-card__cta:hover {
        background: color-mix(in oklab, var(--accent) 22%, #ffffff);
        transform: translateX(-1px);
    }
/* ===============================
   INTERNATIONAL TOURS CAROUSEL
================================ */

.int-tours {
    padding: 28px 0 36px;
}

/* head */
.int-tours__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.int-tours__titlebox {
    text-align: right;
}

.int-tours__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.int-tours__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
}

.int-tours__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.int-tours__link {
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    color: #1677ff;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(22,119,255,.06);
    border: 1px solid rgba(22,119,255,.14);
    transition: 160ms ease;
}

    .int-tours__link:hover {
        background: rgba(22,119,255,.12);
    }

@media (max-width: 820px) {
    .int-tours__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===============================
   Carousel Shell
================================ */

/* برای کنترل تعداد کارت در هر نما */
.int-carousel {
    --per-view: 3;
    position: relative;
    direction: ltr; /* مهم برای حرکت درست اسلایدر */
}

@media (max-width: 1100px) {
    .int-carousel {
        --per-view: 2;
    }
}

@media (max-width: 620px) {
    .int-carousel {
        --per-view: 1;
    }
}

.int-carousel__viewport {
    overflow: hidden;
    border-radius: 18px;
}

.int-carousel__track {
    display: flex;
    gap: 12px;
    transition: transform 420ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
    padding: 2px 2px 6px;
}

    /* هر کارت سهمی از عرض نما */
    .int-carousel__track > .int-tour-card {
        flex: 0 0 calc((100% - (12px * (var(--per-view) - 1))) / var(--per-view));
        min-width: 0;
    }

/* nav buttons */
.int-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e6eaf0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(2,6,23,.08);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    transition: 160ms ease;
    z-index: 2;
}

    .int-carousel__nav:hover {
        transform: translateY(-50%) scale(1.05);
        border-color: rgba(22,119,255,.35);
        background: #f8fafc;
    }

.int-carousel__nav--prev {
    left: -6px;
}

.int-carousel__nav--next {
    right: -6px;
}

.int-carousel__nav.is-disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

/* ===============================
   Card style (fresh but compact)
================================ */
.int-tour-card {
    --accent: #1677ff;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6eaf0;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(2,6,23,.06);
    transition: 220ms cubic-bezier(.2,.8,.2,1);
    direction: rtl; /* متن کارت‌ها RTL بماند */
}

    .int-tour-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--accent) 30%, #e6eaf0);
        box-shadow: 0 14px 40px rgba(2,6,23,.10);
    }

/* media */
.int-tour-card__media {
    position: relative;
    display: block;
    height: 170px;
    overflow: hidden;
    border-bottom: 1px solid #eef1f6;
}

    .int-tour-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02);
        transition: 260ms ease;
        filter: saturate(1.06);
    }

.int-tour-card:hover .int-tour-card__media img {
    transform: scale(1.07);
}

/* city pill */
.int-tour-card__city {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    color: #0f172a;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(6px);
}

/* body */
.int-tour-card__body {
    padding: 14px 14px 12px;
}

.int-tour-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.int-tour-card__title {
    margin: 0;
    font-size: 14.4px;
    font-weight: 900;
    color: #0f172a;
}

.int-tour-card__tag {
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    color: #0f172a;
    background: color-mix(in oklab, var(--accent) 18%, #fff);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, #e6eaf0);
}

    .int-tour-card__tag.is-soft {
        opacity: .85;
    }

/* meta */
.int-tour-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 10.6px;
    color: #6b7280;
    margin-bottom: 12px;
}

/* footer */
.int-tour-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.int-tour-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, #ffffff), #ffffff );
    border: 1px solid color-mix(in oklab, var(--accent) 20%, #e6eaf0);
}

    .int-tour-card__price .label {
        font-size: 10px;
        color: #64748b;
    }

    .int-tour-card__price .value {
        font-size: 13px;
        font-weight: 900;
        color: #0f172a;
    }

    .int-tour-card__price .cur {
        font-size: 10px;
        color: #64748b;
    }

.int-tour-card__cta {
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 900;
    color: #0f172a;
    padding: 8px 10px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--accent) 14%, #ffffff);
    border: 1px solid color-mix(in oklab, var(--accent) 28%, #e6eaf0);
    transition: 180ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .int-tour-card__cta .arrow {
        font-weight: 900;
        opacity: .7;
    }

    .int-tour-card__cta:hover {
        background: color-mix(in oklab, var(--accent) 22%, #ffffff);
        transform: translateX(-1px);
    }
/* =============================
   GEO DEST GRID (Standalone)
   prefix: geo-dest-
   ============================= */

.geo-dest {
    padding: 28px 0 34px;
}

.geo-dest__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* ---------- Header ---------- */
.geo-dest__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.geo-dest__titlebox {
    text-align: right;
}

.geo-dest__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.geo-dest__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
}

.geo-dest__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.geo-dest__link {
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    color: #1677ff;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(22,119,255,.06);
    border: 1px solid rgba(22,119,255,.14);
    transition: 160ms ease;
}

    .geo-dest__link:hover {
        background: rgba(22,119,255,.12);
    }

@media (max-width: 820px) {
    .geo-dest__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Grid layout دقیق مثل تصویر ---------- */
.geo-dest__grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr 1fr;
    grid-template-rows: 160px 160px;
    gap: 14px;
    grid-template-areas:
        "left ctop right"
        "left cbot right";
}

/* ناحیه‌ها */
.geo-dest__card--left {
    grid-area: left;
}

.geo-dest__card--ctop {
    grid-area: ctop;
}

.geo-dest__card--cbot {
    grid-area: cbot;
}

.geo-dest__card--right {
    grid-area: right;
}

/* ---------- Card ---------- */
.geo-dest__card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    background: #0b1324;
    border: 1px solid #e6eaf0;
    box-shadow: 0 10px 26px rgba(2,6,23,.08);
    transform: translateZ(0);
    transition: 220ms cubic-bezier(.2,.8,.2,1);
    isolation: isolate;
}

/* تصویر */
.geo-dest__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.08) contrast(1.02);
    transform: scale(1.02);
    transition: 360ms cubic-bezier(.2,.8,.2,1);
}

/* لایه خوانایی متن */
.geo-dest__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.10) 40%, rgba(2,6,23,.42) 100% );
    z-index: 1;
}

/* استمپ گوشه بالا راست شبیه لوگوی سفید */
.geo-dest__stamp {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .2px;
    color: #fff;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(6px);
}

/* لیبل پایین راست */
.geo-dest__label {
    position: absolute;
    right: 12px;
    bottom: 10px;
    z-index: 2;
    color: #fff;
    font-size: 12.5px;
    font-weight: 900;
    text-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* Hover */
.geo-dest__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(2,6,23,.14);
    border-color: rgba(22,119,255,.22);
}

    .geo-dest__card:hover .geo-dest__img {
        transform: scale(1.09);
    }

/* یک shimmer خیلی لطیف برای زیبایی بیشتر */
.geo-dest__card::before {
    content: "";
    position: absolute;
    inset: -30% -40%;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.10) 45%, transparent 60%);
    transform: translateX(40%);
    opacity: 0;
    z-index: 1;
    transition: 400ms ease;
}

.geo-dest__card:hover::before {
    opacity: 1;
    transform: translateX(-10%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .geo-dest__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 170px 170px 170px;
        grid-template-areas:
            "ctop ctop"
            "left right"
            "cbot cbot";
    }
}

@media (max-width: 620px) {
    .geo-dest__grid {
        grid-template-columns: 1fr;
        grid-template-rows: 170px 170px 170px 170px;
        grid-template-areas:
            "ctop"
            "left"
            "right"
            "cbot";
    }
}
/* =============================
   TOUR TABS SHOWCASE
   prefix: ttx-
   ============================= */

.ttx {
    padding: 30px 0 40px;
}

.ttx__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* ---------- Header ---------- */
.ttx__head {
    margin-bottom: 10px;
}

.ttx__titlebox {
    text-align: right;
}

.ttx__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.ttx__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
}

.ttx__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

/* ---------- Tabs shell ---------- */
.ttx__tabs-shell {
    display: grid;
    grid-template-columns: 40px 1fr 40px;
    align-items: center;
    gap: 8px;
    margin: 14px 0 18px;
}

.ttx__arrow {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid #e6eaf0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(2,6,23,.06);
    cursor: pointer;
    font-size: 22px;
    font-weight: 900;
    color: #0f172a;
    transition: 180ms cubic-bezier(.2,.8,.2,1);
}

    .ttx__arrow:hover {
        transform: translateY(-1px);
        border-color: rgba(22,119,255,.28);
        background: rgba(22,119,255,.04);
    }

/* tabs row */
.ttx__tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 4px;
}

.ttx__tab {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12.8px;
    font-weight: 700;
    color: #0f172a;
    transition: 180ms cubic-bezier(.2,.8,.2,1);
    font-family: peyda;
}

    .ttx__tab:hover {
        background: rgba(2,6,23,.04);
        transform: translateY(-1px);
    }

    .ttx__tab.is-active {
        color: #fff;
        background: linear-gradient(135deg, #0b7bd9, #1677ff, #22c1ff);
        border-color: rgba(22,119,255,.22);
        box-shadow: 0 10px 22px rgba(22,119,255,.22);
    }

.ttx__tab-pill {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
}

/* ---------- Cards stage ---------- */
.ttx__stage {
    position: relative;
}

.ttx__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    transition: 200ms ease;
}

/* responsive */
@media (max-width: 1100px) {
    .ttx__cards {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width: 820px) {
    .ttx__tabs-shell {
        grid-template-columns: 34px 1fr 34px;
    }

    .ttx__cards {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 520px) {
    .ttx__cards {
        grid-template-columns: 1fr;
    }
}

/* ---------- Cards enter/exit animations ---------- */
.ttx__cards.is-exit .ttx-card {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    filter: blur(2px);
}

.ttx__cards.is-enter .ttx-card {
    animation: ttxEnter 360ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes ttxEnter {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

/* =============================
   TTX CARD (Fancy)
   ============================= */

.ttx-card {
    --accent: #1677ff;
    position: relative;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6eaf0;
    overflow: hidden;
    box-shadow: 0 10px 26px rgba(2,6,23,.06);
    transition: 220ms cubic-bezier(.2,.8,.2,1);
    isolation: isolate;
}

    /* top gradient aura */
    .ttx-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 120px;
        background: radial-gradient(260px 120px at 85% 30%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 65%), linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, #ffffff), #ffffff);
        opacity: .9;
        z-index: 0;
        pointer-events: none;
    }

/* media */
.ttx-card__media {
    position: relative;
    height: 210px;
    overflow: hidden;
    border-bottom: 1px solid #eef1f6;
}

.ttx-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.02);
    filter: saturate(1.08);
    transition: 360ms cubic-bezier(.2,.8,.2,1);
}

/* floating city pill */
.ttx-card__city {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 900;
    color: #0f172a;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(15,23,42,.08);
    backdrop-filter: blur(6px);
}

/* badge top-left */
.ttx-card__badge {
    position: absolute;
    left: 10px;
    top: 10px;
    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 50%, #000 10%));
    color: #fff;
    font-size: 9.5px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 8px 18px color-mix(in oklab, var(--accent) 28%, transparent);
}

/* body */
.ttx-card__body {
    position: relative;
    z-index: 1;
    padding: 12px 12px 14px;
}

/* title row */
.ttx-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.ttx-card__title {
    margin: 0;
    font-size: 14.2px;
    font-weight: 900;
    color: #0f172a;
}

.ttx-card__tag {
    font-size: 10px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    color: #0f172a;
    background: color-mix(in oklab, var(--accent) 14%, #fff);
    border: 1px solid color-mix(in oklab, var(--accent) 28%, #e6eaf0);
}

/* meta line */
.ttx-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 10.5px;
    color: #6b7280;
    margin-bottom: 12px;
}

/* rating mini */
.ttx-card__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 8px;
    background: #ecfdf5;
    border: 1px solid #c7f9df;
    color: #065f46;
}

/* footer */
.ttx-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* fancy price box */
.ttx-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 10%, #ffffff), #ffffff);
    border: 1px solid color-mix(in oklab, var(--accent) 22%, #e6eaf0);
}

    .ttx-card__price .label {
        font-size: 10px;
        color: #64748b;
    }

    .ttx-card__price .value {
        font-size: 13px;
        font-weight: 900;
        color: #0f172a;
    }

    .ttx-card__price .cur {
        font-size: 10px;
        color: #64748b;
    }

/* CTA */
.ttx-card__cta {
    text-decoration: none;
    font-size: 11.2px;
    font-weight: 900;
    color: #0f172a;
    padding: 8px 10px;
    border-radius: 12px;
    background: color-mix(in oklab, var(--accent) 14%, #ffffff);
    border: 1px solid color-mix(in oklab, var(--accent) 30%, #e6eaf0);
    transition: 180ms cubic-bezier(.2,.8,.2,1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .ttx-card__cta:hover {
        background: color-mix(in oklab, var(--accent) 22%, #ffffff);
        transform: translateX(-1px);
    }

/* hover card motion */
.ttx-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in oklab, var(--accent) 34%, #e6eaf0);
    box-shadow: 0 18px 44px rgba(2,6,23,.12);
}

    .ttx-card:hover .ttx-card__img {
        transform: scale(1.08);
    }

/* click micro feedback for tabs */
.ttx__tab:active {
    transform: translateY(0) scale(.98);
}
/* =============================
   VIDEO SHOWCASE
   prefix: vshow-
   ============================= */

.vshow {
    padding: 28px 0 46px;
}

.vshow__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* ---------- Header (right aligned) ---------- */
.vshow__head {
    margin-bottom: 14px;
}

.vshow__titlebox {
    text-align: right;
}

.vshow__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.vshow__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
}

.vshow__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

/* ---------- Grid Layout ---------- */
.vshow__grid {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 16px;
    align-items: stretch;
}

@media (max-width: 980px) {
    .vshow__grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- MAIN PLAYER CARD ---------- */
.vshow__player-card {
    position: relative;
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff, #fbfdff);
    border: 1px solid #e6eaf0;
    box-shadow: 0 18px 50px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.7);
    overflow: hidden;
    min-height: 380px;
    isolation: isolate;
    transform: translateY(8px);
    opacity: 0;
    transition: 560ms cubic-bezier(.2,.8,.2,1);
}

/* animated glow */
.vshow__glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(520px 260px at 15% 20%, rgba(34,197,94,.14), transparent 60%), radial-gradient(520px 260px at 85% 30%, rgba(22,119,255,.16), transparent 62%), radial-gradient(520px 260px at 70% 85%, rgba(168,85,247,.14), transparent 60%);
    filter: blur(8px);
    z-index: 0;
    animation: vshowGlow 8s ease-in-out infinite;
}

@keyframes vshowGlow {
    0%,100% {
        transform: translateY(0) scale(1);
        opacity: .9;
    }

    50% {
        transform: translateY(-6px) scale(1.02);
        opacity: 1;
    }
}

.vshow__player-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    height: 100%;
}

/* video itself */
.vshow__video {
    width: 100%;
    height: 360px;
    background: #0b1220;
    object-fit: cover;
    display: block;
}

@media (max-width: 980px) {
    .vshow__video {
        height: 300px;
    }
}

/* overlay on top of video */
.vshow__overlay {
    padding: 14px 16px 18px;
    display: grid;
    gap: 8px;
}

.vshow__overlay-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.vshow__chip {
    display: inline-flex;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 900;
    color: #ffffff;
    background: linear-gradient(135deg, #16a34a, #22c55e, #34d399);
    box-shadow: 0 8px 18px rgba(34,197,94,.22);
}

.vshow__level {
    font-size: 10.5px;
    font-weight: 700;
    color: #64748b;
}

.vshow__main-title {
    margin: 0;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
}

.vshow__main-desc {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.7;
}

.vshow__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: #64748b;
}

.vshow__meta-dot {
    opacity: .5;
}

/* CTAs */
.vshow__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.vshow__cta {
    text-decoration: none;
    border: 1px solid transparent;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 11.2px;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 180ms cubic-bezier(.2,.8,.2,1);
}

.vshow__cta-ico {
    font-size: 12px;
    line-height: 1;
}

.vshow__cta--primary {
    color: #fff;
    background: linear-gradient(135deg, #1677ff, #22c1ff, #0ea5e9);
    box-shadow: 0 10px 22px rgba(22,119,255,.22);
}

    .vshow__cta--primary:hover {
        transform: translateY(-1px);
        filter: saturate(1.05);
    }

.vshow__cta--ghost {
    color: #0f172a;
    background: rgba(2,6,23,.03);
    border-color: #e6eaf0;
}

    .vshow__cta--ghost:hover {
        background: rgba(22,119,255,.06);
        border-color: rgba(22,119,255,.25);
        transform: translateY(-1px);
    }

/* ---------- SIDE PANEL ---------- */
.vshow__side {
    border-radius: 22px;
    background: linear-gradient(145deg, #ffffff, #fbfdff);
    border: 1px solid #e6eaf0;
    box-shadow: 0 14px 36px rgba(2,6,23,.06);
    padding: 12px;
    transform: translateY(8px);
    opacity: 0;
    transition: 560ms cubic-bezier(.2,.8,.2,1);
}

.vshow__side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 10px;
}

.vshow__side-title {
    font-size: 12.5px;
    font-weight: 900;
    color: #0f172a;
}

.vshow__side-hint {
    font-size: 10px;
    color: #94a3b8;
}

.vshow__list {
    display: grid;
    gap: 10px;
}

/* ---------- VIDEO ITEM CARD ---------- */
.vshow-item {
    --accent: #1677ff;
    position: relative;
    display: grid;
    grid-template-columns: 76px 1fr auto;
    gap: 10px;
    align-items: center;
    text-align: right;
    padding: 8px;
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 6%, #ffffff), #ffffff);
    border: 1px solid #eef1f6;
    cursor: pointer;
    overflow: hidden;
    transition: 220ms cubic-bezier(.2,.8,.2,1);
}

    .vshow-item::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(160px 80px at 0% 50%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%);
        opacity: 0;
        transition: 220ms ease;
        pointer-events: none;
    }

    .vshow-item:hover {
        transform: translateY(-3px);
        border-color: color-mix(in oklab, var(--accent) 28%, #e6eaf0);
        box-shadow: 0 10px 22px rgba(2,6,23,.08);
    }

        .vshow-item:hover::after {
            opacity: 1;
        }

/* thumbnail */
.vshow-item__thumb {
    position: relative;
    width: 76px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(15,23,42,.06);
    background: #0b1220;
}

.vshow-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.06);
    transform: scale(1.02);
    transition: 260ms cubic-bezier(.2,.8,.2,1);
}

.vshow-item:hover .vshow-item__img {
    transform: scale(1.08);
}

.vshow-item__play {
    position: absolute;
    inset: auto 6px 6px auto;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), #0ea5e9);
    box-shadow: 0 6px 14px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* text */
.vshow-item__title {
    margin: 0 0 2px;
    font-size: 11.8px;
    font-weight: 900;
    color: #0f172a;
}

.vshow-item__desc {
    margin: 0;
    font-size: 9.8px;
    color: #6b7280;
    line-height: 1.5;
}

/* right meta */
.vshow-item__meta {
    display: grid;
    justify-items: end;
    gap: 6px;
    padding-left: 4px;
}

.vshow-item__badge {
    font-size: 9px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 999px;
    color: #0f172a;
    background: color-mix(in oklab, var(--accent) 14%, #ffffff);
    border: 1px solid color-mix(in oklab, var(--accent) 26%, #e6eaf0);
}

.vshow-item__dur {
    font-size: 9.5px;
    color: #64748b;
    font-weight: 700;
}

/* active state */
.vshow-item.is-active {
    border-color: color-mix(in oklab, var(--accent) 40%, #e6eaf0);
    background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 12%, #ffffff), #ffffff);
    box-shadow: 0 10px 24px rgba(2,6,23,.09), inset 0 0 0 1px color-mix(in oklab, var(--accent) 18%, transparent);
}

    .vshow-item.is-active .vshow-item__badge {
        background: linear-gradient(135deg, var(--accent), #22c1ff);
        color: #fff;
        border-color: transparent;
    }

/* ---------- Reveal on scroll ---------- */
.vshow.is-revealed .vshow__player-card,
.vshow.is-revealed .vshow__side {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Switch animation for player ---------- */
.vshow__player-card.is-switching {
    animation: vshowSwitch 260ms cubic-bezier(.2,.8,.2,1);
}

@keyframes vshowSwitch {
    0% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(2px) scale(.992);
        filter: saturate(.98);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}
/* =============================
   AIRLINE LOGOS STRIP (NO BG)
   prefix: airlogo-
   ============================= */

.airlogo {
    padding: 26px 0 34px;
    direction: rtl;
}

.airlogo__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* Header مثل بقیه سرتیترهای شما: راست‌چین + badge */
.airlogo__head {
    text-align: right;
    margin-bottom: 14px;
}

.airlogo__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.airlogo__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
}

.airlogo__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

/* Marquee frame: سفید و مینیمال */
.airlogo__marquee {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #e6eaf0;
    box-shadow: 0 8px 22px rgba(2,6,23,.06);
    padding: 12px 0;
}

    /* فید لطیف لبه‌ها مثل اسلایدرهای حرفه‌ای */
    .airlogo__marquee::before,
    .airlogo__marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 72px;
        z-index: 2;
        pointer-events: none;
    }

    .airlogo__marquee::before {
        right: 0;
        background: linear-gradient(to left, #ffffff 35%, rgba(255,255,255,0));
    }

    .airlogo__marquee::after {
        left: 0;
        background: linear-gradient(to right, #ffffff 35%, rgba(255,255,255,0));
    }

/* Track */
.airlogo__track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    padding-inline: 16px;
    /* ✅ حرکت پیوسته و بدون توقف */
    animation: airlogo-scroll 22s linear infinite;
}

/* سرعت‌های ریسپانسیو */
@media (min-width: 1200px) {
    .airlogo__track {
        animation-duration: 18s;
    }
}

@media (max-width: 600px) {
    .airlogo__track {
        animation-duration: 26s;
    }
}

/* چون لوگوها دو بار تکرار شده‌اند */
@keyframes airlogo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

/* Card لوگو: جذاب‌تر از حالت ساده */
.airlogo__item {
    position: relative;
    min-width: 160px;
    height: 84px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ffffff, #fbfdff);
    border: 1px solid #eef1f6;
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(2,6,23,.06), inset 0 1px 0 rgba(255,255,255,.9);
    transition: 220ms cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}

    /* درخشش خیلی لطیف */
    .airlogo__item::after {
        content: "";
        position: absolute;
        width: 60%;
        height: 160%;
        top: -30%;
        left: -80%;
        background: linear-gradient(120deg, transparent, rgba(255,255,255,.7), transparent);
        transform: skewX(-18deg);
        opacity: 0;
        animation: airlogo-shine 3.4s ease-in-out infinite;
    }

@keyframes airlogo-shine {
    0% {
        left: -80%;
        opacity: 0;
    }

    35% {
        opacity: .35;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}

/* هاور جذاب */
.airlogo__item:hover {
    transform: translateY(-3px) scale(1.03);
    border-color: rgba(22,119,255,.22);
    box-shadow: 0 12px 26px rgba(2,6,23,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

/* Logo */
.airlogo__item img {
    max-width: 100%;
    max-height: 97%;
    object-fit: fill;
    filter: saturate(1.05);
    transition: 220ms ease;
    position: fixed;
}

.airlogo__item:hover img {
    transform: scale(1.06);
}

/* دسترس‌پذیری */
@media (prefers-reduced-motion: reduce) {
    .airlogo__track {
        animation: none;
    }

    .airlogo__item::after {
        animation: none;
    }
}
/* =============================
   SHRINK HERO SECTION
   prefix: sh-hero-
   ============================= */

:root {
    /* می‌تونی با رنگ‌های خودت هماهنگ‌ترش کنی */
    --sh-hero-primary: #1677ff;
    --sh-hero-accent: #f5a400;
    --sh-hero-text: #0f172a;
    --sh-hero-muted: #6b7280;
    --sh-hero-border: #e6eaf0;
    --sh-hero-shadow: 0 16px 40px rgba(2, 6, 23, 0.10);
}

.sh-hero {
    padding: 22px 0 18px;
    direction: rtl;
}

.sh-hero__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* کارت اصلی که sticky میشه */
.sh-hero__card {
    position: sticky;
    top: 10px; /* فاصله از بالا */
    z-index: 50;
    background: #fff;
    border: 1px solid var(--sh-hero-border);
    border-radius: 22px;
    box-shadow: var(--sh-hero-shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1.1fr;
    gap: 0;
    /* ابعاد اولیه بزرگ */
    min-height: 280px;
    /* برای انیمیشن shrink */
    transform-origin: top center;
    transition: transform 180ms cubic-bezier(.2,.8,.2,1), border-radius 180ms cubic-bezier(.2,.8,.2,1), box-shadow 180ms cubic-bezier(.2,.8,.2,1);
}

    /* حالت کوچک شده (با JS اعمال میشه) */
    .sh-hero__card.is-compact {
        border-radius: 16px;
        box-shadow: 0 10px 26px rgba(2,6,23,.08);
    }

/* ستون متن */
.sh-hero__content {
    padding: 26px 26px 22px;
    position: relative;
    z-index: 2;
}

.sh-hero__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 10px;
}

.sh-hero__title {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 900;
    letter-spacing: -0.3px;
    color: var(--sh-hero-text);
}

.sh-hero__subtitle {
    margin: 0 0 16px;
    font-size: 12.6px;
    line-height: 1.8;
    color: var(--sh-hero-muted);
    max-width: 42ch;
}

/* دکمه‌ها */
.sh-hero__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sh-hero__btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 180ms ease;
}

.sh-hero__btn--primary {
    background: var(--sh-hero-accent);
    color: #111827;
    box-shadow: 0 10px 22px rgba(245,164,0,.22);
}

    .sh-hero__btn--primary:hover {
        filter: brightness(.97);
        transform: translateY(-1px);
    }

.sh-hero__btn--ghost {
    background: rgba(22,119,255,.06);
    color: var(--sh-hero-primary);
    border: 1px solid rgba(22,119,255,.16);
}

    .sh-hero__btn--ghost:hover {
        background: rgba(22,119,255,.12);
    }

/* ستون تصویر کشیده */
.sh-hero__media {
    position: relative;
    min-height: 220px;
    background: radial-gradient(600px 280px at 15% 80%, rgba(22,119,255,.08), transparent 60%), radial-gradient(500px 240px at 85% 10%, rgba(245,164,0,.10), transparent 60%), linear-gradient(135deg, #ffffff, #f8fbff);
    border-right: 1px solid #f1f5f9;
    display: grid;
    place-items: center;
}

    .sh-hero__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.02);
        transition: 260ms ease;
        filter: saturate(1.05);
    }

/* وقتی جمع شد تصویر کمی جمع‌تر و مرتب‌تر بشه */
.sh-hero__card.is-compact .sh-hero__media img {
    transform: scale(1);
}

/* دکور نورانی */
.sh-hero__glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    filter: blur(40px);
    opacity: .35;
    pointer-events: none;
}

.sh-hero__glow--a {
    right: -70px;
    top: -80px;
    background: rgba(22,119,255,.35);
}

.sh-hero__glow--b {
    left: -70px;
    bottom: -80px;
    background: rgba(245,164,0,.35);
}

/* ریسپانسیو */
@media (max-width: 980px) {
    .sh-hero__card {
        grid-template-columns: 1fr;
    }

    .sh-hero__media {
        min-height: 180px;
        border-right: 0;
        border-top: 1px solid #f1f5f9;
    }

    .sh-hero__subtitle {
        max-width: 100%;
    }
}
/* =============================
   ARTICLES STACK CAROUSEL
   prefix: art-stack-
   ============================= */

.art-stack {
    padding: 30px 0 36px;
    direction: rtl;
    font-family: "Peyda","Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.art-stack__container {
    width: min(1300px, 92vw);
    margin-inline: auto;
}

/* ---------- Head ---------- */
.art-stack__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.art-stack__titlebox {
    text-align: right;
}

.art-stack__badge {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    color: #0b3b8b;
    background: rgba(22,119,255,.08);
    border: 1px solid rgba(22,119,255,.18);
    margin-bottom: 6px;
}

.art-stack__title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
}

.art-stack__subtitle {
    margin: 0;
    font-size: 12px;
    color: #6b7280;
}

.art-stack__link {
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    color: #1677ff;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(22,119,255,.06);
    border: 1px solid rgba(22,119,255,.14);
    transition: 160ms ease;
}

    .art-stack__link:hover {
        background: rgba(22,119,255,.12);
    }

@media (max-width: 820px) {
    .art-stack__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---------- Layout ---------- */
.art-stack__layout {
    display: grid;
    grid-template-columns: 0.95fr 2.05fr;
    gap: 14px;
    align-items: stretch;
}

/* ---------- Poster (Left image) ---------- */
.art-stack__poster {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid #e6eaf0;
    background: #0f172a;
    min-height: 320px;
    box-shadow: 0 10px 26px rgba(2,6,23,.08);
    isolation: isolate;
}

    .art-stack__poster img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        opacity: .95;
        transform: scale(1.03);
        transition: 420ms cubic-bezier(.2,.8,.2,1);
        filter: saturate(1.05);
    }

    .art-stack__poster::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(2,6,23,.0), rgba(2,6,23,.55)), radial-gradient(520px 240px at 85% 10%, rgba(22,119,255,.18), transparent 60%);
        z-index: 1;
    }

.art-stack__poster-overlay {
    position: absolute;
    right: 14px;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.art-stack__poster-pill {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.18);
}

.art-stack__poster-text {
    font-size: 13.2px;
    font-weight: 900;
    letter-spacing: -0.2px;
}

.art-stack__poster:hover img {
    transform: scale(1.07);
}

/* ---------- Rail (Right carousel) ---------- */
.art-stack__rail {
    position: relative;
    border-radius: 18px;
    padding: 6px 6px 10px;
}

/* نکته مهم برای حس "بیرون آمدن از پشت عکس":
   ریل کمی روی پوستر میاد */
.art-stack__rail {
    margin-right: -38px; /* چون RTL هست */
    z-index: 5;
}

.art-stack__viewport {
    overflow: hidden;
    border-radius: 18px;
    direction: ltr; /* حرکت صحیح */
}

/* track */
.art-stack__track {
    display: flex;
    gap: 12px;
    padding: 6px 6px 12px;
    transition: transform 520ms cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

/* کارت‌ها */
.art-stack__card {
    direction: rtl;
    flex: 0 0 300px;
    min-width: 300px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(2,6,23,.06);
    transition: 220ms cubic-bezier(.2,.8,.2,1);
    cursor: pointer;
    transform: translateY(0);
    opacity: 1;
}

    /* ظاهر شدن نرم */
    .art-stack__card.is-enter {
        animation: artStackEnter 420ms cubic-bezier(.2,.8,.2,1);
    }

@keyframes artStackEnter {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.art-stack__card:hover {
    transform: translateY(-4px);
    border-color: rgba(22,119,255,.30);
    box-shadow: 0 14px 36px rgba(2,6,23,.10);
}

/* Media */
.art-stack__card-media {
    position: relative;
    display: block;
    height: 150px;
    overflow: hidden;
    border-bottom: 1px solid #eef1f6;
}

    .art-stack__card-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.03);
        transition: 260ms ease;
        filter: saturate(1.05);
    }

.art-stack__card:hover .art-stack__card-media img {
    transform: scale(1.08);
}

/* chip */
.art-stack__chip {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,23,42,.08);
    color: #0f172a;
    backdrop-filter: blur(6px);
}

    .art-stack__chip.is-hot {
        background: #fff7ed;
        border-color: #fed7aa;
        color: #9a3412;
    }

    .art-stack__chip.is-visa {
        background: #eef2ff;
        border-color: #e0e7ff;
        color: #3730a3;
    }

/* Body */
.art-stack__card-body {
    padding: 12px 12px 12px;
}

.art-stack__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 10px;
    color: #6b7280;
    margin-bottom: 8px;
}

.art-stack__card-title {
    margin: 0 0 6px;
    font-size: 13.6px;
    font-weight: 900;
    color: #0f172a;
}

.art-stack__card-text {
    margin: 0 0 10px;
    font-size: 11.2px;
    line-height: 1.7;
    color: #64748b;
}

.art-stack__card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.art-stack__tag {
    font-size: 9.8px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    color: #0f172a;
}

.art-stack__cta {
    font-size: 10.5px;
    font-weight: 900;
    color: #1677ff;
}

/* Nav buttons */
.art-stack__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #e6eaf0;
    background: #fff;
    box-shadow: 0 8px 18px rgba(2,6,23,.08);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 900;
    color: #0f172a;
    transition: 160ms ease;
    z-index: 10;
}

    .art-stack__nav:hover {
        transform: translateY(-50%) scale(1.05);
        border-color: rgba(22,119,255,.35);
        background: #f8fafc;
    }

.art-stack__nav--prev {
    left: 0;
}

.art-stack__nav--next {
    right: 0;
}

/* Responsive */
@media (max-width: 1100px) {
    .art-stack__layout {
        grid-template-columns: 1fr;
    }

    .art-stack__rail {
        margin-right: 0;
    }

    .art-stack__poster {
        min-height: 220px;
    }
}

@media (max-width: 520px) {
    .art-stack__card {
        flex-basis: 260px;
        min-width: 260px;
    }
}

}
/* === HERO BG STAGE === */
.hero-shell {
    position: relative;
}

.hero-bg-stage {
    position: absolute;
    inset: 0;
    border-radius: 28px; /* اگر کارتت گرده */
    overflow: hidden;
    z-index: 0;
    border-radius: 0px !important;
}

/* محتوای هیرو روی بک‌گراند بیاد */
.hero-content {
    position: relative;
    z-index: 1;
}

/* لایه‌های بک‌گراند که JS میسازه */
.hero-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

    /* یک اوورلی سبک برای خوانایی متن */
    .hero-bg-layer::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    /* انیمیشن ورود/خروج */
    .hero-bg-layer.bg-enter {
        opacity: 0;
        transform: scale(1.02);
        animation: heroBgIn .26s ease forwards;
    }

    .hero-bg-layer.bg-exit {
        opacity: 1;
        transform: scale(1);
        animation: heroBgOut .26s ease forwards;
    }

@keyframes heroBgIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroBgOut {
    to {
        opacity: 0;
        transform: scale(0.985);
    }
}
/* === BACKGROUNDS PER TAB (match JS keys) === */

.bg-domestic {
    background-image: url("image/IMG_7643.jpeg");
}

.bg-international {
    background-image: url("image/IMG_7644.jpeg");
}

.bg-train {
    background-image: url("image/IMG_7635.jpeg");
}

.bg-bus {
    background-image: url("image/IMG_7636.jpeg");
}

.bg-tour {
    background-image: url("image/IMG_7637.jpeg");
}

.bg-hotel {
    background-image: url("image/IMG_7640.jpeg");
}

.bg-villa {
    background-image: url("image/IMG_7639.jpeg");
}
.intl-pro__container {
    width: min(1300px, 92vw);
    margin: auto;
}

.intl-pro__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.intl-pro__badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    color: #0b3b8b;
    background: rgba(22, 119, 255, .08);
    border: 1px solid rgba(22, 119, 255, .18);
    margin-bottom: 6px;
}

.intl-pro__title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.3px;
    color: #0f172a;
    margin: 10px 0px 4px 0px;
}

.intl-pro__subtitle {
    font-size: 14px;
    color: #64748b;
    margin:0;
}

.intl-pro__link {
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    color: #1677ff;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(22, 119, 255, .06);
    border: 1px solid rgba(22, 119, 255, .14);
    transition: 160ms ease;
}

.intl-pro__carousel {
    position: relative;
}

.intl-pro__viewport {
    overflow: hidden;
}

.intl-pro__track {
    display: flex;
    gap: 24px;
    transition: transform .5s ease;
}

.intl-pro__card {
    min-width: 320px;
    height: 420px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,.12);
    transition: transform .4s ease;
}

    .intl-pro__card:hover {
        transform: translateY(-10px);
    }

    .intl-pro__card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.intl-pro__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75), transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    color: white;
}

.intl-pro__city {
    font-size: 14px;
    opacity: .8;
}

.intl-pro__card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 6px 0;
}

.intl-pro__price {
    font-size: 14px;
    margin-bottom: 12px;
}

.intl-pro__btn {
    display: inline-block;
    background: #6366f1;
    color: white;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 13px;
    text-decoration: none;
}

.intl-pro__nav {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(0,0,0,.15);
}

.intl-pro__nav--prev {
    right: -20px;
}

.intl-pro__nav--next {
    left: -20px;
}

@media (max-width: 768px) {
    .intl-pro__card {
        min-width: 260px;
        height: 360px;
    }
}