/*
Theme Name: PVP Server List V2
Author: Onur
Description: Modern ve mobil uyumlu PVP sunucu listeleme teması.
Version: 2.0
*/

body {
  background-color: #000;
  color: #FFD700;
  font-family: 'Segoe UI', sans-serif;
}

body h1 {
	font-size:22px;
	margin-bottom:10px;
}

body p {
	margin-bottom:10px;
}

a {
  color: #FFD700;
}



/* Alevli hover efekti */
.nav-link {
  position: relative;
  display: inline-block;
  color: #facc15; /* gold */
  transition: color 0.3s ease;
  font-size: 16px;
  font-weight:550;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0%;
  height: 2px;
  background: linear-gradient(to right, #ffcc00, #ff0000, #ffcc00);
  transition: width 0.4s ease;
}

.nav-link:hover {
  color: #fff176; /* açık altın */
  text-shadow: 0 0 8px #ff5722, 0 0 15px #ffc107;
}

.nav-link:hover::after {
  width: 100%;
}

.shiny-button {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.shiny-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.6),
    rgba(255, 255, 255, 0.2)
  );
  transform: skewX(-25deg);
  z-index: 1;
}

.shiny-button:hover::before {
  animation: shine 0.8s ease-in-out forwards;
}

@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* Blog içerik konteynerinizin class’ı varsa onu kullanın; örneğin .prose içinde geçerli olsun */
.prose h2 {
  font-size: 1.75rem;    /* ≈ text-2xl */
  line-height: 2rem;     /* ≈ leading-8 */
  margin-bottom: 1rem;   /* ≈ mb-4 */
}

.prose h3 {
  font-size: 1.5rem;     /* ≈ text-xl */
  line-height: 1.75rem;  /* ≈ leading-7 */
  margin-bottom: 0.75rem;/* ≈ mb-3 */
}

.prose h4 {
  font-size: 1.25rem;    /* ≈ text-lg */
  line-height: 1.5rem;   /* ≈ leading-6 */
  margin-bottom: 0.5rem; /* ≈ mb-2 */
}

/* İsterseniz mobil için biraz daha küçük ayar da ekleyebilirsiniz */
@media (max-width: 640px) {
  .prose h2 { font-size: 1.5rem; margin-bottom: 0.75rem; }
  .prose h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
  .prose h4 { font-size: 1.125rem; margin-bottom: 0.5rem; }
}

/* .prose içindeki paragraflar */
.prose p {
  margin-bottom: 1rem;        /* alt boşluk */
  line-height: 1.75rem;       /* satır yüksekliği */
  font-size: 1rem;            /* metin boyutu */
}

/* .prose içindeki listeler */
.prose ul {
  margin-top: 1rem;           /* üst boşluk */
  margin-bottom: 1rem;        /* alt boşluk */
  padding-left: 1.25rem;      /* girinti */
  list-style-type: disc;      /* madde işareti */
}

/* .prose içindeki liste öğeleri */
.prose li {
  margin-bottom: 0.5rem;      /* her madde altı boşluk */
  line-height: 1.6rem;        /* madde satır yüksekliği */
  color: #FCD34D;             /* sarıya yakın madde metni */
}

/* Madde işareti rengini Tailwind uyumlu yap */
.prose ul li::marker {
  color: #FBBF24;             /* marker rengi */
}

/* Mobilde biraz daraltılmış boşluklar */
@media (max-width: 640px) {
  .prose p {
    margin-bottom: 0.75rem;
    line-height: 1.6rem;
  }
  .prose ul {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    padding-left: 1rem;
  }
  .prose li {
    margin-bottom: 0.5rem;
    line-height: 1.5rem;
  }
}

.notification-bar {
  position: relative;
  width: 100%;
  z-index: 9999;
  font-size: 0.9rem;
  margin-bottom: 1rem;
font-weight: 700;
}
.notification-bar .notif-close {
  background: transparent;
  border: none;
  cursor: pointer;
}
@media (max-width: 640px) {
  .notification-bar {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
	margin-bottom: 1rem;
  }
  .notification-bar img {
    
  }
}
/* Butona tıklarken hafif opacity efekti */
#back-to-top:active {
  opacity: 0.8;
}