/* ============================================================
   Elif Baykara - Portfolio
   Palette and spacing tokens live in :root, so the whole look
   can be re-themed from a handful of values.
   ============================================================ */

:root{
  --bg:              #ffffff;
  --bg-soft:         #f6f7fc;
  --bg-hero-top:     #eaeefc;
  --bg-hero-bottom:  #ffffff;

  --ink:             #0d1424;
  --ink-soft:        #3b465e;
  --muted:           #6b7690;

  --card:            #ffffff;
  --line:            #e5e8f2;

  --accent:          #4c5fd7;
  --accent-soft:     #eef0fe;
  --accent-2:        #7c8cf8;

  --radius-lg: 22px;
  --radius:    16px;

  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 4px 12px rgba(15,23,42,.04);
  --shadow-md: 0 2px 6px rgba(15,23,42,.06), 0 18px 40px rgba(15,23,42,.08);

  --maxw: 1140px;
  --nav-h: 68px;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:700; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip:focus{ left:0; }

/* ---------------------------- NAV ---------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 20px rgba(15,23,42,.05); }

.nav-inner{ height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:16px; }

.brand{ display:flex; align-items:center; gap:10px; font-weight:700; }
.brand-mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  display:grid; place-items:center;
  background:var(--ink); color:#fff; font-size:13px; letter-spacing:.02em;
}
.brand-name{ font-size:15px; letter-spacing:-.01em; }

.nav-links{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav-links a{
  position:relative;
  padding:8px 12px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:var(--ink-soft);
  transition:color .2s ease, background .2s ease;
}
.nav-links a:hover{ color:var(--ink); background:var(--bg-soft); }
.nav-links a.active{ color:var(--accent); background:var(--accent-soft); }

.nav-actions{ display:flex; align-items:center; gap:10px; }

.lang{ display:flex; padding:3px; background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; }
.lang-btn{
  border:0; background:transparent; cursor:pointer;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--muted);
  padding:5px 11px; border-radius:999px; transition:.2s ease;
}
.lang-btn:hover{ color:var(--ink); }
.lang-btn.active{ background:#fff; color:var(--ink); box-shadow:var(--shadow-sm); }

.burger{ display:none; width:40px; height:40px; border:1px solid var(--line); background:#fff;
  border-radius:12px; cursor:pointer; padding:0; place-items:center; }
.burger span{ display:block; width:16px; height:1.8px; background:var(--ink); border-radius:2px; margin:3px auto; transition:.25s ease; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(4.8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-4.8px) rotate(-45deg); }

/* ---------------------------- HERO ---------------------------- */
.hero{
  position:relative; overflow:hidden;
  padding:calc(var(--nav-h) + 84px) 0 96px;
  background:linear-gradient(180deg, var(--bg-hero-top) 0%, #f2f4fd 45%, var(--bg-hero-bottom) 100%);
  text-align:center;
}
.blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; pointer-events:none; }
.blob-a{ width:420px; height:420px; background:#c8d2ff; top:-140px; left:-100px; }
.blob-b{ width:380px; height:380px; background:#ffd9ec; top:60px; right:-120px; opacity:.45; }

.hero-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }

.avatar{
  position:relative; width:172px; height:172px; border-radius:50%;
  background:linear-gradient(140deg,#dfe4fb,#c9d2ff);
  display:grid; place-items:center;
  box-shadow:0 0 0 8px rgba(255,255,255,.9), var(--shadow-md);
  margin-bottom:26px; overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; border-radius:50%; position:relative; z-index:1; }
.avatar img[data-missing]{ display:none; }
.avatar-fallback{ position:absolute; inset:0; display:grid; place-items:center; font-size:52px; font-weight:700; color:#43508f; letter-spacing:.02em; }

.badge{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  padding:6px 14px 6px 10px; border-radius:999px;
  background:rgba(255,255,255,.8); border:1px solid var(--line);
  font-size:13px; font-weight:500; color:var(--ink-soft);
}
.badge::before{ content:""; width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); }

.hero-name{ font-size:clamp(2.6rem, 6vw, 4.1rem); font-weight:800; letter-spacing:-.035em; }
.hero-role{ margin:12px 0 0; font-size:clamp(1.05rem,2.2vw,1.4rem); color:var(--ink-soft); font-weight:500; }
.hero-tagline{ margin:18px auto 0; max-width:640px; color:var(--muted); font-size:16px; }

.hero-contact{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin:26px 0 0; }
.hero-contact li{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--ink-soft); }
.hero-contact a:hover{ color:var(--accent); }
.hero-contact svg{ width:16px; height:16px; color:var(--muted); flex:none; }

.hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:30px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 26px; border-radius:999px;
  font-size:14.5px; font-weight:600; font-family:inherit;
  cursor:pointer; border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(13,20,36,.22); }
.btn-ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:#c9cfe4; box-shadow:var(--shadow-sm); }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  width:100%; max-width:760px; margin:52px auto 0;
}
.stat{
  background:rgba(255,255,255,.75); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 12px; backdrop-filter:blur(6px);
}
.stat b{ display:block; font-size:1.6rem; font-weight:800; letter-spacing:-.03em; color:var(--accent); }
.stat span{ font-size:12.8px; color:var(--muted); line-height:1.4; display:block; margin-top:4px; }

/* -------------------------- SECTIONS -------------------------- */
.section{ padding:96px 0; }
.section.alt{ background:var(--bg-soft); }

.head{ text-align:center; max-width:720px; margin:0 auto 52px; }
.head-sub{ margin-top:72px; }
.eyebrow{
  display:inline-block; margin-bottom:14px; padding:5px 13px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.head h2{ font-size:clamp(1.8rem,3.6vw,2.5rem); }
.head h3{ font-size:clamp(1.4rem,2.6vw,1.8rem); }
.head h2::after,.head h3::after{
  content:""; display:block; width:52px; height:3px; border-radius:2px;
  margin:18px auto 0; background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.lede{ margin:20px 0 0; color:var(--muted); font-size:16.5px; }

.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:28px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#d8dcec; }

/* About cards */
.about-card{ text-align:center; }
.about-icon{
  width:52px; height:52px; margin:0 auto 18px; border-radius:16px;
  display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent-soft),#e7ecff); color:var(--accent);
}
.about-icon svg{ width:24px; height:24px; }
.about-card h3{ font-size:17px; margin-bottom:10px; }
.about-card p{ margin:0; color:var(--muted); font-size:14.5px; }

/* Timeline */
.timeline{ position:relative; max-width:900px; margin-inline:auto; padding-left:34px; }
.timeline::before{
  content:""; position:absolute; left:9px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2),transparent);
  border-radius:2px;
}
.tl-item{ position:relative; margin-bottom:24px; }
.tl-item:last-child{ margin-bottom:0; }
.tl-item::before{
  content:""; position:absolute; left:-34px; top:32px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);
}
.tl-top{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:10px; }
.tl-item h3{ font-size:18.5px; }
.tl-company{ margin:4px 0 0; color:var(--accent); font-weight:600; font-size:14.5px; }
.tl-place{ margin:2px 0 0; color:var(--muted); font-size:13.5px; }
.pill{
  flex:none; padding:6px 14px; border-radius:999px; background:var(--bg-soft);
  border:1px solid var(--line); font-size:12.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap;
}
.bullets{ margin:18px 0 0; display:grid; gap:10px; }
.bullets li{ position:relative; padding-left:20px; color:var(--ink-soft); font-size:14.8px; }
.bullets li::before{
  content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--accent-2);
}

/* Projects */
.project{ display:flex; flex-direction:column; }
.proj-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.project h3{ font-size:18.5px; }
.proj-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.tag{
  padding:5px 11px; border-radius:8px; font-size:12.2px; font-weight:500;
  background:var(--accent-soft); color:var(--accent);
}
.tag.role{ background:#f1f3f9; color:var(--ink-soft); font-weight:600; }

/* Skills */
.skill-group h3{ font-size:16.5px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.skill-group h3::before{
  content:""; width:8px; height:8px; border-radius:3px; flex:none;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:7px 13px; border-radius:999px; font-size:13.2px; font-weight:500;
  background:var(--bg-soft); border:1px solid var(--line); color:var(--ink-soft);
  transition:.2s ease;
}
.chip:hover{ background:var(--accent-soft); border-color:#d4daff; color:var(--accent); }

/* Education / certificates */
.edu h3{ font-size:17.5px; }
.edu .tl-company{ margin-top:6px; }
.edu p.detail{ margin:14px 0 0; color:var(--muted); font-size:14.3px; }
.cert h4{ font-size:16px; margin-bottom:6px; }
.cert .org{ color:var(--accent); font-weight:600; font-size:13.5px; }
.cert p{ margin:10px 0 0; color:var(--muted); font-size:14.2px; }

/* Contact */
.contact-grid{ max-width:840px; margin-inline:auto; }
.contact-card{ display:flex; align-items:center; gap:16px; padding:22px 24px; }
.contact-icon{
  width:46px; height:46px; flex:none; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(140deg,var(--accent-soft),#e7ecff); color:var(--accent);
}
.contact-icon svg{ width:21px; height:21px; }
.contact-card span{ display:block; font-size:12.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600; }
.contact-card strong{ display:block; font-size:15.2px; font-weight:600; margin-top:3px; word-break:break-word; }
.contact-card a:hover strong{ color:var(--accent); }
.contact-note{ text-align:center; color:var(--muted); margin:36px auto 0; max-width:620px; }
.contact-note + .hero-cta{ margin-top:22px; }

/* Footer */
.footer{ background:var(--ink); color:#c3cadd; padding:26px 0; font-size:14px; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer a:hover{ color:#fff; }

/* Reveal on scroll */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* ------------------------- RESPONSIVE ------------------------- */
@media (max-width:960px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  .burger{ display:grid; }
  .nav-links{
    position:fixed; top:var(--nav-h); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:14px 24px 22px; margin:0;
    box-shadow:var(--shadow-md);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:.22s ease;
  }
  .nav-links.open{ transform:none; opacity:1; pointer-events:auto; }
  .nav-links a{ padding:12px 14px; border-radius:12px; font-size:15.5px; }
}

@media (max-width:720px){
  .section{ padding:70px 0; }
  .hero{ padding:calc(var(--nav-h) + 56px) 0 72px; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .avatar{ width:140px; height:140px; }
  .avatar-fallback{ font-size:42px; }
  .card{ padding:24px; }
  .timeline{ padding-left:26px; }
  .tl-item::before{ left:-26px; width:16px; height:16px; top:28px; }
  .brand-name{ display:none; }
  .hero-contact{ gap:8px 18px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .card:hover,.btn:hover{ transform:none; }
}

/* --------------------------- PRINT --------------------------- */
@media print{
  .nav,.hero-cta,.blob,.footer a,.skip{ display:none !important; }
  body{ background:#fff; }
  .section,.hero{ padding:24px 0; background:#fff; }
  .card{ box-shadow:none; break-inside:avoid; }
  .reveal{ opacity:1; transform:none; }
}