:root{
    --primary:#7c3aed;
    --primary-dark:#5b21b6;
    --accent:#475569;
    --bg:#f8fafc;
    --text:#1e293b;
    --radius:24px;
    --shadow:0 10px 40px rgba(124,58,237,.08);
}

html{
    direction:rtl;
}

body{
    font-family:'IRANSans',Tahoma,Arial,sans-serif;
    background:var(--bg);
    color:var(--text);
}

.hero-detail{
    position:relative;
    text-align:center;
    padding:100px 20px 60px;
    background:linear-gradient(135deg,var(--primary-dark) 0%,var(--accent) 100%);
    color:#fff;
    overflow:hidden;
}

.hero-detail::before{
    content:'';
    position:absolute;
    inset:0;
    background:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.06'%3E%3Cpath d='M40 40v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-40V0h-2v4h-4v2h4v4h2V6h4V4h-4zM8 40v-4H6v4H2v2h4v4h2v-4h4v-2H8zM8 4V0H6v4H2v2h4v4h2V6h4V4H8z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    z-index:0;
}

.hero-inner{
    position:relative;
    z-index:1;
    max-width:900px;
    margin:0 auto;
}

.hero-inner h1{
    font-size:2.5rem;
    font-weight:800;
    margin-bottom:15px;
    letter-spacing:-.5px;
}

.hero-inner .meta{
    font-size:1.1rem;
    opacity:.9;
}

.badge-light{
    background:rgba(255,255,255,.15);
    backdrop-filter:blur(10px);
    padding:6px 14px;
    border-radius:50px;
    font-size:.85rem;
    margin:0 4px;
}

.gallery-sec{
    margin:40px 0;
    text-align:center;
}

.gallery-title{
    font-size:1.4rem;
    font-weight:700;
    color:var(--text);
    margin-bottom:20px;
}

.auto-slider{
    position:relative;
    width:100%;
    max-width:600px;
    margin:0 auto;
    height:300px;
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    background:#f8fafc;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 1s ease;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slide.active{
    opacity:1;
}

.slide img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:cover;
    border-radius:var(--radius);
}

.slider-dots{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:15px;
}

.dot{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#cbd5e1;
    cursor:pointer;
    transition:background .3s;
}

.dot.active{
    background:var(--primary);
}

.content-wrap{
    max-width:1200px;
    margin:60px auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:1fr 350px;
    gap:40px;
}

.main-box{
    background:#fff;
    border-radius:var(--radius);
    padding:30px;
    box-shadow:var(--shadow);
}

.side-box{
    background:#fff;
    border-radius:var(--radius);
    padding:25px;
    box-shadow:var(--shadow);
    height:fit-content;
}

.info-list{
    list-style:none;
    padding:0;
    margin:0;
}

.info-list li{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid #e2e8f0;
}

.info-list li:last-child{
    border:none;
}

.info-list i{
    color:var(--primary);
    font-size:1.1rem;
    width:20px;
    text-align:center;
}

.info-list strong{
    color:var(--text);
    font-weight:600;
}

.side-title{
    font-size:1.1rem;
    font-weight:600;
    color:var(--text);
    margin-bottom:15px;
    display:flex;
    align-items:center;
    gap:8px;
}

.side-title i{
    color:var(--primary);
}

.side-list{
    list-style:none;
    padding:0;
    margin:0;
}

.side-list li{
    margin-bottom:10px;
}

.side-list a{
    text-decoration:none;
    color:#334155;
    font-size:.9rem;
    transition:color .3s;
}

.side-list a:hover{
    color:var(--primary);
}

.instructor-card-side, .expert-card-side{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 0;
    border-bottom:1px dashed #e2e8f0;
}

.instructor-card-side:last-child, .expert-card-side:last-child{
    border:none;
}

.instructor-avatar-side, .expert-avatar-side{
    width:50px;
    height:50px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #f1f5f9;
}

.instructor-info-side, .expert-info-side{
    font-size:.85rem;
}

.instructor-info-side .name, .expert-info-side .name{
    font-weight:600;
    color:var(--text);
}

.instructor-info-side .job, .expert-info-side .job{
    color:#64748b;
}

.cta-box{
    background:linear-gradient(135deg,var(--primary) 0%,var(--accent) 100%);
    color:#fff;
    border-radius:16px;
    padding:25px;
    text-align:center;
    margin-top:30px;
}

.cta-box .title{
    font-size:1.1rem;
    font-weight:600;
    margin-bottom:10px;
}

.cta-box .desc{
    font-size:.85rem;
    opacity:.9;
    margin-bottom:15px;
}

.cta-box .btn{
    background:#fff;
    color:var(--primary-dark);
    padding:10px 20px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.cta-box .btn:hover{
    transform:translateY(-2px);
}

.detail-footer{
    background:var(--bg);
    padding:40px 20px;
    text-align:center;
}

.back-btn{
    background:var(--primary);
    color:#fff;
    padding:12px 28px;
    border-radius:50px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.back-btn:hover{
    background:var(--primary-dark);
}

.animate-fade{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease,transform .6s ease;
}

.animate-fade.show{
    opacity:1;
    transform:translateY(0);
}

.views-count{
    background:var(--primary);
    color:#fff;
    padding:4px 12px;
    border-radius:20px;
    font-size:.8rem;
    margin-right:10px;
}