:root { --bg:#05060a; --bg-alt:#0b0f17; --panel:#121823cc; --panel-solid:#121823; --text:#e6ecf3; --text-dim:#94a3b8; --accent:#5d7bff; --accent-grad:linear-gradient(135deg,#5d7bff 0%,#8f53ff 50%,#ff4fa3 100%); --radius-s:6px; --radius-m:14px; --radius-l:28px; --border:1px solid #1e2633; --shadow:0 8px 30px -10px #000a,0 2px 4px -1px #0008; --font-stack:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans','Helvetica Neue',Arial,sans-serif; --mono:monospace; }

* { box-sizing: border-box; }
html,body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-stack);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1,h2,h3 { font-weight: 700; letter-spacing: -0.5px; }
 h1 { font-size: clamp(2.5rem,6vw,4.2rem); line-height: 1.05; }
 h2 { font-size: clamp(1.9rem,4vw,2.6rem); line-height: 1.15; margin: 0 0 1.2rem; }
 h3 { font-size: 1.15rem; margin: 0 0 .5rem; }
 p { line-height: 1.58; }
 p.lead { font-size: 1.15rem; }
a { color: var(--accent); text-decoration: none; }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1.5rem;
  backdrop-filter: blur(12px) saturate(140%);
  background: #0b0f1722;
  border-bottom: 1px solid #1c2533;
}
.nav-cluster { display:flex; align-items:center; gap:1.1rem; }
.logo-area { display: flex; align-items: center; gap: .65rem; font-weight: 600; }
.event-mark { width: 46px; height: 46px; display: grid; place-items: center; font-weight: 700; font-size: .9rem; letter-spacing: .5px; background: linear-gradient(145deg,#162132,#090d14); border: 1px solid #1e2a39; border-radius: 14px; position: relative; isolation: isolate; box-shadow: inset 0 0 0 1px #253043,0 4px 14px -6px #000; }
.event-mark:before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#5d7bff22,#ff4fa322); mix-blend-mode: overlay; border-radius:inherit; }
.event-mark .em-svg { width:100%; height:100%; border-radius:inherit; }
.event-mark:hover { box-shadow: 0 0 0 1px #304259,0 0 0 4px #121a26, 0 6px 20px -6px #000; }
.event-mark:after { content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:linear-gradient(140deg,#5d7bff55,#8f53ff33,#ff4fa355); -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000); -webkit-mask-composite: xor; mask-composite: exclude; opacity:.35; pointer-events:none; }
.brand-block { display:flex; flex-direction:column; line-height:1.05; }
.brand-title { font-size: .95rem; font-weight:600; letter-spacing:.5px; text-transform:uppercase; }
.brand-sub { font-size: .65rem; letter-spacing:1px; color: var(--text-dim); text-transform:uppercase; }
.badge.dc { display:inline-flex; align-items:center; gap:.5rem; font-size:.7rem; letter-spacing:.5px; padding:.5rem .8rem; background:#131d29; border:1px solid #1f2a38; border-radius:999px; color:#8ea0b8; margin-left:.8rem; font-weight:600; text-transform:uppercase; }
.badge.dc img { width:28px; height:28px; object-fit:cover; border-radius:50%; filter:grayscale(.1) contrast(1.2) brightness(1.1); }

.main-nav { display: flex; gap: 1.2rem; }
.main-nav a { position: relative; font-size: .9rem; font-weight: 500; color: var(--text-dim); padding: .35rem .65rem; border-radius: var(--radius-s); }
.main-nav a:hover, .main-nav a:focus { color: var(--text); background: #1a2230; }
 
 
.main-nav a:not(.cta-nav)::after { content:""; position:absolute; left:.55rem; right:.55rem; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,#5d7bff,#ff4fa3); transform:scaleX(0); transform-origin:left; transition:.4s cubic-bezier(.4,.6,.2,1); opacity:0; }
.main-nav a.active:not(.cta-nav) { color:#fff; }
.main-nav a.active:not(.cta-nav)::after, .main-nav a:hover:not(.cta-nav)::after { transform:scaleX(1); opacity:1; }
.main-nav a:focus-visible { outline:2px solid #5d7bff; outline-offset:2px; }

.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 7rem 1.5rem 4.5rem; }
.hero-inner { position: relative; max-width: 1240px; width:100%; z-index: 2; }
.hero-layout { display:grid; gap:3.2rem; grid-template-columns: repeat(auto-fit,minmax(320px,1fr)); align-items:start; }
.hero-copy h1 { margin-top:0; }
.hero-copy { text-align:left; max-width:620px; }
.hero .meta-capsules { justify-content:flex-start; margin-top:1.6rem; }
.hero-actions { margin-top:1.8rem; }
.hero h1 { margin: 0 0 1.2rem; font-weight: 800; }
.hero .accent { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-bullets { list-style:none; padding:0; margin:0 0 2.2rem; display:flex; flex-direction:column; gap:.55rem; font-size:.95rem; color:var(--text-dim); }
.hero-bullets li { position:relative; padding-left:.2rem; }
.mentor-links { display:flex; align-items:flex-start; flex-direction:column; gap:.8rem; margin:.8rem 0 1.8rem; }
.mentor-section { display:flex !important; align-items:center; gap:.8rem; width:100%; }
.org-row { display:flex; align-items:center; gap:.8rem; width:100%; }
.org-row .org-support { white-space: nowrap; }
.org-social { display:flex; gap:.6rem; white-space: nowrap; }
.social-buttons { display:flex; gap:.6rem; flex-shrink:0; white-space: nowrap; }
.mentor-links .ml-label { font-size:.88rem; letter-spacing:.3px; text-transform:uppercase; font-weight:700; color:#fff; background:linear-gradient(135deg,#5d7bff,#8f53ff); padding:.65rem 1rem; border:none; border-radius:14px; box-shadow:0 4px 14px -6px #5d7bff44; white-space: nowrap; }
.mentor-links .org-support { font-size:.86rem; letter-spacing:.3px; text-transform:uppercase; font-weight:700; color:#fff; background:linear-gradient(135deg,#6366f1,#3b82f6); padding:.62rem 1rem; border:none; border-radius:14px; box-shadow:0 4px 14px -6px #6366f144; }
.mentor-links .ml-btn { display:inline-flex; align-items:center; gap:.5rem; font-size:.88rem; letter-spacing:.1px; font-weight:600; padding:.7rem 1.1rem; border-radius:13px; background:linear-gradient(145deg, #1a2332, #121b27); color:#e6ecf3; border:1px solid #2a3441; position:relative; overflow:hidden; transition:.4s ease; box-shadow: 0 4px 12px -6px #0008, inset 0 1px 0 #2d3847; }
/* Brand accents */
.mentor-links .ml-btn.linkedin:hover { box-shadow: 0 8px 25px -8px #0a66c2aa, 0 0 0 1px #345b7f; }
.mentor-links .ml-btn.github:hover { box-shadow: 0 8px 25px -8px #6b7280aa, 0 0 0 1px #3d4b5c; }
.mentor-links .ml-btn:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,#5d7bff15,#8f53ff15); opacity:0; transition:.4s ease; border-radius:inherit; }
.mentor-links .ml-btn:hover:before { opacity:1; }
.mentor-links .ml-btn:hover { color:#fff; transform:translateY(-2px) scale(1.02); box-shadow:0 8px 25px -8px #0008, 0 0 0 1px #3d4b5c, inset 0 1px 0 #4a5866; border-color: #3d4b5c; }
.mentor-links svg { width:20px; height:20px; }
.hero-actions { display:flex; gap:1rem; justify-content:flex-start; flex-wrap:wrap; }
.btn { --btn-bg: #1b2533; --btn-color: var(--text); display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: var(--radius-m); font-weight: 600; font-size: .95rem; position: relative; background: var(--btn-bg); color: var(--btn-color); border: 1px solid #243041; transition: .3s cubic-bezier(.4,.58,.2,1.4); box-shadow: 0 4px 14px -6px #000a; }
.btn.primary { background: var(--accent-grad); border: none; color: #fff; }
 
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 25px -8px #000c,0 4px 10px -4px #000a; }

.fade { opacity: 0; transform: translateY(28px); transition: .9s cubic-bezier(.3,.7,.1,1); }
.fade.in { opacity: 1; transform: translateY(0); }

.meta-capsules { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 2.2rem; }
.cap { background: #121b27; padding: .55rem .9rem; font-size: .7rem; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #1f2835; border-radius: 999px; color: var(--text-dim); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.cap:hover { background: #1a2434; border-color: #2a3542; transform: translateY(-1px); transition: .3s; }

.scroll-indicator { position: absolute; bottom: 1.4rem; left: 50%; transform: translateX(-50%); font-size: 1.3rem; opacity: .6; animation: bounce 2.8s infinite; color: var(--accent); cursor: pointer; transition: .3s; }
.scroll-indicator:hover { opacity: 1; transform: translateX(-50%) scale(1.1); }
@keyframes bounce { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,12px); opacity: .8; } }

.hero .layer { position: absolute; inset: 0; }
.hero .layer.gradient { background: radial-gradient(circle at 30% 40%, #5d7bff22 0, transparent 60%), radial-gradient(circle at 70% 60%, #ff4fa322 0, transparent 55%); mix-blend-mode: screen; }
.hero .layer.grid { background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg,#ffffff08 1px, transparent 1px); background-size: 60px 60px; mask: linear-gradient(#000,transparent 85%); opacity: .35; }

 
.section { position: relative; padding: 5.5rem 1.5rem 5.5rem; }
.section:nth-of-type(odd) { background: linear-gradient(180deg,#0b0f17 0%,#070a10 100%); }
.section:nth-of-type(even) { background: linear-gradient(180deg,#0f141d 0%,#0a0e15 100%); }
.content { max-width: 1200px; margin: 0 auto; }
.content.narrow { max-width: 820px; }


.highlight { color: #fff; background: linear-gradient(90deg,#5d7bff33,#ff4fa333); padding: .2rem .55rem; border-radius: var(--radius-s); }
.cards { display: grid; gap: 1.7rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-top: 2.5rem; }
.card { background: var(--panel); border: var(--border); padding: 1.3rem 1.15rem 1.25rem; border-radius: var(--radius-l); position: relative; overflow: hidden; backdrop-filter: blur(6px) saturate(140%); box-shadow: var(--shadow); }
.card:before { content: ""; position: absolute; inset: 0; background: linear-gradient(140deg,#5d7bff11,#ff4fa311); opacity: 0; transition: .5s; }
.card:hover:before { opacity: 1; }
.card h3 { font-size: 1.05rem; }
.card p { font-size: .9rem; color: var(--text-dim); margin: 0; }

 
.project-list { list-style: none; margin: 2.4rem 0 2.2rem; padding: 0; display: grid; gap: 1.8rem; }
.project-list li { background: var(--panel); border: var(--border); padding: 1.4rem 1.35rem 1.5rem; border-radius: var(--radius-l); position: relative; overflow: hidden; backdrop-filter: blur(6px) saturate(140%); box-shadow: var(--shadow); }
.project-list li:before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,#5d7bff14,#ff4fa314); opacity:0; transition:.5s; }
.project-list li:hover:before { opacity:1; }
.project-list li:hover { transform: translateY(-2px); box-shadow: 0 8px 30px -10px #000c, 0 0 0 1px #243041; }
.project-list h3 { margin:0 0 .55rem; font-size:1.05rem; }
.project-list p { margin:0; font-size:.85rem; color:var(--text-dim); }
.project-item { display:flex; flex-direction:column; gap:.45rem; }
.proj-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.15rem; }
.level-dot { font-size:1rem; line-height:1; }
.badge-level { background:#162234; border:1px solid #243346; font-size:.55rem; letter-spacing:.7px; padding:.28rem .5rem .3rem; border-radius:999px; text-transform:uppercase; font-weight:600; color:#7d92ab; margin-left:.5rem; }
.level-easy .badge-level { background:#1e2f4a; border-color:#2d4260; color:#7db6ff; }
.level-mid .badge-level { background:#2f2149; border-color:#453264; color:#b57dff; }
.level-hard .badge-level { background:#4a1f3a; border-color:#663354; color:#ff7db6; }
.level-easy { border-color:#1e2f4a; }
.level-easy:after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(140deg,#5d7bffaa,#0000); opacity:.15; }
.level-mid { border-color:#2f2149; }
.level-mid:after { content:""; position:absolute; inset:0; background:linear-gradient(140deg,#8f53ffaa,#0000); opacity:.15; }
.level-hard { border-color:#4a1f3a; }
.level-hard:after { content:""; position:absolute; inset:0; background:linear-gradient(140deg,#ff4fa3aa,#0000); opacity:.16; }
.project-list code { font-family: var(--mono); background:#182330; padding:.15rem .4rem; border:1px solid #223042; border-radius:6px; font-size:.7rem; color:#9eb6d2; }
.difficulty .stars { letter-spacing:2px; background:linear-gradient(90deg,#ffcc55,#ff9966); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
.gain { font-size:.78rem; color:#8ca0b6; }

 
.project-focus-grid { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); margin: .5rem 0 1.5rem; }
.pf-item { position:relative; background:#131c27; border:1px solid #1e2835; border-radius:12px; padding:.85rem .7rem; font-size:.62rem; letter-spacing:.7px; text-transform:uppercase; font-weight:600; display:flex; align-items:center; justify-content:center; color:#8292a8; }
.pf-item:before { content:""; position:absolute; inset:0; background:linear-gradient(140deg,#5d7bff11,#ff4fa311); opacity:0; transition:.45s; border-radius:inherit; }
.pf-item:hover:before { opacity:1; }
.note { margin-top: 2.2rem; font-size: .85rem; color: #64758b; }

 
 


 
.site-footer { padding: 3rem 1.5rem 2rem; background: linear-gradient(180deg, #06080d 0%, #030405 100%); border-top: 1px solid #0f1419; }
.site-footer .inner { max-width: 1200px; margin: 0 auto; }
.footer-content { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.footer-brand h4 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--text); }
.footer-brand p { margin: 0; color: var(--text-dim); font-size: .9rem; }
.footer-links { display: flex; gap: 2rem; }
.footer-section { display: flex; flex-direction: column; gap: .5rem; }
.footer-section h5 { margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); font-weight: 600; }
.footer-section a { color: var(--text-dim); font-size: .85rem; transition: .3s; }
.footer-section a:hover { color: var(--text); }
.footer-section span { color: var(--text-dim); font-size: .85rem; }
.footer-bottom { text-align: center; padding-top: 1.5rem; border-top: 1px solid #0f1419; }
.site-footer .small { font-size: .75rem; color: #5d6c80; margin: 0; }
.pulse { color: #ff4fa3; animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

 
 

 
@media (max-width: 780px) {
  .main-nav { display:flex; flex-wrap:wrap; gap:.8rem; }
  .main-nav a { font-size:.85rem; padding:.3rem .5rem; }
  .hero h1 { font-size: clamp(2.3rem,8vw,3.3rem); }
  .hero-layout { grid-template-columns:1fr; }
  .hero-actions { justify-content:flex-start; }
  .mentor-section { display:flex !important; flex-direction: column; align-items: flex-start; gap: .6rem; }
  .social-buttons { align-self: flex-start; margin-left: 0; }
  .org-row { display:flex !important; flex-direction: column; align-items: flex-start; gap: .6rem; }
  .org-social { align-self:flex-start; margin-left:0; }
  .org-row .org-support { white-space: normal; }
  
  /* Mobile boyut küçültme */
  .mentor-links .ml-label { font-size: .82rem; padding: .55rem .9rem; white-space: normal; }
  .mentor-links .org-support { font-size: .72rem; padding: .45rem .75rem; }
  .mentor-links .ml-btn { font-size: .78rem; padding: .55rem .9rem; }
  .mentor-links svg { width: 18px; height: 18px; }
}

@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .hero { padding-top: 8rem; }
  .footer-content { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; }
}