/* صفحه‌ی اصلی — templates/home.php (پایه‌ی مشترک؛ اصلاحاتِ انگلیسی در home-en.css) */
/* ==========================================================
   TASVIRAFARIN — CINEMATIC HOME
   Local only / no CDN / no external icon or font
   ========================================================== */


.tf-cinema,
.tf-cinema *{
    box-sizing:border-box;
}

.tf-cinema{
    --tf-bg:#070d19;
    --tf-bg2:var(--tf-c-navy);
    --tf-surface:#0d1930;
    --tf-surface2:#111f3a;
    --tf-gold:var(--tf-c-orange);
    --tf-gold2:var(--tf-c-orange-light);
    --tf-white:#f7f7f4;
    --tf-muted:#9ba8ba;
    --tf-line:rgba(255,255,255,.10);
    direction:rtl;
    background:var(--tf-bg);
    color:var(--tf-white);
    font-family:'Vazirmatn',Tahoma,sans-serif;
    line-height:1.85;
    overflow:hidden;
    isolation:isolate;
}

.tf-cinema a{
    color:inherit;
    text-decoration:none;
}

.tf-cinema img{
    max-width:100%;
    height:auto;
}

.tf-cinema .tf-wrap{
    width:min(1180px,calc(100% - 48px));
    margin-inline:auto;
}

.tf-mono{
    font-family:'Vazirmatn',Consolas,Monaco,monospace;
    direction:ltr;
    letter-spacing:.4px;
}

/* ---------- hero ---------- */

.tf-hero{
    min-height:660px;
    position:relative;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 72% 46%,rgba(64,94,110,.42),transparent 27%),
        linear-gradient(90deg,#17273a 0%,#0d1727 46%,#070d19 100%);
}

.tf-hero:before{
    content:"";
    position:absolute;
    width:620px;
    height:620px;
    left:-90px;
    top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.07);
    border-radius:50%;
    box-shadow:
        0 0 0 45px rgba(255,255,255,.012),
        0 0 0 105px rgba(255,255,255,.008);
}

.tf-hero:after{
    content:"";
    position:absolute;
    inset:20px;
    border:1px solid rgba(255,255,255,.13);
    pointer-events:none;
}

.tf-hero-inner{
    min-height:660px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:55px;
    align-items:center;
    position:relative;
    z-index:3;
}

.tf-hero-copy{
    padding:70px 0;
}

.tf-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--tf-gold2);
    font-size:12px;
    margin-bottom:21px;
}

.tf-kicker:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--tf-c-red-deep);
    box-shadow:0 0 0 4px rgba(216,75,61,.09);
}

.tf-hero h1{
    margin:0;
    max-width:800px;
    font-size:var(--tf-h1);
    font-weight:600;
    line-height:1.35;
    /* فاصله‌ی منفیِ حروف اتصالِ حروفِ فارسی رو خراب می‌کنه؛ فقط انگلیسی داره (home-en.css) */
    letter-spacing:0;
}

.tf-hero h1 em{
    color:var(--tf-gold2);
    font-style:normal;
}

.tf-hero-copy>p{
    max-width:670px;
    margin:22px 0 29px;
    color:#c0c8d2;
    font-size:16px;
}

.tf-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.tf-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:43px;
    padding:8px 22px;
    border:1px solid var(--tf-gold);
    background:var(--tf-gold);
    color:#171008!important;
    font-size:13px;
    font-weight:600;
    transition:.25s ease;
}

.tf-btn:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
}

.tf-btn.alt{
    color:var(--tf-white)!important;
    background:transparent;
    border-color:rgba(255,255,255,.28);
}

.tf-corner{
    position:absolute;
    z-index:5;
    color:#d6dce3;
    font:10px Consolas,monospace;
    direction:ltr;
    opacity:.8;
}

.tf-corner.tl{left:43px;top:38px}
.tf-corner.br{left:43px;bottom:38px}

.tf-hero-video{
    width:min(450px,100%);
    aspect-ratio:16/10;
    margin:auto;
    position:relative;
    transform:rotate(-2deg);
    border:1px solid rgba(255,255,255,.24);
    overflow:hidden;
    background:#08111d;
    box-shadow:28px 28px 0 rgba(217,138,61,.10);
}

.tf-hero-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.tf-camera-rec{
    position:absolute;
    left:18px;
    top:16px;
    z-index:4;
    color:#e45a4b;
    font:10px Consolas,monospace;
    direction:ltr;
}

.tf-camera-time{
    position:absolute;
    right:19px;
    bottom:15px;
    z-index:4;
    color:#fff;
    background:rgba(3,7,12,.55);
    padding:2px 8px;
    border-radius:3px;
    font:10px Consolas,monospace;
    direction:ltr;
}

/* ---------- generic sections ---------- */

.tf-section{
    padding:95px 0;
    background:var(--tf-bg);
}

.tf-section.alt{
    background:var(--tf-bg2);
}

.tf-head{
    margin-bottom:43px;
}

.tf-head.center{
    text-align:center;
}

.tf-eyebrow{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--tf-gold2);
    font-size:12px;
    margin-bottom:7px;
}

.tf-head.center .tf-eyebrow{
    justify-content:center;
}

.tf-eyebrow b{
    color:var(--tf-gold);
    font-family:Consolas,monospace;
    font-weight:700;
    direction:ltr;
}

.tf-head h2{
    margin:0;
    font-size:var(--tf-h2);
    line-height:1.4;
    font-weight:700;
}

.tf-head h2:after{
    content:"";
    display:block;
    width:43px;
    height:2px;
    margin-top:13px;
    background:var(--tf-gold);
}

.tf-head.center h2:after{
    margin-inline:auto;
    margin-top:13px;
}

/* ---------- works ---------- */

.tf-works{
    display:flex;
    gap:18px;
    /* جا برای بالا آمدن کارت و سایه‌اش (اسکرول افقی، عمودی را هم می‌بُرد)؛ margin منفی جای کل بخش را ثابت نگه می‌دارد */
    padding:12px 0 28px;margin:-12px 0 -28px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.tf-works::-webkit-scrollbar{display:none;}

/* ---------- کارت «جدیدترین آثار» — قاب نوار فیلم (FRAME)؛ فقط کارت، بقیه‌ی بخش دست‌نخورده ---------- */
.tf-work{
    flex:0 0 calc((100% - 3*18px)/4);
    scroll-snap-align:start;
    position:relative;
    display:flex;flex-direction:column;
    background:#0d1f3a;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
    transition:transform .3s ease, box-shadow .3s ease;
    text-decoration:none;color:inherit;
}
.tf-work:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 40px rgba(0,0,0,.5), 0 0 0 2px var(--tf-c-orange);
}
.tf-work-media{
    aspect-ratio:4/3; /* عکس‌های سایت ۸۰۰×۶۰۰ */
    position:relative;
    overflow:hidden;
    background:#050b16 no-repeat center/cover;
}
.tf-work-media:after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(5,11,22,.45));
}

.tf-works-nav{
    display:flex;
    gap:10px;
    justify-content:flex-end;
    margin-bottom:20px;
}
.tf-works-nav button{
    width:36px;height:36px;border-radius:50%;
    border:1px solid var(--tf-line);background:var(--tf-surface);color:var(--tf-text);
    display:grid;place-items:center;cursor:pointer;transition:.2s;
}
.tf-works-nav button:hover{border-color:var(--tf-gold);color:var(--tf-gold);}
.tf-works-nav svg{width:16px;height:16px;}

.tf-works-dots{
    display:flex;gap:6px;justify-content:center;margin-top:22px;
}
.tf-works-dots span{
    width:6px;height:6px;border-radius:50%;background:var(--tf-line);
}
.tf-works-dots span:first-child{background:var(--tf-gold);width:20px;border-radius:4px;}

.tf-works-more{text-align:center;margin-top:32px;}

.tf-work-no{
    position:absolute;top:10px;inset-inline-start:10px;z-index:2;
    font:700 11px Consolas,Monaco,monospace;letter-spacing:.08em;
    background:rgba(5,11,22,.8);color:var(--tf-c-orange-light);
    padding:3px 8px;border-radius:3px;
}
/* دکمه‌ی پخش: دایره‌ی نارنجی وسط تصویر، با هاور ظاهر می‌شود (در لمسی همیشه) */
.tf-work-play{
    position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%) scale(.9);
    width:52px;height:52px;border-radius:50%;border:0;padding:0;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    background:rgba(217,138,61,.94);color:var(--tf-c-ink);
    opacity:0;transition:opacity .25s ease, transform .25s ease;
    box-shadow:0 0 0 8px rgba(217,138,61,.2);
}
.tf-work-play svg{width:20px;height:20px;margin-left:3px;}
.tf-work:hover .tf-work-play,
.tf-work-play:focus-visible{opacity:1;transform:translate(-50%,-50%) scale(1);}
@media(hover:none){.tf-work-play{opacity:1;transform:translate(-50%,-50%) scale(1);}}
.tf-work-body{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    padding:14px 16px 16px;flex:1 0 auto;text-decoration:none;color:inherit;
}
.tf-work-cat{
    display:inline-block;font-size:12px;padding:3px 11px;border-radius:999px;
    border:1px solid rgba(240,166,90,.7);color:var(--tf-c-orange-light);
}
.tf-work-body h3{margin:2px 0 0;font-size:16.5px;font-weight:800;line-height:1.55;color:#fff;}
.tf-work-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.7);}
.tf-work-meta i{width:4px;height:4px;border-radius:50%;background:var(--tf-c-orange);}

/* ---------- services ---------- */

.tf-services{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1px;
    /* خط‌های بینِ کارت‌ها با box-shadowِ خودِ کارت‌ها کشیده می‌شه، نه با
       پس‌زمینه‌ی گرید — وگرنه وقتی تعدادِ کارت‌ها مضربِ ۳ نیست، خونه‌ی
       خالیِ آخر به‌صورتِ یه مستطیلِ روشن دیده می‌شد */
    padding:1px;
}

.tf-service{
    min-height:260px;
    padding:32px 25px;
    background:var(--tf-surface);
    box-shadow:0 0 0 1px var(--tf-line);
    transition:.25s ease;
    display:block;
    text-decoration:none;
    color:inherit;
    text-align:center;
}

.tf-service:hover{
    background:#112139;
}

.tf-service-no{
    color:#707d8d;
    font:10px Consolas,monospace;
    direction:ltr;
    margin-bottom:21px;
}

.tf-icon{
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
    margin:0 auto 19px;
    border-radius:50%;
    color:var(--tf-gold);
    background:rgba(217,138,61,.08);
    border:1px solid rgba(217,138,61,.35);
}

.tf-icon svg,
.tf-icon img{
    width:40px;
    height:40px;
    display:block;
    object-fit:contain;
}

.tf-service:hover .tf-icon{
    color:#261609;
    background:var(--tf-gold);
    border-color:var(--tf-gold);
}

.tf-service h3{
    margin:0 0 8px;
    font-size:16px;
    font-weight:800;
}

.tf-service p{
    margin:0;
    color:var(--tf-muted);
    font-size:13px;
}

/* ---------- avid ---------- */

.tf-avid-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:28px;
}
.tf-avid-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:96px;
    padding:20px 22px;
    border-radius:14px;
    text-decoration:none;
    color:inherit;
    transition:.25s ease;
}
.tf-avid-card:hover{transform:translateY(-2px);}

.tf-avid-info{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.tf-avid-text{min-width:0;text-align:start;}
.tf-avid-card h3{
    margin:0 0 4px;
    font-size:15px;
    font-weight:800;
    color:var(--tf-white);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.tf-avid-more{
    display:block;
    font-size:13px;
    color:rgba(255,255,255,.65);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.tf-avid-badge{
    flex-shrink:0;
    width:40px;
    height:40px;
    border-radius:10px;
    display:grid;
    place-items:center;
}
.tf-avid-badge svg{width:20px;height:20px;display:block;}
/* آیکون‌های این بخش هم خط‌دورن (fill:none)، مثلِ «فرآیند تولید» — فقط
   استروک رو اجباری می‌کنیم، وگرنه شکل‌ها توپر می‌شن */
.tf-avid-badge svg *{stroke:currentColor !important;}

.tf-avid-arrow{
    flex-shrink:0;
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.55);
    transition:.25s ease;
}
.tf-avid-arrow svg{width:18px;height:18px;}
.tf-avid-card:hover .tf-avid-arrow{color:#fff;transform:translateX(4px);}

@media(max-width:860px){ .tf-avid-grid{grid-template-columns:1fr;} }

/* ---------- process ---------- */

.tf-process-track{
    position:relative;
    display:grid;
    grid-template-columns:repeat(var(--tf-process-cols,5),1fr);
    gap:16px;
}

.tf-process-track:before{
    content:"";
    position:absolute;
    top:29px;
    right:29px;
    left:29px;
    border-top:2px dotted rgba(217,138,61,.4);
    z-index:0;
}

.tf-process-step{
    position:relative;
    z-index:1;
    text-align:start;
}

.tf-process-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    margin:0 0 22px;
    display:grid;
    place-items:center;
    background:var(--tf-surface);
    border:1px solid rgba(217,138,61,.4);
    color:var(--tf-gold);
}

.tf-process-icon svg{
    width:26px;
    height:26px;
    display:block;
}
/* آیکون‌های این بخش خط‌دورن (fill:none)، نه توپر — برای همین فقط استروک
   رو اجباری می‌کنیم، نه fill (وگرنه شکل‌ها توپر می‌شن و ظاهرشون خراب می‌شه) */
.tf-process-icon svg *{stroke:currentColor !important;}

.tf-process-step h3{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 6px;
    font-size:15px;
    font-weight:800;
}

.tf-process-step h3:before{
    content:'●';
    color:var(--tf-c-red);
    font-size:9px;
    flex-shrink:0;
}

.tf-process-step p{
    margin:0;
    color:var(--tf-muted);
    font-size:13px;
    line-height:1.8;
}

@media(max-width:1000px){
    .tf-process-track{
        grid-template-columns:1fr;
        gap:0;
    }
    .tf-process-track:before{
        display:none;
    }
    .tf-process-step{
        display:block;
        padding:20px 0;
        border-bottom:1px solid var(--tf-line);
    }
    .tf-process-step:last-child{
        border-bottom:0;
    }
    .tf-process-icon{
        margin:0 0 16px;
    }
}

/* ---------- behind the scenes ---------- */

.tf-behind-grid{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.tf-behind-grid::-webkit-scrollbar{display:none;}
.tf-behind-item{
    flex:0 0 calc((100% - 4*14px)/5);
    scroll-snap-align:start;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid var(--tf-line);
    background:var(--tf-surface);
}
.tf-behind-item img{
    width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.15);
    transition:.3s;
}
.tf-behind-item:hover img{filter:none;transform:scale(1.04);}

@media(max-width:1000px){
    .tf-behind-item{flex-basis:calc((100% - 2*14px)/3);}
}
@media(max-width:650px){
    .tf-behind-item{flex-basis:70%;}
}

/* ---------- stats (home) ---------- */

.tf-stats-grid{
    display:grid;
    grid-template-columns:repeat(var(--tf-stats-cols-desktop,3),1fr);
    gap:1px;
    background:var(--tf-line);
    border:1px solid var(--tf-line);
    margin-top:10px;
}
.tf-stat-item{
    background:var(--tf-surface);
    padding:36px 24px;
    text-align:center;
}
.tf-stat-item .icon{
    width:48px;height:48px;margin:0 auto 14px;color:var(--tf-gold);
}
.tf-stat-item .icon svg{width:100%;height:100%;display:block;}
/* رنگ و سایزِ آیکون همیشه از همین‌جا (کد) میاد، نه از خودِ فایلِ SVGی که
   ادمین آپلود می‌کنه — چون ممکنه اون فایل رنگ/سایزِ خودش رو داشته باشه،
   با !important روی fill/stroke همیشه رنگِ طلاییِ سایت رو می‌گیره */
.tf-stat-item .icon svg *{fill:currentColor !important;stroke:currentColor !important;}
.tf-stat-item .num{
    font-size:38px;
    font-weight:900;
    color:var(--tf-gold2);
    margin-bottom:8px;
    direction:ltr;

}
.tf-stat-item .lbl{
    font-size:13px;
    color:var(--tf-muted);
}
@media(max-width:650px){
    .tf-stats-grid{grid-template-columns:repeat(var(--tf-stats-cols-mobile,2),1fr) !important;}
    .tf-stat-item{padding:20px 8px;}
    .tf-stat-item .icon{width:32px;height:32px;margin-bottom:8px;}
    .tf-stat-item .num{font-size:22px;}
    .tf-stat-item .lbl{font-size:10px;}
}

/* ---------- clients ---------- */

.tf-clients{
    padding:60px 0 30px;
    background:var(--tf-bg);
}

.tf-clients-window{
    overflow:hidden;
    border-top:1px solid var(--tf-line);
    border-bottom:1px solid var(--tf-line);
    background:#070d16;
}

.tf-clients-underline{
    height:3px;
    max-width:1180px;
    margin:0 auto;
    background:linear-gradient(90deg, transparent, rgba(217,138,61,.55), transparent);
}

.tf-client-track{
    display:flex;
    width:max-content;
    padding:30px 0;
    animation:tfClientScroll 42s linear infinite;
}

/* روی هاور، انیمیشن کاملاً متوقف می‌شه — وگرنه لوگو زیر ماوس ثابت نمی‌مونه
   و تولتیپ (title) با نگه‌داشتن موس هیچ‌وقت فرصت نمایش پیدا نمی‌کنه */
.tf-client-track:hover{
    animation-play-state:paused;
}

.tf-client{
    position:relative;
    height:70px;
    margin-inline:14px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    border-radius:10px;
    background:#f7f7f4;
    transition:box-shadow .25s;
}

.tf-client img{
    width:auto;
    max-width:110px;
    height:50px;
    object-fit:contain;
    display:block;
    transition:transform .25s;
}

/* قبلاً خودِ کارت روی هاور ۳ پیکسل بالا می‌رفت؛ لبه‌ی پایینش از زیرِ
   نشانگر در می‌رفت و هاور مدام قطع و وصل می‌شد. حالا کارت سر جاش
   می‌مونه و فقط لوگوی داخلش کمی بزرگ می‌شه. */
.tf-client:hover{
    box-shadow:0 8px 20px rgba(0,0,0,.28);
}

.tf-client:hover img{
    transform:scale(1.06);
}

/* تولتیپِ اسمِ مشتری — زیرِ لوگو، داخلِ فاصله‌ی پایینِ نوار (۳۰px) تا
   overflow:hiddenِ .tf-clients-window بُرشش نده */
.tf-client-tip{
    position:absolute;
    top:calc(100% + 4px);
    left:50%;
    transform:translate(-50%, -4px);
    padding:3px 10px;
    border-radius:6px;
    background:var(--tf-gold, #d98a3d);
    color:#1a1006;
    font-size:12px;
    font-weight:700;
    line-height:1.5;
    white-space:nowrap;
    pointer-events:none;
    opacity:0;
    visibility:hidden;
    transition:opacity .18s, transform .18s, visibility 0s linear .18s;
    z-index:2;
}

.tf-client:hover .tf-client-tip{
    opacity:1;
    visibility:visible;
    transform:translate(-50%, 0);
    transition:opacity .18s, transform .18s, visibility 0s;
}

@keyframes tfClientScroll{
    from{transform:translateX(0)}
    to{transform:translateX(50%)}
}

/* ---------- responsive ---------- */

@media(max-width:1000px){
    .tf-hero-inner{
        grid-template-columns:1fr;
    }

    .tf-hero-copy{
        padding-bottom:20px;
    }

    .tf-hero-video{
        margin-bottom:65px;
        width:min(430px,90%);
    }

    .tf-services{
        grid-template-columns:repeat(2,1fr);
    }

    .tf-work{
        flex-basis:calc((100% - 2*18px)/3);
    }
}

@media(max-width:650px){
    .tf-cinema .tf-wrap{
        width:calc(100% - 28px);
    }

    .tf-section{
        padding:70px 0;
    }

    .tf-hero{
        min-height:auto;
    }

    .tf-hero-inner{
        min-height:auto;
    }

    .tf-hero:after{
        inset:10px;
    }

    .tf-corner{
        display:none;
    }

    .tf-services{
        grid-template-columns:1fr;
    }
    .tf-icon{
        width:66px;
        height:66px;
    }
    .tf-icon svg,
    .tf-icon img{
        width:34px;
        height:34px;
    }
    .tf-work{
        flex-basis:80%;
    }

    .tf-client{
        margin-inline:10px;
        padding:10px 16px;
    }
}