body {
    background-color: #f5f2ee;
}
.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    border-radius: 14px;
}
.news-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 14px 14px 0 0;
}
.navbar-brand { font-size: 1.3rem; }
.tracking-box {
    background: #fff;
    border: 2px dashed #6f4e37;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 1px;
}
.badge { font-size: .8rem; }
.chat-box {
    max-height: 350px;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    padding: 1rem;
}
.msg-admin { background:#e9ecef; border-radius: 10px; padding:8px 12px; display:inline-block; margin-bottom:8px;}
.msg-user { background:#6f4e37; color:#fff; border-radius: 10px; padding:8px 12px; display:inline-block; margin-bottom:8px;}

@media (max-width: 576px) {
    .navbar-brand { font-size: 1.05rem; }
    h1, h2 { font-size: 1.4rem; }
}

/* ================= صفحه اصلی - بخش‌های جداگانه ================= */
:root{
    --brand:#6f4e37;
    --sage:#4f8a63;
    --gold:#c9862c;
}
.section-band{ padding:52px 0; }
.section-band.band-jobs{ background:linear-gradient(180deg,#eef6f1,#f5f2ee); }
.section-band.band-forms{ background:#ffffff; }
.section-band.band-news{ background:#f5f2ee; }

.section-head{ text-align:center; max-width:560px; margin:0 auto 30px; }
.section-head .icon-badge{
    width:56px; height:56px; border-radius:16px; display:flex; align-items:center; justify-content:center;
    font-size:26px; margin:0 auto 14px; color:#fff;
}
.band-jobs .icon-badge{ background:var(--sage); }
.band-forms .icon-badge{ background:var(--gold); }
.band-news .icon-badge{ background:var(--brand); }
.section-head h2{ font-weight:800; margin-bottom:6px; }
.section-head p{ color:#7a7367; font-size:.92rem; margin:0; }

/* --- استخدام: کارت‌های اسلایدری افقی --- */
.job-scroll{
    display:flex; gap:16px; overflow-x:auto; padding:6px 4px 16px;
    scroll-snap-type:x mandatory;
}
.job-scroll::-webkit-scrollbar{ height:6px; }
.job-scroll::-webkit-scrollbar-thumb{ background:#d8cfc2; border-radius:10px; }
.job-card{
    flex:0 0 260px; scroll-snap-align:start; background:#fff; border-radius:16px;
    padding:20px; border-right:4px solid var(--sage); box-shadow:0 6px 18px -8px rgba(0,0,0,.12);
}
.job-card img{ width:100%; height:120px; object-fit:cover; border-radius:12px; margin-bottom:12px; }
.job-card.always-card{ border-right-color:var(--gold); }
.job-card .badge-job{ background:rgba(79,138,99,.12); color:var(--sage); font-weight:700; font-size:.72rem; padding:4px 10px; border-radius:100px; }
.job-card .badge-always{ background:rgba(201,134,44,.14); color:var(--gold); }
.job-card h6{ font-weight:700; margin:12px 0 6px; }
.job-card p{ font-size:.82rem; color:#7a7367; }

/* --- ثبت‌نام‌های همیشگی: کارت آیکونی --- */
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:18px; }
.form-tile{
    background:#fff; border-radius:18px; padding:26px 20px; text-align:center;
    border-top:4px solid var(--gold); box-shadow:0 6px 18px -8px rgba(0,0,0,.1);
    transition:transform .25s ease, box-shadow .25s ease;
}
.form-tile:hover{ transform:translateY(-5px); box-shadow:0 14px 26px -10px rgba(0,0,0,.18); }
.form-tile .ico{ font-size:34px; color:var(--gold); margin-bottom:10px; }
.form-tile h6{ font-weight:700; margin-bottom:6px; }
.form-tile p{ font-size:.82rem; color:#7a7367; min-height:40px; }

/* --- اخبار: کارت شبکه‌ای --- */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }

.full-bleed{
    width:100vw; position:relative; left:50%; right:50%;
    margin-left:-50vw; margin-right:-50vw;
}

/* --- محتوای خروجی CKEditor (نرم‌افزارها / درباره من) --- */
.content-body{ line-height:2; font-size:.98rem; }
.content-body img{ max-width:100%; border-radius:12px; margin:10px 0; }
.content-body h1,.content-body h2,.content-body h3{ font-weight:700; margin-top:1.2em; }
.content-body ul,.content-body ol{ padding-right:1.3em; }

/* --- افکت سه‌بعدی روی کارت‌ها (تیلت با موس) --- */
.tilt-3d{
    transform-style: preserve-3d;
    transition: transform .15s ease, box-shadow .25s ease;
    will-change: transform;
}
.tilt-3d:hover{
    box-shadow: 0 24px 40px -14px rgba(0,0,0,.28);
    z-index:2;
}