/* Colors */
:root {
  /* 🎨 Renk Paleti */
  --bg-dark: #0f172a;       /* Genel arka plan */
  --bg-card: #1e293b;       /* Kart / section arka planı */
  
  --primary: #2563eb;       /* Canlı mavi (ana vurgu) */
  --secondary: #1e40af;     /* Koyu mavi (hover / contrast) */
  --accent: #38bdf8;        /* Açık mavi (detay / highlight) */

  --text-title: #f8fafc;    /* Başlık yazısı (neredeyse beyaz) */
  --text-main: #cbd5e1;     /* Paragraf yazısı (gri-mavi) */
  --text-muted: #94a3b8;    /* Daha silik text */

  --border-color: rgba(255, 255, 255, 0.08);
  /* 🌈 Gradient Renkleri */
  --gradient-1: #1e3a8a;   /* lacivert */
  --gradient-2: #2563eb;   /* canlı mavi */
  --gradient-3: #e2e8f0;   /* açık mavi */
}

/* Heading Styles */
.heading-big{
    font-size:3.2rem;
    font-family: "Montserrat", sans-serif;
}
.heading-med{
    font-size:2.4rem;
    font-family:"Montserrat", sans-serif;
}
.heading-small{
    font-size:2rem;
    font-family:"Montserrat", sans-serif;
}
.heading-align{
    text-align:center;
}
.heading-big-color{
    color:var(--text-title)
}
.heading-med-color{
    color:var(--text-title)
}
.heading-small-color{
    color:var(--text-title)
}
/*Nav Styles*/
#topbar{
    border-bottom: 2px solid var(--primary);
}
.nav-container{
    display:flex;
    justify-content:right;
    background: linear-gradient(to left, var(--bg-dark), var(--gradient-1), var(--gradient-1));
}
.nav-container ul{
    display:flex;
    gap:2rem;
    margin-right:3.2rem;
    list-style:none;
}
.nav-container ul li a{
    text-decoration:none;
    font-size:2rem;
    color:var(--text-main);
}
.nav-container ul li a:hover{
    color:var(--secondary)
}
.nav-container ul li a:active{
    color:var(--primary);
}
/* Header Styles */
.header-container{
    background:linear-gradient(to right, var(--gradient-1), var(--gradient-2), var(--gradient-3));
    display:flex;
    flex-direction:column;
    width:100%;
    min-height:10vh;
    margin-top:4rem;
    margin-bottom:4rem;
    padding:5rem 2rem;
}
/* Heading Image */
.img-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-top:1.5rem;
}
#heading-image{
    width:20rem;
    height:auto;
    border-radius:8px;
    box-shadow: 0 0 15px var(--gradient-2);
}
/*Header Buttons */
.header-btn{
    text-decoration:none;
    font-size:1.8rem;
    background: linear-gradient(to right, var(--gradient-1), var(--gradient-2));
    color:var(--text-title);
    border-radius:10px;
    padding:1rem;
    width:auto;
    display:inline-block;
    align-self:center;
    margin-top:2.4rem;
    transition: all 0.3s;
    letter-spacing:2px;
    cursor:pointer;
}

.header-btn:hover{
    background: linear-gradient(to right, var(--gradient-1), var(--gradient-3));
    color:var(--text-main);
    transform:scale(1.05);
    box-shadow: 0 0 10px var(--primary);
}
.header-btn:active{
    background: linear-gradient(to right, var(--gradient-2), var(--gradient-3));
    color:var(--text-main);
    transform:scale(0.98);
}
/*Header Buttons End*/
/* Icons */
.icon-container{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.icon-container ul{
    list-style:none;
}
.icon-container ul li a i{
    margin-top:2.4rem;
}
/*Text*/
.text{
    color:var(--text-main);
    font-size:1.6rem;
    font-style:italic;
    text-align:center;
    margin-top:2rem;
    text-decoration:none;
}
.about-text{
    color:var(--text-main);
    font-size:1.6rem;
    font-style:bold;
    text-align:center;
    letter-spacing:2px;
}

/*Grid*/

.grid-container{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.2rem;;
    margin-top:5rem;
    margin-bottom:5rem;
}
.item1,
.item2{
    background:var(--bg-card);
    padding:2rem;
    border-radius:12px;
    transition: all 0.35s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.item1:hover,
.item2:hover{
    transform:scale(1.03) translateY(-6px);
    box-shadow: 0 8px 20px var(--primary);
    cursor:pointer;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
  gap: 2rem; /* kartların arası */
  padding: 2rem;
}

.project-card {
  background: var(--bg-card); /* kartların arka planı */
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding:3rem;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
  transform:scale(1.03) translateY(-8px);
  box-shadow: 0 8px 20px var(--primary);
  cursor:pointer;
}

.project-card img {
  width: 50rem;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 1rem;
}

/* Contact Styling*/
.contact-section {
  background: linear-gradient(to right, var(--bg-card), var(--bg-dark));
  padding: 6rem 2rem;
  border-top: 2px solid var(--border-color);
}

.contact-text {
  text-align: center;
  margin-bottom: 3rem;
  font-size: 1.6rem;
  color: var(--text-muted);
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  max-width: 1000px;
  margin: 0 auto;
}

.contact-info p {
  font-size: 1.6rem;
  margin: 1rem 0;
  color: var(--text-main);
}

.contact-info i {
  margin-right: 1rem;
  color: var(--primary);
  font-size: 2rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-form input,
.contact-form textarea {
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-dark);
  color: var(--text-main);
  font-size: 1.6rem;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border: 1px solid var(--primary);
  box-shadow: 0 0 8px var(--primary);
}