/* =========================
   DÜZELTİLMİŞ TAM style.css
   (navbar, ortalanmış ana içerik, footer, electric border)
   ========================= */

/* Root / vars */
:root{
  --bg-dark:#0b0b0b;
  --bg-light:#f2f2f2;
  --text-dark:#ffffff;
  --text-light:#111111;
  --accent:#ffb84d;
}

/* Reset + temel */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg-dark);
  color:var(--text-dark);
  transition:background .35s,color .35s;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:hidden;
}

/* Canvas arka plan (varsa) */
#bgCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity .3s}
body.light #bgCanvas{opacity:0}

/* -------- NAVBAR (üst sabit) -------- */
nav{
  position:fixed;
  top:0;left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 24px;
  background:rgba(10,10,10,0.45);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.04);
  z-index:30;
}
nav .logo{font-weight:900;font-size:18px;color:var(--accent);letter-spacing:1px}
nav ul{list-style:none;display:flex;gap:18px;align-items:center}
nav a{color:rgba(255,255,255,0.92);text-decoration:none;font-weight:600}
nav a:hover{color:var(--accent)}

/* Wallet & mode */
.wallet-btn, .tracker-btn{padding:8px 14px;border-radius:10px;border:0;background:linear-gradient(180deg,#ffd86b,#ffb703);color:#111;font-weight:800;cursor:pointer;box-shadow:0 8px 20px rgba(255,160,40,0.12)}
.mode-toggle{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.04);cursor:pointer;font-weight:700;color:rgba(255,255,255,0.9)}

/* Hamburger (mobile) */
.hamburger{display:none;flex-direction:column;justify-content:space-between;width:24px;height:18px;cursor:pointer}
.hamburger span{display:block;height:3px;border-radius:3px;background:#fff;transition:all .25s}
.hamburger.active span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
body.light .hamburger span{background:#333}

/* -------- MAIN / WRAP (ORTALAMA DÃœZELTMESÄ°) -------- */
.wrap{
  width:100%;
  max-width:980px;
  margin:0 auto;
  padding:24px;
  z-index:5;
  display:flex;
  flex-direction:column;
  align-items:center;      /* yatay ortala */
  justify-content:center;  /* dikey ortala (esnek yüksekliğe bağlı) */
  flex:1;                  /* footer'ı aşağı it */
  
  margin-top:84px;         /* fixed nav altında boşluk */
  text-align:center;
}

/* Logo / başlık */
.logo-center{
  font-weight:900;
  font-size:clamp(48px,10vw,110px);
  color:var(--accent);
  letter-spacing:6px;
  text-transform:uppercase;
  filter:drop-shadow(0 10px 34px rgba(255,140,40,0.22));
}

/* Bilgi kutusu (orta) */
.info-box{
  margin-top:18px;
  padding:18px 24px;
  border-radius:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,0.95);
  max-width:760px;
  width:100%;
  transition:background .28s,color .28s,border .28s,transform .18s;
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
}

/* Eylem butonları */
.controls{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.btn{text-decoration: none;padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.95);font-weight:800;cursor:pointer;transition:transform .14s}
.btn-primary{text-decoration: none;background:linear-gradient(180deg,#ffd86b,#ffb703);color:#111;box-shadow:0 10px 30px rgba(255,160,40,0.12)}
.btn:hover{transform:translateY(-2px)}
body.light .btn{text-decoration: none;background:rgba(0,0,0,0.04);color:#111;border-color:rgba(0,0,0,0.06)}
body.light .btn-primary{text-decoration: none;background:linear-gradient(180deg,#ffb703,#ff9500);color:#111}

/* -------- PROJECT GRID & CARD (ELECTRIC BORDER CSS-ONLY) -------- */
.projects-grid{
  margin-top:40px;
  width:100%;
  max-width:1000px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:28px;
  padding:0 12px;
}

/* Card base */
.project-card{
  position:relative;
  padding:26px 20px;
  border-radius:14px;
  background:rgba(12,12,18,0.92);
  color:#fff;
  text-align:center;
  overflow:visible; /* halo dışarı taşsın */
  box-shadow:0 10px 24px rgba(0,0,0,0.6);
  isolation:isolate;
}

/* Electric border (CSS only): dış halo hareketi, içi maskelenmiş */
.project-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + 10px);   /* eskiden +36px idi */
  height: calc(100% + 10px);  /* kenar dışına az taşsın */
  border-radius: 14px;
  background: linear-gradient(
    120deg,
    #ff6600,
    #ff00aa,
    #00f0ff,
    #ffd000,
    #ff6600
  );
  background-size: 400% 400%;
  filter: blur(6px) saturate(120%);
  animation: electricMove 5s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9; /* çizgiyi belirginleştir */
}

.project-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;                 /* artık tam oturuyor */
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    rgba(12, 12, 18, 0.96),
    rgba(12, 12, 18, 0.92)
  );
  z-index: 1;
  pointer-events: none;
}

/* içerik üst seviye */
.project-card > *{position:relative;z-index:2}
.project-card h2{font-size:1.15rem;margin-bottom:8px}
.project-card p{opacity:0.9;line-height:1.45}

/* hafif parlaklık azaltma (gece modu aşırı parlaksa) */
@keyframes electricMove{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* Light mode ayarları */
body.light{
  background:var(--bg-light);
  color:var(--text-light);
}
/* Menü yazı rengi düzeltmesi */
body.light nav {
  background: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light nav a {
  color: #222; /* okunabilir koyu renk */
}

body.light .mode-toggle {
  color: #222;
  background: rgba(0, 0, 0, 0.06);
}

body.light .wallet-btn {
  box-shadow: 0 6px 16px rgba(255, 170, 0, 0.2);
}

body.light .logo{color:var(--accent)}
body.light .info-box{background:rgba(0,0,0,0.04);color:#111;border-color:rgba(0,0,0,0.06);box-shadow:0 6px 14px rgba(0,0,0,0.04)}
body.light .project-card{background:rgba(255,255,255,0.92);color:#111}
body.light .project-card::before{background:linear-gradient(120deg,#ffd070,#ff98b8,#9ef0ff,#fff176,#ffd070);filter:blur(10px);opacity:0.6}
body.light .project-card::after{background:linear-gradient(180deg,rgba(255,255,255,0.98),rgba(255,255,255,0.95))}

/* responsive: küçük ekran */
@media(max-width:820px){
  .wrap{margin-top:72px;padding:18px}
  .logo-center{font-size:clamp(36px,12vw,64px);letter-spacing:3px}
  nav ul{gap:12px}
}

/* mobile hamburger: nav çözümlenmesi */
@media(max-width:700px){
  nav ul{position:absolute;top:79px;left:0;width:100%;flex-direction:column;align-items:center;background:rgba(10,10,10,0.95);gap:12px;max-height:0;overflow:hidden;transition:max-height .25s ease}
  body.light nav ul{position:absolute;top:79px;left:0;width:100%;flex-direction:column;align-items:center;background:rgba(255,255,255,0.98);color:#111;border-color:rgba(0,0,0,0.06);gap:12px;max-height:0;overflow:hidden;transition:max-height .25s ease}
  nav ul.open{max-height:320px;padding:12px 0}
  body.light nav ul.open{max-height:320px;padding:12px 0;background:rgba(255,255,255,0.98);color:#111;border-color:rgba(0,0,0,0.06)}
  .hamburger{display:flex}
}

/* Modal (genel) */
.modal-backdrop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:50}
.modal-backdrop.open{display:flex}
.modal{background:rgba(18,18,20,0.96);padding:18px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);width:min(92%,420px);color:#fff}
body.light .modal{background:rgba(255,255,255,0.98);color:#111;border-color:rgba(0,0,0,0.06)}


/* ==== FOOTER (x402fun – Tüm Sayfalar Aynı) ==== */
footer {
  width: 100%;
  background: rgba(12, 12, 14, 0.85);
  color: var(--text-dark);
  padding: 18px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 70px;
  z-index: 5;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

.footer-left span.brand {
  color: var(--accent);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.footer-right a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s;
}

.footer-right a:hover {
  color: var(--accent);
}

.footer-bottom {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  opacity: 0.85;
}

/* Light mode footer */
body.light footer {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-light);
  border-color: rgba(0, 0, 0, 0.06);
}

body.light .footer-right a {
  color: var(--text-light);
}

body.light .footer-left span.brand {
  color: var(--accent);
}


/* reduced-motion desteÄŸi */
@media(prefers-reduced-motion:reduce){
  .project-card::before{animation:none;filter:blur(10px)}
  *{scroll-behavior:auto}
}
/* ===== Contact Section ===== */
.contact-section {
  max-width: 650px;
  margin: 120px auto 80px;
  text-align: center;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-section h1 {
  font-size: 2.4rem;
  margin-bottom: 16px;
  color: var(--accent);
}

.contact-desc {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 500px;
}

/* ===== Contact Form ===== */
.contact-form {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 16px;
  padding: 32px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.form-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-muted);
}

/* Input / Textarea stilleri */
.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
  transition: all 0.25s ease;
  font-family: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(255, 132, 0, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

/* ===== Submit Button ===== */
.send-btn {
  background: linear-gradient(120deg, var(--accent), #ff6b00);
  border: none;
  border-radius: 10px;
  padding: 14px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 0 12px rgba(255, 132, 0, 0.3);
}

.send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 132, 0, 0.5);
}

/* ===== Light Mode ===== */
body.light .contact-form {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light .contact-form input,
body.light .contact-form textarea {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--text-light);
}

body.light .contact-form input::placeholder,
body.light .contact-form textarea::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

body.light .contact-form input:focus,
body.light .contact-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(255, 132, 0, 0.3);
  background: rgba(255, 255, 255, 0.8);
}

body.light .send-btn {
  background: linear-gradient(120deg, var(--accent), #ff7a00);
  color: #fff;
  box-shadow: 0 0 8px rgba(255, 132, 0, 0.3);
}
h2 {
  font-size: 1.4rem;
  color: var(--accent);
}
h1 {
  text-align: center;
  font-size: 2.4rem;
  color: var(--accent);
}
.terms-content p {
  color: var(--text-muted);
}

.terms-content a {
  color: var(--accent);
  text-decoration: none;
}

.terms-content a:hover {
  text-decoration: underline;
}

/* Light mode */
body.light .terms-content p { color: var(--text-light); }
.close-btn {
    cursor: pointer;
}
path {
  fill: var(--accent);
}
.create-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #b68dff, #6441e3);
    color: #111;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 160, 40, 0.12);
	text-decoration: none;
}
body.light .create-btn {
    padding: 8px 14px;
    border-radius: 10px;
    border: 0;
    background: linear-gradient(180deg, #b68dff, #6441e3);
    color: #111;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(255, 160, 40, 0.12);
	text-decoration: none;
}
.tracker {
    position: absolute;
    left: 166px;
}
.wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:100vw;
  min-height:100vh;
  background:#c0c0c0bd;
}
.buton{
    width: 150px;
    height: 50px;
    position: relative;
    border-radius: 30px;
    border: none;
    outline: none;
    cursor: pointer;
    border: 1px solid #bababa;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    color: #2d2d2d;
    background: linear-gradient(to bottom right, #ffffff, #f0ecec);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.confetti{
		--animation_speed : 20s;
		--paper_color1:#a4d6f3;
		--paper_color2:#ff0000;
		--paper_color3:#d700ff;
		--paper_color4:#0000ff;
		--paper_color5:#ffb000;
		--paper_color6:#ff00e0;
	}

	.confetti::before{
		content: '';
		position: absolute;
		top: -50px;
		left: 50%;
		transform:translateX(-50%);
		width: 500px;
		height: 700px;
		z-index: 1;
		background-repeat: no-repeat;
		display: block;
		animation: confetti ease-out 10s forwards;
		background-image:linear-gradient(var(--paper_color1) 50%, transparent 20%), 
		linear-gradient(var(--paper_color2) 50%, transparent 20%),
		linear-gradient(var(--paper_color3) 25%, transparent 20%),
		linear-gradient(var(--paper_color4) 40%, transparent 20%),
		linear-gradient(var(--paper_color5) 70%, transparent 20%),
		linear-gradient(var(--paper_color6) 60%, transparent 20%),
		linear-gradient(var(--paper_color1) 40%, transparent 20%),
		linear-gradient(var(--paper_color2) 50%, transparent 20%),
		linear-gradient(var(--paper_color3) 15%, transparent 20%),
		linear-gradient(var(--paper_color4) 40%, transparent 20%),
		linear-gradient(var(--paper_color5) 70%, transparent 20%),
		linear-gradient(var(--paper_color6) 60%, transparent 20%),
		linear-gradient(var(--paper_color1) 45%, transparent 20%),
		linear-gradient(var(--paper_color2) 75%, transparent 20%),
		linear-gradient(var(--paper_color3) 55%, transparent 20%);
		background-size: 8px 8px, 5px 7px, 5px 6px, 7px 8px, 8px 6px, 8px 8px, 5px 9px,7px 6px, 8px 8px, 5px 7px, 5px 9px, 6px 9px, 4px 6px, 5px 7px,8px 5px;
	}

	@keyframes confetti {
		0%{
		background-position: 10% -10%, 18% 10%, 25% -10%, 34% -10%, 40% -10%, 47% -10%, 53% 0%,60% 20%, 67% 0%, 73% 0%, 79% 0%, 85% 0%, 92% 10%, 92% 10%, 99% 0%;
		}
		50% {
		background-position: 0% 80%, 8% 80%, 16% 60%, 32% 100%, 40% 70%, 48% 60%, 54% 0%,62% 80%, 70% 80%, 78% 60%, 84% 100%, 90% 70%, 95% 60%, 100% 80%, 88% 80%;}
		100% {
		background-position: 0% 90%, 10% 90%, 18% 70%, 25% 110%, 37% 80%, 45% 70%, 57% 10%,63% 90%, 72% 90%, 80% 70%, 88% 110%, 92% 80%, 96% 70%, 100% 90%,84% 90%;
		background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%,0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
		}
	}