:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --panel-2:#f6faf7;
  --text:#111827;
  --muted:#6b7280;
  --brand:#349c52;      /* اللون الأساسي */
  --border:#e5e7eb;
}

/* Base */
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Segoe UI', Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ===== Header موحّد ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff; border-bottom:1px solid var(--border);
  padding:12px 72px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px;
  background:radial-gradient(rgba(17,24,39,0.04) 1px, transparent 1px);
  background-size:8px 8px; box-shadow:0 6px 8px -6px rgba(0,0,0,.08);
}

.left{ display:flex; align-items:center; gap:12px }
.logo img{
  height: 100px !important;
  width: auto;
  display: block;
}

.divider{ width:1px; height:28px; background:var(--border) }

.nav a{
  color:#6b7280; text-decoration:none; margin:0 6px;
  font-size:15px; font-weight:700;
  padding:8px 10px; border-radius:8px; transition:.15s ease;
}
.nav a:hover{ color:#374151 }
.nav a.active{ color:#111827; background:#f3f4f6 }

.center{ flex:1; display:flex; justify-content:center }
.searchbar{ min-width:320px; max-width:520px; width:40vw }
.searchbar input{
  width:100%; padding:10px 12px;
  border:1px solid var(--border); border-radius:10px; outline:none;
  background:#fff; color:var(--text);
}
.searchbar input:focus{
  box-shadow:0 0 0 3px rgba(52,156,82,.15);
  border-color:var(--brand);
}

.right{ display:flex; align-items:center; gap:10px }
.icon-btn{
  border:1px solid var(--border); background:#fff;
  border-radius:10px; padding:8px 10px; cursor:pointer;
}
.icon-btn:hover{ background:#f9fafb }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:none; border-radius:10px; background:var(--brand); color:#fff;
  padding:10px 14px; cursor:pointer; font-weight:700;
}
.btn.ghost{ background:#fff; color:#374151; border:1px solid var(--border) }
.lang-switch{
  cursor:pointer; border:1px solid var(--border); padding:8px 10px;
  border-radius:8px; color:#374151; text-decoration:none; background:#fff
}
.avatar{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border) }

/* ===== Layout ===== */
.container{ max-width:1100px; margin:32px auto; padding:0 20px 40px }
.site-footer{
  border-top:1px solid var(--border); padding:24px 40px;
  color:#6b7280; text-align:center; background:#fff;
}

/* ===== Hero ===== */
.hero{ text-align:center; padding:96px 20px 72px }
.hero h1{ font-size:44px; margin:0 0 12px }
.hero h1 .brand{ color:var(--brand) }
.hero p{ color:var(--muted); font-size:18px; margin:6px 0 }
.hero .btn{ margin-top:16px }

/* ===== RTL tweaks ===== */
[dir="rtl"] .nav a{ margin:0 4px }

/* ===== Responsive ===== */
@media (max-width:640px){
  .searchbar{ display:none }
  .site-header{ padding:12px 16px }
  .hero h1{ font-size:36px }
}