:root{
  --bg:#f7f7f7; --card:#ffffff; --text:#1f2937; --muted:#4b5563;
  --primary:#f0b90b; --primary-ink:#3a3a3a; --accent:#9ca3af; --ring:rgba(240,185,11,0.35);
}
:root[data-theme="dark"]{
  --bg:#0d0f12; --card:#15181d; --text:#e6e6e6; --muted:#b3b9c4;
  --primary:#f1c232; --primary-ink:#111; --accent:#2b313a; --ring:rgba(241,194,50,0.45);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.65}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.header{position:sticky;top:0;background:var(--card);box-shadow:0 2px 12px rgba(0,0,0,.08);z-index:40}
.nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;gap:.75rem}
.logo{font-weight:800;color:var(--primary-ink);text-decoration:none;letter-spacing:.25px}
.nav-right{display:flex;gap:.5rem;align-items:center}
.theme-toggle,.menu-toggle{width:40px;height:40px;border:1px solid var(--accent);background:transparent;border-radius:10px;position:relative}
.theme-toggle::before{content:'☀';position:absolute;inset:0;display:grid;place-items:center;font-size:18px}
:root[data-theme="dark"] .theme-toggle::before{content:'🌙'}
.menu{list-style:none;display:flex;gap:1.2rem;margin:0;padding:0}
.menu a{color:var(--text);text-decoration:none}
.menu a.active,.menu a:hover{color:var(--primary-ink);border-bottom:2px solid var(--primary)}
.menu-toggle::before,.menu-toggle::after{content:'';position:absolute;left:8px;right:8px;height:2px;background:var(--primary-ink);box-shadow:0 8px 0 var(--primary-ink)}
.menu-toggle::after{top:14px}.menu-toggle::before{top:14px}
@media (max-width:760px){.menu-toggle{display:inline-block}.menu{display:none;position:absolute;right:12px;top:64px;background:var(--card);padding:.8rem 1rem;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.18);flex-direction:column}.menu.open{display:flex}}

@media (min-width:760px){.nav-right{display:none}} 
  
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center;padding:3rem 0 1.5rem}
.hero-text h1{margin:0;font-size:clamp(1.9rem,3vw,2.6rem)}
@media (max-width:900px) {.hero-text{padding-left: 10px;}}
.subtitle{margin:.25rem 0 1rem;color:var(--muted);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;list-style:none}
.chips li{background:linear-gradient(180deg,rgba(240,185,11,0.14),rgba(240,185,11,0.08));border:1px solid var(--primary);color:var(--primary-ink);padding:.35rem .6rem;border-radius:999px;font-size:.92rem}
.cta-row{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:12px;text-decoration:none;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.btn-primary{ margin-top: auto;background:var(--primary);color:var(--primary-ink)}
.btn-ghost{background:transparent;border:1px solid var(--accent);color:var(--text)}
.hero-portrait img{width:min(340px,90%);aspect-ratio: 1 / 1;border-radius:50%;border:4px solid #fff;box-shadow:0 16px 40px rgba(0,0,0,.12);object-fit: cover}
@media (max-width:900px){.hero{grid-template-columns:1fr}.hero-portrait{order:-1;text-align:center}}
.about {padding:1rem 0 2.5rem}
@media (max-width:900px){.about {padding: 10px 10px 10px 10px;}}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.info{background:var(--card);border:1px solid var(--accent);border-radius:14px;padding:1rem;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.info h3{margin:.1rem 0 .25rem;color:var(--primary-ink)}
.intro{padding:2rem 0 1rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;padding:1.25rem 0 3rem}
.card{background:var(--card);border:1px solid var(--accent);border-radius:16px;overflow:hidden;box-shadow:0 14px 32px rgba(0,0,0,.08);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,0,0,.12)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover;background:#fff}
.card-body{padding:1rem 1rem 1.25rem;display:flex;flex-direction:column;gap:.5rem; flex-grow: 1; justify-content: flex-start}
.card h3{margin:.1rem 0}
.back{display:inline-block;margin:.5rem 0 0;text-decoration:none;color:var(--primary-ink)}
.lead{color:var(--muted)}
.project-body{display:grid;grid-template-columns:1fr 2fr;gap:1.5rem;padding:1rem 0 3rem}
.meta-card{background:var(--card);border:1px solid var(--accent);border-radius:12px;padding:1rem;margin-bottom:1rem}
.meta-card h3{margin:.1rem 0 .25rem}
@media (max-width:900px){.project-body{grid-template-columns:1fr}}
.footer{text-align:center;background:var(--card);border-top:1px solid var(--accent);color:#8b95a5;padding:1.25rem 1rem}
.footer a{color:var(--primary-ink);text-decoration:none}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


.project-hero {
  margin-bottom: 2rem;
}

.project-hero img {
  width: 100%;
  max-width: 900px;
  border-radius: 18px;
  display: block;
}

.project-hero figcaption {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  color: var(--text-muted, #666);
}

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.project-gallery img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover; 
  aspect-ratio: 1 / 1;
}

.highlight {
  background-color: #f0b90b;
  color: #1d1b1b;
  padding: 0px 18px 0px 0px;
  border-radius: 1px;
  margin-right: 0.1rem;
}

.highlight-context {
  background-color: #f0b90b;
  color: #1d1b1b;
  padding: 0px 10px 0px 0px;
  border-radius: 1px;
  margin-right: 0.5rem;
}

.highlight-underline {
  border-bottom: 6px solid #f0b90b; /* sarı altı çizgi */
  padding-bottom: 0px;               /* metinle çizgi arasında ufak boşluk */
  display: inline-block;             /* çizginin düzgün görünmesi için */
}

.logo:hover .highlight {
  background-color: #f0b90b;
  color: #1a1a1a;
  padding: 10px 18px 10px 0px;
  border-radius: 1px;
  transition: 0.25s ease;
}

.meta-card:hover {
  background-color: #f0b90b;
  color: #ffffff;
}

.btn-ghost:hover {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color:#ffffff;
}

.btn-primary:hover {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color:#f0b90b;
  border-width: 0px;
  border-style: solid;
}

@media (max-width: 768px) {
  .project-gallery {
    display: flex;                 /* grid yerine yatay flex */
    overflow-x: auto;              /* sağa sola kaydırılabilir */
    gap: 1rem;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory; /* slider hissi için snap */
    -webkit-overflow-scrolling: touch; /* iOS için yumuşak scroll */
  }

  .project-gallery img {
    flex: 0 0 80%;                 /* her foto ekranın ~%80'i kadar */
    scroll-snap-align: center;     /* foto ortada durarak durur */
    border-radius: 12px;
  }

  /* İsteğe bağlı: scroll bar görünmesin */
  .project-gallery::-webkit-scrollbar {
    display: none;
  }
}

.card-h3-title{
  min-height: 60px;   /* tüm kartlarda aynı yükseklik */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  line-height: 1.2;

}