/* =========================================================
   TOKENS
   ========================================================= */
:root{
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  --accent-mobile:#3D8BFD;   /* Flutter/Dart-inspired blue   */
  --accent-api:#8B6CFF;      /* .NET-inspired violet         */
  --accent-data:#1FC8A9;     /* Data layer teal              */

  --radius-s:8px;
  --radius-m:14px;
  --radius-l:22px;

  --ease:cubic-bezier(.16,.84,.44,1);
  --dur-s:.25s;
  --dur-m:.6s;
  --dur-l:1s;

  --maxw:1180px;
}

/* Dark theme (default) */
:root, [data-theme="dark"]{
  --bg:#0A0E17;
  --bg-alt:#0D1220;
  --surface:#121828;
  --surface-2:#171F33;
  --border:#242E48;
  --text:#EAEDF6;
  --text-dim:#8D97B3;
  --text-faint:#5B6584;
  --grid-line:rgba(255,255,255,0.035);
}

/* Light theme */
[data-theme="light"]{
  --bg:#EEF1F7;
  --bg-alt:#E7EBF3;
  --surface:#FFFFFF;
  --surface-2:#F5F7FB;
  --border:#D7DDEA;
  --text:#131826;
  --text-dim:#525C77;
  --text-faint:#8992AC;
  --grid-line:rgba(19,24,38,0.045);
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  transition:background var(--dur-m) var(--ease), color var(--dur-m) var(--ease);
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.mono{font-family:var(--font-mono);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

:focus-visible{
  outline:2px solid var(--accent-mobile);
  outline-offset:3px;
  border-radius:4px;
}

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================
   SCROLL PROGRESS BAR
   ========================================================= */
.progress-bar{
  position:fixed;
  top:0; left:0;
  height:3px;
  width:0%;
  background:linear-gradient(90deg, var(--accent-mobile), var(--accent-api), var(--accent-data));
  z-index:200;
  transition:width .1s linear;
}

/* =========================================================
   CURSOR GLOW (desktop only, decorative)
   ========================================================= */
.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:420px; height:420px;
  border-radius:50%;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent-mobile) 10%, transparent) 0%, transparent 70%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}
.cursor-glow.is-active{ opacity:1; }
@media (pointer:coarse){ .cursor-glow{ display:none; } }

/* =========================================================
   TOAST
   ========================================================= */
.toast{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translate(-50%, 20px);
  background:var(--text);
  color:var(--bg);
  font-size:.85rem;
  font-weight:500;
  padding:12px 20px;
  border-radius:100px;
  z-index:300;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  box-shadow:0 16px 32px -12px rgba(0,0,0,.4);
}
.toast.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
}

/* =========================================================
   SCROLL TO TOP
   ========================================================= */
.to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:90;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), border-color .3s;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.35);
}
.to-top.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.to-top:hover{ border-color:var(--accent-mobile); transform:translateY(-3px); }

/* =========================================================
   NAVBAR
   ========================================================= */
.nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent;
  transition:background var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), backdrop-filter var(--dur-s) var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-logo{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.02em;
}
.logo-bracket{color:var(--accent-mobile);}
.nav-links{
  display:flex;
  gap:32px;
}
.nav-links a{
  font-size:.88rem;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:8px;
  transition:color var(--dur-s) var(--ease);
  position:relative;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.is-active{ color:var(--text); }
.nav-links a.is-active .tag{
  color:var(--bg);
  background:var(--accent-mobile);
  border-radius:4px;
  padding:1px 5px;
}
.nav-links .tag{
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--text-faint);
  transition:color var(--dur-s), background var(--dur-s);
}
.nav-actions{display:flex; align-items:center; gap:10px;}

.theme-toggle{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:border-color var(--dur-s), transform var(--dur-s);
}
.theme-toggle:hover{ transform:translateY(-1px); border-color:var(--accent-mobile);}
.icon-moon{display:none;}
[data-theme="light"] .icon-sun{display:none;}
[data-theme="light"] .icon-moon{display:block;}

.nav-burger{
  display:none;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface);
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
}
.nav-burger span{
  width:16px; height:1.5px; background:var(--text);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-burger.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-burger.is-open span:nth-child(2){opacity:0;}
.nav-burger.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

.mobile-menu{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(78vw, 320px);
  background:var(--surface);
  border-left:1px solid var(--border);
  z-index:99;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:100px 28px 28px;
  transform:translateX(100%);
  transition:transform var(--dur-m) var(--ease);
}
.mobile-menu.is-open{transform:translateX(0);}
.mobile-menu a{
  font-family:var(--font-mono);
  font-size:1rem;
  padding:14px 0;
  border-bottom:1px solid var(--border);
  color:var(--text-dim);
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:140px 24px 80px;
  overflow:hidden;
}
.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 90%);
  pointer-events:none;
}
.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
  position:relative;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--accent-mobile);
  letter-spacing:.04em;
  margin-bottom:18px;
  transition-delay:.05s;
}
.hero-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(2.4rem, 6.4vw, 5.2rem);
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 26px;
  display:flex;
  flex-direction:column;
}
.hero-title span{ transition-delay:.12s; }
.hero-title span:nth-child(2){ transition-delay:.22s; }
.hero-title span:nth-child(3){ transition-delay:.32s; }
.hero-accent{
  background:linear-gradient(90deg, var(--accent-mobile), var(--accent-api));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-desc{
  font-size:1.08rem;
  line-height:1.7;
  color:var(--text-dim);
  max-width:620px;
  margin:0 0 36px;
  transition-delay:.4s;
}
.hero-desc strong{color:var(--text); font-weight:600;}
.hero-actions{
  display:flex;
  gap:14px;
  margin-bottom:70px;
  transition-delay:.48s;
}

.btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:.92rem;
  padding:14px 26px;
  border-radius:100px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:transform var(--dur-s) var(--ease), background var(--dur-s), border-color var(--dur-s), box-shadow var(--dur-s);
}
.btn-primary{
  background:var(--text);
  color:var(--bg);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,0,0,.4);}
.btn-ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn-ghost:hover{ border-color:var(--accent-mobile); transform:translateY(-2px);}
.btn-full{ width:100%; justify-content:center;}

/* Signature: exploded stack diagram */
.stack-diagram{
  display:flex;
  align-items:stretch;
  gap:0;
  max-width:720px;
  transition-delay:.55s;
}
.stack-layer{ flex:1; }
.layer-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  transform:translateY(0);
  transition:transform .5s var(--ease), border-color .3s, box-shadow .3s;
}
.stack-layer[data-layer="mobile"] .layer-card{ animation:float-mobile 6s ease-in-out infinite; }
.stack-layer[data-layer="api"] .layer-card{ animation:float-api 6s ease-in-out infinite; animation-delay:.4s;}
.stack-layer[data-layer="data"] .layer-card{ animation:float-data 6s ease-in-out infinite; animation-delay:.8s;}

@keyframes float-mobile{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} }
@keyframes float-api{ 0%,100%{transform:translateY(-4px);} 50%{transform:translateY(6px);} }
@keyframes float-data{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

.stack-layer:hover .layer-card{
  box-shadow:0 16px 32px -18px rgba(0,0,0,.5);
}
.stack-layer[data-layer="mobile"] .layer-card:hover{ border-color:var(--accent-mobile); }
.stack-layer[data-layer="api"] .layer-card:hover{ border-color:var(--accent-api); }
.stack-layer[data-layer="data"] .layer-card:hover{ border-color:var(--accent-data); }

.layer-index{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-faint);}
.layer-name{ font-family:var(--font-display); font-size:1.2rem; font-weight:600;}
.layer-tech{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-dim);}
.stack-layer[data-layer="mobile"] .layer-index{color:var(--accent-mobile);}
.stack-layer[data-layer="api"] .layer-index{color:var(--accent-api);}
.stack-layer[data-layer="data"] .layer-index{color:var(--accent-data);}

.stack-connector{
  width:28px;
  align-self:center;
  height:1px;
  background:repeating-linear-gradient(90deg, var(--border) 0 6px, transparent 6px 10px);
}

.scroll-hint {
  position: absolute;
  bottom: 1rem; /* Daha aşağıda yer alması için mesafeyi azalttık */
  left: 50%;
  transform: translateX(-50%); /* Yatayda tam ortalama sağlar */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  color: var(--text-faint);
  text-decoration: none;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  transition: color 0.2s ease;
  z-index: 10;
}

.scroll-hint:hover {
  color: var(--text);
}
.scroll-dot{ animation:scroll-move 1.8s ease-in-out infinite; }
@keyframes scroll-move{ 0%{ transform:translateY(0); opacity:1;} 60%{transform:translateY(8px); opacity:0;} 61%{transform:translateY(0); opacity:0;} 100%{opacity:1;} }

@media (max-width:720px){
  .stack-diagram{ flex-direction:column; gap:14px; max-width:100%;}
  .stack-connector{ width:1px; height:16px; background:repeating-linear-gradient(180deg, var(--border) 0 6px, transparent 6px 10px);}
}

/* =========================================================
   SECTIONS (shared)
   ========================================================= */
.section{ padding:120px 24px; position:relative; scroll-margin-top:74px; }
#top{ scroll-margin-top:0; }
.section-alt{ background:var(--bg-alt); }
.section-inner{ max-width:var(--maxw); margin:0 auto; }
.section-eyebrow{
  font-family:var(--font-mono);
  font-size:.8rem;
  color:var(--text-faint);
  display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.section-eyebrow .tag{
  color:var(--bg);
  background:var(--text);
  border-radius:5px;
  padding:2px 8px;
  font-size:.72rem;
}
.section-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.7rem, 3.6vw, 2.6rem);
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 20px;
  max-width:760px;
}
.section-sub{
  color:var(--text-dim);
  font-size:1.02rem;
  max-width:560px;
  margin:0 0 56px;
}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.about-text p{ color:var(--text-dim); line-height:1.75; font-size:1.02rem; margin:0 0 18px;}
.about-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:36px;
  padding-top:32px;
  border-top:1px solid var(--border);
}
.stat-num{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:2.4rem;
  color:var(--accent-mobile);
  line-height:1;
  margin-bottom:8px;
}
.stat-label{
  font-size:.78rem;
  color:var(--text-faint);
  line-height:1.5;
}
.stat-label .mono{ color:var(--text-dim); }

@media (max-width:860px){
  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .about-stats{ grid-template-columns:1fr 1fr 1fr; gap:14px; }
}

/* =========================================================
   CODE WINDOW (typing terminal)
   ========================================================= */
.code-window{
  margin-top:56px;
  background:#0D1117;
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.5);
}
.code-window-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  background:#161B22;
  border-bottom:1px solid #242C38;
}
.code-dots{ display:flex; gap:7px; }
.code-dots span{ width:10px; height:10px; border-radius:50%; background:#3A4250; }
.code-dots span:nth-child(1){ background:#FF5F56; }
.code-dots span:nth-child(2){ background:#FFBD2E; }
.code-dots span:nth-child(3){ background:#27C93F; }
.code-tabs{ display:flex; gap:4px; }
.code-tab{
  font-family:var(--font-mono);
  font-size:.75rem;
  color:#6E7681;
  background:transparent;
  border:none;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  transition:color .2s, background .2s;
}
.code-tab.is-active{ color:#E6EDF3; background:#0D1117; }
.code-tab:hover{ color:#E6EDF3; }
.code-body{
  margin:0;
  padding:24px 26px 30px;
  font-family:var(--font-mono);
  font-size:.86rem;
  line-height:1.75;
  color:#B7C4D6;
  min-height:230px;
  white-space:pre-wrap;
  word-break:break-word;
}
.code-cursor{
  display:inline-block;
  width:7px; height:16px;
  background:var(--accent-mobile);
  vertical-align:-3px;
  margin-left:2px;
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* simple token colors applied via spans injected in JS */
.tok-kw{ color:#FF7B72; }
.tok-type{ color:#7EE1C7; }
.tok-str{ color:#A5D6FF; }
.tok-fn{ color:#D2A8FF; }
.tok-com{ color:#6E7681; font-style:italic; }
.tok-prop{ color:#79C0FF; }

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{
  position:relative;
  max-width:760px;
  padding-left:32px;
  border-left:1px solid var(--border);
}
.timeline-item{ position:relative; padding-bottom:56px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-marker{
  position:absolute;
  left:-38px; top:4px;
  width:13px; height:13px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--text-faint);
}
.timeline-item.is-current .timeline-marker{
  border-color:var(--accent-mobile);
  background:var(--accent-mobile);
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent-mobile) 18%, transparent);
}
.timeline-date{ font-size:.78rem; color:var(--text-faint); }
.timeline-content h3{
  font-family:var(--font-display);
  font-size:1.3rem;
  margin:6px 0 2px;
}
.timeline-company{ color:var(--accent-mobile); font-weight:600; font-size:.92rem; margin:0 0 12px; }
.timeline-desc{ color:var(--text-dim); line-height:1.7; max-width:600px; margin:0 0 14px; }
.timeline-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.timeline-tags span{
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:5px 10px;
  border-radius:6px;
  border:1px solid var(--border);
  color:var(--text-dim);
}

/* =========================================================
   SKILLS
   ========================================================= */
.skills-blueprint{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  overflow:hidden;
}
.skill-layer{
  background:var(--surface);
  padding:32px;
  transition:background var(--dur-s);
}
.skill-layer:hover{ background:var(--surface-2); }
.skill-layer-head{ margin-bottom:20px; }
.skill-layer-index{ font-size:.72rem; color:var(--text-faint); display:block; margin-bottom:6px;}
.skill-layer-head h3{ font-family:var(--font-display); font-size:1.15rem; margin:0; }
.skill-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{
  font-size:.82rem;
  padding:8px 14px;
  border-radius:100px;
  border:1px solid var(--border);
  color:var(--text-dim);
  transition:border-color var(--dur-s), color var(--dur-s), transform var(--dur-s);
}
.chip:hover{ color:var(--text); border-color:var(--accent-mobile); transform:translateY(-2px); }

@media (max-width:720px){
  .skills-blueprint{ grid-template-columns:1fr; }
}

/* =========================================================
   PROJECTS
   ========================================================= */
.projects-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
/* TestFlight-style app card: icon in front, auto-colored blurred glow behind */
.app-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:28px;
  overflow:hidden;
  transition:transform .45s var(--ease), border-color .3s, box-shadow .3s;
  will-change:transform;
  --glow-rgb:61,116,255;
}
.app-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, rgb(var(--glow-rgb)) 55%, var(--border));
  box-shadow:0 28px 56px -30px rgba(0,0,0,.55);
}
.app-card-glow{
  position:absolute;
  top:-60px; left:-40px;
  width:220px; height:220px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(var(--glow-rgb), .55) 0%, rgba(var(--glow-rgb), 0) 70%);
  filter:blur(10px);
  opacity:.55;
  pointer-events:none;
  transition:background 1.2s var(--ease), opacity .4s;
  animation:glow-drift 9s ease-in-out infinite;
}
@keyframes glow-drift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(18px, 14px) scale(1.12); }
}
.app-card-top{
  position:relative;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:18px;
}
.app-icon{
  width:64px; height:64px;
  border-radius:16px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  flex-shrink:0;
}
.app-card-heading h3{
  font-family:var(--font-display);
  font-size:1.18rem;
  margin:0 0 4px;
}
.app-tagline{
  font-size:.82rem;
  color:var(--text-faint);
  margin:0;
}
.app-desc{
  position:relative;
  color:var(--text-dim);
  line-height:1.65;
  margin:0 0 18px;
  font-size:.93rem;
}
.project-tags{ position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.project-tags span{
  font-family:var(--font-mono);
  font-size:.72rem;
  padding:5px 10px;
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-dim);
}

.store-links{
  position:relative;
  display:flex;
  gap:10px;
  margin-bottom:14px;
}
.store-badge{
  flex:1;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:10px;
  font-size:.72rem;
  line-height:1.3;
  color:var(--text);
  transition:border-color var(--dur-s), transform var(--dur-s), background var(--dur-s);
}
.store-badge strong{ font-size:.86rem; display:block; }
.store-badge:hover{
  border-color:rgb(var(--glow-rgb));
  transform:translateY(-2px);
  background:var(--surface);
}
.repo-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:600;
  color:var(--text-dim);
  transition:color var(--dur-s), gap var(--dur-s);
}
.repo-link:hover{ color:var(--text); gap:11px; }

@media (max-width:780px){
  .projects-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
}
.contact-line{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:20px 0;
  border-bottom:1px solid var(--border);
}
a.contact-line{ transition:transform var(--dur-s) var(--ease); }
a.contact-line:hover{ transform:translateX(6px); }
.contact-label{ font-size:.72rem; color:var(--text-faint); }
.contact-value{ font-size:1.15rem; font-weight:500; }
.email-wrapper{ display:flex; align-items:center; gap:10px; }
.social-links{ display:flex; gap:18px; margin-top:28px; }
.social-links a{
  font-size:.86rem;
  font-weight:600;
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:100px;
  transition:border-color var(--dur-s), transform var(--dur-s);
}
.social-links a:hover{ border-color:var(--accent-mobile); transform:translateY(-2px); }

.contact-form{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-l);
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:.8rem; color:var(--text-dim); font-weight:500; }
.form-row input, .form-row textarea{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-s);
  padding:13px 14px;
  color:var(--text);
  font-family:var(--font-body);
  font-size:.95rem;
  resize:vertical;
  transition:border-color var(--dur-s);
}
.form-row input:focus, .form-row textarea:focus{
  border-color:var(--accent-mobile);
  outline:none;
}
.form-note{ font-size:.85rem; color:var(--accent-data); min-height:1.2em; margin:0; }

@media (max-width:860px){
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--border); padding:28px 24px; }
.footer-inner{
  max-width:var(--maxw);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size:.78rem;
  color:var(--text-faint);
}
.bionluk-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: url('assets/bionluk.svg') no-repeat center / contain;
          mask: url('assets/bionluk.svg') no-repeat center / contain;
}

/* =========================================================
   RESPONSIVE NAV
   ========================================================= */
@media (max-width:900px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
}