/* ===== الهوية: أخضر فخم #24382F + ذهبي شامبين #C6A16B + كريمي #F5F1E9 + فحمي #343A36 ===== */
:root{
  --charcoal:#24382F;--deep:#1B2A23;--navy:#24382F;--slate:#2E463B;
  --silver:#E2C9A0;--white:#F5F1E9;--light:#F5F1E9;--blue:#C6A16B;--blue-light:#E2C9A0;
  --line:rgba(198,161,107,.4);--glass:rgba(46,70,59,.8);
  --green:#24382F;--sage:#8a9a88;--mauve:#2E463B;--mauve-d:#24382F;--gold:#C6A16B;--cream:#F5F1E9;--ink:#343A36;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cairo',sans-serif;background:var(--cream);color:var(--ink);line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.container{max-width:1240px;margin:0 auto;padding:0 28px}

/* الأزرار */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:700;font-size:14px;padding:11px 24px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,#E2C9A0,#C6A16B 55%,#A8854F);color:#2a2118;box-shadow:0 8px 22px rgba(198,161,107,.4)}
.btn-outline{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(226,201,160,.8)}
.btn-outline:hover{background:rgba(198,161,107,.25)}
.btn-mauve{background:var(--mauve-d);color:#fff;border-color:var(--gold);box-shadow:0 8px 20px rgba(36,56,47,.35)}
.btn-mauve:hover{background:#1B2A23;border-color:#E2C9A0}

/* الهيدر فوق الهيرو */
.header{position:absolute;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 44px}
.brand{display:flex;align-items:center;gap:12px}
.logo img{height:54px;width:auto;border-radius:12px;border:1px solid rgba(226,201,160,.5)}
.brand-name{display:none;color:#fff;text-decoration:none;font-weight:700;font-size:14px;max-width:170px;line-height:1.35}
.menu{display:flex;gap:30px;margin-inline:auto}
.menu a{color:#f3e9da;text-decoration:none;font-size:15px;font-weight:600;padding-bottom:4px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.menu a:hover,.menu a.active{color:var(--gold);border-bottom-color:var(--gold)}
.header-actions{display:flex;align-items:center;gap:10px}
.header-wa{background:var(--mauve);color:#fff;border-color:var(--gold);box-shadow:none;padding:9px 20px;font-size:13px}
.header-wa:hover{background:var(--mauve-d)}

/* الهيرو */
.hero{position:relative;min-height:640px;display:flex;align-items:center;justify-content:flex-start;padding:120px 6vw 150px;background:linear-gradient(to left,rgba(14,22,18,.62),rgba(14,22,18,.32) 38%,rgba(14,22,18,0) 65%),url(images/bg-hero.jpg) 30% center/cover no-repeat}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(transparent,rgba(247,240,230,.0))}
.hero .container{margin:0;max-width:none;padding:0;width:100%;display:flex;justify-content:flex-start}
.hero-text{width:min(520px,100%);padding:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.5)}
.hero-text h1{font-size:clamp(34px,4.2vw,54px);line-height:1.25;font-weight:900;color:#fff;margin-bottom:14px}
.hero-text h1 span{text-shadow:none;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55));background:linear-gradient(135deg,#E2C9A0,#C6A16B);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text p{color:#eadfcd;font-size:15px;margin-bottom:26px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* الخدمات (رخام كريمي) */
.section{padding:90px 6vw}
.services{margin-top:-62px;padding-top:130px;background:url(images/bg-marble.jpg) center/cover}
.services .container{max-width:1300px;display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center}
.eyebrow{display:block;color:#A8854F;font-weight:700;font-size:15px;margin-bottom:4px}
.section-title{font-size:clamp(26px,3vw,36px);font-weight:900;line-height:1.35;color:var(--green)}
.section-sub{color:#6c7670;font-size:14.5px;margin:12px 0 22px}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{position:relative;background:#fff;border-radius:18px;padding:10px 10px 22px;text-align:center;box-shadow:0 14px 34px rgba(36,56,47,.13);cursor:pointer;transition:transform .25s,box-shadow .25s}
.service-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(36,56,47,.22)}
.service-photo{height:130px;border-radius:12px;background-size:cover;background-position:center;margin-bottom:26px;position:relative}
.service-icon{position:absolute;inset-inline-start:12px;bottom:-18px;width:38px;height:38px;border-radius:50%;background:#fff;color:#24382F;display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.service-icon svg{width:20px;height:20px}
.service-card h3{font-size:15px;font-weight:800;color:var(--green);margin-bottom:4px}
.service-card p{font-size:12.5px;color:#6c7670;line-height:1.6;padding:0 8px}
.service-more{display:block;margin-top:12px;font-size:14.5px;font-weight:700;color:#A8854F}

/* الأعمال (فحمي داكن) */
.services{margin-top:0;padding-top:90px}
.works,.about,.contact{text-align:center}
.works .container,.about .container,.contact .container{display:block;max-width:1200px;margin:0 auto;padding:0}
.works,.contact{background:linear-gradient(180deg,rgba(27,42,35,.95),rgba(44,59,53,.93)),url(images/bg-works.jpg) center/cover no-repeat;color:#F5F1E9;padding:96px 6vw}
.lower-title{font-size:36px;font-weight:800;margin-bottom:10px;line-height:1.4}
.lower-title::after{content:"";display:block;width:72px;height:3px;margin:12px auto 0;border-radius:3px;background:linear-gradient(90deg,transparent,#C6A16B,transparent)}
.lower-sub{margin-bottom:48px}
.works .lower-title,.contact .lower-title{background:linear-gradient(135deg,#fff 30%,#E2C9A0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.works .lower-sub,.contact .lower-sub{color:#E2C9A0}
.works-group{margin-bottom:56px;display:block}
.works-group:last-child{margin-bottom:0}
.group-title{display:flex;align-items:center;gap:16px;margin-bottom:24px;font-size:26px;font-weight:800;color:#F5F1E9}
.group-title::before{content:"";width:5px;height:28px;border-radius:3px;background:linear-gradient(180deg,#E2C9A0,#A8854F)}
.group-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(198,161,107,.6))}
.works-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.work-item{position:relative;overflow:hidden;border-radius:16px;border:1px solid rgba(198,161,107,.4);aspect-ratio:4/3;cursor:pointer;box-shadow:0 12px 32px rgba(0,0,0,.45);transition:transform .3s,border-color .3s,box-shadow .3s}
.work-item:hover{transform:translateY(-4px);border-color:#E2C9A0;box-shadow:0 18px 44px rgba(0,0,0,.6)}
.work-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.work-item:hover img{transform:scale(1.08)}
.work-caption{position:absolute;inset:auto 0 0 0;padding:28px 16px 14px;font-weight:700;color:#F5F1E9;background:linear-gradient(0deg,rgba(27,42,35,.95),transparent);text-align:right}

/* من نحن */
.about{padding:96px 6vw;background:linear-gradient(180deg,rgba(245,241,233,.96),rgba(235,232,224,.94)),url(images/bg-about.jpg) center/cover no-repeat}
.about .lower-title{background:linear-gradient(135deg,#24382F 30%,#A8854F 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.about-text{max-width:720px;margin:0 auto 48px}
.about-text p{line-height:2.1;font-size:17px;color:#24382F}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:860px;margin:0 auto}
.stat{padding:28px 16px;border-radius:18px;border:1px solid rgba(198,161,107,.55);background:#fff;box-shadow:0 12px 30px rgba(44,59,53,.12);text-align:center}
.stat strong{display:block;font-size:44px;line-height:1.2;font-weight:800;background:linear-gradient(135deg,#C6A16B,#A8854F);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:#3F4F47;font-size:15px}

/* التواصل */
.contact-box{max-width:640px;margin:0 auto;padding:44px 32px;border-radius:22px;background:rgba(44,59,53,.92);border:1px solid rgba(198,161,107,.6);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.contact-box .lower-sub{margin-bottom:24px}
.contact-line{margin-bottom:8px;font-size:17px;color:#F5F1E9}
.contact-box .btn{margin-top:22px}
.footer{padding:36px 24px;text-align:center;background:#1B2A23;border-top:1px solid rgba(198,161,107,.4);color:#E2C9A0;display:block}
.copyright{font-size:14px;opacity:.85}

/* عرض الصورة */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(15,22,18,.92);display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:100%;max-height:90vh;border-radius:12px}
.lightbox-close{position:absolute;top:18px;inset-inline-start:18px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:18px;cursor:pointer}

/* أدوات الإدارة */
.filters,.filter-btn{display:none}
.admin-bar{margin:0 0 16px}

@media (max-width:1000px){
  .services .container{grid-template-columns:1fr;gap:26px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  
}
@media (max-width:760px){
  .header{padding:12px 14px;flex-wrap:wrap;gap:8px;background:linear-gradient(rgba(20,30,25,.85),rgba(20,30,25,.5))}
  .logo img{height:42px}
  .menu{order:3;width:100%;gap:16px;justify-content:space-between;overflow-x:auto}
  .menu a{font-size:13.5px;white-space:nowrap}
  .hero{padding:150px 14px 110px;min-height:0;background-position:25% center}
  .hero-text{padding:0}  .section,.works{padding:60px 16px}.services{padding-top:100px}
  
  .services-grid{gap:12px}
  
  .stats{grid-template-columns:1fr}.works-grid{gap:12px}.lower-title{font-size:28px}
  .footer{flex-direction:column;text-align:center}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(199,203,209,.35);
  background: rgba(244,245,247,.08);
  color: var(--light);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, background .2s;
}
.auth-btn:hover { border-color: var(--silver); background: rgba(244,245,247,.16); }
.auth-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
/* =====================================================
   أدوات الإدارة (تظهر للمسجلين بس)
   ===================================================== */
.admin-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  background: none;
  border: 0;
  color: var(--white);
  opacity: .35;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.admin-link:hover { opacity: .8; }
.admin-link svg { width: 14px; height: 14px; }

.admin-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px dashed var(--blue);
  border-radius: 12px;
  background: rgba(143,174,204,.18);
}
.admin-bar-note { font-size: 14px; opacity: .85; }

.adm-btn {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  color: #24382F;
}
.adm-btn:disabled { opacity: .5; cursor: not-allowed; }
.adm-ghost { background: transparent; color: var(--white); border: 1px solid rgba(36,56,47,.35); }

.svc-add {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue-light), var(--blue));
  color: #24382F;
  box-shadow: 0 6px 16px rgba(36,56,47,.35);
}

.work-del {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(139,44,44,.94);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  z-index: 2;
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(8,10,14,.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1100;
  overflow: auto;
}
.modal.open { display: flex; }

.modal-box {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  width: 100%;
  max-width: 500px;
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.modal-title { font-size: 22px; margin-bottom: 20px; padding-left: 40px; }
.modal-close {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(36,56,47,.35);
  background: transparent;
  color: var(--white);
  cursor: pointer;
}

.modal-box .adm-btn { width: 100%; }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 20px;
  border-radius: 12px;
  background: #fff;
  color: #1f1f1f;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: transform .2s, box-shadow .2s;
}
.google-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.google-btn svg { width: 22px; height: 22px; flex-shrink: 0; }

.adm-note { text-align: center; opacity: .6; font-size: 13px; margin-top: 14px; }
.adm-field { display: block; margin-bottom: 14px; }
.adm-field span { display: block; margin-bottom: 6px; opacity: .8; font-size: 14px; }
.adm-field input[type="email"],
.adm-field input[type="password"],
.adm-field select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(36,56,47,.25); background: #fff; color: var(--white); font: inherit;
}
.adm-field input[type="file"] { color: var(--white); width: 100%; }
.adm-det { margin-top: 18px; }
.adm-det summary { cursor: pointer; opacity: .65; font-size: 13px; margin-bottom: 10px; }
.adm-msg { margin-top: 12px; font-size: 14px; min-height: 20px; }
.adm-msg.err { color: #b3261e; }
.adm-msg.ok { color: #1e7a3c; }

.adm-queue { margin: 4px 0 14px; }
.adm-qitem { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 8px; margin-bottom: 10px; }
.adm-qitem img { width: 72px; height: 56px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.adm-qitem input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(36,56,47,.25); background: #fff; color: var(--white); font: inherit; }
.adm-qitem button { background: transparent; border: 1px solid rgba(36,56,47,.35); color: var(--white); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; }

/* أدوات الإدارة والنوافذ */
.admin-bar { border-color: #C6A16B; background: rgba(198,161,107,.12); }
.adm-btn, .svc-add { background: linear-gradient(135deg, #E2C9A0, #C6A16B 60%, #A8854F); color: #1B2A23; }
.svc-add { box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.adm-ghost { background: transparent; color: #F5F1E9; border: 1px solid rgba(198,161,107,.6); }
.modal { background: rgba(22,31,27,.92); }
.modal-box { background: #2E463B; border: 1px solid rgba(198,161,107,.55); color: #F5F1E9; }
.modal-title { color: #E2C9A0; }
.modal-close { border: 1px solid rgba(198,161,107,.6); color: #F5F1E9; }
.adm-field span { color: #E2C9A0; opacity: 1; }
.adm-field input[type="email"], .adm-field input[type="password"], .adm-field select {
  background: #fff; color: #24382F; border: 1px solid rgba(198,161,107,.6);
}
.adm-field input[type="file"] { color: #F5F1E9; }
.adm-qitem { background: #2E463B; }
.adm-qitem input { background: #fff; color: #24382F; border: 1px solid rgba(198,161,107,.6); }
.adm-qitem button { border: 1px solid rgba(198,161,107,.6); color: #F5F1E9; }
.adm-msg.err { color: #ff9a9a; }
.adm-msg.ok { color: #8be0a4; }
.adm-note, .adm-det summary { color: #E2C9A0; }
.admin-link { color: #F5F1E9; }

/* =====================================================
   الموبايل والتابلت - أحجام أكبر + نفس التصميم قبل وبعد تسجيل الدخول
   ===================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* أدوات الإدارة: نفس الستايل وعلى كل الأحجام */
.is-admin .svc-add{display:inline-flex;align-items:center;gap:4px}
.header-actions{flex-wrap:wrap;justify-content:flex-end}
.auth-btn{border-color:rgba(226,201,160,.5);background:rgba(245,241,233,.1);color:#F5F1E9;border-radius:999px;min-height:38px}
.auth-btn:hover{border-color:var(--gold);background:rgba(198,161,107,.22)}
.auth-btn.logout{background:rgba(46,70,59,.35);border-color:rgba(226,201,160,.6)}
.adm-btn,.google-btn{min-height:46px}
.modal-box{border-radius:22px}

@media (max-width:1000px){
  .header{padding:14px 24px}
  .hero{padding:140px 24px 120px}
  .section,.works,.about{padding-left:24px;padding-right:24px}
}

@media (max-width:760px){
  body{font-size:16px}

  /* الهيدر */
  .header{padding:10px 14px 8px;flex-wrap:wrap;gap:8px 10px;align-items:center;background:linear-gradient(rgba(20,30,25,.92),rgba(20,30,25,.55))}
  .brand{flex:0 0 auto}
  .logo img{height:48px}
  .header-actions{order:2;gap:8px;margin-inline-start:auto}
  .header-wa{padding:9px 16px;font-size:14px;min-height:38px}
  .auth-btn{font-size:14px;padding:8px 14px}
  .auth-btn svg{width:18px;height:18px}
  .menu{order:3;width:100%;gap:22px;margin:0;justify-content:space-between;overflow-x:auto;padding:4px 2px 2px;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:16px;white-space:nowrap;padding-bottom:3px}

  /* الهيرو */
  .hero{padding:170px 14px 90px;min-height:0;background-position:28% center}
    .hero-text{width:100%;padding:0;border-radius:0}
  .hero-text h1{font-size:38px;line-height:1.3}
  .hero-text p{font-size:16.5px;line-height:1.85;margin-bottom:22px}
  .hero-actions{gap:10px}
  .hero-actions .btn{flex:1 1 140px;font-size:16px;padding:13px 18px}

  /* الخدمات */
  .section,.works,.about,.contact{padding:56px 14px}
  .services{padding-top:60px}
  .services .container{gap:24px}
  .eyebrow{font-size:16.5px}
  .section-title{font-size:29px}
  .section-sub{font-size:16px;margin:10px 0 18px}
  .services-intro .btn{font-size:16px;padding:12px 26px}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .service-card{padding:8px 8px 18px;border-radius:16px}
  .service-photo{height:118px;margin-bottom:26px}
  .service-icon{width:40px;height:40px;bottom:-20px}
  .service-icon svg{width:22px;height:22px}
  .service-card h3{font-size:17px;line-height:1.4}
  .service-card p{font-size:14px;line-height:1.65;padding:0 4px}
  .svc-add{top:8px;left:8px;font-size:13px;padding:7px 12px;min-height:34px}

  /* الأعمال */
  .lower-title{font-size:31px}
  .lower-sub{font-size:16.5px;margin-bottom:32px}
  .works-group{margin-bottom:40px}
  .group-title{font-size:22px;gap:12px;margin-bottom:18px}
  .group-title::before{height:24px}
  .works-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .work-item{border-radius:14px}
  .work-caption{font-size:14.5px;line-height:1.5;padding:26px 12px 10px}
  .work-del{width:38px;height:38px;top:8px;left:8px;font-size:16px}

  /* من نحن */
  .about-text{margin-bottom:34px}
  .about-text p{font-size:17px;line-height:2}
  .stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .stat{padding:20px 6px;border-radius:16px}
  .stat strong{font-size:32px}
  .stat span{font-size:14.5px;line-height:1.4;display:block}

  /* التواصل */
  .contact-box{padding:34px 20px;border-radius:20px}
  .contact-line{font-size:17.5px}
  .contact-box .btn{font-size:16.5px;padding:13px 26px;width:100%}
  .footer{padding:28px 16px}
  .copyright{font-size:14.5px}

  /* صور العرض والنوافذ (بعد تسجيل الدخول) */
  .lightbox-close{width:46px;height:46px;font-size:20px}
  .modal{align-items:flex-end;padding:0}
  .modal-box{max-width:none;border-radius:22px 22px 0 0;padding:24px 18px 28px;max-height:94vh}
  .modal-title{font-size:23px}
  .modal-close{width:42px;height:42px;top:14px;left:14px;font-size:17px}
  .google-btn{font-size:17px;padding:14px 16px}
  .adm-field span{font-size:15.5px}
  .adm-field input[type="email"],.adm-field input[type="password"],.adm-field select,.adm-qitem input{font-size:16px;padding:13px 14px}
  .adm-field input[type="file"]{font-size:15px}
  .adm-btn{font-size:17px;padding:13px 20px}
  .adm-msg,.adm-note{font-size:15px}
  .adm-qitem img{width:64px;height:52px}
  .adm-qitem button{width:40px;height:40px}
}

/* موبايلات صغيرة جداً */
@media (max-width:380px){
  .hero-text h1{font-size:34px}
  .header-wa{padding:8px 12px;font-size:13.5px}
  .auth-btn{padding:8px 10px;font-size:13.5px}
  .stat strong{font-size:28px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* كروت الخدمات الجديدة (من غير صورة لحد ما تترفع صور في قسمها) */
.service-photo.auto{background-image:linear-gradient(135deg,#3b5046,#1B2A23);overflow:visible}
.service-photo.auto::after{content:"";position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle at 30% 20%,rgba(198,161,107,.28),transparent 60%);pointer-events:none}
.photo-glyph{position:absolute;inset:0;display:grid;place-items:center;color:rgba(226,201,160,.55);z-index:1}
.photo-glyph svg{width:56px;height:56px;stroke-width:1.2}
.service-photo.auto.has-photo::after,.service-photo.auto.has-photo .photo-glyph{display:none}
.service-photo .service-icon{z-index:2}
@media (max-width:1000px){
  .services-grid .service-card:last-child:nth-child(odd){grid-column:1/-1}
}
@media (max-width:760px){
  .photo-glyph svg{width:48px;height:48px}
}

/* ===== معرض الخدمة ===== */
body.no-scroll{overflow:hidden}
.gal{position:fixed;inset:0;z-index:90;background:rgba(20,30,25,.97);display:none;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gal.open{display:block}
.gal-inner{max-width:1200px;margin:0 auto;padding:0 22px 60px}
.gal-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;padding:20px 0 16px;background:linear-gradient(rgba(20,30,25,1) 75%,rgba(20,30,25,0));margin-bottom:10px}
.gal-titlebox{flex:1;display:flex;flex-direction:column;gap:4px}
.gal-title{font-size:30px;color:#E2C9A0;margin:0}
.gal-count{font-size:15px;color:rgba(245,241,233,.7)}
.gal-close{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-size:19px;cursor:pointer}
.gal-add{flex:0 0 auto;border:0;border-radius:999px;padding:11px 20px;font:inherit;font-weight:700;font-size:15px;color:#2a2118;background:linear-gradient(135deg,#E2C9A0,#A8854F);cursor:pointer;min-height:44px}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gal-item{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid rgba(198,161,107,.35);background:#24382F}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.gal-item:hover img{transform:scale(1.06)}
.gal-cap{position:absolute;inset-inline:0;bottom:0;padding:28px 12px 10px;color:#fff;font-size:14.5px;font-weight:700;background:linear-gradient(transparent,rgba(20,30,25,.92));text-align:right}
.gal-empty{grid-column:1/-1;text-align:center;color:rgba(245,241,233,.75);font-size:18px;padding:70px 10px}
.gal-item .work-del{top:8px;left:8px}
@media (max-width:760px){
  .gal-inner{padding:0 14px 50px}
  .gal-title{font-size:23px}
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .gal-item{border-radius:14px}
  .gal-add{padding:10px 14px;font-size:14px}
  .service-more{font-size:13.5px;margin-top:8px}
}

/* ===== كارت الخدمة: اسم + صورة فقط ===== */
.service-photo{height:210px;margin-bottom:16px}
.service-card h3{margin-bottom:0}
.service-card .service-more{margin-top:8px}
@media (max-width:760px){
  .service-photo{height:130px;margin-bottom:12px}
}
/* ===== أعمالنا: أزرار الخدمات ===== */
.works-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0 auto 30px;max-width:1100px}
.works-tab{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:16px;color:#F5F1E9;background:rgba(245,241,233,.08);border:1px solid rgba(226,201,160,.4);border-radius:999px;padding:10px 18px;min-height:44px;cursor:pointer;transition:background .2s,color .2s}
.works-tab small{font-size:12.5px;background:rgba(226,201,160,.25);border-radius:999px;padding:1px 8px}
.works-tab:hover{background:rgba(198,161,107,.22)}
.works-tab.active{background:linear-gradient(135deg,#E2C9A0,#A8854F);color:#2a2118;border-color:transparent}
.works-tab.active small{background:rgba(42,33,24,.18)}
.works-tools{display:none;text-align:center;margin:-6px 0 26px}
body.is-admin .works-tools.on{display:block}
.works-empty{text-align:center;color:rgba(245,241,233,.75);font-size:18px;padding:50px 10px}
@media (max-width:760px){
  .works-tabs{gap:8px;margin-bottom:22px}
  .works-tab{font-size:15px;padding:9px 14px}
}
.works-hint{text-align:center;color:rgba(245,241,233,.7);font-size:17px;margin:6px 0 10px}
.contact-line a{color:inherit;text-decoration:none;font-weight:700}
.contact-line a:hover{color:#E2C9A0}


/* زرار إظهار/إخفاء الباسورد */
.pw-wrap { position: relative; }
.adm-field input.adm-pass {
  width: 100%; padding: 12px 14px 12px 46px; border-radius: 10px;
  border: 1px solid rgba(198,161,107,.6); background: #fff; color: #24382F; font: inherit;
}
.pw-eye {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 8px; background: transparent; color: #6b6f6c; cursor: pointer;
}
.pw-eye:hover { color: #A8854F; background: rgba(198,161,107,.18); }
.pw-eye svg { width: 20px; height: 20px; }
@media (max-width: 800px) {
  .adm-field input.adm-pass { font-size: 16px; padding: 13px 14px 13px 46px; }
}


/* ===== مشاريع تم تنفيذها ===== */
.nav-projects[hidden]{display:none!important}
.projects{text-align:center;padding:96px 6vw;color:#F5F1E9;background:linear-gradient(180deg,rgba(44,59,53,.96),rgba(46,70,59,.95)),url(images/bg-works.jpg) center/cover no-repeat}
.projects .container{display:block;max-width:1200px;margin:0 auto;padding:0}
.projects .lower-title{background:linear-gradient(135deg,#fff 30%,#E2C9A0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.projects .lower-sub{color:#E2C9A0}
.projects-tools{display:none;text-align:center;margin:-6px 0 26px}
body.is-admin .projects-tools{display:block}
.projects-tools .adm-msg{margin-top:12px}
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:center}
.projects-empty{color:rgba(245,241,233,.8);font-size:18px;padding:30px 10px}
.project-card{position:relative;background:#fff;border-radius:18px;padding:10px 10px 22px;text-align:center;box-shadow:0 14px 34px rgba(0,0,0,.28);cursor:pointer;transition:transform .25s,box-shadow .25s;outline:none}
.project-card:hover,.project-card:focus-visible{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.4)}
.project-photo{position:relative;height:210px;border-radius:12px;background-size:cover;background-position:center;margin-bottom:16px;background-image:linear-gradient(135deg,#3b5046,#1B2A23)}
.project-photo.empty::after{content:"";position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle at 30% 20%,rgba(198,161,107,.28),transparent 60%)}
.project-badge{position:absolute;bottom:10px;right:10px;z-index:1;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;background:rgba(27,42,35,.88);color:#E2C9A0;border:1px solid rgba(226,201,160,.5)}
.project-badge.almost{color:#fff;background:rgba(46,70,59,.92);border-color:rgba(255,255,255,.4)}
.project-card h3{font-size:17px;font-weight:800;color:#24382F;margin:0;line-height:1.5;padding:0 6px}
.project-card .service-more{margin-top:8px}
.project-del{top:10px;left:10px}
@media (max-width:1000px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
  .projects{padding:56px 14px}
  .projects-grid{gap:12px}
  .project-card{padding:8px 8px 18px;border-radius:16px}
  .project-photo{height:130px;margin-bottom:12px}
  .project-card h3{font-size:16px}
  .project-badge{font-size:11.5px;padding:4px 9px}
}

/* زرار "حذف" واضح بالكلمة */
.work-del{width:auto;min-width:54px;height:34px;padding:0 14px;border-radius:999px;font:inherit;font-weight:700;font-size:14px;line-height:1}
@media (max-width:760px){.work-del{width:auto;height:38px;font-size:14px;padding:0 14px}}

/* معرض المشروع */
.gal{z-index:90}
.gal-tools{display:none;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.gal-add.ghost{background:transparent;color:#F5F1E9;border:1px solid rgba(226,201,160,.6)}
.gal-add.danger{background:#8b2c2c;color:#fff}
.gal-add:disabled{opacity:.55;cursor:not-allowed}
.gal-msg{margin:0 0 12px}
.gal-desc{color:rgba(245,241,233,.88);font-size:17px;line-height:2;margin:0 0 22px;white-space:pre-line}

/* حقول نموذج المشروع */
.adm-field .adm-input,.adm-field select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(198,161,107,.6);background:#fff;color:#24382F;font:inherit}
.adm-field textarea.adm-input{resize:vertical;min-height:96px}
.adm-qitem .adm-qname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#F5F1E9}
@media (max-width:760px){.adm-field .adm-input,.adm-field select{font-size:16px;padding:13px 14px}}

/* المعرض فوق الزراير العايمة، والصورة الكبيرة فوق المعرض */
.gal{z-index:150;background:rgba(20,30,25,.99)}
.lightbox{z-index:300}

/* حذف الصور داخل نموذج المشروع */
.adm-qitem button.qdel,.adm-existing-item button.qdel{background:#8b2c2c;color:#fff;border:0;border-radius:999px;padding:7px 14px;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.adm-existing{margin:4px 0 12px}
.adm-existing-title{display:block;font-size:14px;margin-bottom:8px;color:#F5F1E9}
.adm-existing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.adm-existing-item{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:1/1}
.adm-existing-item img{width:100%;height:100%;object-fit:cover;display:block}
.adm-existing-item button.qdel{position:absolute;top:6px;left:6px;padding:5px 11px;font-size:12px}

@media (max-width:760px){.hero{background:linear-gradient(180deg,rgba(14,22,18,.55),rgba(14,22,18,.35) 60%,rgba(14,22,18,.55)),url(images/bg-hero.jpg) 25% center/cover no-repeat}}
@media (min-width:761px){}

/* ===== أزرار اللغة والوضع ===== */
.tg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:999px;border:1px solid rgba(226,201,160,.5);background:rgba(245,241,233,.1);color:#F5F1E9;font:800 13px/1 'Cairo',sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
.tg-btn:hover{background:rgba(198,161,107,.28);border-color:#E2C9A0}
.tg-theme{padding:0;width:38px}
.tg-btn svg{display:block}

/* ===== English (LTR) ===== */
html[dir="ltr"] body{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',sans-serif}
html[dir="ltr"] .work-caption,html[dir="ltr"] .gal-cap{text-align:left}
html[dir="ltr"] .project-badge{right:auto;left:10px}
html[dir="ltr"] .hero{background:linear-gradient(to right,rgba(14,22,18,.62),rgba(14,22,18,.32) 38%,rgba(14,22,18,0) 65%),url(images/bg-hero.jpg) 70% center/cover no-repeat}
html[dir="ltr"] .modal-title{padding-left:0;padding-right:40px}
html[dir="ltr"] .hero-text h1{line-height:1.15}
@media (max-width:760px){html[dir="ltr"] .hero{background:linear-gradient(180deg,rgba(14,22,18,.55),rgba(14,22,18,.35) 60%,rgba(14,22,18,.55)),url(images/bg-hero.jpg) 75% center/cover no-repeat}}

/* ===== الوضع الداكن ===== */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="dark"] body{background:#0f1713;color:#e8e2d4}
html[data-theme="dark"] .services{background:linear-gradient(rgba(12,19,15,.93),rgba(12,19,15,.95)),url(images/bg-marble.jpg) center/cover}
html[data-theme="dark"] .section-title{color:#F5F1E9}
html[data-theme="dark"] .section-sub{color:#a9b3ab}
html[data-theme="dark"] .eyebrow,html[data-theme="dark"] .service-more{color:#C6A16B}
html[data-theme="dark"] .service-card,html[data-theme="dark"] .project-card,html[data-theme="dark"] .stat{background:#1a2822;box-shadow:0 14px 34px rgba(0,0,0,.45);border-color:rgba(198,161,107,.3)}
html[data-theme="dark"] .service-card h3,html[data-theme="dark"] .project-card h3{color:#F5F1E9}
html[data-theme="dark"] .service-card p{color:#a9b3ab}
html[data-theme="dark"] .service-icon{background:#24382F;color:#E2C9A0}
html[data-theme="dark"] .about{background:linear-gradient(180deg,rgba(13,20,16,.95),rgba(19,29,24,.94)),url(images/bg-about.jpg) center/cover no-repeat}
html[data-theme="dark"] .about .lower-title{background:linear-gradient(135deg,#F5F1E9 30%,#E2C9A0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme="dark"] .about-text p{color:#e5dfd0}
html[data-theme="dark"] .stat span{color:#cfd6cf}
html[data-theme="dark"] .btn-preview-chip{background:#24382F;color:#E2C9A0;border-color:#C6A16B}
html[data-theme="dark"] .btn-preview-chip:hover{background:#2E463B}
html[data-theme="dark"] .dc-tip{background:#1f2e27;color:#e8e2d4}
html[data-theme="dark"] .dc-row.bot .dc-bub{background:#1f2e27;color:#e8e2d4;border-color:rgba(198,161,107,.3)}
html[data-theme="dark"] .dc-chip{background:#1f2e27;color:#E2C9A0;border-color:rgba(198,161,107,.5)}
html[data-theme="dark"] .dc-chip:hover{background:#2a3d34}
html[data-theme="dark"] .dc-form{background:#16201b}
html[data-theme="dark"] .dc-input{background:#1f2e27;color:#F5F1E9}
html[data-theme="dark"] .footer{background:#0b110e}
html[data-theme="dark"] .dc-panel{background:#121c17;color:#e8e2d4}
html[dir="ltr"] .modal-close{left:auto;right:14px}

/* الهيرو: نفس الشكل قبل وبعد تسجيل الدخول - من غير مربع */
.hero-text,body.is-admin .hero-text,body .hero .hero-text{background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important}

/* منع الوضع الداكن التلقائي في متصفحات الموبايل - الألوان ثابتة زي اللاب */
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}

/* توقيع الشركة والمصممة (إنجليزي) */
.credits{margin:0 auto 22px;max-width:760px;text-align:center}
.credits-line{display:block;height:1px;margin:0 auto 22px;width:min(320px,70%);background:linear-gradient(90deg,transparent,#C6A16B,transparent)}
.credits-row{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap}
.credit{display:flex;flex-direction:column;gap:6px;align-items:center}
.credit-role{font-family:Georgia,'Times New Roman',serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#C6A16B}
.credit-name{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:22px;line-height:1.2;color:#F4EBDC;letter-spacing:.02em}
.credit-orn{color:#C6A16B;font-size:12px;opacity:.85}
@media (max-width:560px){.credits-row{flex-direction:column;gap:14px}.credit-orn{transform:rotate(90deg)}.credit-name{font-size:20px}}