.art-page { padding: 22px 0 56px; direction: rtl; }
.art-container { width:100%; max-width:1280px; margin:0 auto; padding:0 12px; }
.art-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
@media(max-width:1100px){ .art-layout{grid-template-columns:1fr;} }

/* Breadcrumb */
.art-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-family: DIN-Regular, sans-serif;
    font-size: 15px;
    color: #5a6677;
    margin: 18px 0 22px;
    padding: 11px 16px;
    background: #f4f6fa;
    border-radius: 10px;
    border-right: 3px solid #117098;
}
.art-breadcrumb a { color: #117098; text-decoration: none; font-family: DIN-Bold, sans-serif; }
.art-breadcrumb a:hover { text-decoration: underline; }
.art-breadcrumb i { font-size: 11px; color: #aab3bf; }
.art-breadcrumb span { color: #1a2230; font-family: DIN-Bold, sans-serif; }

/* Article Box */
.art-box { background:#fff;border:1px solid #eceef3;border-radius:16px;box-shadow:0 6px 18px rgba(28,38,54,.04);overflow:hidden;margin-bottom:0; }
.art-hero { padding:22px 24px 18px; border-bottom:1px solid #eceef3; }
.art-title { font-family:DIN-Bold,sans-serif;font-size:clamp(1.35rem,2.2vw,2rem);color:#161d29;line-height:1.45;margin:0 0 14px; }
.art-meta { display:flex;gap:14px;flex-wrap:wrap;color:#6f7a89;font-size:13px;font-family:DIN-Regular,sans-serif;margin-bottom:16px; }
.art-meta i { margin-left:5px;color:#117098; }
.art-meta a { color:#117098;text-decoration:none;font-family:DIN-Bold,sans-serif; }
.art-meta a:hover { text-decoration:underline; }

/* Share */
.art-share { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.art-share__label { font-family:DIN-Regular,sans-serif;font-size:12px;color:#8a9aaa; }
.art-share-btn { display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1.5px solid #dde3ec;background:#fff;font-size:14px;text-decoration:none;cursor:pointer;transition:all .2s; }
.art-share-btn:hover { transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.1); }
.art-share-btn--fb  { color:#1877f2;border-color:#1877f2; }
.art-share-btn--tw  { color:#1da1f2;border-color:#1da1f2; }
.art-share-btn--wa  { color:#25d366;border-color:#25d366; }
.art-share-btn--tg  { color:#0088cc;border-color:#0088cc; }
.art-share-btn--cp  { color:#117098;border-color:#117098; }
.art-share-btn--bk  { color:#117098;border-color:#117098; }
.art-share-btn--fb:hover { background:#1877f2;color:#fff; }
.art-share-btn--tw:hover { background:#1da1f2;color:#fff; }
.art-share-btn--wa:hover { background:#25d366;color:#fff; }
.art-share-btn--tg:hover { background:#0088cc;color:#fff; }
.art-share-btn--cp:hover { background:#117098;color:#fff; }
.art-share-btn--bk:hover,.art-share-btn--bk.is-favorited { background:#117098;color:#fff; }

/* Cover */
.art-cover { width:100%;overflow:hidden; }
.art-cover img { width:100%;max-height:520px;object-fit:cover;display:block; }

/* Content */
.art-content { padding:22px 24px;font-family:DIN-Regular,sans-serif;font-size:1.06rem;line-height:2;color:#2a3341; }
.art-content p { margin-bottom:1.1rem; }
.art-content h2,.art-content h3,.art-content h4 { font-family:DIN-Bold,sans-serif;color:#1a2230;margin:1.7rem 0 .9rem; }
.art-content img { max-width:100%;border-radius:10px;margin:1rem 0; }
.art-content ul,.art-content ol { padding-right:24px;margin-bottom:1.1rem; }
.art-content li { margin-bottom:.4rem; }
.art-content blockquote { margin:1.3rem 0;padding:12px 14px;border-right:4px solid #117098;background:#f1f9fd;border-radius:8px; }

/* Tags */
.art-tags { padding:16px 24px;border-top:1px solid #eceef3;display:flex;flex-wrap:wrap;gap:8px;align-items:center; }
.art-tags__label { font-family:DIN-Bold,sans-serif;font-size:14px;color:#1c2433;margin-left:4px; }
.art-tag { display:inline-flex;align-items:center;background:#f3f5f8;color:#485264;border-radius:999px;padding:6px 12px;font-size:13px;font-family:DIN-Regular,sans-serif; }

/* Sidebar cards */
.sidebar-card { background:#fff;border:1px solid #eceef3;border-radius:16px;box-shadow:0 6px 18px rgba(28,38,54,.04);padding:16px;margin-bottom:18px; }
.sidebar-title { font-family:DIN-Bold,sans-serif;font-size:15px;color:#1c2433;margin:0 0 12px;display:flex;align-items:center;gap:8px; }
.sidebar-title i { color:#117098; }

/* Writer card */
.art-writer-img { width:100%;height:240px;overflow:hidden;background:linear-gradient(145deg,#117098,#0d5a7a);border-radius:10px;margin-bottom:14px; }
.art-writer-img img { width:100%;height:100%;object-fit:cover; }
.art-writer-img-ph { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;color:rgba(255,255,255,.45); }
.art-writer-name { font-family:DIN-Bold,sans-serif;font-size:1rem;color:#1c2433;margin:0 0 4px;text-align:center; }
.art-writer-name a { color:inherit;text-decoration:none; }
.art-writer-name a:hover { color:#117098; }
.art-writer-bio { font-family:DIN-Regular,sans-serif;font-size:13px;color:#6f7a89;line-height:1.6;text-align:center;margin:8px 0 12px; }
.art-writer-socials { display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-bottom:12px; }
.art-writer-social { display:inline-flex;align-items:center;justify-content:center;width:33px;height:33px;border-radius:50%;background:#e7f4fa;color:#117098;font-size:13px;text-decoration:none;border:1px solid #d0e8f3;transition:all .2s; }
.art-writer-social:hover { background:#117098;color:#fff;transform:translateY(-2px); }
.art-writer-all { display:block;text-align:center;padding:8px 18px;background:#117098;color:#fff;border-radius:8px;font-family:DIN-Bold,sans-serif;font-size:13px;text-decoration:none;transition:background .2s;margin-top:4px; }
.art-writer-all:hover { background:#0d5a7a;color:#fff; }

/* Follow button */
.art-follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 9px 18px;
    margin-top: 8px;
    border-radius: 8px;
    font-family: DIN-Bold, sans-serif;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s;
    border: 2px solid #117098;
    background: #fff;
    color: #117098;
    text-decoration: none;
}
.art-follow-btn:hover { background: #e7f4fa; text-decoration: none; }
.art-follow-btn.following { background: #117098; color: #fff; }
.art-follow-btn.following .unfollow-label { display: none; }
.art-follow-btn.following:hover { background: #b71c1c; border-color: #b71c1c; color: #fff; }
.art-follow-btn.following:hover .follow-label { display: none; }
.art-follow-btn.following:hover .unfollow-label { display: inline; }
.art-follow-btn:disabled { opacity: .65; cursor: default; }

/* Related items */
.mini-news-item { display:grid;grid-template-columns:76px 1fr;gap:10px;text-decoration:none;color:inherit;padding:9px;border-radius:10px;transition:.2s; }
.mini-news-item + .mini-news-item { border-top:1px solid #f0f3f7; }
.mini-news-item:hover { background:#f7f9fb; }
.mini-news-item img { width:76px;height:60px;object-fit:cover;border-radius:8px; }
.mini-news-item h6 { margin:0 0 5px;font-family:DIN-Bold,sans-serif;font-size:13px;line-height:1.5;color:#1c2433;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.mini-news-item small { color:#8a9aaa;font-family:DIN-Regular,sans-serif;font-size:11px;display:flex;align-items:center;gap:4px; }

/* Toast */
.art-toast { position:fixed;bottom:26px;left:24px;background:#117098;color:#fff;padding:.7rem 1.2rem;border-radius:8px;box-shadow:0 4px 16px rgba(17,112,152,.35);font-family:DIN-Regular,sans-serif;font-size:14px;display:flex;align-items:center;gap:8px;z-index:9999;animation:artToastIn .3s ease; }
.art-toast.hide { animation:artToastOut .3s forwards; }
@keyframes artToastIn  { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes artToastOut { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(16px)} }

@media(max-width:768px){
    .art-hero,.art-content { padding:16px; }
    .art-title { font-size:1.3rem; }
    .art-tags { padding:14px 16px; }
}

/* ── Comments ── */
.art-comments-box { background:#fff;border:1px solid #eceef3;border-radius:16px;box-shadow:0 6px 18px rgba(28,38,54,.04);padding:20px;margin-top:18px; }
.art-comments-box h6,.art-comment-form-section h6 { font-family:DIN-Bold,sans-serif;font-size:1.05rem;color:#1a2230;margin:0 0 14px;padding-bottom:10px;border-bottom:2px solid #e4eaf2;display:flex;align-items:center;gap:8px; }
.art-comment-form { display:grid;gap:10px;margin-bottom:14px; }
.art-comment-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.art-comment-input,.art-comment-textarea { width:100%;border:1px solid #d8deea;border-radius:10px;padding:10px 12px;font-family:DIN-Regular,sans-serif;font-size:14px;outline:none; }
.art-comment-input:focus,.art-comment-textarea:focus { border-color:#117098;box-shadow:0 0 0 3px rgba(17,112,152,.12); }
.art-comment-textarea { min-height:95px;resize:vertical; }
.art-comment-submit { justify-self:start;border:0;border-radius:8px;padding:9px 20px;background:#117098;color:#fff;font-family:DIN-Bold,sans-serif;font-size:14px;cursor:pointer;transition:background .2s; }
.art-comment-submit:hover { background:#0d5a7a; }
.art-comment-submit:disabled { opacity:.6;cursor:default; }
.art-comments-list { display:grid;gap:10px;margin-bottom:20px; }
.art-comment-item { border:1px solid #eceef3;border-radius:10px;padding:12px 14px; }
.art-comment-author { font-family:DIN-Bold,sans-serif;font-size:14px;margin-bottom:2px;color:#1a2230;display:flex;align-items:center;gap:5px; }
.art-comment-author i { color:#117098;font-size:13px; }
.art-comment-meta { color:#7d8898;font-size:12px;font-family:DIN-Regular,sans-serif;margin-bottom:6px;display:flex;align-items:center;gap:4px; }
.art-comment-meta i { font-size:11px;color:#a0aab4; }
.art-comment-body { color:#1f2a3b;font-size:14px;font-family:DIN-Regular,sans-serif;line-height:1.8;white-space:pre-wrap; }
.art-comment-actions { margin-top:6px; }
.art-comment-reply-btn { border:0;background:none;color:#117098;font-size:12px;font-family:DIN-Regular,sans-serif;cursor:pointer;padding:3px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:4px;transition:background .15s; }
.art-comment-reply-btn:hover { background:#e7f4fa; }
.art-comment-replies { margin-top:10px;padding-right:16px;border-right:3px solid #d8eaf3;display:grid;gap:8px; }
.art-comment-replies .art-comment-item { background:#f7fafb; }
.art-comment-inline-form { margin-top:10px;padding:10px 12px;background:#f3f8fb;border:1px solid #dae6ef;border-radius:10px;display:grid;gap:8px; }
.art-comment-inline-form input,.art-comment-inline-form textarea { width:100%;border:1px solid #d0dae6;border-radius:8px;padding:8px 10px;font-family:DIN-Regular,sans-serif;font-size:13px;outline:none;background:#fff; }
.art-comment-inline-form input:focus,.art-comment-inline-form textarea:focus { border-color:#117098;box-shadow:0 0 0 3px rgba(17,112,152,.1); }
.art-comment-inline-form textarea { min-height:72px;resize:vertical; }
.art-comment-inline-btns { display:flex;gap:8px;align-items:center; }
.art-comment-inline-submit { border:0;border-radius:999px;padding:7px 16px;background:#117098;color:#fff;font-family:DIN-Bold,sans-serif;font-size:13px;cursor:pointer; }
.art-comment-inline-submit:disabled { opacity:.6;cursor:default; }
.art-comment-inline-cancel { border:1px solid #c5d1dc;border-radius:999px;padding:7px 14px;background:#fff;font-family:DIN-Regular,sans-serif;font-size:13px;cursor:pointer;color:#556070; }
.art-comment-form-section { border-top:1px solid #eceef3;padding-top:16px;margin-top:4px; }
.art-comment-message { font-size:13px;font-family:DIN-Regular,sans-serif;margin-bottom:8px; }
.art-comment-message.error { color:#b42318; }
.art-comment-message.success { color:#117098; }
.art-comment-terms-note { font-size:12px;color:#8a95a3;margin-top:6px;font-family:DIN-Regular,sans-serif; }
.art-comment-terms-note a { color:#117098;text-decoration:underline; }
@media(max-width:700px){ .art-comment-grid{grid-template-columns:1fr;} }