:root{
  --bg-1: #f7eef6;
  --accent-1: #3A7FD5;
  --accent-2: #FF6B7A;
  --accent-3: #58C38B;
  --accent-4: #f68d1e;
  --accent-5: #1cbdb4;
  --accent-6: #814b90;
  --muted: #6b6b7a;
  --card-bg: rgba(255,255,255,0.7);
  --glass: rgba(255,255,255,0.55);
  --radius: 12px;
  --maxwidth: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,var(--bg-1) 0%, #fff 100%);
  color:#222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

.wrap{max-width:var(--maxwidth);margin:0 auto;padding:28px}

/* NAVBAR */
nav{
  display:flex;align-items:center;justify-content:space-between;padding:10px 0;
  position:sticky;top:0;background:transparent;z-index:40;
}
.brand{color: rgb(77, 77, 77);display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:0.2px;}
.brand .logo{width:50px;height:50px;object-fit:cover;border-radius:50%; }
.navlinks{display:flex;gap:18px;align-items:center}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:600;padding:10px 12px;border-radius:10px;transition:all .18s}
.navlinks a:hover{background:var(--glass);color:#222;transform:translateY(-2px)}
.menu{display:none;border:0;background:transparent}


/* HERO */
.hero{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;padding:40px 0 60px;}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));border-radius:var(--radius);padding:30px;box-shadow:0 10px 30px rgba(50,50,93,0.06);}
h1{font-size:36px;margin:8px 0 10px}
.role{color:var(--muted);margin-bottom:18px}
.buttons{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700}
.btn.github{background:#2f3a69;color:white}
.btn.linkedin{background:#0a66c2;color:white}
.btn.ig{background:#f502ab;color:#ffffff}
.btn.medium{background:#950640;color:#ffffff}
.btn.bionluk{background:#fd4056;color:#ffffff}
.btn.mail{background:#d8f1e0;color:#145a2b}
.tiny{font-size:15px;color:rgb(90, 90, 90);margin-top:8px}

/* GRID KARTLAR */
.grid-section{margin:60px 0}
.section-title{margin-bottom: 20px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-title h3{margin:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--card-bg);padding:14px;border-radius:12px;min-height:150px;max-width: 560px;display:flex;flex-direction:column;gap:10px;box-shadow:0 6px 20px rgba(20,20,40,0.04)}
/*.card img{width:100%;height:140px;object-fit:cover;border-radius:8px}*/
.card img { width: 100%; height: 200px; object-fit: cover; display: block;}
.card .meta{display:flex;justify-content:space-between;align-items:center}
.tag{color: rgb(90, 90, 90);font-size:12px;padding:6px 8px;border-radius:10px;background:rgba(0,0,0,0.06);font-weight:700}
.card h4{color:#4B5563;margin:0;font-size:16px}
.card p{margin:0;color:var(--muted);font-size:14px}
.card .actions{margin-top:auto;display:flex;gap:8px}
.small-btn{background:var(--accent-6);border:2px solid rgba(0,0,0,0.08);color:white;padding:8px 10px;border-radius:8px;text-decoration:none;font-weight:700;font-size:13px}
.small-btn.play{background:var(--accent-5);border:2px solid rgba(0,0,0,0.08);color:white}
.small-btn.details{background:rgb(219, 219, 219);border:2px solid rgba(0,0,0,0.08);color:black}




/* Örnek: Hizmet kartlarına özel tag renkleri */
#services .tag:nth-child(1){background:var(--accent-2);color:white}
#services .tag:nth-child(2){background:var(--accent-3);color:white}
#services .tag:nth-child(3){background:var(--accent-5);color:white}



.contact-section {
    margin-top: 100px;
    padding: 60px 20px;
    background: #F9FAFB;
    border-radius: 20px;
    text-align: center;
}

.contact-section h2 {
    font-size: 26px;
    color: #111827;
    margin-bottom: 12px;
}

.contact-section p {
    color: #4B5563;
    font-size: 15px;
    margin-bottom: 25px;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
}

.contact-link {
    color: #3B82F6;
    font-weight: 500;
    text-decoration: none;
    font-size: 15px;
}

.contact-link:hover {
    text-decoration: underline;
}

.cv-btn {
    display: inline-block;
    padding: 12px 22px;
    background: #111827;
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.25s ease;
}

.cv-btn:hover {
    background: #1F2937;
    transform: translateY(-1px);
}



/* FOOTER */
footer{padding:28px 0 60px;color:var(--muted);font-size:14px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}

/* RESPONSIVE */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:700px){
  .wrap{padding:18px}
  .navlinks{display:none}
  .hamburger{display:block}
  .grid{grid-template-columns:1fr}
  h1{font-size:28px}
}