:root{
  --green:#2F5D4E;   /* koyu ama tam koyu olmayan yeşil */
  --orange:#C2570F;  /* hafif koyu turuncu */
  --white:#FFFFFF;   /* arka plan */
  --tint:#EEF3F0;    /* yeşilin çok açık tonu, bölüm arka planları */
  --peach:#F6C7A0;   /* koyu yeşil üstünde okunan açık turuncu */
  --ink:#1D2B26;     /* ana yazı rengi */
  --muted:#4F625B;   /* ikincil yazılar */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{background:var(--white);color:var(--ink);font:400 1rem/1.7 "IBM Plex Sans",system-ui,sans-serif}
h1,h2,h3,h4{font-family:"Chakra Petch",system-ui,sans-serif;font-weight:600;line-height:1.15}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* Üst menü ve ilerleme çubuğu */
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--peach);z-index:20}
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:.9rem clamp(1rem,4vw,2.5rem);background:rgba(47,93,78,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.2)}
.brand{font:600 1.2rem "Chakra Petch",sans-serif;color:var(--peach)}
.nav nav{display:flex;gap:clamp(.7rem,2vw,1.6rem);font-size:.92rem}
.nav nav a{color:var(--tint);transition:color .2s}
.nav nav a:hover{color:var(--peach)}

/* Hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:6rem 1.25rem 3rem;background:var(--green);color:var(--white)}
#stars{position:absolute;inset:0;width:100%;height:100%}
.hero-text{position:relative;text-align:center}
.hero h1{font-size:clamp(2.8rem,11vw,7.5rem);letter-spacing:.02em;animation:scan 1.4s cubic-bezier(.7,0,.2,1) both}
@keyframes scan{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.badge{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.2rem;padding:.3rem .9rem;border:1px solid rgba(255,255,255,.4);background:rgba(47,93,78,.7);color:var(--tint);font-size:.9rem}
.dot{width:8px;height:8px;border-radius:50%;background:var(--peach)}
.status{margin:1.2rem 0 2rem;color:var(--peach);font-size:clamp(1rem,3.2vw,1.3rem);min-height:1.7em}
.cursor{display:inline-block;width:.55em;height:1.05em;margin-left:.2em;background:var(--peach);vertical-align:-.15em;animation:blink 1s steps(2) infinite}
@keyframes blink{to{opacity:0}}
.actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}

/* Butonlar */
.btn{display:inline-block;padding:.75rem 1.6rem;border:1px solid var(--orange);background:var(--orange);color:#fff;font:500 1rem "IBM Plex Sans",sans-serif;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));transition:background .2s,color .2s}
.btn:hover{background:#A84A0B;border-color:#A84A0B}
.btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.5)}
.btn.ghost:hover{background:transparent;color:#fff;border-color:#fff}

/* Özet şeridi */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--orange);color:#fff}
.stats div{padding:1.5rem 1rem;text-align:center;border-right:1px solid rgba(255,255,255,.35)}
.stats div:last-child{border-right:0}
.stats strong{display:block;font:600 clamp(1.8rem,5vw,2.8rem)/1 "Chakra Petch",sans-serif}
.stats span{font-size:.95rem}

/* Bölümler */
.sec{padding:5rem 1.25rem}
.sec.alt{background:var(--tint)}
.sec.dark{background:var(--green);color:var(--white)}
.wrap{max-width:1000px;margin:0 auto}
h2{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:1.5rem}
h2::after{content:"";display:block;width:56px;height:3px;background:var(--orange);margin-top:.7rem}
h3{font-size:1.25rem;margin-bottom:1rem}
p{max-width:64ch;margin-bottom:1rem}
.cols{display:grid;gap:3rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* Hakkımda */
.about{display:grid;gap:2.5rem;grid-template-columns:260px 1fr;align-items:start}
.photo{position:relative;aspect-ratio:4/5;background:var(--tint);border:2px solid var(--orange);display:grid;place-items:center;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.photo span{font:600 4rem "Chakra Petch",sans-serif;color:var(--peach)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.facts{margin-top:1.5rem;border-top:1px solid var(--tint)}
.facts div{display:flex;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--tint)}
.facts dt{width:6rem;color:var(--muted);flex:none}
.facts dd{overflow-wrap:anywhere}

/* Zaman çizelgesi */
.timeline{border-left:2px solid var(--orange);padding-left:1.5rem}
.timeline li{position:relative;padding-bottom:1.8rem}
.timeline li::before{content:"";position:absolute;left:calc(-1.5rem - 6px);top:.55rem;width:10px;height:10px;background:var(--green);border:2px solid var(--orange)}
.timeline time{color:var(--muted);font-size:.9rem}
.timeline h4{font-size:1.1rem;margin:.2rem 0 .4rem}
.timeline p{color:var(--muted);margin:0}

/* Yetenekler */
.skills{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.group{background:var(--tint);border-left:3px solid var(--orange);padding:1.3rem 1.4rem;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
.group h3{font-size:1.1rem;margin-bottom:.6rem}
.group li{padding:.35rem 0;border-bottom:1px solid rgba(31,58,50,.15)}
.group li:last-child{border-bottom:0}

/* Projeler */
.projects{display:grid;gap:1.5rem}
.project{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--white);border:1px solid var(--orange)}
.shot{position:relative;display:grid;place-items:center;min-height:220px;text-align:center;color:var(--muted);overflow:hidden;
  background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(194,87,15,.12) 12px 13px),var(--tint)}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.body{padding:1.6rem}
.body p{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.tags li{padding:.25rem .8rem;border:1px solid var(--orange);font-size:.9rem}
.links{display:flex;gap:1.2rem;margin:0}
.links a{border-bottom:2px solid var(--orange);font-weight:500}
.links a:hover{background:var(--tint)}

.chips{display:flex;flex-wrap:wrap;gap:.7rem}
.chips li{padding:.4rem 1rem;border:1px solid var(--orange);background:var(--tint)}

/* İletişim (koyu bölüm) */
.dark p{color:var(--tint)}
.plain li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(29,43,38,.15)}
.plain span{color:var(--muted)}
.dark .plain li{border-bottom-color:rgba(255,255,255,.25)}
.plain a{overflow-wrap:anywhere;border-bottom:1px solid transparent}
.dark .plain a{color:var(--peach)}
.dark .plain a:hover{border-bottom-color:var(--peach)}
form{display:grid;gap:1rem}
form label{display:grid;gap:.35rem;color:var(--tint);font-size:.95rem}
input,textarea{font:inherit;color:var(--green);background:var(--white);border:1px solid var(--orange);padding:.7rem .9rem}
input:focus,textarea:focus{outline:3px solid var(--orange);outline-offset:1px}
form .btn{justify-self:start}
.hp{position:absolute;left:-9999px}

footer{padding:2rem 1.25rem;text-align:center;background:var(--green);color:var(--tint);font-size:.9rem;border-top:1px solid rgba(255,255,255,.2)}

.dark h2::after{background:var(--peach)}
.dark input:focus,.dark textarea:focus,.nav :focus-visible,.hero :focus-visible,.dark :focus-visible,footer :focus-visible{outline-color:var(--peach)}

/* Telefon */
@media (max-width:760px){
  .about{grid-template-columns:1fr}
  .photo{max-width:220px}
  .project{grid-template-columns:1fr}
  .nav nav a:nth-child(-n+2){display:none}
  .sec{padding:3.5rem 1.25rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.35)}
}
@media (max-width:420px){
  .stats strong{font-size:1.6rem}
  .stats span{font-size:.85rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1,.cursor{animation:none}
}