.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* أو repeat(3, 1fr) */
    gap: 20px;
}

.item1 {
    grid-column: 1 / 3; /* أو span 2 */
}

.item2 {
    grid-row: span 2;
}

.container {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

body {
    background-color: white;
}

@media (max-width: 768px) {
    body {
        background-color: lightblue;
    }
}

@media (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

.item-last {
    order: -1;
}

.item-grow {
    flex-grow: 1;
}

img {
    max-width: 100%;
    height: auto;
}

.profile-pic {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* إخفاء السايدبار في الموبايل */
@media (max-width: 600px) {
    .sidebar { display: none; }
}

/* إخفاء زر القائمة في الشاشات الكبيرة */
.menu-btn { display: none; }

/* إظهار زر القائمة في الموبايل */
@media (max-width: 600px) {
    .menu-btn { display: block; }
}

.grid-container {
    display: grid;
    justify-content: center; /* محاذاة الشبكة نفسها */
    align-items: center; /* محاذاة العناصر داخل الخلايا */
}

.card {
    /* هذا العنصر هو ابن لشبكة، لكنه أب لمحتواه */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* تأثير ضبابية */
.blur-image {
    filter: blur(5px);
}

/* أبيض وأسود */
.grayscale-image {
    filter: grayscale(100%);
}

/* سطوع عند hover */
.bright-on-hover {
    transition: filter 0.3s ease;
}

.bright-on-hover:hover {
    filter: brightness(150%);
}

/* جمع عدة فلاتر */
.multi-filter {
    filter: blur(2px) brightness(120%) contrast(110%);
}

/* مثال متقدم: تأثير sepia */
.vintage-photo {
    filter: sepia(80%) contrast(120%) brightness(90%);
}

/* دائرة */
.circle-clip {
    clip-path: circle(50%);
}

/* مثلث */
.triangle-clip {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* سداسي */
.hexagon-clip {
    clip-path: polygon(
        50% 0%, 
        100% 25%, 
        100% 75%, 
        50% 100%, 
        0% 75%, 
        0% 25%
    );
}

/* تأثير انتقال */
.shape-morph {
    clip-path: circle(30%);
    transition: clip-path 0.5s ease;
}

.shape-morph:hover {
    clip-path: circle(50%);
}

/* أشكال إضافية */
.star-clip {
    clip-path: polygon(
        50% 0%, 
        61% 35%, 
        98% 35%, 
        68% 57%, 
        79% 91%, 
        50% 70%, 
        21% 91%, 
        32% 57%, 
        2% 35%, 
        39% 35%
    );
}

/* نظام الألوان */
:root {
    /* Colors */
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-bg: #ffffff;
    --color-text: #212529;
    
    /* Spacing Scale */
    --space-xs: 0.25rem;  /* 4px */
    --space-sm: 0.5rem;   /* 8px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    
    /* Typography */
    --font-size-base: 16px;
    --font-size-lg: calc(var(--font-size-base) * 1.25);
    --font-size-xl: calc(var(--font-size-base) * 1.5);
}

/* استخدام المتغيرات */
.button {
    background-color: var(--color-primary);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-base);
}

/* Dark Theme */
.dark-theme {
    --color-bg: #1a1a1a;
    --color-text: #ffffff;
    --color-primary: #4dabf7;
}

/* استخدام calc مع المتغيرات */
.container {
    padding: calc(var(--space-md) * 2);
    margin-bottom: calc(var(--space-lg) + var(--space-sm));
}

/* نظام Grid باستخدام المتغيرات */
:root {
    --grid-columns: 12;
    --grid-gap: var(--space-md);
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}