.hexagram{
    display:flex;
    flex-direction:column;
    gap:15px; /* فاصله بین خطوط */
}

.hex-line{
    display:flex;
    justify-content:center;
}

/* ===== YANG ===== */
.yang{
    width:100px;
    height:20px;
    background:#000; /* مشکی */
}

/* ===== YIN ===== */
.yin{
    display:flex;
    gap:20px;
}

.yin::before,
.yin::after{
    content:'';
    width:40px;
    height:20px;
    background:#000; /* مشکی */
}

/* ===== PLACEHOLDER (قبل از پرتاب) ===== */
.placeholder{
    opacity:0.25;
    background:#999 !important;
}

.placeholder::before,
.placeholder::after{
    background:#999 !important;
}

/* ===== CHANGING YANG ===== */
.yang.changing{
    background:red;
    box-shadow:0 0 8px red;
}

/* ===== CHANGING YIN ===== */
.yin.changing::before,
.yin.changing::after{
    background:red;
    box-shadow:0 0 8px red;
}

.hexagram{
    display:flex !important;
    flex-direction:column !important;
    gap:15px !important;
}

.hexagrams{
    display:flex;
    justify-content:center;
    gap:15px;
}
#hex1,
#hex2{
    display:flex;
    flex-direction:column;
    gap:15px; /* فاصله داخلی هر هگزگرام */
}
.question-box{
    width: 100%;        /* عرض کامل */
    max-width: 800px;   /* حداکثر عرض */
    height: 150px;      /* ارتفاع */
    border-radius: 25px; /* گردی گوشه‌ها */
    border: 2px solid #333;
    padding: 20px;
    font-size: 16px;
    background: #f9f9f9;
    resize: none;
    outline: none;
    transition: 0.3s;
}

.question-box:focus{
    border-color: #000;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
   }
.category-select{
    width: 150px;
      appearance: none;
    outline: none;
    transition: 0.3s;
      appearance: none;
  -webkit-appearance: none;
   font-size: 18px;
  padding: 5px 10px;
  background-color: #FFFFFF;
  border: 1px solid #C4D1EB;
  border-radius: 10px;
  color: #000000 !important;
  cursor: pointer;
  outline: none;
  box-shadow: 3px 3px 2px 0px #E2E2E2;

    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: left 10px center;
}

.category-select:focus{
 background: #F2F2F2;
  border: 1px solid #5A7EC7;
  border-radius: 5px;
}
.category-select::after {
  content: "";
  position: absolute;
  pointer-events: none;
  top: 50%;
  right: 10px;
  transform: translate(0, -50%);
  width: 12px;
  height: 12px;
  background-color: #000000;
  clip-path: polygon(8% 17%, 0% 25%, 50% 84%, 100% 25%, 92% 17%, 50% 65%);
}
#iching-app{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}
.coins{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:10px;          /* فاصله بین سکه‌ها */
    margin:20px 0;
    flex-wrap:nowrap;  /* جلوگیری از رفتن زیر هم */
}

.coin{
    width:90px;
    height:80px;
    margin:0;
    border-radius: 50px !important;
}
@media (max-width: 768px){
    .coins{
        flex-direction:row !important;
        flex-wrap:nowrap !important;
    }


/* wrapper هر هگزاگرام + شماره‌ها */
.hex-wrapper{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

/* ستون شماره‌ها */
.line-numbers{
    display:flex;
    flex-direction:column;
    gap:15px; /* فاصله بین دایره‌ها */
}

/* دایره‌ها */
.circle{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ddd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:bold;
}
.hex-container{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.hex-label{
    margin-top:10px;
    font-size:14px;
    font-weight:600;
    color:#333;
}

#coin-btn{
    background: linear-gradient(135deg, #c0392b, #e74c3c); /* گرادینت قرمز */
    color: #fff;
    font-weight: bold;        /* بولد شدن متن */
    font-size: 16px;
    padding: 12px 25px;
    border: none;
    border-radius: 25px;      /* گوشه گرد */
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#coin-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

#coin-btn:active{
    transform: scale(0.97);
}
/* ===== تریگرام ===== */

.trigram-section{
    display:flex;
    justify-content:center;
    gap:60px;
    margin-top:40px;
}

.trigram-block{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.trigram{
    display:flex;
    flex-direction:column;
    gap:15px; /* فاصله خطوط */
}

.trigram-label{
    margin-top:10px;
    font-weight:bold;
}


/* حالت عادی دکمه */
.magic-btn {
    padding: 15px 30px;
    font-size: 18px;
    transition: all 0.5s ease;
}
/* کانتینر داخل دکمه */
#yin-container {
  width: 120px;
  height: 120px;
  margin: 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.yin-symbol {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: linear-gradient(to right, #fff 50%, #000 50%);
  animation: rotation 6s ease-in-out infinite;
}

.yin-symbol::before,
.yin-symbol::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.yin-symbol::before {
  top: 0;
  background: #fff;
  
}

.yin-symbol::after {
  bottom: 0;
  background: #000;

}

@keyframes rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.magic-btn.yin-active .yin-symbol::before,
.magic-btn.yin-active .yin-symbol::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;      /* کوچکتر شد */
  height: 36px;     /* کوچکتر شد */
  border-radius: 50%;
}

.magic-btn.yin-active .yin-symbol::before {
  top: 0;
  background: #fff;
  box-shadow: 0 18px 0 #000;  /* نصف ارتفاع جدید */
}

.magic-btn.yin-active .yin-symbol::after {       
  border-radius: 50%;
    transform: translateY(-50%);
  z-index: 2;   /* مهم‌ترین خط */
}

.white-dot {
 right: 47px;
background: #000;
top: 25px;
}

.black-dot {
  right: 43px;  /* داخل نیمه سفید */
  background: #fff;
  top: 75%;
}
.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
 
  transform: translateY(-50%);
  z-index: 2;
}