/* ============================================================
   القالب رقم 2 — «المجلة الراقية»
   هوية تحريرية هادئة: ورقي دافئ + سيريف أميري + أخضر عميق
   مختلف جذرياً عن القالب الصحفي: لا سلايدر، لا صخب — بياض وهدوء
   ============================================================ */
:root{
    --accent:#0f766e;
    --paper:#f7f4ee; --card:#fffdf9; --ink:#22201c; --mut:#7c766a;
    --line:#e5decf; --line-soft:#eee8db; --sand:#efe9dc;
    --dark-band:#1d2320;
    --serif:'Amiri',Georgia,serif; --sans:'Tajawal',Arial,sans-serif;
}
[data-theme="dark"]{
    --paper:#171511; --card:#201d18; --ink:#eee8db; --mut:#a49b8a;
    --line:#35301f; --line-soft:#2a261c; --sand:#242019;
    --dark-band:#11100c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.85;transition:background .3s,color .3s}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ===== الشريط العلوي الرفيع ===== */
.topbar{border-bottom:1px solid var(--line);font-size:12.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding:8px 22px;color:var(--mut);font-weight:500}
.topbar-tools{display:flex;align-items:center;gap:12px}
.topbar .soc{opacity:.75;transition:.15s;font-size:14px}
.topbar .soc:hover{opacity:1}
.theme-toggle{border:1px solid var(--line);background:transparent;border-radius:999px;width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1;color:var(--ink)}

/* ===== الترويسة الوسطية (طراز المجلات) ===== */
.masthead{text-align:center;padding:34px 0 22px;border-bottom:3px double var(--line)}
.masthead .brand{display:inline-block}
.brand-mark{display:none}
.brand-text strong{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(34px,6vw,52px);letter-spacing:.5px;line-height:1.2}
.brand-text small{display:block;color:var(--mut);font-weight:500;font-size:13.5px;letter-spacing:2px;margin-top:6px}
.msearch{max-width:340px;margin:18px auto 0;display:flex;border-bottom:1.5px solid var(--line)}
.msearch input{flex:1;border:0;background:transparent;font:inherit;font-size:13.5px;padding:7px 4px;color:var(--ink)}
.msearch input:focus{outline:none}
.msearch button{border:0;background:transparent;cursor:pointer;font-size:15px;opacity:.6}
.msearch button:hover{opacity:1}

/* ===== التنقل الوسطي ===== */
.mainnav{border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);z-index:40}
.mainnav .wrap{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:0 22px}
.mainnav a{position:relative;font-weight:700;font-size:14px;padding:13px 16px;color:var(--ink);letter-spacing:.3px}
.mainnav a::after{content:'';position:absolute;bottom:0;inset-inline:16px;height:2px;background:var(--accent);transform:scaleX(0);transition:.2s}
.mainnav a:hover::after,.mainnav a.nav-home::after{transform:scaleX(1)}

.ticker{display:none} /* لا شريط متحرك في هذا الطراز */

.main{padding:44px 22px 60px}

/* ===== مقال الواجهة الكبير ===== */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:38px;align-items:center;margin-bottom:56px}
.feature-media{position:relative;overflow:hidden}
.feature-media img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .6s ease}
.feature:hover .feature-media img{transform:scale(1.03)}
.feature-body .badge{margin-bottom:14px}
.feature-body h1{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.6vw,40px);line-height:1.5;margin-bottom:14px;text-wrap:balance}
.feature-body h1 a:hover{color:var(--accent)}
.feature-body p{color:var(--mut);font-size:15.5px;margin-bottom:16px}
.feature-more{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:800;font-size:14px;border-bottom:1.5px solid var(--accent);padding-bottom:2px}

/* ===== شارات الأقسام: نص صغير متباعد لا أقراص ملونة ===== */
.badge{display:inline-block;background:transparent!important;color:var(--accent);font-weight:800;font-size:11.5px;letter-spacing:2.5px;text-transform:uppercase;padding:0;border-radius:0}
.badge-sm{font-size:10.5px;letter-spacing:2px}
.badge-lg{font-size:12.5px;letter-spacing:3px}

/* ===== رؤوس الأقسام ===== */
.section{margin-bottom:54px}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:26px}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:24px;white-space:nowrap}
.sec-line{flex:1;height:1px;background:var(--line)}
.sec-more{color:var(--accent);font-weight:800;font-size:13px;white-space:nowrap}
.page-head h2{font-size:28px}

/* ===== قائمة تحريرية (صفوف أفقية) ===== */
.editlist{display:flex;flex-direction:column}
.editrow{display:grid;grid-template-columns:1fr 240px;gap:26px;padding:26px 0;border-bottom:1px solid var(--line-soft);align-items:center}
.editrow:first-child{padding-top:0}
.editrow-media{overflow:hidden;order:2}
.editrow-media img{aspect-ratio:16/11;object-fit:cover;width:100%;transition:transform .5s}
.editrow:hover .editrow-media img{transform:scale(1.04)}
.editrow h3{font-family:var(--serif);font-weight:700;font-size:21px;line-height:1.55;margin:6px 0 8px}
.editrow h3 a:hover{color:var(--accent)}
.editrow p{color:var(--mut);font-size:14px;margin-bottom:10px}

/* ===== الميتا ===== */
.card-meta,.editrow-meta{display:flex;gap:14px;flex-wrap:wrap;color:var(--mut);font-size:12px;font-weight:600;letter-spacing:.3px}

/* ===== الأكثر قراءة: قائمة مرقمة أنيقة ===== */
.trend{border:1px solid var(--line);padding:8px 26px;background:var(--card)}
.trend-item{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.trend-item:last-child{border-bottom:0}
.trend-num{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--line);line-height:1;transition:.2s;min-width:40px;text-align:center}
.trend-item:hover .trend-num{color:var(--accent)}
.trend-item img{width:74px;height:56px;object-fit:cover;flex-shrink:0}
.trend-t{font-weight:700;font-size:14.5px;line-height:1.6;display:flex;flex-direction:column;gap:2px}
.trend-t small{font-weight:800;font-size:10.5px;letter-spacing:2px;color:var(--accent)!important}
.trend-t em{font-style:normal;color:var(--mut);font-weight:600;font-size:11.5px}

/* ===== البطاقات (شبكات الأقسام والبحث) ===== */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.card{background:transparent;display:flex;flex-direction:column}
.card-media{position:relative;overflow:hidden;display:block}
.card-media img{aspect-ratio:16/11;object-fit:cover;width:100%;transition:transform .5s}
.card:hover .card-media img{transform:scale(1.05)}
.card-media .badge{position:static;margin-top:12px}
.card-noimg{aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;font-size:40px;background:var(--sand)}
.card-body{padding:12px 0 0}
.card-body h3{font-family:var(--serif);font-weight:700;font-size:17.5px;line-height:1.6;margin-bottom:8px}
.card-body h3 a:hover{color:var(--accent)}
.card-ex{color:var(--mut);font-size:13.5px;margin-bottom:8px}
.card-big .card-body h3{font-size:22px}
.newtag{display:inline-block;background:var(--accent);color:#fff;font-size:10px;font-weight:800;border-radius:2px;padding:1px 8px;vertical-align:middle;margin-inline-start:6px;letter-spacing:1px}

/* ===== النشرة البريدية: شريط داكن هادئ ===== */
.newsletter{background:var(--dark-band);color:#efe9db;padding:52px 0;text-align:center}
.news-in{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:560px;margin:0 auto;padding:0 22px}
.newsletter h3{font-family:var(--serif);font-weight:700;font-size:26px}
.newsletter p{color:#b5ad9c;font-size:14px}
.news-form{display:flex;width:100%;max-width:440px;border:1px solid #3d453f;background:transparent}
.news-form input{flex:1;border:0;background:transparent;color:#efe9db;font:inherit;font-size:14px;padding:13px 16px}
.news-form input:focus{outline:none}
.news-form input::placeholder{color:#8b8474}
.news-form button{border:0;background:var(--accent);color:#fff;font:inherit;font-weight:800;font-size:14px;padding:0 28px;cursor:pointer;transition:.15s}
.news-form button:hover{filter:brightness(1.15)}
.news-msg{font-weight:700;font-size:13px;min-height:20px}
.news-msg.ok{color:#7fd8a4}.news-msg.err{color:#f1998e}

/* ===== التذييل: عمود مركزي بسيط ===== */
.sitefooter{border-top:3px double var(--line);padding:44px 0 0;text-align:center}
.footgrid{display:flex;flex-direction:column;align-items:center;gap:8px}
.footgrid h4{font-family:var(--serif);font-weight:700;font-size:22px}
.footgrid p{color:var(--mut);font-size:13.5px;max-width:480px}
.foot-social{display:flex;gap:14px;justify-content:center;margin-top:8px;font-size:17px}
.foot-social a{opacity:.7;transition:.15s}
.foot-social a:hover{opacity:1}
.footgrid > div:not(:first-child){display:none} /* لا أعمدة روابط — طراز مقتضب */
.copyline{color:var(--mut);font-size:12.5px;font-weight:600;padding:22px 0;margin-top:26px;border-top:1px solid var(--line-soft)}
.copyline a{color:var(--accent)}

/* ===== صفحة المقال ===== */
.readbar{position:fixed;top:0;inset-inline-start:0;height:2.5px;background:var(--accent);width:0;z-index:100}
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start}
.article{max-width:100%;min-width:0}
.article-title{font-family:var(--serif);font-weight:700;font-size:clamp(26px,4vw,38px);line-height:1.55;margin:10px 0 14px;text-wrap:balance}
.article-meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--mut);font-size:13px;font-weight:600;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.article-cover{margin:0 0 26px}
.article-cover img{width:100%}
.article-lead{font-family:var(--serif);font-size:19px;color:var(--mut);font-style:italic;border-inline-start:3px solid var(--accent);padding-inline-start:18px;margin-bottom:24px;line-height:1.9}
.article-body{font-size:16.5px;line-height:2.05}
.article-body p{margin-bottom:18px}
.article-body h2,.article-body h3{font-family:var(--serif);font-weight:700;margin:30px 0 12px;line-height:1.5}
.article-body h2{font-size:26px}.article-body h3{font-size:21px}
.article-body ul,.article-body ol{margin:0 24px 18px 0}
.article-body li{margin-bottom:6px}
.article-body img{margin:22px auto}
.article-body blockquote{font-family:var(--serif);font-size:19px;font-style:italic;border-inline-start:3px solid var(--accent);padding:6px 20px;margin:22px 0;color:var(--mut)}
.article-body a{color:var(--accent);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.article-body table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
.article-body th,.article-body td{border:1px solid var(--line);padding:9px 13px;text-align:right}
.article-body th{background:var(--sand);font-weight:800}

/* الوسوم والمشاركة */
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.tag{border:1px solid var(--line);color:var(--mut);font-weight:700;font-size:12px;padding:5px 16px;border-radius:999px;transition:.15s}
.tag:hover{border-color:var(--accent);color:var(--accent)}
.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px}
.share b{font-size:13px;font-weight:800;color:var(--mut);letter-spacing:1px}
.sh{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:.15s;cursor:pointer;background:transparent;color:var(--ink)}
.sh:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* التعليقات */
.cbox{margin-top:44px;border-top:3px double var(--line);padding-top:30px}
.cbox-title{font-family:var(--serif);font-weight:700;font-size:24px;margin-bottom:20px}
.cmt{border-bottom:1px solid var(--line-soft);padding:16px 0}
.cmt-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:13px}
.cmt-head b{font-weight:800}
.cmt-head span{color:var(--mut);font-weight:600;font-size:12px}
.cmt p{font-size:14.5px;color:var(--ink)}
.cmt-none{color:var(--mut);font-weight:600;padding:14px 0}
.cform{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cform input,.cform textarea{border:1px solid var(--line);background:var(--card);font:inherit;font-size:14px;padding:12px 16px;color:var(--ink)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent)}
.cform button{align-self:flex-start;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:800;font-size:14px;padding:11px 34px;cursor:pointer;transition:.15s}
.cform button:hover{filter:brightness(1.12)}
.cform button:disabled{opacity:.5}
.cmsg{font-weight:700;font-size:13px;min-height:18px}
.cmsg.ok{color:#0e7a45}.cmsg.err{color:#b42318}

/* ===== الشريط الجانبي ===== */
.sidebar{display:flex;flex-direction:column;gap:30px;position:sticky;top:70px}
.widget{border:1px solid var(--line);background:var(--card);padding:22px}
.widget-title{font-family:var(--serif);font-weight:700;font-size:19px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.wpost{display:flex;gap:12px;align-items:center;padding:9px 0}
.wpost img,.wpost-noimg{width:64px;height:48px;object-fit:cover;flex-shrink:0;background:var(--sand);display:flex;align-items:center;justify-content:center}
.wpost-t{font-weight:700;font-size:13px;line-height:1.55}
.wpost:hover .wpost-t{color:var(--accent)}
.wcat{display:flex;align-items:center;gap:10px;padding:8px 0;font-weight:700;font-size:13.5px;border-bottom:1px solid var(--line-soft)}
.wcat:last-child{border-bottom:0}
.wcat:hover{color:var(--accent)}
.wcat-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.wcat i{font-style:normal;margin-inline-start:auto;color:var(--mut);font-size:12px}

/* ===== ترقيم الصفحات ===== */
.pager{display:flex;gap:8px;justify-content:center;margin-top:36px}
.pager a,.pager span{border:1px solid var(--line);min-width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;padding:0 10px}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager .on{background:var(--accent);border-color:var(--accent);color:#fff}

/* ===== فارغ / 404 ===== */
.empty-home{text-align:center;padding:90px 20px}
.empty-home h2{font-family:var(--serif);font-size:30px;margin-bottom:10px}
.empty-home p{color:var(--mut);font-weight:600}
.empty-home a{color:var(--accent);font-weight:800}

/* ===== زر الأعلى ===== */
.totop{position:fixed;bottom:24px;inset-inline-end:24px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;
       background:var(--card);color:var(--ink);font-size:17px;cursor:pointer;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{border-color:var(--accent);color:var(--accent)}

/* ===== حركة الظهور ===== */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ===== استجابة ===== */
@media(max-width:920px){
    .feature{grid-template-columns:1fr;gap:20px}
    .article-layout{grid-template-columns:1fr}
    .sidebar{position:static}
    .grid3{grid-template-columns:repeat(2,1fr)}
    .grid4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
    .grid3,.grid4{grid-template-columns:1fr}
    .editrow{grid-template-columns:1fr;gap:12px}
    .editrow-media{order:0}
    .masthead{padding:24px 0 16px}
    .main{padding:30px 16px 40px}
    .trend{padding:4px 16px}
    .trend-item img{display:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}}