* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: Arial, sans-serif; overflow:hidden; height:100vh; color:white; }
.hidden { display:none; }

/* ====================== GİRİŞ EKRANI ====================== */
#splash {
  position:fixed; top:0; left:0; width:100%; height:100%; background:#000;
  display:flex; align-items:center; justify-content:center; z-index:9999;
  cursor:pointer; transition:opacity 0.3s ease;
}
.enter-text {
  font-family:'Arial Black',Arial,sans-serif;
  font-size:38px; font-weight:900; color:#fff;
  letter-spacing:1.5px; text-transform:lowercase;
  text-shadow:0 0 12px rgba(255,255,255,0.35);
  transition:all 0.35s ease;
}
.enter-text:hover {
  transform:scale(1.05);
  text-shadow:0 0 18px rgba(255,255,255,0.55);
}

/* PROJELER KARTLARI */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 30px;
  padding: 0 20px;
}
.project-card {
  background: rgba(20,20,50,0.6);
  border: 1px solid rgba(0,200,255,0.3);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.4s ease;
  backdrop-filter: blur(10px);
}
.project-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 20px 40px rgba(0,200,255,0.4);
  border-color: rgba(0,200,255,0.8);
}
.card-inner {
  padding: 28px 20px;
  text-align: center;
}
.card-inner h3 {
  color: #00c3ff;
  margin-bottom: 12px;
  font-size: 20px;
}
.card-inner p {
  color: #aaa;
  font-size: 15px;
  margin-bottom: 20px;
}
.card-btn {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(0,200,255,0.2);
  color: #00c3ff;
  text-decoration: none;
  border-radius: 30px;
  font-size: 14px;
  transition: 0.3s;
}
.card-btn:hover {
  background: #00c3ff;
  color: black;
  transform: scale(1.05);
}
.coming {
  background: rgba(255,50,50,0.3);
  color: #ff3366;
  cursor: default;
}

/* ====================== ARKA PLAN ====================== */
.background { position:fixed; top:0; left:0; width:100%; height:100%; z-index:1; }
.bg-video { width:100%; height:100%; object-fit:cover; }

/* ====================== SAĞ ÜST BUTONLAR ====================== */
.top-buttons { position:fixed; top:25px; right:25px; z-index:999; gap:16px; display:flex; }
.btn { padding:11px 22px; border-radius:50px; text-decoration:none; font-weight:700;
  font-size:14px; text-transform:uppercase; letter-spacing:1.2px; transition:all .4s; }
.btn span { color:#fff; }
.insta   { background:#e1306c; box-shadow:0 0 30px rgba(225,48,108,0.6); }
.discord { background:#5865f2; box-shadow:0 0 30px rgba(88,101,242,0.6); }
.btn:hover { transform:translateY(-6px) scale(1.05); }

/* ====================== HOVER EFEKTLERİ ====================== */
.hover-effect, .profile-hover { transition:all 0.35s ease; cursor:default; }
.hover-effect:hover, .profile-hover:hover {
  transform:scale(1.08); filter:brightness(1.3);
  text-shadow:0 0 20px rgba(0,200,255,0.8);
}
.profile-hover:hover img { transform:scale(1.12); box-shadow:0 0 80px rgba(0,200,255,0.6); }

/* ====================== ORTA KISIM ====================== */
.center { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; z-index:10; }
.profile-pic { width:160px; height:160px; border-radius:50%; object-fit:cover;
  border:5px solid rgba(255,255,255,0.3); box-shadow:0 0 60px rgba(255,255,255,0.3); }
.name { font-size:58px; font-weight:900; margin:16px 0 8px; }
.location { font-size:17px; margin:8px 0 16px; opacity:0.9; }
.location i { margin-right:8px; color:white !important; }
.desc { font-size:19px; letter-spacing:1.4px; opacity:0.9; }

/* HAKKIMDA BUTONU */
.about-btn {
  margin-top: 32px;
  font-size: 19px;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 0.4s;
}
.about-btn:hover {
  color: white;
  text-shadow: 0 0 25px rgba(0,200,255,0.9);
  transform: scale(1.08);
}

/* ====================== SOL ALT GÖZ ====================== */
.views { position:fixed; bottom:30px; left:30px; font-size:18px; z-index:10; }
.views i { margin-right:8px; opacity:0.8; }

/* ====================== SAĞ ALT İMZA ====================== */
.by-rheme {
  position:fixed; bottom:18px; right:24px; font-size:13px; color:rgba(255,255,255,0.4);
  letter-spacing:1.2px; z-index:999; user-select:none; transition:all 0.3s ease;
}
.by-rheme:hover { color:rgba(255,255,255,0.9); text-shadow:0 0 12px rgba(0,200,255,0.6); }

/* ====================== MÜZİK ÇALAR ====================== */
.music-player {
  position:fixed; top:25px; left:25px; z-index:999; display:flex; align-items:center; gap:12px;
  background:rgba(0,0,0,0.4); padding:10px 16px; border-radius:50px; backdrop-filter:blur(10px);
}
#playBtn { background:none; border:none; color:white; font-size:22px; cursor:pointer; padding:4px; }
#volume { width:100px; cursor:pointer; }
#volume::-webkit-slider-thumb { background:#00c3ff; height:16px; width:16px; border-radius:50%; }

/* ====================== TAM EKRAN PANEL ====================== */
#fullPanel {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:rgba(0,0,0,0.94); backdrop-filter:blur(16px);
  z-index:99999; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity 0.6s ease;
}
#fullPanel.visible { opacity:1; pointer-events:all; }

.panel-content {
  background:rgba(15,15,35,0.9); border:1px solid rgba(0,200,255,0.4);
  border-radius:20px; padding:50px 80px; width:90%; max-width:800px;
  max-height:90vh; overflow-y:auto; position:relative;
  box-shadow:0 0 80px rgba(0,200,255,0.4);
}
.close-btn {
  position:absolute; top:20px; right:30px; background:none; border:none;
  color:white; font-size:40px; cursor:pointer; opacity:0.7; transition:0.3s;
}
.close-btn:hover { opacity:1; transform:rotate(90deg); }

.panel-tabs {
  display:flex; justify-content:center; gap:40px; margin-bottom:40px; flex-wrap:wrap;
}
.ptab {
  background:none; border:none; color:rgba(255,255,255,0.6);
  font-size:20px; cursor:pointer; padding:10px 20px; transition:0.4s;
}
.ptab:hover, .ptab.active { color:white; text-shadow:0 0 20px rgba(0,200,255,0.8); }

.panel-tab { display:none; color:#ddd; line-height:1.8; font-size:18px; }
.panel-tab.active { display:block; }
.panel-tab h2 { color:#00c3ff; margin-bottom:20px; text-align:center; }
.panel-tab a { color:#00c3ff; text-decoration:underline; }