/* Genel reset */
*{margin:0;padding:0;box-sizing:border-box;}

body,html{
  height:100%;
  font-family: 'Trebuchet MS', sans-serif;
  scroll-behavior:smooth;
  color:white;
  background:#001F3F;
}

/* HERO */
#hero{
  position:relative;
  min-height:100vh;
  width:100%;
  overflow:hidden;
}
.sea{
  width:100%;
  height:100%;
  object-fit:cover;      /* her ekrana orantılı şekilde sığar */
  position:absolute;
  top:0;left:0;
  z-index:1;
}
.fisherman{
  position:absolute;
  bottom:0;
  left:15%;
  width:20vw;           /* genişliğe göre % oranı */
  max-width:300px;
  min-width:160px;
  z-index:2;
}
.coin-name{
  position:absolute;
  top:25%;               /* biraz yukarı */
  width:100%;
  text-align:center;
  font-size:6vw;         /* ekrana göre dinamik */
  max-font-size:64px;
  min-font-size:32px;
  font-weight:bold;
  color:#7fe5f3;
  text-shadow:0 0 20px #aeeaff,0 0 40px #7fd8f9,0 0 80px #63d2fb;
  animation:glow 4s infinite alternate;
  z-index:3;
}
@keyframes glow{
  from { text-shadow:0 0 20px #28b7ea, 0 0 40px #aeeaff; }
  to   { text-shadow:0 0 60px #7ac6e2, 0 0 100px #e0f7ff; }
}

.rainbow-arc {
  position: absolute;
  top: 25%;                /* tam ekranın ortasına yakın */
  left: 50%;
  transform: translateX(-50%);   /* yatay tam merkez */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 4vw;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.2em;
  text-shadow: 0 0 20px #ffffff, 0 0 40px #aeeaff, 0 0 80px #ffffff;
}

.rainbow-arc span {
  display: inline-block;
  transform-origin: bottom center;
}


.social-icons{
  position:absolute;
  right:3vw;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:2vw;
  z-index:3;
}
.social-icons img{
  width:6vw;
  max-width:60px;
  min-width:30px;
  height:auto;
  transition: transform .3s ease;
  animation: float 3s infinite ease-in-out;
}
.social-icons img:hover{ transform: scale(1.2) rotate(5deg); }
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}
.button-row {
  position: absolute;
  bottom: 8vh;               /* Ekran altına mesafe */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;           /* küçük ekranlarda alt alta geçer */
  justify-content: center;
  align-items: center;
  gap: 20px;                 /* butonlar arası boşluk */
  z-index: 10;
}

/* CA kutusu (kısaltma + kopyalama) */
.ca-box {
  display: flex;
  align-items: center;
  max-width: 260px;
  padding: 12px 20px;
  background: rgba(0,0,0,0.35);
  border: 2px solid #fff;
  border-radius: 40px;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 0 20px rgba(0,234,255,0.6);
  transition: all 0.3s ease;
}
.ca-box:hover {
  background: rgba(0,234,255,0.2);
  border-color: #00eaff;
  box-shadow: 0 0 30px #00eaff;
}
.ca-label {
  flex: none;
  margin-right: 6px;
  font-weight: bold;
  color: #00eaff;
}
.ca-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Roadmap butonu (mevcut .scroll-down stilini buraya uyarladık) */
.scroll-down {
  display: inline-block;
  padding: 12px 30px;
  font-size: 1.2rem;
  color: #fff;
  background: rgba(0,0,0,0.35);
  border: 2px solid #fff;
  border-radius: 40px;
  text-decoration: none;
  letter-spacing: 1px;
  text-shadow: 0 0 6px #00eaff;
  box-shadow: 0 0 20px rgba(0,234,255,0.6);
  transition: all 0.4s ease;
}
.scroll-down:hover {
  background: rgba(0,234,255,0.2);
  border-color: #00eaff;
  color: #00eaff;
  box-shadow: 0 0 30px #00eaff;
}



/*ROADMAP*/

#roadmap{
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: url('images/jungle.jpg') no-repeat center center / cover;
  background-attachment: fixed;
  overflow: hidden;
}

.camp-scene{
  position: relative;
  width: 100%;
  height: 100%;
}

/* Çadır – görselde yere oturacak şekilde */
.tent{
  position: absolute;
  bottom: 5%;       /* zemine en yakın */
  left: 25%;        /* sola doğru, görselin doğal boşluğuna */
  width: 24vw;
  max-width: 320px;
  min-width: 160px;
  z-index: 2;
}

/* Kamp ateşi – tam ortada */
.campfire{
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 20vw;
  max-width: 240px;
  min-width: 140px;
  z-index: 3;
  filter: drop-shadow(0 0 50px orange) drop-shadow(0 0 80px #ff7700);
  animation: fireGlow 2s infinite alternate;
}
@keyframes fireGlow{
  from { filter: drop-shadow(0 0 40px orange) drop-shadow(0 0 60px #ff7700); }
  to   { filter: drop-shadow(0 0 80px orange) drop-shadow(0 0 100px #ff7700); }
}

/* Roadmap metin kutusu – sağ tarafta */
.roadmap-text{
  position: absolute;
  top: 15%;
  right: 8%;
  max-width: 420px;
  background: rgba(0,0,0,0.55);
  padding: 2.5vh 3vw;
  border-radius: 20px;
  z-index: 4;
  backdrop-filter: blur(6px);
  color: #fffae0;
  box-shadow: 0 0 20px rgba(255,140,0,0.6);
  text-align: left;
}
.roadmap-text h2{
  font-size: 3vw;
  min-font-size: 28px;
  max-font-size: 48px;
  margin-bottom: 20px;
  color: #ffd27f;
  text-shadow: 0 0 10px #ffb347, 0 0 20px #ff8c00;
}
.roadmap-text ul{
  list-style: none;
  font-size: 1.8vw;
  min-font-size: 16px;
  max-font-size: 24px;
  line-height: 1.8;
}
.roadmap-text li::before{
  content: "• ";
  color: #ffa500;
}

/* Ateşböceği efekt – tüm sahneye yayılır */
#fireflies{
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.firefly{
  position: absolute;
  background: radial-gradient(circle, #fffa9e 0%, rgba(255,255,255,0) 60%);
  border-radius: 50%;
  opacity: 0.8;
  width: 0.8vw; height: 0.8vw;
  min-width: 6px; min-height: 6px;
  max-width: 12px; max-height: 12px;
  animation: fly 10s linear infinite;
}
@keyframes fly{
  0%   { transform:translate(0,0);}
  50%  { transform:translate(var(--x),var(--y));}
  100% { transform:translate(0,0);}
}

/* === FULL RESPONSIVE KIRILIMLAR === */

/* 1) Büyük ekranlar (≥1440px) */
@media (min-width: 1440px) {
  body { font-size: 18px; }
  .coin-name { font-size: 5vw; }          /* hero başlık */
  .roadmap-text { max-width: 460px; }     /* roadmap kutu */
}

/* 2) Orta ekranlar (tablet & küçük laptop: 768–1439px) */
@media (max-width: 1439px) and (min-width: 768px) {
  /* Hero bölümü */
  .fisherman { left: 12%; width: 26vw; }
  .coin-name { top: 22%; font-size: 6.5vw; }
  .social-icons img { width: 8vw; }

  /* Roadmap bölümü */
  .tent { left: 22%; width: 26vw; }
  .campfire { width: 22vw; }
  .roadmap-text { max-width: 400px; right: 6%; }
  .roadmap-text h2 { font-size: 4vw; }
  .roadmap-text ul { font-size: 2vw; }
}

/* 3) Küçük ekranlar (mobil: 481–767px) */
@media (max-width: 767px) and (min-width: 481px) {
  /* Hero */
  .fisherman { left: 10%; width: 32vw; }
  .coin-name { top: 20%; font-size: 8vw; }
  .social-icons img { width: 10vw; }

  /* Roadmap */
  .tent { left: 18%; width: 32vw; bottom: 6%; }
  .campfire { width: 28vw; bottom: 6%; }
  .roadmap-text {
    max-width: 80%;
    right: 50%;
    transform: translateX(50%);
    text-align: center;
  }
  .roadmap-text h2 { font-size: 5.5vw; }
  .roadmap-text ul { font-size: 3.5vw; }
}

/* 4) Çok küçük ekranlar (≤480px) */
@media (max-width: 480px) {
  /* Hero */
  .fisherman { left: 5%; width: 40vw; }
  .coin-name { top: 18%; font-size: 9vw; }
  .social-icons img { width: 12vw; }

  /* Roadmap */
  .tent { width: 40vw; bottom: 6%; }
  .campfire { width: 36vw; bottom: 6%; }
  .roadmap-text {
    max-width: 90%;
    top: 12%;
    right: 50%;
    transform: translateX(50%);
  }
  .roadmap-text h2 { font-size: 7vw; }
  .roadmap-text ul { font-size: 4.5vw; }
}