.site-header {
    width: 100%;
    height: 72px;

    padding-left: var(--page-padding);
    padding-right: var(--page-padding);

    display: flex;
    align-items: center;
    justify-content: space-between;

    /* Keep the navigation visible while scrolling */
    position: sticky;
    top: 0;

    /* Make sure it stays above the page content */
    z-index: 1000;

    /* Prevent content from being visible behind the navbar */
    background-color: var(--color-background);

    /* Very subtle line from the Figma design */
    border-bottom: 1px solid var(--color-border);
}


/* Logo / initials solda */

.site-logo {

    white-space: nowrap;

}


/* Navigation container */

.main-nav {

    display: flex;

    align-items: center;

    gap: 36px;

}


/* Individual navigation items */

.nav-link {

    font-family: var(--font-mono);

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition: opacity 0.2s ease;

}


.nav-link:hover {

    opacity: 0.5;

}



/* 
  HERO SECTION

   İlk section bütün
 */

.hero {

    width: 100%;

    min-height: calc(100vh - 72px);

    padding:

        70px var(--page-padding) 28px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



/* 
   PROFILE + AVAILABILITY
 */

.hero-profile {

    display: flex;

    flex-direction: column;

    align-items: center;

}



/* Daire profile resmi */

.profile-image {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    object-fit: cover;

}



/* 
   AVAILABILITY BOX

   3 değer tek kutuda simgeyle ayır:
   AVAILABLE | OPEN TO WORK | MILAN, ITALY
 */



.availability-box {

    margin-top: 20px;

    display: flex;

    align-items: stretch;

    border: 1px solid var(--color-border);

}


/* her değer özelde */

.availability-item {

    min-height: 28px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    white-space: nowrap;

}


/* Orta bölücü */

.availability-item+.availability-item {

    border-left: 1px solid var(--color-border);

}


/* küçük nokta */

.status-dot {

    width: 6px;

    height: 6px;

    background-color: var(--color-text);

    border-radius: 50%;

    flex-shrink: 0;

}



/* 
   HERO MAIN CONTENT

   Layout:

   NAME        |      DESCRIPTION

bu grid sistemi isim ve secriptionı ayırıyo

   */

.hero-main {
    width: 100%;
    max-width: var(--content-width);

    margin-top: 70px;

    display: grid;

    /*
    Sol sütun, ihtiyaç duyduğu alanı kaplar.
    Orta sütun ayırıcıdır.
    Sağ sütun açıklamayı içerir.
  */

    grid-template-columns:
        minmax(0, 1fr) 1px minmax(360px, 0.8fr);

    column-gap: 32px;

    align-items: center;
}

/* 
   HERO NAME
 */

.hero-name {
    width: fit-content;

    justify-self: end;
}



/* Main H1 */

.hero-title {

    margin: 0;

    font-family: var(--font-serif);

    font-weight: 400;

    line-height: 0.98;

}



/* "Iklima Ikbal"

   Kept on one line on desktop.
*/

.first-name {

    display: block;

    white-space: nowrap;

    font-size: clamp(52px, 5vw, 78px);

}



/* "Türköz"

 Aynı containerda sağa dayalı o yüzden ayrı bir item gibi
*/

.last-name {

    display: block;

    margin-top: 12px;

    text-align: right;

    font-size: clamp(48px, 4.6vw, 72px);

    font-style: italic;

    color: var(--color-text-gray);

}



/* 
    VERTICAL DIVIDER ortadaki çizgi
 */

.hero-divider {

    width: 1px;

    height: 134px;

    background-color: var(--color-border);

}



/* 
 HERO DESCRIPTION
 */

.hero-description {

    max-width: 410px;

}



/* 
   HERO ACTION BUTTONS
 */

.hero-actions {

    margin-top: 52px;

    display: flex;

    align-items: center;

    gap: 10px;

}



/* Shared button properties */





/* Black button hoverda dönüşen */





/* White / outlined button hoevrdaki normal*/





/* SVG icon buton içi */





/* Button hover */





/* 
    SCROLL INDICATOR
 */

.scroll-indicator {

    margin-top: auto;

    padding-top: 50px;

    display: flex;

    align-items: center;

    gap: 9px;

    transition: opacity 0.2s ease;

}


.scroll-indicator:hover {

    opacity: 0.5;

}


/* Down arrow SVG */

.scroll-icon {

    width: 13px;

    height: 13px;

}



/* 

   15 — SELECTED PROJECTS SECTION
 */

.projects-section {

    width: 100%;

    padding:
        120px var(--page-padding);

}



/* Main content width

  hero genişliği ile aynı mantığı kullanıyoruz
*/

.section-container {

    width: 100%;

    max-width: var(--content-width);

    margin: 0 auto;

}



/* 
   PROJECTS HEADER

   Sol:
   [02] WORK
   Selected Projects

   Sağ:
   Filter buttons
 */

.projects-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 48px;

}






/* Main section title */





/* 
   17 — FILTER BUTTONS
 */

.project-filters {

    display: flex;

    align-items: center;

    gap: 8px;

}



/* Shared filter button */





/* Active filter */





/* 
   18 — PROJECT LIST
 */

.project-list {

    width: 100%;

    border-top: 1px solid var(--color-border);

    border-left: 1px solid var(--color-border);

    border-right: 1px solid var(--color-border);

}



/* 
  PROJECT CARD

   Her proje AYNI HTML yapısını kullan
   Bu, bu bölümdeki en önemli yeniden kullanılabilir
   kalıplardan biridir.
 */

.project-card {

    width: 100%;

    border-bottom: 1px solid var(--color-border);

}



/* 
   PROJECT META ROW

   Örnek:
   01 | UI/UX DESIGN                ● DELIVERED 2025

 */

.project-meta {

    min-height: 46px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: 1px solid var(--color-border);



}



/* Sol metadata */

.project-category {

    display: flex;

    align-items: center;

    gap: 12px;

}



/* Small vertical line */

.meta-divider {

    width: 1px;

    height: 15px;

    background-color: var(--color-border);

}



/* Sağ metadata */

.project-status {

    display: flex;

    align-items: center;

    gap: 10px;

}



/* 
   PROJECT TITLE
 */

.project-title-row {

    padding:
        22px 20px;

    border-bottom: 1px solid var(--color-border);

}



/* Project title uses Libre Baskerville font */

.project-title {

    margin: 0;

    font-family: var(--font-serif);

    font-size: 28px;

    font-weight: 400;

}



/* 
    PROJECT CONTENT

   Sol:
   description + button

   Sağ:
   tags
= */

.project-content {
    padding:
        24px 20px 28px;

    display: grid;

    grid-template-columns:
        minmax(0, 1.6fr) minmax(280px, 0.8fr);

    grid-template-rows:
        auto auto;

    column-gap: 48px;
    row-gap: 24px;

    align-items: start;
}



/* 
  PROJECT DESCRIPTION
 */

.project-description {

    max-width: 700px;

}



.project-description p {
    margin: 0;

    font-family: var(--font-sans);

    font-size: 16px;

    font-weight: 300;

    line-height: 1.55;

    color: var(--color-text-gray);
}



/*
   24 — PROJECT LINK BUTTON
 */

.project-link {
    grid-column: 1;
    grid-row: 2;

    justify-self: start;

    min-height: 38px;

    padding: 0 16px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    border: 1px solid var(--color-border);

    font-family: var(--font-mono);

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* Project link SVG */

.project-link-icon {
    width: 11px;
    height: 11px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.08333;
    stroke-linecap: round;
    stroke-linejoin: round;

    flex-shrink: 0;
}



/* Hover */

.project-link:hover {

    background-color: var(--color-text);

    color: var(--color-white);

}



/* 
   25 — PROJECT TAGS
 */

.project-tags {
    grid-column: 2;
    grid-row: 1 / span 2;

    display: flex;

    align-content: flex-start;
    align-items: flex-start;

    flex-wrap: wrap;

    gap: 6px;
}



/* Individual tag */



.project-meta {
    background-color: #F0EFEA;
}

/* 
   WORK HISTORY SECTION
 */

.experience-section {
    width: 100%;

    padding:
        120px var(--page-padding);
}


/* 
   WORK HISTORY HEADER
 */

.experience-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 48px;
}


.experience-filters {
    display: flex;
    align-items: center;

    gap: 8px;
}


/* 
   EXPERIENCE LIST
 */

.experience-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
}


/* 
   EXPERIENCE ITEM
 */

.experience-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}


/* 
    EXPERIENCE TOP ROW
 */

.experience-meta {
    min-height: 54px;

    padding:
        0 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: #F0EFEA;

    border-bottom: 1px solid var(--color-border);
}


.experience-role {
    display: flex;
    align-items: center;

    gap: 14px;
}


.experience-company {
    font-family: var(--font-mono);

    font-size: 12px;
    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.experience-divider {
    width: 1px;
    height: 19px;

    background-color: var(--color-border);
}


.experience-position {
    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--color-muted);
}


.experience-date {
    display: flex;
    align-items: center;

    gap: 16px;

    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--color-muted);
}


.experience-tag {
    min-height: 28px;

    padding:
        0 10px;

    display: inline-flex;
    align-items: center;

    border: 1px solid var(--color-border);

    color: var(--color-muted);
}


/* 
    EXPERIENCE CONTENT ROW
 */

.experience-content {
    min-height: 112px;

    padding:
        24px 20px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(180px, 0.25fr);

    column-gap: 48px;

    align-items: start;
}


.experience-description {
    max-width: 820px;

    margin: 0;

    font-family: var(--font-sans);

    font-size: 16px;
    font-weight: 300;

    line-height: 1.6;

    color: var(--color-text-gray);
}


/* 
    LOCATION + VİSİT LINK
 */

.experience-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 12px;

    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--color-muted);

    text-align: right;
}


.experience-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

    transition: opacity 0.2s ease;
}


.experience-link:hover {
    opacity: 0.5;
}


.experience-link-icon {
    width: 11px;
    height: 11px;

    fill: none;
    stroke: currentColor;

    stroke-width: 1.08333;
    stroke-linecap: round;
    stroke-linejoin: round;

    flex-shrink: 0;
}

/* 
    BACKGROUND SECTİON
 */

.background-section {
    width: 100%;

    padding:
        120px var(--page-padding);
}


.background-title {
    margin-bottom: 52px;
}



/* 
   BACKGROUND ANA GRID

   Desktop için:

   SOL taraf        SAĞ taraf
   About            Education
   Skills           Languages
                    Knowledge
 */

.background-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(0, 1fr);

    column-gap: 80px;

    align-items: start;
}



/* 
   LEFT / RIGHT COLUMNS
 */

.background-left,
.background-right {
    min-width: 0;
}


.background-left {
    display: flex;

    flex-direction: column;

    gap: 40px;
}


.background-right {
    display: flex;

    flex-direction: column;

    gap: 28px;
}



/* 
   ABOUT TEXT
 */

.about-copy {
    max-width: 560px;
}


.about-copy p {
    margin:
        0 0 24px;

    font-family: var(--font-sans);

    font-size: 15px;

    font-weight: 300;

    line-height: 1.65;

    color: #6f6b66;
}


.about-copy p:last-child {
    margin-bottom: 0;
}



/* 
  SHARED INFORMATION CARD

   KULLANILDI:
   Skills
   Education
   Languages
   Knowledge

  Tek bir kart sınıfının yeniden kullanılması, CSS tekrarını önler.
 */

.info-card {
    width: 100%;

    border:
        1px solid var(--color-border);
}



/* Light header row */

.info-card-header {
    min-height: 42px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    background-color: var(--color-card-header);

    border-bottom:
        1px solid var(--color-border);

    font-family: var(--font-mono);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}




/*
   SKILLS
 */

.skills-list {
    padding:
        22px 18px;
}



/*
   HER SKİLL 3 COLUM  KULLANIYO:

   NAME | PROGRESS BAR | VALUE
*/

.skill-row {
    display: grid;

    grid-template-columns:
        145px minmax(100px, 1fr) 28px;

    align-items: center;

    column-gap: 16px;

    min-height: 28px;

    font-family: var(--font-mono);

    font-size: 12px;

    letter-spacing: 0.03em;
}


.skill-name {
    white-space: nowrap;
}



/* Empty background of the progress bar */

.skill-track {
    width: 100%;

    height: 5px;

    background-color: var(--color-border);

    overflow: hidden;
}



/*
   HTMLDEN GELEN HER WİDTH KULLANIYO:

   style="--skill-level: 92%;"

   inside the HTML.
*/

.skill-bar {
    width: var(--skill-level);

    height: 100%;

    background-color: var(--color-text);
}


.skill-value {
    text-align: right;
}



/* 
    TOOLS AREA
 */

.tools-area {
    padding:
        18px;

    border-top:
        1px solid var(--color-border);
}


.card-subheading {
    margin:
        0 0 14px;

    font-family: var(--font-mono);

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}



/* 
   REUSABLE TAG SYSTEM

   KULLANILDI:
   Equipped Tools
   Knowledge

   One component EŞİTTİR less duplicated CSS. UNUTMA
 */

.tag-list {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}






/* 
   EDUCATION
 */

.education-item {
    padding:
        22px 18px;
}


.education-item+.education-item {
    border-top:
        1px solid var(--color-border);
}


.education-heading {
    display: flex;

    justify-content: space-between;

    align-items: baseline;

    gap: 20px;
}


.education-heading h3 {
    margin: 0;

    font-family: var(--font-serif);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.3;
}


.education-year {
    flex-shrink: 0;

    font-family: var(--font-mono);

    font-size: 12px;
}


.education-school {
    margin:
        8px 0 0;

    font-family: var(--font-mono);

    font-size: 12px;

    font-weight: 360;
}


.education-description {
    margin:
        9px 0 0;

    font-family: var(--font-sans);

    font-size: 12px;

    font-weight: 300;

    line-height: 1.5;

    color: #6f6b66;
}



/* 
   LANGUAGES
 */

.language-row {
    min-height: 50px;

    padding:
        0 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-family: var(--font-mono);

    font-size: 12px;
}


.language-row+.language-row {
    border-top:
        1px solid var(--color-border);
}



/* 
   KNOWLEDGE
 */

.knowledge-content {
    padding:
        10px;
}

/* 
   CONTACT SECTION
 */

.contact-section {
    width: 100%;

    padding:
        150px var(--page-padding);
}



/* 
   45 — CONTACT MAIN GRID

   Sol:
   Big message + description

  Sağ:
   Contact information card
 */

.contact-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr) minmax(480px, 1.1fr);

    column-gap: 100px;

    align-items: center;
}



/* 
    CONTACT INTRO
 */

.contact-intro {
    max-width: 560px;
}



/* Large title container */

.contact-title {
    margin: 0;

    font-family: var(--font-serif);

    font-weight: 400;

    line-height: 1;
}



/* "Let's work" */

.contact-title-main {
    display: block;

    font-size: clamp(58px, 5.2vw, 84px);
}



/* "together." */

.contact-title-italic {
    display: block;

    margin-top: 12px;

    font-size: clamp(54px, 4.9vw, 78px);

    font-style: italic;

    color: var(--color-text-gray);
}



/* Supporting copy */

.contact-description {
    max-width: 540px;

    margin:
        48px 0 0;

    font-family: var(--font-sans);

    font-size: 15px;

    font-weight: 300;

    line-height: 1.6;

    color: #6f6b66;
}



/* 
    CONTACT CARD
 */

.contact-card {
    width: 100%;

    border:
        1px solid var(--color-border);
}



/*
   CONTACT CARD HEADER

   REACH OUT                      ● AVAILABLE
 */

.contact-card-header {
    min-height: 54px;

    padding:
        0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background-color: var(--color-card-header);

    border-bottom:
        1px solid var(--color-border);

    font-family: var(--font-mono);

    font-weight: 500;

    font-size: 12px;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}



.contact-availability {
    display: flex;

    align-items: center;

    gap: 8px;
}



/* 
   49 — CONTACT INFORMATION ROWS
 */

.contact-row {
    min-height: 78px;

    padding:
        0 20px;

    display: grid;

    grid-template-columns:
        130px 1fr;

    align-items: center;
}



/* Çizgi between contact rows */

.contact-row+.contact-row {
    border-top:
        1px solid var(--color-border);
}



/* Left label */

.contact-label {
    font-family: var(--font-mono);

    font-size: 12px;

    font-weight: 360;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}



/* Right information */

.contact-value {
    justify-self: end;

    font-family: var(--font-sans);

    font-size: 15px;

    font-weight: 400;

    color: var(--color-text);

    transition: opacity 0.2s ease;
}



/* Email / phone / LinkedIn hover */

.contact-value:hover {
    opacity: 0.55;
}



/* 
   LINKEDIN LINK + SVG
 */

.contact-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;
}



.contact-link-icon {
    width: 12px;
    height: 12px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.08333;

    stroke-linecap: round;

    stroke-linejoin: round;

    flex-shrink: 0;
}

/* 
   FOOTER
 */

.site-footer {
    width: 100%;

    border-top:
        1px solid
        var(--color-border);

    padding:
        22px
        var(--page-padding);
}


.site-footer .section-container {
    display: flex;
    justify-content: center;
}


.footer-text {
    margin: 0;

    font-family: var(--font-mono);

    font-size: 12px;

    font-weight: 400;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--color-muted);

    text-align: center;
}