/* =========================================================
   ASAREH TOCHAL INSTAGRAM PAGE
   File: assets/css/pages/asareh-instagram-tochal.css
   Page: instagram.html

   نسخه HTML اختصاصی صفحه اینستاگرام توچال
   - Phone Mockup
   - Feed Grid
   - CEO Video Posts
   - Instagram-like Modal
   - RTL / Persian typography
   - Clean industrial premium look
   ========================================================= */


/* =========================================================
   Page Base
   ========================================================= */

.asareh-instagram-body {
    margin: 0 !important;
    background: #ffffff !important;
    color: #18130f !important;
}

.asareh-instagram-body,
.asareh-instagram-body * {
    box-sizing: border-box !important;
}

.asareh-instagram-body {
    font-family:
        "AsarehWitVazir",
        "AsarehWitPeyda",
        Tahoma,
        Arial,
        sans-serif !important;
}

.asareh-instagram-body h1,
.asareh-instagram-body h2,
.asareh-instagram-body h3,
.asareh-instagram-body h4,
.asareh-instagram-body strong,
.asareh-instagram-body .inner-kicker {
    font-family:
        "AsarehWitPeyda",
        "AsarehWitIranSans",
        Tahoma,
        Arial,
        sans-serif !important;
}

.asareh-instagram-body p,
.asareh-instagram-body span,
.asareh-instagram-body a,
.asareh-instagram-body button,
.asareh-instagram-body input,
.asareh-instagram-body small {
    font-family:
        "AsarehWitVazir",
        "AsarehWitPeyda",
        Tahoma,
        Arial,
        sans-serif !important;
}

.asareh-instagram-page {
    --asareh-ig-red: #b82024;
    --asareh-ig-red-dark: #8f1519;
    --asareh-ig-gold: #d9a842;
    --asareh-ig-ink: #18130f;
    --asareh-ig-muted: rgba(24, 19, 15, .64);
    --asareh-ig-soft: #f8f5ef;

    margin: 0 !important;
    padding: 0 !important;
    color: var(--asareh-ig-ink) !important;
    background: #ffffff !important;
}

html.kd-modal-lock,
body.kd-modal-lock {
    overflow: hidden !important;
}


/* =========================================================
   Hero
   ========================================================= */

.asareh-instagram-hero {
    min-height: 78vh !important;
    overflow: hidden !important;
}

.asareh-instagram-hero .inner-hero-bg {
    background-size: cover !important;
    background-position: center center !important;
    filter: saturate(.86) contrast(.96) brightness(.74) !important;
    transform: scale(1.018) !important;
}

.asareh-instagram-hero .inner-hero-overlay {
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .48) 48%,
            rgba(0, 0, 0, .22) 100%),
        radial-gradient(circle at 76% 44%,
            rgba(184, 32, 36, .22),
            transparent 34%) !important;
}

.asareh-instagram-hero-content {
    position: absolute !important;
    z-index: 4 !important;

    top: auto !important;
    left: auto !important;
    right: clamp(24px, 7vw, 96px) !important;
    bottom: clamp(74px, 10vh, 124px) !important;

    width: min(760px, calc(100vw - 48px)) !important;
    max-width: 760px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: right !important;
    transform: none !important;
}

.asareh-instagram-hero-kicker {
    margin: 0 0 12px !important;

    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.8 !important;
    letter-spacing: .18em !important;

    color: rgba(255, 255, 255, .70) !important;
}

.asareh-instagram-hero-content h1 {
    max-width: 790px !important;
    margin: 0 0 14px !important;

    font-size: clamp(40px, 5.5vw, 82px) !important;
    font-weight: 950 !important;
    line-height: 1.22 !important;
    letter-spacing: -0.055em !important;

    color: #ffffff !important;
}

.asareh-instagram-hero-content p {
    max-width: 620px !important;
    margin: 0 !important;

    font-size: clamp(14px, 1.45vw, 18px) !important;
    font-weight: 700 !important;
    line-height: 2.05 !important;

    color: rgba(255, 255, 255, .82) !important;
}


/* =========================================================
   Showcase Layout
   ========================================================= */

.kd-instagram-showcase,
.asareh-instagram-showcase {
    position: relative !important;
    isolation: isolate !important;

    min-height: calc(100vh - 40px) !important;
    padding: 72px 0 84px !important;
    overflow: hidden !important;

    background:
        radial-gradient(circle at 10% 12%, rgba(184, 32, 36, .06), transparent 34%),
        radial-gradient(circle at 92% 86%, rgba(217, 168, 66, .08), transparent 32%),
        linear-gradient(180deg, #fffdf8 0%, #fbf7ef 54%, #ffffff 100%) !important;
}

.kd-instagram-showcase::before {
    content: "" !important;
    position: absolute !important;
    inset: auto -12% -34% auto !important;
    width: 520px !important;
    height: 520px !important;
    z-index: -1 !important;

    border-radius: 50% !important;
    background: rgba(184, 32, 36, .055) !important;
    filter: blur(12px) !important;
}

.kd-instagram-shell {
    width: min(1480px, calc(100% - 72px)) !important;
    margin: 0 auto !important;
}

.kd-instagram-layout {
    display: grid !important;
    grid-template-columns: minmax(420px, .76fr) minmax(680px, 1.24fr) !important;
    gap: 44px !important;
    align-items: center !important;
}


/* =========================================================
   Phone Mockup
   ========================================================= */

.kd-instagram-phone-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    perspective: 1300px !important;
}

.kd-phone {
    position: relative !important;

    width: min(470px, 100%) !important;
    aspect-ratio: 9 / 18.75 !important;

    padding: 14px !important;

    border-radius: 58px !important;

    background:
        linear-gradient(145deg, #101010, #2b2b2b 42%, #080808) !important;

    box-shadow:
        0 38px 116px rgba(0, 0, 0, .20),
        0 14px 42px rgba(184, 32, 36, .10),
        inset 0 1px 0 rgba(255, 255, 255, .12) !important;

    overflow: hidden !important;

    transform: rotateY(-4deg) rotateX(2deg) !important;
    transform-style: preserve-3d !important;
}

.kd-phone::before {
    content: "" !important;
    position: absolute !important;
    inset: 1px !important;
    pointer-events: none !important;

    border-radius: 56px !important;

    background:
        linear-gradient(135deg, rgba(255, 255, 255, .14), transparent 28%),
        linear-gradient(315deg, rgba(217, 168, 66, .10), transparent 34%) !important;
}

.kd-phone-screen {
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border-radius: 45px !important;
    background: #ffffff !important;
}

.kd-phone-status {
    height: 38px !important;
    flex: 0 0 auto !important;

    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center !important;

    padding: 0 18px !important;

    color: #0f0f0f !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

.kd-phone-status>span:first-child {
    text-align: left !important;
    direction: ltr !important;
}

.kd-phone-island {
    width: 86px !important;
    height: 25px !important;

    border-radius: 999px !important;
    background: #050505 !important;
}

.kd-phone-icons {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;

    font-size: 13px !important;
}

.kd-ig-topbar {
    height: 42px !important;
    flex: 0 0 auto !important;

    display: grid !important;
    grid-template-columns: 42px 1fr 78px !important;
    align-items: center !important;

    padding: 0 10px !important;

    color: #101010 !important;
    background: #ffffff !important;
}

.kd-ig-topbar button {
    width: 34px !important;
    height: 34px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;

    color: #111111 !important;
    font-size: 20px !important;

    cursor: pointer !important;
}

.kd-ig-topbar strong {
    justify-self: center !important;

    color: #111111 !important;
    font-family: Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.kd-ig-topbar>div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 13px !important;

    color: #111111 !important;
    font-size: 18px !important;
}


/* =========================================================
   Phone Profile Scroll
   ========================================================= */

.kd-ig-profile-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #ffffff !important;

    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, .24) transparent !important;
}

.kd-ig-profile-scroll::-webkit-scrollbar {
    width: 4px !important;
}

.kd-ig-profile-scroll::-webkit-scrollbar-track {
    background: transparent !important;
}

.kd-ig-profile-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .22) !important;
    border-radius: 999px !important;
}

.kd-ig-profile {
    padding: 10px 18px 14px !important;
    background: #ffffff !important;
}

.kd-ig-profile-row {
    display: grid !important;
    grid-template-columns: 112px 1fr !important;
    gap: 18px !important;
    align-items: center !important;
}

.kd-ig-avatar {
    width: 106px !important;
    height: 106px !important;

    padding: 4px !important;
    border-radius: 50% !important;

    background:
        linear-gradient(135deg, #ff5c38 0%, #ff2aa3 48%, #f6aa28 100%) !important;
}

.kd-ig-avatar img {
    width: 100% !important;
    height: 100% !important;

    padding: 10px !important;

    object-fit: contain !important;

    border-radius: 50% !important;
    background: #ffffff !important;
}

.kd-ig-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;

    text-align: center !important;
}

.kd-ig-stats strong {
    display: block !important;

    color: #111111 !important;

    font-family: Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

.kd-ig-stats span {
    display: block !important;

    color: #171717 !important;

    font-size: 11px !important;
    font-weight: 750 !important;
    line-height: 1.45 !important;
}

.kd-ig-bio {
    margin-top: 14px !important;
}

.kd-ig-bio h1 {
    margin: 0 0 6px !important;

    color: #111111 !important;

    font-size: 17px !important;
    font-weight: 950 !important;
    line-height: 1.45 !important;
}

.kd-ig-handle {
    width: max-content !important;
    max-width: 100% !important;

    display: inline-flex !important;
    align-items: center !important;

    margin-bottom: 10px !important;
    padding: 4px 9px !important;

    border-radius: 999px !important;

    background: #f0efed !important;
    color: #151515 !important;

    direction: ltr !important;
    font-family: Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.kd-ig-bio h2 {
    margin: 0 0 6px !important;

    color: var(--asareh-ig-red) !important;

    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.55 !important;
}

.kd-ig-bio p {
    margin: 0 !important;

    color: #141414 !important;

    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1.9 !important;
}

.kd-ig-bio a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;

    margin-top: 8px !important;

    color: #155dbb !important;
    text-decoration: none !important;

    direction: ltr !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
}

.kd-ig-actions {
    display: grid !important;
    grid-template-columns: 1.15fr .9fr .9fr 42px !important;
    gap: 8px !important;

    margin-top: 14px !important;
}

.kd-ig-actions a,
.kd-ig-actions button {
    min-height: 36px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 8px !important;

    border: 0 !important;
    border-radius: 9px !important;

    background: #efefef !important;
    color: #111111 !important;

    text-decoration: none !important;

    font-size: 12px !important;
    font-weight: 900 !important;

    cursor: pointer !important;
}

.kd-ig-actions .kd-follow {
    background: #0095f6 !important;
    color: #ffffff !important;
}

.kd-ig-highlights {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;

    margin-top: 18px !important;
}

.kd-ig-highlight {
    min-width: 0 !important;

    display: grid !important;
    justify-items: center !important;
    gap: 5px !important;
}

.kd-highlight-ring {
    width: 60px !important;
    height: 60px !important;

    padding: 3px !important;

    border-radius: 50% !important;

    background:
        linear-gradient(135deg,
            #feda75 0%,
            #fa7e1e 28%,
            #d62976 58%,
            #962fbf 78%,
            #4f5bd5 100%) !important;
}

.kd-highlight-ring span {
    width: 100% !important;
    height: 100% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 50% !important;

    background: #ffffff !important;
    color: #1c1c1c !important;
}

.kd-highlight-ring span i {
    font-size: 22px !important;
}

.kd-ig-highlight strong {
    max-width: 72px !important;

    color: #191919 !important;

    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.4 !important;
    text-align: center !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.kd-ig-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;

    height: 38px !important;
    margin-top: 14px !important;

    color: #9a9a9a !important;

    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08) !important;
}

.kd-ig-tabs span {
    position: relative !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 20px !important;
}

.kd-ig-tabs span.is-active {
    color: #111111 !important;
}

.kd-ig-tabs span.is-active::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;

    width: 52px !important;
    height: 2px !important;

    border-radius: 999px !important;
    background: #111111 !important;
}


/* =========================================================
   Phone Grid Posts
   ========================================================= */

.kd-phone-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;

    margin-top: 2px !important;
    padding-bottom: 14px !important;

    background: rgba(0, 0, 0, .05) !important;
}

.kd-phone-post,
.kd-feed-post-cover {
    background-image: var(--post-image), var(--kd-instagram-post-fallback) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-color: #eeeeee !important;
}

.kd-phone-post {
    position: relative !important;

    aspect-ratio: 1 / 1 !important;

    padding: 0 !important;
    border: 0 !important;

    overflow: hidden !important;

    cursor: pointer !important;
}

.kd-phone-post::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;

    background: rgba(0, 0, 0, .28) !important;

    opacity: 0 !important;
    transition: opacity .22s ease !important;
}

.kd-phone-post:hover::before,
.kd-phone-post:focus-visible::before {
    opacity: 1 !important;
}

.kd-phone-post span:not(.asareh-ig-video-mark) {
    display: none !important;
}

.kd-phone-nav {
    position: relative !important;
    z-index: 8 !important;

    height: 48px !important;
    flex: 0 0 auto !important;

    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    align-items: center !important;

    padding: 0 26px !important;

    color: #111111 !important;
    font-size: 21px !important;

    background: #ffffff !important;

    box-shadow: 0 -1px 0 rgba(0, 0, 0, .08) !important;
}


/* =========================================================
   Content Side / Feed Grid
   ========================================================= */

.kd-instagram-content {
    min-width: 0 !important;
}

.kd-instagram-head {
    max-width: 760px !important;
    margin-bottom: 24px !important;
}

.kd-instagram-head span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    color: var(--asareh-ig-red) !important;

    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1.8 !important;
    letter-spacing: .08em !important;
}

.kd-instagram-head span::before {
    content: "" !important;

    width: 34px !important;
    height: 1px !important;

    background: rgba(184, 32, 36, .32) !important;
}

.kd-instagram-head h2 {
    margin: 6px 0 10px !important;

    color: #111111 !important;

    font-size: clamp(27px, 2.45vw, 42px) !important;
    font-weight: 950 !important;
    line-height: 1.55 !important;
    letter-spacing: -0.035em !important;
}

.kd-instagram-head p {
    margin: 0 !important;

    color: rgba(24, 19, 15, .66) !important;

    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 2.08 !important;
    text-align: justify !important;
}

.kd-posts-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;

    background: rgba(0, 0, 0, .04) !important;

    perspective: 1200px !important;
}

.kd-feed-post {
    min-width: 0 !important;
    transform-style: preserve-3d !important;
}

.kd-feed-post-cover {
    position: relative !important;

    width: 100% !important;
    aspect-ratio: 1 / 1 !important;

    display: block !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;

    overflow: hidden !important;
    isolation: isolate !important;

    color: #ffffff !important;
    cursor: pointer !important;

    box-shadow: none !important;

    transform: translateY(0) rotateX(0deg) rotateY(0deg) scale(1) !important;

    transition:
        transform .34s cubic-bezier(.2, .72, .22, 1),
        box-shadow .34s cubic-bezier(.2, .72, .22, 1),
        filter .24s ease,
        z-index .1s ease !important;
}

.kd-feed-post-cover::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;

    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .08), transparent 38%),
        rgba(0, 0, 0, .42) !important;

    opacity: 0 !important;
    transition: opacity .24s ease !important;
}

.kd-feed-post-cover:hover,
.kd-feed-post-cover:focus-visible {
    z-index: 12 !important;

    transform: translateY(-13px) rotateX(7deg) rotateY(-7deg) scale(1.045) !important;

    box-shadow:
        0 28px 66px rgba(36, 23, 7, .22),
        0 10px 26px rgba(184, 32, 36, .14) !important;

    filter: saturate(1.08) contrast(1.04) !important;
}

.kd-feed-post-cover:hover::before,
.kd-feed-post-cover:focus-visible::before {
    opacity: 1 !important;
}

.kd-feed-hover {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;

    color: #ffffff !important;

    opacity: 0 !important;
    transform: translateY(10px) translateZ(40px) !important;

    transition:
        opacity .24s ease,
        transform .28s cubic-bezier(.2, .72, .22, 1) !important;
}

.kd-feed-post-cover:hover .kd-feed-hover,
.kd-feed-post-cover:focus-visible .kd-feed-hover {
    opacity: 1 !important;
    transform: translateY(0) translateZ(70px) !important;
}

.kd-feed-hover b {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    color: #ffffff !important;

    font-family: Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    text-shadow: 0 5px 18px rgba(0, 0, 0, .35) !important;
}

.kd-feed-hover i {
    font-size: 18px !important;
}

.kd-instagram-page.is-post-modal-open .kd-feed-post-cover {
    filter: brightness(.54) grayscale(.08) !important;
}

.kd-instagram-page.is-post-modal-open .kd-feed-post-cover.is-selected {
    filter: brightness(1) grayscale(0) !important;
}


/* =========================================================
   CEO Video Posts
   ========================================================= */

.asareh-instagram-page .kd-phone-video-post,
.asareh-instagram-page .kd-feed-video-post {
    position: relative !important;
    overflow: hidden !important;

    background-image: var(--post-image), var(--kd-instagram-post-fallback) !important;
    background-size: cover !important;
    background-position: center center !important;
}

.asareh-instagram-page .kd-phone-video-post video,
.asareh-instagram-page .kd-feed-video-post video {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;

    border: 0 !important;
    outline: 0 !important;

    transform: scale(1.02) !important;

    filter:
        saturate(.92) contrast(.96) brightness(.86) !important;

    transition:
        transform .55s ease,
        filter .55s ease !important;
}

.asareh-instagram-page .kd-phone-video-post:hover video,
.asareh-instagram-page .kd-feed-video-post:hover video {
    transform: scale(1.07) !important;

    filter:
        saturate(1.02) contrast(1.02) brightness(.92) !important;
}

.asareh-instagram-page .asareh-ig-video-mark {
    position: absolute !important;
    z-index: 10 !important;

    left: 12px !important;
    top: 12px !important;

    width: 34px !important;
    height: 34px !important;

    display: grid !important;
    place-items: center !important;

    border-radius: 50% !important;

    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .58), transparent 34%),
        linear-gradient(135deg, rgba(184, 32, 36, .88), rgba(184, 32, 36, .42)) !important;

    color: #ffffff !important;

    box-shadow:
        0 16px 38px rgba(184, 32, 36, .24),
        inset 0 1px 0 rgba(255, 255, 255, .34) !important;

    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.asareh-instagram-page .asareh-ig-video-mark i {
    font-size: 19px !important;
    transform: translateX(-1px) !important;
}

.asareh-instagram-page .kd-feed-video-post .kd-feed-hover {
    z-index: 12 !important;
}


/* =========================================================
   Separator
   ========================================================= */

.kd-instagram-separator {
    padding: 30px 0 !important;
    background: #ffffff !important;
}

.kd-instagram-separator .kd-instagram-shell {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 18px !important;
    align-items: center !important;
}

.kd-instagram-separator span {
    height: 1px !important;
    background:
        linear-gradient(90deg,
            transparent,
            rgba(184, 32, 36, .24),
            rgba(217, 168, 66, .26),
            transparent) !important;
}

.kd-instagram-separator strong {
    color: var(--asareh-ig-red) !important;

    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.8 !important;

    white-space: nowrap !important;
}


/* =========================================================
   Bottom Video
   ========================================================= */

.kd-instagram-bottom,
.asareh-instagram-bottom {
    min-height: 540px !important;
    margin-top: 0 !important;
}

.kd-instagram-bottom .kd-instagram-footer-media,
.kd-instagram-bottom .page-bottom-video-media,
.asareh-instagram-bottom .page-bottom-video-media {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: cover !important;
    object-position: center center !important;
}

.asareh-instagram-bottom .page-bottom-video-overlay {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .76), rgba(0, 0, 0, .36)),
        radial-gradient(circle at 78% 50%, rgba(184, 32, 36, .20), transparent 34%) !important;
}

.kd-instagram-bottom .page-bottom-video-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

.kd-instagram-bottom .page-bottom-video-content h2 {
    max-width: 780px !important;
    margin: 0 !important;

    color: #ffffff !important;

    font-size: clamp(28px, 4vw, 58px) !important;
    font-weight: 950 !important;
    line-height: 1.5 !important;
    letter-spacing: -0.045em !important;
}

.kd-instagram-bottom .page-bottom-video-content>a {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    min-height: 48px !important;
    height: 48px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;

    margin-top: 16px !important;
    padding: 0 34px !important;

    border: 0 !important;
    border-radius: 999px !important;

    background:
        radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .44), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, .76), rgba(217, 168, 66, .34)) !important;

    color: #35230c !important;

    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 950 !important;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, .16),
        inset 0 1px 0 rgba(255, 255, 255, .54) !important;

    transition:
        transform .28s ease,
        box-shadow .28s ease !important;
}

.kd-instagram-bottom .page-bottom-video-content>a:hover {
    transform: translateY(-3px) !important;
    box-shadow:
        0 26px 58px rgba(0, 0, 0, .20),
        inset 0 1px 0 rgba(255, 255, 255, .64) !important;
}


/* =========================================================
   Modal
   ========================================================= */

.kd-instagram-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 34px !important;
}

.kd-instagram-modal.is-open {
    display: flex !important;
}

.kd-instagram-modal-backdrop {
    position: absolute !important;
    inset: 0 !important;

    background: rgba(255, 255, 255, .18) !important;

    backdrop-filter: blur(16px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
}

.kd-instagram-modal-dialog {
    position: relative !important;
    z-index: 2 !important;

    width: min(1120px, calc(100vw - 60px)) !important;
    height: min(720px, calc(100vh - 70px)) !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr) !important;

    overflow: hidden !important;

    background: #ffffff !important;

    border-radius: 0 !important;

    box-shadow:
        0 34px 110px rgba(0, 0, 0, .22),
        0 0 0 1px rgba(255, 255, 255, .55) !important;
}

.kd-instagram-modal-close {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 4 !important;

    width: 40px !important;
    height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    color: #111111 !important;
    background: rgba(255, 255, 255, .74) !important;

    box-shadow: 0 10px 28px rgba(0, 0, 0, .12) !important;

    font-size: 20px !important;

    cursor: pointer !important;
}

.kd-modal-post-media {
    position: relative !important;

    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #0f0f0f !important;
}

.kd-modal-post-media img,
.kd-modal-post-media video {
    width: 100% !important;
    height: 100% !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center center !important;

    background: #0f0f0f !important;

    border: 0 !important;
    outline: 0 !important;
}

.kd-modal-post-side {
    min-width: 0 !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    background: #ffffff !important;

    direction: rtl !important;
}

.kd-modal-post-header {
    height: 66px !important;
    flex: 0 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    padding: 14px 18px !important;

    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    background: #ffffff !important;
}

.kd-modal-profile {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;

    min-width: 0 !important;
}

.kd-modal-profile img {
    width: 38px !important;
    height: 38px !important;

    object-fit: contain !important;

    border-radius: 50% !important;
    background: #ffffff !important;
}

.kd-modal-profile strong {
    display: block !important;

    color: #111111 !important;

    direction: ltr !important;
    font-family: Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
}

.kd-modal-profile span {
    display: block !important;

    color: #666666 !important;

    direction: ltr !important;
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.kd-modal-caption {
    padding: 16px 18px !important;

    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    background: #ffffff !important;
}

.kd-modal-caption p {
    margin: 0 !important;

    color: #111111 !important;

    font-size: 13px !important;
    font-weight: 750 !important;
    line-height: 1.9 !important;
    text-align: start !important;
}

.kd-modal-caption p strong {
    display: inline !important;
    margin-inline-end: 5px !important;

    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
}

.kd-modal-comments {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    display: grid !important;
    align-content: start !important;
    gap: 14px !important;

    overflow-y: auto !important;

    padding: 14px 18px !important;

    background: #ffffff !important;
}

.kd-modal-comments div {
    display: block !important;

    color: #111111 !important;

    font-size: 13px !important;
    line-height: 1.8 !important;
}

.kd-modal-comments strong {
    margin-inline-end: 5px !important;

    color: #111111 !important;

    font-family: Arial, sans-serif !important;
    font-weight: 900 !important;
}

.kd-modal-comments span {
    color: #222222 !important;
    font-weight: 700 !important;
}

.kd-modal-post-footer {
    flex: 0 0 auto !important;

    padding: 12px 18px 0 !important;

    border-top: 1px solid rgba(0, 0, 0, .08) !important;
    background: #ffffff !important;
}

.kd-modal-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin-bottom: 8px !important;

    color: #111111 !important;
    font-size: 23px !important;
}

.kd-modal-actions div {
    display: flex !important;
    gap: 14px !important;
}

.kd-modal-post-footer>strong {
    display: block !important;

    color: #111111 !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.6 !important;
}

.kd-modal-post-footer>span {
    display: block !important;

    margin-top: 4px !important;

    color: #8e8e8e !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.6 !important;
}

.kd-modal-comment-box {
    height: 48px !important;

    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    gap: 8px !important;
    align-items: center !important;

    margin-top: 8px !important;

    border-top: 1px solid rgba(0, 0, 0, .08) !important;
}

.kd-modal-comment-box i {
    color: #111111 !important;
    font-size: 20px !important;
}

.kd-modal-comment-box input {
    width: 100% !important;

    border: 0 !important;
    outline: 0 !important;

    color: #111111 !important;
    background: transparent !important;

    font-family: inherit !important;
    font-size: 13px !important;
}

.kd-modal-comment-box button {
    border: 0 !important;

    background: transparent !important;
    color: #0095f6 !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 900 !important;

    cursor: pointer !important;
}

.kd-instagram-page.is-post-modal-open .kd-instagram-showcase,
.kd-instagram-page.is-post-modal-open .kd-instagram-separator,
.kd-instagram-page.is-post-modal-open .kd-instagram-bottom {
    filter: blur(2px) saturate(.9) !important;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1280px) {
    .kd-instagram-layout {
        grid-template-columns: minmax(390px, .76fr) minmax(620px, 1.24fr) !important;
        gap: 30px !important;
    }

    .kd-phone {
        width: min(430px, 100%) !important;
    }
}

@media (max-width: 1060px) {
    .kd-instagram-layout {
        grid-template-columns: 1fr !important;
    }

    .kd-phone {
        width: min(460px, 100%) !important;
    }

    .kd-posts-grid {
        max-width: 760px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 860px) {
    .kd-instagram-modal-dialog {
        width: min(540px, calc(100vw - 34px)) !important;
        height: min(88vh, 860px) !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr 360px !important;
    }
}

@media (max-width: 760px) {
    .asareh-instagram-hero {
        min-height: 72vh !important;
    }

    .asareh-instagram-hero-content {
        right: 22px !important;
        bottom: 58px !important;
        width: calc(100vw - 44px) !important;
    }

    .kd-instagram-shell {
        width: calc(100% - 34px) !important;
    }

    .kd-instagram-showcase,
    .asareh-instagram-showcase {
        padding: 42px 0 52px !important;
    }

    .kd-posts-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
    }

    .kd-feed-hover {
        gap: 12px !important;
    }

    .kd-feed-hover b {
        font-size: 12px !important;
    }

    .kd-feed-post-cover:hover,
    .kd-feed-post-cover:focus-visible {
        transform: none !important;
        box-shadow: none !important;
    }

    .kd-phone {
        width: min(100%, 390px) !important;
        padding: 11px !important;
        border-radius: 44px !important;
        transform: none !important;
    }

    .kd-phone::before {
        border-radius: 42px !important;
    }

    .kd-phone-screen {
        border-radius: 34px !important;
    }

    .kd-ig-profile {
        padding: 8px 12px 14px !important;
    }

    .kd-ig-profile-row {
        grid-template-columns: 94px 1fr !important;
        gap: 12px !important;
    }

    .kd-ig-avatar {
        width: 88px !important;
        height: 88px !important;
    }

    .kd-ig-stats strong {
        font-size: 15px !important;
    }

    .kd-ig-stats span {
        font-size: 9.5px !important;
    }

    .kd-ig-actions {
        grid-template-columns: 1fr 1fr 1fr 36px !important;
        gap: 6px !important;
    }

    .kd-ig-actions a,
    .kd-ig-actions button {
        font-size: 10.5px !important;
    }

    .kd-highlight-ring {
        width: 46px !important;
        height: 46px !important;
    }

    .kd-highlight-ring span i {
        font-size: 18px !important;
    }

    .kd-ig-highlight strong {
        font-size: 8.5px !important;
    }

    .kd-ig-bio p {
        font-size: 10.6px !important;
        line-height: 1.75 !important;
    }

    .kd-instagram-separator .kd-instagram-shell {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .kd-instagram-separator span {
        display: none !important;
    }

    .kd-instagram-bottom .page-bottom-video-content>a {
        width: 100% !important;
        max-width: 280px !important;
        min-width: 0 !important;
        align-self: flex-start !important;
    }
}

@media (max-width: 520px) {
    .kd-phone {
        width: min(100%, 360px) !important;
    }

    .kd-ig-profile-row {
        grid-template-columns: 82px 1fr !important;
    }

    .kd-ig-avatar {
        width: 78px !important;
        height: 78px !important;
    }

    .kd-ig-highlights {
        gap: 5px !important;
    }

    .kd-highlight-ring {
        width: 42px !important;
        height: 42px !important;
    }

    .kd-ig-highlight strong {
        max-width: 54px !important;
        font-size: 8px !important;
    }
}

@media (max-width: 460px) {
    .kd-instagram-modal {
        padding: 16px !important;
    }

    .kd-instagram-modal-close {
        top: 12px !important;
        right: 12px !important;
    }

    .kd-instagram-modal-dialog {
        width: calc(100vw - 28px) !important;
        height: calc(100vh - 50px) !important;
        grid-template-rows: 1fr 340px !important;
    }

    .kd-modal-post-header {
        height: 58px !important;
    }

    .kd-modal-caption {
        padding: 12px 14px !important;
    }

    .kd-modal-comments {
        padding: 12px 14px !important;
    }

    .kd-modal-post-footer {
        padding: 10px 14px 0 !important;
    }
}

/* =========================================================
   Instagram 27 Posts - Phone Scroll Fix
   ========================================================= */

.asareh-instagram-page .kd-ig-profile-scroll {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}

.asareh-instagram-page .asareh-ig-phone-grid-27 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2px !important;
    padding-bottom: 18px !important;
}

.asareh-instagram-page .asareh-ig-phone-grid-27 .kd-phone-post {
    aspect-ratio: 1 / 1 !important;
}

.asareh-instagram-page .asareh-instagram-bottom .page-bottom-video-media {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}