/* =========================================================
   RESET & SAFETY
========================================================= */
.dashboard,
.dashboard *{
  box-sizing:border-box;
}

/* =========================================================
   DASHBOARD (CENTER AREA)
========================================================= */
.dashboard{
  width:100%;
  text-align:center;
}

/* title */
.dash-title{
  font-size:28px;
  margin-bottom:20px;
  font-weight:900;
  letter-spacing:-0.4px;
  /* Dinamik Amerikan Kırmızısı ve Mavisi Gradyan */
  background: linear-gradient(to right, #B22234, #3C3B6E);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* sections */
.dash-section{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:26px 0;
}

/* clickable dashboard item */
.dash-item{
  padding:18px 20px;
  border-radius:14px;
  border:1px solid #3C3B6E; /* Amerikan Mavisi Çerçeve */
  cursor:pointer;

  font-weight:700;
  font-size:16px;
  color:#3C3B6E; /* Okunaklı Lacivert Metin */

  /* Temiz Beyaz-Mavi Işıltılı Arkaplan */
  background: linear-gradient(135deg, #ffffff, #f0f4f8);
  box-shadow: 0 3px 8px rgba(60, 59, 110, 0.1);
  /* Sadece renk ve gölge geçişi (Konum sabit!) */
  transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.dash-item:hover{
  background: #ffffff;
  border-color: #B22234; /* Hoverda Amerikan Kırmızısı */
  color: #B22234;
  box-shadow: 0 8px 16px rgba(178, 34, 52, 0.15);
  /* Konum sabit! */
}

/* buttons row */
.dash-buttons{
  display:flex;
  gap:14px;
  justify-content:center;
  margin-top:26px;
  flex-wrap:wrap;
}

/* =========================================================
   TOPBAR SAFETY
========================================================= */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
}

/* =========================================================
   MODAL FIX (NO DOUBLE CLICK BUG)
========================================================= */
.backdrop{
  pointer-events:none;
  display:none;
}

.backdrop.open{
  pointer-events:auto;
  display:flex;
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:640px){
  .dash-title{
    font-size:24px;
  }

  .dash-item{
    font-size:15px;
    padding:16px;
  }
}

/* =========================================================
   WELCOME TEXT (DINAMIK GRADYAN & EFEKT)
========================================================= */
.dash-title {
  font-size: 28px;
  margin-bottom: 20px;
  font-weight: 900;
  letter-spacing: -1px;
  
  /* Amerikan Bayrağı Renklerinde Akış (Kırmızı-Beyaz-Mavi) */
  background: linear-gradient(
    45deg, 
    #B22234, 
    #3C3B6E, 
    #B22234, 
    #3C3B6E
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Yazının arkasına Amerikan Mavisi Glow efekti */
  filter: drop-shadow(0 4px 8px rgba(60, 59, 110, 0.2));
  
  /* Renklerin kendi içinde akması için yumuşak bir animasyon */
  animation: welcomeFlow 5s ease infinite;
}

/* Renk Geçiş Animasyonu */
@keyframes welcomeFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}