.viewport { min-height: 100vh; padding: 25px 15px 40px; background: #f6f7ff; direction: rtl; color: #343434; }
.shell { width: min(1170px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0,875px) 265px; gap: 30px; align-items: start; direction: ltr; }
.content,.sidebar { direction: rtl; }
.article { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 6px 15px rgba(74,99,231,.1); }
.articleHeader { padding: 60px 60px 42px; }
.backLink { display: inline-block; margin-bottom: 30px; color: #4a63e7; text-decoration: none; font-size: 13px; }
.category { display: inline-flex; margin-right: 12px; padding: 5px 13px; border-radius: 5px; background: #ff5959; color: #fff; font-size: 12px; }
.articleHeader h1 { margin: 0; font-size: clamp(34px,4vw,50px); line-height: 1.65; color: #343434; }
.excerpt { margin: 22px 0 0; color: #777; line-height: 2; font-size: 16px; }
.meta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 24px; color: #999; font-size: 12px; }
.meta span { display: inline-flex; align-items: center; gap: 7px; }
.meta svg { width: 17px; height: 17px; color: #ff5959; }
.cover { display: block; width: 100%; height: auto; max-height: 530px; object-fit: cover; }
.coverPlaceholder { position: relative; height: 410px; overflow: hidden; background: linear-gradient(135deg,#536be9,#334bc6); }
.coverPlaceholder::before { content:''; position:absolute; inset:17% 16% 0; clip-path:polygon(50% 0,100% 42%,88% 42%,88% 100%,12% 100%,12% 42%,0 42%); background:rgba(255,255,255,.94); }
.coverPlaceholder span:nth-child(1){position:absolute;z-index:1;right:35%;bottom:0;width:12%;height:40%;background:#4a63e7}
.coverPlaceholder span:nth-child(2),.coverPlaceholder span:nth-child(3){position:absolute;z-index:1;bottom:23%;width:11%;height:17%;background:#ff5959}
.coverPlaceholder span:nth-child(2){right:51%}.coverPlaceholder span:nth-child(3){right:65%}
.articleBody { padding: 58px 70px 72px; color:#555; }
.articleBody h2,.articleBody h3,.articleBody h4,.articleBody h5,.articleBody h6 { margin: 48px 0 20px; color:#343434; line-height:1.75; }
.articleBody h2:first-child,.articleBody p:first-child { margin-top:0; }
.articleBody p,.articleBody li { line-height:2.25; }
.articleBody p { margin:0 0 22px; }
.articleBody ol,.articleBody ul { margin: 0 0 28px; padding-right:28px; }
.articleBody li { margin-bottom:8px; }
.articleBody blockquote { margin:42px 0; padding:26px 30px; border-right:5px solid #ff5959; border-radius:12px; background:#f6f7ff; color:#4b4f64; line-height:2.2; }
.articleBody figure { margin:38px 0; }
.articleBody figure img { width:100%;height:auto;border-radius:14px; }
.articleBody figcaption { margin-top:10px;text-align:center;color:#999;font-size:12px; }
.articleBody hr { margin:45px 0;border:0;border-top:1px solid #efefef; }
.articleButton { display:inline-flex;padding:12px 22px;border-radius:999px;background:#ff5959;color:#fff;text-decoration:none; }
.sidebar { position:sticky;top:25px;height:calc(100vh - 50px);min-height:620px;overflow:hidden;display:flex;flex-direction:column;padding:48px 35px 25px;border-radius:20px;background:#4a63e7;color:#fff;box-shadow:0 6px 15px rgba(74,99,231,.28); }
.profile{text-align:center}.profile img{width:118px;height:118px;object-fit:cover;object-position:center top;border-radius:50%;border:5px solid rgba(255,255,255,.16)}.profile h2{margin:18px 0 7px;color:#fff;font-size:23px}.profile p{margin:0;color:rgba(255,255,255,.8);font-size:13px}
.nav{display:grid;gap:2px;margin-top:42px}.nav a{display:flex;align-items:center;gap:16px;padding:12px 2px;color:rgba(255,255,255,.83);text-decoration:none;font-size:13px;transition:.2s}.nav a:hover{color:#fff;transform:translateX(-3px)}.nav svg{width:19px;height:19px}.sidebarFooter{margin-top:auto;padding-top:28px;color:rgba(255,255,255,.66);text-align:center;font-size:11px}
.credit{padding:17px 10px 0;text-align:center;font-size:10px;color:#a0a3b3}.credit a{color:inherit;text-decoration:none}
.mobileHeader,.closeMenu,.overlay{display:none}
@media(max-width:991px){.viewport{padding-top:78px}.shell{display:block}.mobileHeader{position:fixed;top:15px;right:15px;left:15px;z-index:40;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 18px;border-radius:14px;background:#4a63e7;color:#fff;box-shadow:0 6px 15px rgba(74,99,231,.22)}.mobileHeader strong{font-size:14px}.mobileHeader button,.closeMenu{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}.mobileHeader svg,.closeMenu svg{width:21px;height:21px}.sidebar{position:fixed;top:15px;right:15px;z-index:60;width:min(315px,calc(100vw - 30px));height:calc(100vh - 30px);min-height:0;transform:translateX(calc(100% + 30px));transition:transform .3s cubic-bezier(.22,1,.36,1)}.sidebarOpen{transform:translateX(0)}.closeMenu{position:absolute;top:16px;left:16px}.overlay{position:fixed;inset:0;z-index:50;display:block;border:0;background:rgba(19,23,45,.48);backdrop-filter:blur(3px)}}
@media(max-width:767px){.viewport{padding-right:10px;padding-left:10px}.article{border-radius:16px}.articleHeader{padding:45px 25px 34px}.articleHeader h1{font-size:32px}.excerpt{font-size:14px}.coverPlaceholder{height:260px}.articleBody{padding:42px 25px 55px}.articleBody h2{font-size:26px!important}.articleBody p,.articleBody li{font-size:16px!important}.articleBody blockquote{padding:22px 20px}}