/* =========================
   المتغيرات
========================= */

:root {

    --bg:#f8fafc;
    --text:#111827;
    --card:#ffffff;
    --border:#e5e7eb;

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --secondary:#64748b;

    --header-bg:rgba(255,255,255,.75);

    --shadow:
    0 10px 30px rgba(0,0,0,.08);

    --radius:18px;

}



/* =========================
   الوضع الداكن
========================= */


body.dark-mode {

    --bg:#09090b;
    --text:#f3f4f6;
    --card:#18181b;
    --border:#27272a;

    --primary:#60a5fa;
    --primary-dark:#93c5fd;

    --secondary:#a1a1aa;

    --header-bg:rgba(9,9,11,.75);

    --shadow:
    0 10px 35px rgba(0,0,0,.4);

}



/* =========================
   Reset
========================= */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    font-family:'Cairo',sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

    transition:.3s;

}



a {

    text-decoration:none;

    color:inherit;

}



.container {

    max-width:1150px;

    margin:auto;

    padding:0 20px;

}




/* =========================
   Header Glass ثابت
========================= */


.header {

    position:sticky;

    top:0;

    z-index:999;

    background:var(--header-bg);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border);

    transition:.3s;

}



.header-content {

    height:75px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.logo {

    font-size:1.7rem;

    font-weight:800;

}



.logo span {

    color:var(--primary);

}




/* القائمة */


.nav {

    display:flex;

    gap:30px;

}



.nav a {

    font-weight:600;

    color:var(--secondary);

    transition:.3s;

}



.nav a:hover,
.nav .active {

    color:var(--primary);

}





/* أزرار الهيدر */


.header-actions {

    display:flex;

    align-items:center;

    gap:12px;

}



.theme-btn,
.menu-btn {


    width:45px;

    height:45px;

    border-radius:50%;

    border:1px solid var(--border);

    background:var(--card);

    cursor:pointer;

    font-size:20px;

    transition:.3s;

}



.theme-btn:hover,
.menu-btn:hover {

    transform:translateY(-3px);

    box-shadow:var(--shadow);

}



.menu-btn {

    display:none;

}





/* =========================
 Hero
========================= */


.hero {

    padding:100px 0 80px;

}



.hero-content {

    text-align:center;

}



.hero h1 {

    font-size:3rem;

    line-height:1.4;

    margin-bottom:20px;

}



.hero p {

    max-width:700px;

    margin:auto;

    color:var(--secondary);

    font-size:1.15rem;

}



.hero-buttons {

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:15px;

}



.btn {

    padding:12px 30px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}



.primary {

    background:var(--primary);

    color:white;

}



.primary:hover {

    background:var(--primary-dark);

}



.secondary {

    border:1px solid var(--border);

}



.btn:hover {

    transform:translateY(-3px);

}





/* =========================
 المقالات
========================= */


.articles {

    padding:60px 0;

}



.articles h2,
.about-preview h2 {

    font-size:2rem;

    margin-bottom:35px;

}




.posts-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:30px;

}




.post-card {

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:.35s;

}



.post-card:hover {

    transform:translateY(-10px);

}



.post-image {

    height:210px;

}



.image-one {

    background:
    linear-gradient(135deg,#2563eb,#9333ea);

}


.image-two {

    background:
    linear-gradient(135deg,#f97316,#ef4444);

}



.image-three {

    background:
    linear-gradient(135deg,#06b6d4,#22c55e);

}



.post-content {

    padding:25px;

}



.date {

    color:var(--secondary);

    font-size:.9rem;

}



.post-content h3 {

    margin:12px 0;

    font-size:1.3rem;

}



.post-content p {

    color:var(--secondary);

}



.read-more {

    display:inline-block;

    margin-top:15px;

    color:var(--primary);

    font-weight:700;

}





/* =========================
 About
========================= */


.about-preview {

    padding:70px 0;

    text-align:center;

}



.about-preview p {

    color:var(--secondary);

    max-width:700px;

    margin:auto;

}





/* =========================
 Footer
========================= */


.footer {

    border-top:1px solid var(--border);

    padding:30px 0;

    text-align:center;

    color:var(--secondary);

}





/* =========================
 Mobile
========================= */


@media(max-width:768px){


.header-content {

    height:auto;

    padding:15px 0;

}


.menu-btn {

    display:block;

}



.nav {

    position:absolute;

    top:75px;

    right:20px;

    left:20px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:20px;

    flex-direction:column;

    gap:15px;

    display:none;

    box-shadow:var(--shadow);

}


.nav.show {

    display:flex;

}



.hero {

    padding:70px 0;

}



.hero h1 {

    font-size:2rem;

}



.hero-buttons {

    flex-direction:column;

}



.btn {

    width:100%;

}



}


/* =========================
   صفحة المقال
========================= */


.single-post{

    padding:70px 0;

}



.post-cover{

    height:350px;

    border-radius:25px;

    background:
    linear-gradient(135deg,#2563eb,#9333ea);

    margin-bottom:40px;

}



.article-header{

    text-align:center;

    margin-bottom:50px;

}



.article-header h1{

    font-size:3rem;

    margin:20px 0;

}



.article-meta{

    color:var(--secondary);

}



.article-content{

    max-width:800px;

    margin:auto;

    font-size:1.15rem;

}



.article-content h2{

    margin:40px 0 15px;

    font-size:2rem;

}



.article-content p{

    color:var(--secondary);

    margin-bottom:20px;

}



@media(max-width:768px){


.article-header h1{

    font-size:2rem;

}


.post-cover{

    height:220px;

}


}


/* =========================
   صفحة عني
========================= */


.about-page{

    padding:80px 0;

}



.about-box{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:25px;

    padding:45px;

    text-align:center;

    box-shadow:var(--shadow);

    margin-bottom:70px;

}



.about-box h1{

    font-size:2.7rem;

    margin-bottom:25px;

}



.about-box p{

    color:var(--secondary);

    max-width:750px;

    margin:15px auto;

    font-size:1.1rem;

}





.skills h2{

    text-align:center;

    font-size:2rem;

    margin-bottom:35px;

}




.skills-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:25px;

}




.skill-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:20px;

    padding:30px;

    text-align:center;

    transition:.3s;

    box-shadow:var(--shadow);

}



.skill-card:hover{

    transform:translateY(-8px);

}



.skill-card h3{

    margin-bottom:15px;

    font-size:1.4rem;

}



.skill-card p{

    color:var(--secondary);

}




@media(max-width:768px){


.about-box{

    padding:25px;

}


.about-box h1{

    font-size:2rem;

}


}

/* =========================
   صفحة التواصل
========================= */


.contact-page{

    padding:80px 0;

}



.contact-box{

    max-width:750px;

    margin:auto;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:25px;

    padding:45px;

    box-shadow:var(--shadow);

}



.contact-box h1{

    text-align:center;

    font-size:2.5rem;

    margin-bottom:15px;

}



.contact-box > p{

    text-align:center;

    color:var(--secondary);

    margin-bottom:40px;

}




.form-group{

    margin-bottom:25px;

}



.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:700;

}



.form-group input,
.form-group textarea{


    width:100%;

    padding:15px;

    border-radius:15px;

    border:1px solid var(--border);

    background:var(--bg);

    color:var(--text);

    font-family:inherit;

    font-size:1rem;

    outline:none;

    transition:.3s;

}




.form-group input:focus,
.form-group textarea:focus{


    border-color:var(--primary);

}




.form-group textarea{

    resize:vertical;

}




.contact-box .btn{

    border:none;

    cursor:pointer;

    font-family:inherit;

}





.social-box{


    margin-top:50px;

    text-align:center;

}



.social-box h2{

    margin-bottom:25px;

}




.social-links{


    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}




.social-links a{


    background:var(--card);

    border:1px solid var(--border);

    padding:12px 25px;

    border-radius:50px;

    transition:.3s;

}



.social-links a:hover{


    transform:translateY(-5px);

    box-shadow:var(--shadow);

}





@media(max-width:768px){


.contact-box{

    padding:25px;

}


.contact-box h1{

    font-size:2rem;

}


}