*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== الخلفية ===== */
body {
    font-family:'Cairo', sans-serif;
    background:linear-gradient(180deg, #0e1a22, #071422);
    margin:0;
    padding:0;
}

/* ===== البوكس ===== */
.main-box {
    width: min(100%, 1000px);
    margin: 40px auto;
    padding: 0px 28px 32px 28px;
    background:#0d1821;
    border-radius:18px;
    border:1px solid #2F3B46;
}

/* ===== الشعار ===== */
.site-logo{
    display:flex;
    justify-content:center;
    margin:5px 0 0px;
}

.site-logo img{
    width:200px;
    max-width:100%;
    height:auto;
    border-radius:100%;
}

/* ===== النص ===== */
.sub-title{
    text-align:center;
    font-size:18px;
    color:#ccc;
    margin-bottom:0px;
}

/* ===== ازرار الهيدر ===== */
.nav-links {
    display:flex;
    flex-wrap:wrap;            /* ينزل سطر إذا كثروا */
    justify-content:center;    /* توسيط */
    gap:10px;                  /* مسافة بين الأزرار */
    margin-bottom:25px;
}

/* ===== شكل الزر ===== */
.nav-links a{
    display:flex;
    align-items:center;        /* توسيط عمودي */
    justify-content:center;    /* توسيط أفقي */

    width:160px;               /* عرض الزر */
    height:60px;               /* ارتفاع الزر */

    padding:0;                 /* مهم لتثبيت الحجم */

    background:#FFC13C;        /* لون الزر */
    color:#0f1c26;             /* لون النص */

    border:1px solid #FFC13C;  /* لون الحدود */
    border-radius:8px;         /* تدوير الحواف */

    text-decoration:none;
    font-weight:700;           /* سماكة الخط */
    font-size:16px;            /* حجم الخط */

    text-align:center;

    white-space:nowrap;        /* يمنع نزول النص سطر */
}

/* ===== حركة الاهتزاز ===== */
@keyframes btnTiltSoft{
    0%{transform:rotate(0deg);}
    30%{transform:rotate(3deg);}
    60%{transform:rotate(-3deg);}
    100%{transform:rotate(0deg);}
}

/* ===== تأثير عند المرور ===== */
.nav-links a:hover{
    background:#FFC13C;        /* لون عند المرور */
    color:#0f1c26;             /* لون النص */
    border-color:#FFC13C;      /* لون الحدود */

    animation:btnTiltSoft .4s ease; /* الحركة */
}

/* ===== البنر ===== */
.promo-banner{
    background:#a61e1e;
    border:2px solid #D9534F;
    border-radius:14px;
    padding:20px 22px;
    display:flex;
    align-items:center;
    gap:20px;
    margin:25px 0;
}

.promo-icon{
    color:#ccc;
    flex-shrink:0;
}

.promo-text h3{
    margin:0;
    font-size:18px;
    font-weight:700;
    color:#FFC13C;
}

.promo-text p{
    margin:6px 0 0;
    font-size:16px;
    font-weight:700;
    color:#ccc;
}

/* زر البنر (نفس الشكل بدون تضخيم) */
.promo-banner a.promo-btn,
.promo-banner a.promo-btn:visited{
    margin-right:auto;

    padding:12px 22px;     /* 🔥 أصغر من 12px */
    font-size:14px;       /* 🔥 يصغر الزر */

    border-radius:11px;
    font-weight:700;

    color:#ffffff !important;
    background:#C62828;
    border:3px solid #ccc;

    text-decoration:none;

    white-space:nowrap;

    transition:all .25s ease;
}

/* Hover */
.promo-banner a.promo-btn:hover{
    background:#00933D;
    border-color:#ccc;
    color:#ffffff !important;

    transform:none;
    box-shadow:none;
}

/* ===== المواضيع ===== */
.post {
    background:#0c161e;
    padding:12px;
    border-radius:10px;
    border:2px solid #6FB6FF;
    display:flex;
    gap:12px;
    align-items:center;
}

.posts-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:20px;
}

.posts-grid .post{
    flex-direction:column;
    align-items:flex-start;
}

.posts-grid .post img{
    width:100%;
    height:160px;
}

/* صورة */
.post img{
    width:160px;
    height:90px;
    object-fit:cover;
    border-radius:8px;
    border:2px solid #6DB1FB;
    transition:all .25s ease;
}

/* تأثير */
.post img:hover{
    border-color:#FFC13C;
    transform:scale(1.05);
    animation:fanShake .25s ease;
}

/* حركة */
@keyframes fanShake{
    0%{transform:scale(1.05) rotate(0deg);}
    25%{transform:scale(1.05) rotate(-2deg);}
    50%{transform:scale(1.05) rotate(2deg);}
    75%{transform:scale(1.05) rotate(-1deg);}
    100%{transform:scale(1.05) rotate(0deg);}
}

.post a {
    font-size:17px;
    color:#8fc3ff;
    font-weight:600;
    text-decoration:none;
}

.post a:hover {
    color:#c4e1ff;
}

/* التاريخ */
.date{
    color:#FFC13C;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:6px;
}

/* الفوتر */
.footer {
    text-align:center;
    color:#587795;
    margin-top:25px;
}

.footer a{
    background:#0f1c26;
    padding:8px 16px;
    border-radius:8px;
    color:#9fd2ff;
    border:1px solid #2F3B46;
}

/* ===== كود الزيارات ===== */
.visit-box{
    margin:14px auto;

    width:140px;          /* 🔵 العرض (غيره) */
    height:50px;          /* 🔵 الارتفاع (غيره) */

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0f1c26;
    border-radius:6px;
    border:1px solid #2F3B46;
}

/* الرقم */
.visit-num{
    font-size:26px;       /* 🔵 حجم الخط (غيره) */
    font-weight:700;
    line-height:1;        /* مهم لتثبيت الارتفاع */
    color:#FFC13C;
}

/* سكروول */
::-webkit-scrollbar { width:14px; }
::-webkit-scrollbar-thumb { background:#FFC13C; }

* { scrollbar-color:#fbc049 #1b1b1b; }

/* موبايل */
@media (max-width:768px){
    .main-box{
        margin:0;
        border-radius:0;
        padding:16px 14px 24px;
    }

    .promo-banner{
        flex-direction:column;
        text-align:center;
    }

    .promo-banner a.promo-btn{
        width:100%;
        margin-top:10px;
    }

    .posts-grid{
        grid-template-columns:1fr;
    }
}

/* ===== نفس ترتيب أقسام تهمك ===== */

table{
    width:100%;
    border-collapse:collapse;
}

td.section-item{
    width:33%;
    vertical-align:top;
    padding:5px 10px;
}

.section-item a{
    display:inline;
    color:#8fc3ff;
    font-weight:600;
    text-decoration:none;
}

.section-item a:hover{
    color:#c4e1ff;
}
.section-title {
    background:#0f1c26;
    padding:10px;
    border-radius:10px;
    border:1px solid #2F3B46;
    color:#ffffff;
    margin-top:30px;
    font-weight:700;
}

/* 🔵 أزرار الفوتر */
.footer a{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:160px;
    height:45px;

    background:#0f1c26;
    color:#9fd2ff;

    border:1px solid #2F3B46;
    border-radius:8px;

    text-decoration:none;
    font-weight:600;
    font-size:14px;

    margin:5px;
    transition:all .2s ease;

    text-align:center;
}

/* Hover */
.footer a:hover{
    background:#142634;
    color:#ffffff;
    border-color:#6DB1FB;
}