:root{
  --bg: #0a192f;
  --bg-2:#0e223f;
  --surface:#112240;
  --card:#0f1e36;
  --border:#223554;
  --txt:#e6edf7;
  --muted:#98a6c7;
  --acc:#64ffda;
  --acc-2:#a95eea;
  --terminal:#020c1b;
  --danger:#ff6b6b;
  --ok:#2ecc71;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--txt); line-height:1.65}
img{max-width:100%; display:block}
a{color:var(--acc); text-decoration:none}
.container{width:min(1200px, 92%); margin-inline:auto}

.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--acc); color:#002217; border-radius:.5rem; z-index:9999}

header{position:sticky; top:0; z-index:1000; backdrop-filter:saturate(140%) blur(12px); background:color-mix(in hsl, var(--bg) 80%, transparent); border-bottom:1px solid color-mix(in hsl, var(--border) 70%, transparent)}
.nav{display:flex; align-items:center; justify-content:space-between; min-height:68px}
.brand{display:flex; gap:.6rem; align-items:center; font-weight:800; letter-spacing:.4px; color:var(--acc)}
.brand i{color:var(--acc-2)}
.nav ul{display:flex; align-items:center; gap:28px; list-style:none; padding:0; margin:0}
.nav a.navlink{color:var(--txt); font-weight:600; position:relative}
.nav a.navlink::after{content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .25s ease}
.nav a.navlink:hover::after{transform:scaleX(1)}
.cta{display:inline-flex; align-items:center; gap:.5rem; background:var(--acc); color:#01241c; border-radius:.65rem; padding:.6rem 1rem; font-weight:700; border:1px solid color-mix(in hsl, var(--acc) 60%, #000 40%); box-shadow:var(--shadow)}
.cta.ghost{background:transparent;color:var(--acc);border:1px solid color-mix(in hsl, var(--acc) 55%, transparent)}

.burger{display:none; background:transparent; border:0; color:var(--txt); font-size:1.4rem}
.drawer{display:none}
@media (max-width: 860px){
  .nav ul{display:none}
  .burger{display:inline-flex}
  .drawer{position:fixed; inset:68px 0 auto 0; background:var(--bg-2); border-top:1px solid var(--border); display:none; flex-direction:column; gap:8px; padding:1rem; box-shadow:var(--shadow)}
  .drawer a{padding:.8rem 1rem; border-radius:.5rem; color:var(--txt); background:transparent; border:1px solid transparent}
  .drawer a.active{border-color:var(--border); background:color-mix(in hsl, var(--surface) 55%, transparent)}
}

.progress{position:fixed; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--acc), var(--acc-2)); transform-origin:0 50%; transform:scaleX(0); z-index:1200}

section{padding:96px 0}
section:where(#about,#timeline,#projects,#skills,#contact){scroll-margin-top:90px}
.title{font-size:clamp(1.7rem, 2.5vw + 1rem, 2.6rem); font-weight:800; margin:0 0 28px; position:relative; display:inline-flex; gap:.75rem; align-items:center}
.title::after{content:""; width:64px; height:3px; background:var(--acc); border-radius:8px}
.muted{color:var(--muted)}
.grid{display:grid; gap:28px}

.hero{min-height:78svh; display:grid; align-items:center}
.hero h1{font-size:clamp(2rem, 4.8vw + .5rem, 3.4rem); line-height:1.15; margin:.2rem 0 1rem}
.hero h1 span{color:var(--acc)}
.hero .lead{font-size:clamp(1.05rem, 1.2vw + .7rem, 1.25rem); color:var(--muted)}
.actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:22px}

.terminal{background:var(--terminal); border:1px solid var(--border); border-radius:12px; padding:18px 18px 20px; margin-top:28px; box-shadow:var(--shadow)}
.t-head{display:flex; align-items:center; gap:10px; position:relative; margin-bottom:10px}
.dot{width:12px; height:12px; border-radius:50%}
.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}
.t-title{position:absolute; left:50%; transform:translateX(-50%); color:var(--muted); font-size:.9rem}
.t-body{font-family:"Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace; font-size:1.05rem; line-height:1.8}
.line{display:flex; gap:14px}
.prompt{color:var(--acc)}
.caret{display:inline-block; width:.6ch; background:var(--txt); animation:blink .9s steps(1,end) infinite}
@keyframes blink{50%{opacity:0}}

.about-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:34px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px}
.edu-item{border-bottom:1px dashed var(--border); padding:14px 0}
.edu-item:last-child{border-bottom:0}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.badge{display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--border); border-radius:999px; padding:.35rem .7rem; font-size:.85rem; color:var(--txt); background:color-mix(in hsl, var(--surface) 40%, transparent)}
.aside-title{margin:4px 0 10px; color:var(--acc)}
.note{margin-top:12px}

.projects{--cols:3}
.projects-grid{display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:22px}
@media (max-width:1024px){.projects{--cols:2}}
@media (max-width:680px){.projects{--cols:1}}
.p-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease}
.p-card:hover{transform:translateY(-6px); box-shadow:var(--shadow)}
.p-thumb{display:grid; place-items:center; height:180px; background:var(--terminal); color:var(--acc); font-size:2.4rem}
.p-body{padding:18px}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px}
.chip{font-size:.8rem; padding:.25rem .6rem; border-radius:999px; background:color-mix(in hsl, var(--acc) 20%, transparent); color:var(--acc); border:1px solid color-mix(in hsl, var(--acc) 55%, transparent)}
.p-link{display:inline-flex; align-items:center; gap:.45rem; font-weight:700}
.p-link i{transition:transform .2s ease}
.p-link:hover i{transform:translateX(4px)}
.project-category{font-size:.85rem; color:var(--muted); margin-bottom:6px; display:block}

.skills-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
@media (max-width:980px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.skills-grid{grid-template-columns:1fr}}
.s-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px}
.s-card h3{margin:4px 0 16px; color:var(--acc); display:flex; gap:.6rem; align-items:center}
.bar{height:9px; background:var(--terminal); border-radius:999px; overflow:hidden}
.bar > span{display:block; height:100%; background:linear-gradient(90deg,var(--acc), var(--acc-2))}
.s-row{display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; margin:12px 0 10px}

.contact-grid {
  display: grid;
  /* grid-template-columns: 1fr 1fr; (Eski kuralı sildik) */
  grid-template-columns: 1fr; /* Sadece 1 kolon olsun */
  gap: 26px;
  max-width: 600px; /* Kartın aşırı genişlemesini engelle */
  margin-inline: auto; /* Tüm grid'i yatayda ortala */
}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.form{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px}
label{display:block; font-weight:600; margin:.2rem 0 .35rem}
input, textarea{width:100%; background:var(--terminal); border:1px solid var(--border); color:var(--txt); border-radius:.6rem; padding:.9rem 1rem; font:inherit}
textarea{min-height:150px; resize:vertical}
input:focus, textarea:focus{outline:2px solid color-mix(in hsl, var(--acc) 70%, transparent); border-color:var(--acc)}
.info-item{display:flex; gap:14px; align-items:flex-start}
.info-item i{color:var(--acc); font-size:1.2rem}
.form-actions{display:flex; gap:10px; align-items:center; margin-top:12px}

footer{border-top:1px solid var(--border); background:var(--surface); padding:34px 0}
.socials{display:flex; gap:16px; justify-content:center; margin:16px 0}
.socials a{width:42px;height:42px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--border); background:var(--terminal); color:var(--txt)}
.socials a:hover{background:var(--acc); color:#06261f}

/* Animations */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.show{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
  .caret{animation:none}
}

/* Timeline */
.tl{position:relative; margin:6px 0 0; padding-left:26px}
.tl::before{
  content:""; position:absolute; left:8px; top:0; bottom:0;
  width:2px; background:linear-gradient(var(--acc), var(--acc-2));
  border-radius:999px; opacity:.55
}
.tl-item{position:relative; margin:0 0 22px; display:grid; gap:6px; background:var(--surface);
  border:1px solid var(--border); border-radius:12px; padding:14px 16px; box-shadow:var(--shadow)}
.tl-item:last-child{margin-bottom:0}
.tl-dot{
  position:absolute; left:-2px; top:18px; width:14px; height:14px; border-radius:50%;
  background:color-mix(in hsl, var(--acc) 70%, var(--acc-2) 30%); border:2px solid var(--terminal); box-shadow:0 0 0 3px color-mix(in hsl, var(--acc) 25%, transparent)
}
.tl-date{font-weight:800; letter-spacing:.3px; color:var(--acc)}
.tl-title{font-weight:700; margin-top:2px}
.tl-tags{display:flex; gap:8px; flex-wrap:wrap}
.tl-tag{font-size:.78rem; padding:.2rem .55rem; border-radius:999px; background:color-mix(in hsl, var(--acc) 18%, transparent); color:var(--acc); border:1px solid color-mix(in hsl, var(--acc) 55%, transparent)}
.tl-note{color:var(--muted)}



/* ===== ABOUT & EDUCATION — ENES OVERRIDES (drop-in) ===== */

/* Başlık stili: .title'ı senin .section-title gibi yap */
#about .title,
#timeline .title {
  font-size: 2.5rem;
  margin-bottom: 60px;
  position: relative;
  display: inline-block;
}
#about .title::after,
#timeline .title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 70px;
  height: 3px;
  background-color: var(--acc); /* = --accent-green */
}

/* About layout: .about-grid'i senin .about-content gibi iki kolona çevir */
.about-grid{
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 50px;
  align-items: flex-start;
}

/* Sol taraf (metin) – renkler ve aralıklar */
#about .muted{
  color: var(--text-secondary, #8892b0);
}
#about p{
  margin-bottom: 20px;
}

/* Sağ taraf kartı: .card’ı education-card görünümüne yaklaştır */
#about .card{
  background-color: var(--secondary-dark, #112240);
  border-radius: 8px;
  padding: 30px;
  border: 1px solid var(--card-border, #233554);
  box-shadow: none; /* düz ve kurumsal görünüm */
}

/* Kart başlığı */
#about .aside-title{
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: var(--acc); /* accent green */
  display: flex; gap: .6rem; align-items: center;
}

/* Education item’ları – alt çizgili liste */
#about .edu-item{
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--card-border, #233554);
}
#about .edu-item:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Başlık ve metin hiyerarşisi */
#about .edu-item strong{
  font-size: 1.2rem; /* h5 gibi */
  display: inline-block;
  margin-bottom: 5px;
  color: var(--text-light, #ccd6f6);
}
#about .edu-item .muted{
  color: var(--text-secondary, #8892b0);
  font-size: 0.95rem;
}

/* Soldaki rozetler — senin terminal/mono havasına yaklaştırma */
.badges .badge{
  background-color: rgba(100, 255, 218, 0.10);
  color: var(--acc);
  border-color: var(--acc);
  border-radius: 999px;
  padding: .35rem .7rem;
  font-family: var(--font-mono, "Source Code Pro", ui-monospace, monospace);
}

/* Not satırı (sertifika açıklaması) – daha yumuşak ton */
#about .note{
  color: var(--text-secondary, #8892b0);
  font-style: italic;
}

/* Responsive: 992px altı tek kolona düşür (seninkiyle aynı davranış) */
@media (max-width: 992px){
  .about-grid{ grid-template-columns: 1fr; }
}


/* NAV terminal vibe */
.nav .navlink.term {
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative;
  letter-spacing: 0.1px;
}
.nav .navlink.term::before {
  content: "";
  margin-right: 4px;
  transition: opacity .15s ease-in-out;
}
.nav .navlink.term:hover::before,
.nav .navlink.term:focus-visible::before {
  content: "$ ";
  opacity: 1;
}
#mobile .navlink.term { font-family: "Source Code Pro", ui-monospace, monospace; }
#mobile .cta-like { color: var(--acc); font-weight: 600; }

/* TERMINAL area — SCOPED so it doesn't affect navbar */
#tty {
  font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-wrap;     /* wrap long outputs */
  word-break: break-word;
  overflow: auto;
  min-height: 160px;
  padding-right: 2px;
}
#tty .tty-row { margin: 2px 0; }
#tty .tty-prompt { color: var(--acc); margin-right: 6px; }
#tty .tty-text { color: var(--txt); }
#tty .tty-caret {
  display:inline-block;
  width: .6ch;
  height: 1.1em;
  transform: translateY(.1em);
  background: currentColor;
  animation: blink 1s steps(1,end) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 520px){
  #tty { font-size: .95rem; }
}