/* تأثير كتاب ورقي (Hard Cover) لغلاف الكتاب */
/* هذا التأثير يضيف منظور ثلاثي الأبعاد وظهر كتاب بسيط مع ظل */
.hardcover {
  position: relative;   /* تمكين تموضع العناصر الزائفة بالنسبة للغلاف */
  display: inline-block;/* إبقاء العنصر بمقاس المحتوى دون كسر السياق */

}
.hardcover .book-cover {
  display:block;                                     /* إظهار الغلاف كعنصر بلوك */
  box-shadow: 0 4px 8px rgba(0,0,0,0.45);            /* ظل لإعطاء عمق */
  border:3px solid rgba(0,0,0,0.5);                  /* إطار داكن بارز */
  border-radius:2px;                                 /* حواف بسيطة مستديرة */

  transform-origin: left center;                     /* نقطة ارتكاز الدوران على اليسار */
  transition: transform 0.3s ease;                   /* حركة سلسة عند التحويم */
}
/* ظهر الكتاب */
.hardcover::after, .hardcover::before {
  content:"";                                                     /* إنشاء عناصر زخرفية */
  position:absolute;                                               /* تموضع مطلق بالنسبة للغلاف */
  background: linear-gradient(to bottom, #ffffff 0%, #dcdcdc 100%);/* تدرج لتمثيل الصفحات */
  pointer-events:none;                                             /* منع التفاعل مع المؤشر */
}

/* الحافة اليمنى (سمك الكتاب) */
.hardcover::after {
  top:4px;                                       /* محاذاة الحافة العلوية مع هامش صغير */
  right:-18px;                                   /* إزاحة لتمثيل سمك الكتاب */
  width:18px;                                    /* سمك الجزء الجانبي */
  height:calc(100% - 8px);                       /* مطابقة ارتفاع الغلاف */
  border-left:2px solid rgba(0,0,0,0.2);         /* خط يفصل الحافة */
  box-shadow: inset 0 0 4px rgba(0,0,0,0.3);     /* ظل داخلي لإبراز العمق */
}
/* الحافة السفلى */
.hardcover::before {
  left:3px;                                    /* إزاحة للداخل قليلاً */
  bottom:-9px;                                 /* خفض لتمثيل قاعدة الكتاب */
  width:calc(100% - 9px);                      /* مطابقة عرض الغلاف مع تعويض الحافة */
  height:9px;                                  /* سمك الحافة السفلية */
  border-top:1px solid rgba(0,0,0,0.2);        /* خط علوي يبرز الحافة */
}

/* عند التحويم افرد الغلاف قليلاً */