@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=Noto+Kufi+Arabic:wght@100..900&family=Playpen+Sans:wght@100..800&family=Rubik:ital,wght@0,300..900;1,300..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
/* البريلودر يغطي الشاشة بالكامل */
body.no-scroll {
    overflow: hidden;
    height: 100vh;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #0d0d0d;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999; /* تأكد أنه فوق جميع العناصر */
}

/* سبينر احترافي */
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top: 5px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* حركة الدوران */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* عند اختفاء البريلودر */
.preloader-hidden {
    opacity: 0;
    transition: opacity 0.6s ease-out;
    pointer-events: none;
}
.hr_img{
  width: 148px;
  margin: 6rem auto;
}
body.light-mode::before {
  --size: 45px;
  --line: color-mix(in lch, canvasText, transparent 85%);
  content: '';
  height: 100vh;
  width: 100vw;
  position: absolute;
  background: linear-gradient(
        90deg,
        #55527C 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(#55527C 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  -webkit-mask: linear-gradient(-25deg, transparent 30%, red);
          mask: linear-gradient(-25deg, transparent 30%, red);
  top: 0;
  transform-style: flat;
  z-index: -1;
  pointer-events: none;
}

:root {
    --artic_bg: rgba(30, 30, 30, 0.5);
    --artic_border: 1px solid #111;
    --node_bg: rgb(30, 30, 30);
    --node_link: #ffd700;
        --artic_shadow: 4px 8px 24px rgba(0, 0, 0, 0.25);
    --bg-gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
    --bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, .251) 3%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
    --bg-gradient-yellow1: linear-gradient(to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
    --bg-gradient-yellow2: linear-gradient(135deg, hsla(45, 100%, 71%, .251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
    --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
    --text-gradient-yellow: linear-gradient(to right, #58a6ff, rgba(167, 139, 250, 1));

    --silder_img: url(../img/banner.gif);
    --jet: hsl(0, 0%, 22%);
    --onyx: hsl(240, 1%, 17%);
    --eerie-black1: hsl(240, 2%, 13%);
    --eerie-black2: hsla(240,1.6%,12%,0.266);
    --body_bg: hsl(0, 0%, 7%);
    --white1: hsl(0, 0%, 100%);
    --white2: hsl(0, 0%, 98%);
    --orange-yellow-crayola: hsl(45, 100%, 72%);
    --vegas-gold: hsl(45, 54%, 58%);
    --light-gray: hsl(0, 0%, 84%);
    --light-gray70: hsla(0, 0%, 84%, .7);
    --bittersweet-shimmer: hsl(0, 43%, 51%);
    --perper: rgba(167, 139, 250, 1);
    --blue_ball: #1d4ed8;

    --ff-poppins: 'Noto Kufi Arabic', sans-serif;

    --fs1: 24px;
    --fs2: 18px;
    --fs3: 17px;
    --fs4: 16px;
    --fs5: 15px;
    --fs6: 16px;
    --fs7: 13px;
    --fs8: 12px;

    --fw300: 300;
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;

    --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .25);
    --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .25);
    --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .25);
    --shadow4: 0px 25px 50px hsla(0, 0%, 0%, .15);
    --shadow5: 0px 24px 80px hsla(0, 0%, 0%, .25);

    --transition1: .25s ease;
    --transition2: .5s ease-in-out;
}
body.light-mode {
  --node_bg: #ffd7aa;
  --node_link: #000;
  --light-gray: #333;
  --light-gray70: #777;
  --shadow1: 0px 24px 80px #8EB486;
  --shadow2: transparent;
  --shadow3: transparent;
    --orange-yellow-crayola: #997C70;
    --vegas-gold: #997C70;
    --artic_bg: #F8E9DA;
    --artic_border: 1px solid #555;
    --artic_shadow: transparent;
    --bg-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 90%) 3%, hsl(0, 0%, 100%) 97%);
    --bg-gradient-jet: linear-gradient(to bottom right, hsla(0, 0%, 80%, .251) 3%, hsla(0, 0%, 100%, 0) 100%), hsl(0, 0%, 95%);
    --text-gradient-yellow: linear-gradient(to right, #8EB486, #8EB486);

    --jet: #111;
    --silder_img: url(../banner/spirit_of_spring.png);
    --onyx: hsl(0, 0%, 95%);
    --eerie-black1: hsl(0, 0%, 98%);
    --eerie-black2: hsla(0,0%,99%,0.325);
    --body_bg: #f4dec7;
    --white1: hsl(0, 0%, 10%);
    --white2: hsl(0, 0%, 20%);
    --blue_ball: transparent;
}
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {text-decoration: none; }

li {list-style: none; }

img, ion-icon, a, button, time, span { display: block; }

button {
    font: inherit;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

input, textarea {
    display: block;
    width: 100%;
    background: none;
    font: inherit;
}

::selection {
    background: var(--orange-yellow-crayola);
    color: var(--body_bg);
}

:focus { outline-color: var(--orange-yellow-crayola); }

html {
  scroll-behavior: smooth;
  font-family: var(--ff-poppins);
  }

body {
background: var(--body_bg); 
}
.home_text{
line-height: 1.6;
}
header{
  position: relative;
}
main {
    margin: 15px 12px;
    margin-bottom: 75px;
    min-width: 259px;
}
.bmo{
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
}
.sidebar, article {
    background: var(--artic_bg); 
    border: var(--artic_border);
    border-radius: 20px;
    box-shadow: var(--artic_shadow);
    z-index: 1;
    padding: 15px;
}
    .sidebar.active { max-height: 424px; }

.separator {
    width: 100%;
    height: 1px;
    background: var(--jet);
    margin: 16px 0;
}

.icon-box {
    position: relative;
    background: var(--border-gradient-onyx);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: var(--orange-yellow-crayola);
    box-shadow: var(--shadow1);
    z-index: 1;
}



    .icon-box::before {
        content: '';
        position: absolute;
        inset: 1px;
        background: var(--eerie-black1);
        border-radius: inherit;
        z-index: -1;
    }

    .icon-box ion-icon { --ionicon-stroke-width: 35px; }

article { display: none; }

    article.active { 
        display: block;
        animation: fade .5s ease backwards;
    }

        @keyframes fade {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }

.h2, .h3, .h4, .h5 { 
    color: var(--white2);
}

    .h2 { font-size: var(--fs1); }
    .h3 { font-size: var(--fs2); }
    .h4 { font-size: var(--fs4); }
    .h5 { 
        font-size: var(--fs7);
        font-weight: var(--fw500); 
    }

.article-title {
    position: relative;
    padding-bottom: 7px;
    display: flex;
    flex-direction: row;
}

    .article-title::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 3px;
        background: var(--text-gradient-yellow);
        border-radius: 3px;
    }

.has-scrollbar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.has-scrollbar::-webkit-scrollbar-track {
    background: var(--onyx);
    border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
    background: var(--orange-yellow-crayola);
    border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button { width: 20px; }

.content-card {
    position: relative;
    background: var(--border-gradient-onyx);
    padding: 15px;
    padding-top: 45px;
    border-radius: 14px;
    box-shadow: var(--shadow2);
    cursor: pointer;
    z-index: 1;
}

    .content-card::before {
        content: '';
        position: absolute;
        inset: 1px;
        background: var(--bg-gradient-jet);
        border-radius: inherit;
        z-index: -1;
    }

/*ASIDE - SIDEBAR*/

.sidebar {
    position: relative;
    margin-bottom: 15px;
    max-height: 112px;
    overflow: hidden;
    padding: 15px;
    transition: var(--transition2);
    background-size: cover;
    background-position: right;
}

.sidebar::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--silder_img);
    background-size: 100% 100%; /* يجعل الصورة تمتد لكامل العنصر */
    background-position: right;
    filter: blur(2px);
    z-index: -1;
}
.sidebar-info {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
  
}

.border{
  border: 1px dashed  #ededed84;
  border-radius: 8px;
  padding: 4px;
}
.border2{
  border: 1px dashed  #ededed84;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 8px;
  width: fit-content;
}
/* avatar with shadow
.avatar-box {
    background: var(--bg-gradient-onyx);
    border-radius: 20px;

}
*/
.avatar-box {
    border-radius: 520px;
    padding: 2px;
    overflow: visible;
    transform: scaleX(-1);
}
.home_bagdes {
  font-size: .9em;
}
:hover.home_bagdes::after {
  content: attr(aria-label);
  width: max-content;
  height: 1.6rem;
  position: absolute;
  bottom: 1rem;
  background-color: beige;
  color: #000;
  padding: 4px 10px 6px;
  border-radius: 5px;
  z-index: 999;
  font-size: .8em !important;
  white-space: nowrap;
  max-width: 150px
}

:hover.home_bagdes::before {
  content: "";
  position: absolute;
  bottom: 1.6rem;
  transform: translate(40%, 0%);
  border: 8px solid transparent;
  border-top-color: beige
}

a:hover.home_bagdes::after {
  top: 1.2rem
}


.home_bagdes::before {
  bottom: 22rem
}

.logo {
    border-radius: 520px;
    width:80px
}
.avatar-box-cover{
  position: absolute;
  top: -6px;
  right: -6px;
  width:96px
}

.info-content .name {
    color: var(--white2);
    font-size: var(--fs3);
    font-weight: var(--fw500);
    letter-spacing: -0.25px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
}

.home_bagdes_continer {
    color: var(--white1);
    background: var(--artic_bg);
    border: var(--artic_border);
    font-size: var(--fs8);
    font-weight: var(--fw300);
    width: max-content;
    padding: 3px 12px;
    border-radius: 8px;
    display: flex;
    gap: 4px;
}

.info-more-btn {
    position: absolute;
    top: -15px;
    left: -15px;
    border-radius: 15px 0;
    font-size: 20px;
    color: var(--orange-yellow-crayola);
    padding: 10px ;
    transition: var(--transition1);
    z-index: 1;
}


    
        .info-more-btn:hover::before, .info-more-btn:focus::before { background: var(--bg-gradient-yellow2); }

    .info-more-btn span { display: none; }

.sidebar-info-more {
    opacity: 0;
    visibility: hidden;
    transition: var(--transition2);
}

    .sidebar.active .sidebar-info-more {
        opacity: 1;
        visibility: visible;
    }
    
.blur {
    position: absolute;
    filter: blur(80px); /* بديل للـ box-shadow */
    background: var(--blue_ball);
    width: 200px; /* عرض محدد */
    height: 200px;
    border-radius: 50%;
    opacity: 0.7;
    z-index: -100;
}

.blur2 {
    position: absolute;
    left: 0;
    filter: blur(50px);
    background: var(--blue_ball);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    opacity: 0.7;
    z-index: -100;
}
.blur3 {
content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7.5em;
  height: 7.5em;
  border-radius: 56px;
  background: #f9f9fb;
  box-shadow: 0px 0px 100px rgba(193, 119, 241, 0.8),
    0px 0px 100px rgba(135, 42, 211, 0.8), inset #9b40fc 0px 0px 40px -12px;
  z-index: -1;

  /* تطبيق الدوران المستمر */
  animation: spin 12s linear infinite;
}

/* in this website */
.itw {
    width: 100; /* يأخذ العرض المتاح */
    height: 600px; /* ارتفاع ثابت */
    background-color: #21212121;
    border: 1px solid #444;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    padding: 0;
}
svg {
    width: 100%;
    height: 100%;
}
        .link {
            fill: none;
            stroke: var(--node_link);
            stroke-width: 2;
        }
        .draw_link{
          color: #82aaff;
          font-size: 12px;
        }
        .node text {
            font-size: 14px;
            fill: var(--white2);
            text-anchor: middle;
            pointer-events: none;
        }
        .node circle {
            fill: var(--node_bg);
            stroke: var(--node_link);
            stroke-width: 2;
            cursor: grab;
            transition: 0.3s;
        }
        .node circle:hover {
            fill: #ffd7002f;
            stroke: white;
        }
        .main-node rect {
            fill: var(--node_bg);
            stroke: var(--node_bg);
            stroke-width: 2;
            rx: 30;
            ry: 30;
            cursor: grab;
            transition: 0.3s;
        }
        .main-node rect:hover {
            fill: #ffd700a8;
            stroke: white;
        }
        /*note section*/
        .note_section{
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          padding: 4px;
        }
        .note{
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;
          gap: 4px;
          padding: 4px 8px;
          font-size: 12px;
          border: 1px solid #333;
          border-radius: 8px;
          color: var(--white2);
        }
        .check{
  font-size: 16px;
  color: #009EF7;
  padding: 0;
  margin: 6px 4px 0;
}
/* inset tage */
.code-box {
        background-color: #111;
        border-radius: 8px;
        width: 100%;
        max-width: 600px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        position: relative;
        cursor: grab;
        user-select: none;
        border-left: 4px solid #58a6ff;
        padding: 12px;
        margin: 1rem 0 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .update_header {
        color: #f4a261;
    }
 .header {
   direction: flex;
   flex-direction: row;
   direction: ltr;
            background: #333;
            padding: 8px;
            font-weight: bold;
            border-radius: 5px 5px 0 0;
            font-size: 14px;
            color: #ffbd2e;
        }
    .update-info {
      direction: ltr;
        font-size: 14px;
        color: #c9d1d9;
    }
    .update_line{
      gap: 4px;
      display: flex;
    }

    /* تأثيرات Syntax Highlighting */
    .keyword { color: #ff7b72; }  /* let, const, function */
.string { 
  direction: rtl;
  color: #a5d6ff; } 
  .comment { color: #8b949e; }  /* // تعليقات */
    .variable {
      color: #d2a8ff; } /* اسم المتغير */
    .bracket { color: #c9d1d9; }  /* {} و [] */
    .update_margin1{
      margin-left: 2.6rem;
      
    }
    .update_margin2{
      margin-left: 4.8rem;
      
    }
    .update_margin3{
      margin-left: 3rem;
      
    }