/*-----------------------------------*\
  #Değiştirilebilir özellikler
\*-----------------------------------*/

:root {

  /**
   * renkler
   */

  --white: rgb(155, 255, 124);
  --white_a8: hsla(0, 31%, 94%, 0.08);
  --white_a12: hsla(0, 0%, 100%, 0.12);
  --cultured: hsla(220, 20%, 97%, 1);
  --snow: hsla(345, 57%, 97%, 1);
  --manatee: hsla(219, 10%, 62%, 1);
  --black-coral: rgb(50, 50, 51);
  --cadet-blue-crayola_a20: hsla(222, 23%, 71%, 0.2);
  --cinnamon-satin: rgb(119, 118, 46);
  --raisin-black: rgb(31, 34, 41);
  --raisin-black_a6: hsla(216, 14%, 14%, 0.06);
  --gunmetal: hsla(214, 15%, 21%, 1);
  --charcoal: hsla(219, 22%, 26%, 1);

  /**
   * typography
   */

  --ff-manrope: 'Manrope', sans-serif;

  --fs-1: calc(2.7rem + 1.38vw);
  --fs-2: calc(2.6rem + .66vw);
  --fs-3: calc(2.6rem + .24vw);
  --fs-4: 1.9rem;
  --fs-5: 1.8rem;
  --fs-6: 1.7rem;
  --fs-7: 1.5rem;
  --fs-8: 1.4rem;
  
  --fw-700: 700;

  /**
   * spacing
   */

  --section-padding: 90px;

  /**
   * box shadow
   */

  --shadow-1: 0 0 20px hsla(216, 14%, 14%, 0.05);
  --shadow-2: 0 4px 28px hsla(216, 14%, 14%, 0.07);

  /**
   * border radius
   */

  --radius-circle: 50%; /** çember çizmek için kullanılır */
  --radius-pill: 100px;
  --radius-8: 8px;
  --radius-6: 6px;

  /**
   * transition
   */

  --transition-1: 0.25s ease; /**  bir öğe hover olduğunda ya da . active gibi bir classname aldğında değişen stil özellilerini öğeye geçişli bir şekilde vermeyi sağlar. */ 
  --transition-2: 0.5s ease; /**  yavaş başlayan, sonra hızlı, sonra yavaş biten bir geçiş efekti belirtir (bu varsayılandır) */ 
  --transition-3: 0.3s ease-in-out; /** yavaş başlangıçlı ve bitişli bir geçiş efekti belirtir */ 

}


/*-------------------------------------------*\
            VAR() NEDİR?
Var() metodu, bir CSS değişkeninin değerini eklemek için kullanılır. 
CSS değişkenlerinin DOM'a erişimi vardır; bu, yerel veya global kapsamda 
değişkenler oluşturabileceğiniz, değişkenleri JavaScript ile değiştirebileceğiniz ve değişkenleri medya sorgularına göre değiştirebileceğiniz anlamına gelir

/*-----------------------------------*\
  #RESET
\*-----------------------------------*/
s
*,
*::before, 
*::after { 
  margin: 0;      /** bir web sayfasının DOM'unda yer almayan, yani HTML kodları içerisinde fiziksel olarak bulunmayan fakat, CSS aracılığıyla sayfanın ön yüzünde görülen sözde (sahte) HTML elemanlarıdır */
  padding: 0;
  box-sizing: border-box;
}

li { list-style: none; }

a,
img,
span,
button,
ion-icon { display: block; }

a {
  color: inherit;
  text-decoration: none; /** Aşağıdaki satır ile metnin tepesi çizilir. text-decoration: overline; Aşağıdaki satır ile metnin altı çizilir. */
}

img { height: auto; }

input,
button,
textarea {        /** <textarea> etiketi çok satırlı metin giriş alanları tanımlar. Metin giriş alanına sınırsız karakter yazılabilir ve sabit genişlikli yazı tipi(Courier) ile görüntülenir. Metin alanının boyutu cols ve rows özellikleri ile belirtilebilir, CSS height ve width özellikleri daha kullanışlıdır */
  background: none;
  border: none;
  font: inherit;
}

input,
textarea { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

html {
  font-family: var(--ff-manrope);
  font-size: 10px;
  scroll-behavior: smooth; /** overscroll-behavior özelliği bir scroll alanının sınırına ulaştıktan sonra nasıl hareket etmesi gerektiğini belirlediğimiz CSS özelliğidir */
}

body {
  background-color: var(--white);
  color: var(--black-coral);
  font-size: 1.6rem;
  line-height: 1.7;
}

body.nav-active { overflow: hidden; }

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { background-color: hsl(0, 0%, 98%); }

::-webkit-scrollbar-thumb { background-color: hsl(0, 0%, 80%); }

::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); }

/*-----------------------------------*\
            CSS KAYDIRMA ÇUBUĞU SEÇİCİLERİ

 * ::-webkit-scrollbar Kaydırma tamamı tamamı.
 * ::-webkit-scrollbar-button kaydırma çubuğunun altında ve üstünde bulunan yukarı ve aşağı düğmesi.
 * ::-webkit-scrollbar-thumb sürüklenebilir kaydırma kolu.
 * ::-webkit-scrollbar-track kaydırma çubuğunun izi (ilerleme çubuğu).
 * ::-webkit-scrollbar-track-piece Kolun tutamağın kapsamadığı kısmı (ilerleme çubuğu).
 * ::-webkit-scrollbar-corner hem yatay hem de dikey kaydırma çubuklarının birleştiği kaydırma çubuğunun alt köşesi.
 * ::-webkit-resizer bazı öğelerin alt köşesinde görünen sürüklenebilir yeniden boyutlandırma tutamacı.
\*-----------------------------------*/




/*-----------------------------------*\
  #sTİL
\*-----------------------------------*/

.container { padding-inline: 16px; }

.social-list {
  display: flex;
  align-items: center;
  gap: 12px;  /** gap CSS özelliği flexbox, grid ve multi-column yapılarda esnek öğeler arasındaki boşluğu ayarlamak için kullanılmaktadır. Gap kelimesi boşluk ve açıklık anlamına gelmektedir. Grid CSS ızgara görünümü ve flexbox özellikleri ile kullanılabilir. */
}

.social-link {
  font-size: 2rem;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus-visible) { transform: translateY(-3px); } /** :focus-visibleCSS4 Seçiciler çalışma taslağının bir parçasıdır . Kabul edilmeden önce Mozilla, :-moz-focusringFirefox'a işlevselliği resmi bir spesifikasyonun önüne getirmek için sözde sınıfı tanıttı. */

.section { padding-block: var(--section-padding); }

.w-100 { width: 100%; }

.h1,
.h2,
.h3,
.h4 {
  color: var(--charcoal);
  line-height: 1.3;
}

.h1 { font-size: var(--fs-1); }

.h2 { font-size: var(--fs-2); }

.h3 { font-size: var(--fs-3); }

.h4 { font-size: var(--fs-4); }

.btn {
  color: var(--cinnamon-satin);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  border: 2px solid var(--cinnamon-satin);
  max-width: max-content;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  transition: var(--transition-1);
  will-change: transform; /** CSS özelliği , tarayıcılara bir öğenin nasıl değişmesi beklendiğini gösterir. Tarayıcılar, bir öğe gerçekten değiştirilmeden önce optimizasyonlar ayarlayabilir. Bu tür optimizasyonlar, potansiyel olarak pahalı olan işleri gerçekten gerekli olmadan önce yaparak bir sayfanın yanıt verebilirliğini artırabilir.will-change */
}

.btn:is(:hover, :focus-visible) { transform: translateY(-4px); }
/*-----------------------------------*\
  Bir Html etiketinin X, Y ve Z ekseninde konumunu değiştirmek için kullanılır. 

       & translateX : X eksenindeki konumunu değiştirmek için

       & translateY : Y eksenindeki konumunu değiştirmek için

       & translateZ : Z eksenindeki konumunu değiştirmek için

       & translate : X ve Y eksenlerindeki konumunu değiştirmek için kullanılır. Birinci parametre X ekseni için, ikinci parametre Y ekseni için uygulanır.

       & translate3d : X, Y ve Z eksenlerindeki konumunu değiştirmek için kullanılır. Birinci parametre X ekseni, ikinci parametre Y ve üçüncü parametre Z ekseni için uygulanır.

 Önemli  Vereceğimiz değerler negatif olabilir. Negatif olduğunda tam tersi yönde hareket eder.
\*-----------------------------------*/
.btn-primary,
.btn-secondary:is(:hover, :focus-visible) {
  background-color: var(--cinnamon-satin);   
  color: var(--white);
}

.section-text { font-size: var(--fs-5); }

.section-title { margin-block-end: 16px; }

.grid-list {
  display: grid;
  gap: 30px;
}

[data-reveal] {
  opacity: 0;
  transition: 0.75s ease;
}

[data-reveal="top"] { transform: translateY(-30px); }

[data-reveal="bottom"] { transform: translateY(30px); }

[data-reveal="left"] { transform: translateX(-30px); }

[data-reveal="right"] { transform: translateX(30px); }

[data-reveal].revealed {
  transform: translate(0);
  opacity: 1;
}

/*-----------------------------------*\
    Öznitelik data-*, sayfaya veya uygulamaya özel özel verileri depolamak için kullanılır.

Öznitelik data-*, bize özel veri özniteliklerini tüm HTML öğelerine gömme yeteneği verir.

Saklanan (özel) veriler daha ilgi çekici bir kullanıcı deneyimi oluşturmak için sayfanın JavaScript'inde kullanılabilir (herhangi bir Ajax çağrısı veya sunucu tarafı veritabanı sorgusu olmadan).

Öznitelik data-*iki bölümden oluşur:

Öznitelik adı büyük harf içermemeli ve "data-" ön ekinden en az bir karakter sonra gelmelidir.
Öznitelik değeri herhangi bir dize olabilir
Not: Ön eki "data-" olan özel nitelikler, kullanıcı aracısı tarafından tamamen göz ardı edilecektir.
\*-----------------------------------*/




/*-----------------------------------*\
   Sözde sınıf :hover yıllardır ilkel animasyonlar oluşturmak için kullanılırken, CSS'nin animasyon alanına genişletilmesi Şubat 2009'da 'nin animasyon alanına genişletilmesi Şubat 2009'da  aracılığıyla animasyon uygulandığını duyurdu.CSS  Animasyon özelliği , web sayfasında animasyon oluşturmak için kullanılır. Flash ve JavaScript tarafından oluşturulan animasyonun yerine kullanılabilir.CSS animasyon özelliği, öğelerin bir özellik kümesinden diğerine geçişini sağlamak içindir.
   CSS ile elementleri düzgün bir şekilde canlandırmak için animasyonun başlangıç ​​ve bitiş durumlarını belirten anahtar kareler belirtmeniz gerekir. 
   @keyframes
animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation
\*-----------------------------------*/

.header {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--white);
  width: 100%;
  padding-block: 20px;
  box-shadow: var(--shadow-1);
  z-index: 4;
}

.header.active {
  position: fixed;
  animation: slideIn 0.5s ease forwards;
}

@keyframes slideIn {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0); }
}

.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-open-btn {
  font-size: 3.5rem;
  color: var(--gunmetal);
}

.navbar {
  position: fixed;
  top: 0;
  left: -300px;
  background-color: var(--raisin-black);
  color: var(--white);
  max-width: 300px;
  width: 100%;
  height: 100vh;
  padding: 30px;
  padding-block-end: 40px;
  display: flex;
  flex-direction: column; /** CSS içindeki direction özelliği hem flex uygulanmış elemanları hem de yazıların hangi yönde başlayacağını belirler. Diğer bir yöntem ise flex-direction özelliğidir. Bu özellik sayesinde elemanların yönü hem yatay hem de dikey olarak belirlenir. */
  gap: 30px;
  z-index: 2;
  visibility: hidden;
  transition: var(--transition-3);
}

.navbar.active {
  visibility: visible;
  transform: translateX(300px);
}

.navbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-close-btn {
  background-color: var(--white_a8);
  color: var(--white);
  font-size: 2rem;
  padding: 6px;
  border-radius: var(--radius-circle);
  transition: var(--transition-1);
}

.nav-close-btn ion-icon { --ionicon-stroke-width: 50px; }

.nav-close-btn:is(:hover, :focus-visible) { background-color: var(--white_a12); }

.navbar-list { margin-block-end: auto; }

.navbar-link {
  font-weight: var(--fw-700);
  padding-block: 6px;
}

.contact-link { transition: var(--transition-1); }

.contact-link:is(:hover, :focus-visible) { color: var(--cinnamon-satin); }
/*-----------------------------------*\
Css link özellikleri nelerdir ve link görünümlerini nasıl ekleriz ?

Html sayfalarında link etiketlerimiz yani <a> ya da <button> etiketleri için kullanacağımız color, background-color, font-family, text-decoration, padding vb. css özellikleriyle çok güzel css linkleri ve butonları oluşturabiliriz.
*/-----------------------------------\*
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--raisin-black);
  pointer-events: none;
  opacity: 0; /* CSS'de opacity özelliği, bir etiketin opaklığını veya saydamlığını belirtir. CSS'de bir etikete opaklık/saydamlık vermek için opacity özelliği kullanılır. */
  transition: var(--transition-1);
}

.overlay.active {
  pointer-events: all;
  opacity: 0.8;
}





/*-----------------------------------*\
  Arda
\*-----------------------------------*/

.hero {
  padding-block-start: calc(var(--section-padding) + 50px);
  background-color: var(--cultured);
}

.hero .container {
  display: grid;
  gap: 50px;
}

.hero-banner {
  position: relative;
  max-width: max-content;
  margin-inline: auto;
}

.hero-banner .w-100 {
  mask-image: url("../images/ardainsta.png");  /** Özellik mask-image, bir öğe için maske katmanı olarak kullanılacak bir görüntüyü belirtir. */
  -webkit-mask-image: url("../images/ardainsta.png"); /** Özellik mask-mode, maske katmanı görüntüsünün parlaklık maskesi olarak mı yoksa alfa maskesi olarak mı ele alınması gerektiğini belirtir. */
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: auto;
  -webkit-mask-size: auto;
}

.hero .shape {
  position: absolute;
  bottom: 10%;
  right: 2%;
  filter: drop-shadow(var(--shadow-2));
}

.hero-content { text-align: center; }

.hero .section-text { margin-block: 24px 36px; }

.btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}





/*-----------------------------------*\
  SERTİFİKA

  ustify-content: between; esnek kutu içerisindeki ilk hat ana eksenin başlangıç (start) posizyonuna doğru son hat ise ana-eksenin sonuna (end) doğru konumlanır. 
  diğer hatlar bu iki hat arasında ana-eksene göre ortalı olur. Her hat arasındaki boşluklar birbirine eşit olur.
\*-----------------------------------*/

.about .wrapper {
  display: grid;
  gap: 50px;
  margin-block-end: 70px;
}

.progress-list .label-wrapper {
  display: flex;
  justify-content: space-between; 
  align-items: center;
  margin-block-end: 4px;
}
/*-----------------------------------*\
    - CSS3 Özellik Seçicileri
	-   Belirlenen Sözdizimi ile Başlayan Özellik Değer Seçicisi
	-   Belirlenen Sözdizimi ile Biten Özellik Değer Seçicisi
	-   İçinde Belirlenen Sözdizimi Geçen Özellik Değer Seçicisi
	-   Çoklu Özellik Seçicisi Kullanımı
- Genel Kardeş Seçicisi
- :target Sözde Seçisi
- Form Elemanları Durumları Sözde Sınıfları
	-   :disabled
	-   :enabled
	-   :checked
- CSS3 Sözde Seçicileri
- Yapısal Sözde Seçiciler
	-   :root Sözde Sınıfı
	-   :nth-child() sözde sınıfı
	-   :nth-last-child() sözde sınıfı
	-   :nth-of-type() sözde sınıfı
	-   :nth-last-of-type() sözde sınıfı
	-   :last-child sözde sınıfı
	-   :first-of-type sözde sınıfı
	-   :last-of-type sözde sınıfı
	-   :only-child sözde sınıfı
	-   :only-of-type sözde sınıfı
	-   :empty sözde sınıfı
- Olumsuz(:not) Sözde SınıfıSözde Sınıf
- ::selection sözde sınıf

  
\*-----------------------------------*/
.progress-item:not(:last-child) { margin-block-end: 16px; }

.progress {
  background-color: var(--raisin-black_a6);
  height: 6px;
  width: 100%;
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.progress-fill { height: inherit; }

.about-card { text-align: center; }

.about-card .card-icon {
  max-width: max-content;
  margin-inline: auto;
}

.about-card .card-title { margin-block: 16px 10px; }





/*-----------------------------------*\
  #pROJELER
\*-----------------------------------*/

.project { border-block: 1px solid var(--cadet-blue-crayola_a20); }

.project .title-wrapper { margin-block-end: 40px; }

.project .btn { margin-block-start: 24px; }

.project .grid-list { gap: 40px; }

.project-card {
  --padding: 24px;

  display: flex;
  flex-direction: column;
  gap: var(--padding);
  border-radius: var(--radius-8);
  overflow: hidden;
}

.project-card-1,
.project-card-2,
:is(.project-card-3, .project-card-4) .card-content { padding: var(--padding); }

.project-card-1 { padding-block-end: 0; }

.project :is(.project-card-3, .project-card-4) { gap: 0; }

.project-card .card-tag {
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  text-transform: uppercase;
}

.project-card .card-title { margin-block: 16px; }

.project-card .card-text { margin-block-end: 20px; }

.project-card .btn-text {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: var(--fw-700);
  transition: var(--transition-1);
}

.project-card .btn-text:is(:hover, :focus-visible) { gap: 10px; }





/*-----------------------------------*\
  #İletişim
\*-----------------------------------*/

.contact { padding-block-end: 0; }

.contact-card {
  background-color: var(--snow);
  padding: 32px;
  border-radius: var(--radius-8);
  display: grid;
  gap: 40px;
}

.contact .section-title { margin-block-start: 20px; }

.input-field {
  background-color: var(--white);
  color: var(--black-coral);
  font-size: var(--fs-7);
  padding: 14px 18px;
  border-radius: var(--radius-6);
  outline: none;
  margin-block-end: 20px;
}

.input-field::placeholder { color: var(--manatee); }
/*---------------------------------*\
Yer Tutucu(Placeholder); Formların input veya textarea alanlarında tanımlayıcı bilgileri gösterdiğimiz yapılardır.
 Firefox'da sağ üstte arama motoru alanında hangi arama motorunda arama yaptığımızda bilgi veren bir yazı bir yer tutucudur 
\* --------------------------------- */
textarea.input-field {
  min-height: 120px;
  height: 120px;
  max-height: 240px;
  resize: vertical;
}





/*-----------------------------------*\
  #FOOTER

  Footer, bir doküman veya web sayfasının en alt kısmında belli verilerin yer aldığı kısımdır.
\*-----------------------------------*/

.footer { padding-block: 40px; }

.copyright { margin-block-end: 12px; }

.footer .social-link { color: var(--charcoal); }





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 *  responsive tasarım için 575px screen
 */

@media (min-width: 575px) {

  /**
   * REUSED STYLE
   */

  .container {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }



  /**
   * PRoje
   */

  .project-card { --padding: 68px; }



  /**
   * İltişimm
   */

  .contact-card { padding: 68px; }

}





/**
 * responsive tasarım için 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE
   */

  .container { max-width: 720px; }

  .section-text { --fs-5: 2rem; }



  /**
   * sertifika
   */

  .about .grid-list { grid-template-columns: 1fr 1fr; }



  /**
   * Proje
   */

  .project .title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
  }

  .project .btn { min-width: max-content; }



  /**
   * iletişim
   */

  .contact .section-text { --fs-5: 1.8rem; }

  .input-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
  }



  /**
   * sayfa atı bilgi
   */

  .footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .copyright { margin-block-end: 0; }

}





/**
 * responsive tasarım için 992px screen
 */

@media (min-width: 992px) {

  /**
   * özellik değiştri
   */

  :root {

    /**
     * 
     */

    --section-padding: 120px;

  }



  /**
   * REUSED STYLE
   */

  .container { max-width: 960px; }



  /**
   * başlıklar
   */

  .nav-open-btn,
  .navbar-top,
  .navbar .wrapper,
  .overlay { display: none; }

  .navbar,
  .navbar.active {
    all: unset;
    display: flex;
    flex-grow: 1;
  }

  .navbar-list {
    display: flex;
    gap: 36px;
    margin-inline: auto;
  }

  .navbar-link {
    color: var(--charcoal);
    transition: var(--transition-1);
  }

  .navbar-link:is(:hover, :focus-visible) { color: var(--cinnamon-satin); }

  .navbar .social-link {
    color: var(--charcoal);
    font-size: 1.8rem;
  }

  .header {
    top: 45px;
    max-width: 960px;
    left: 50%;
    transform: translateX(-50%);
    padding-inline: 16px;
    border-radius: var(--radius-8);
  }

  .header.active {
    top: 0;
    left: 0;
    max-width: unset;
    border-radius: 0;
  }



  /**
   * arda
   */

  .hero { padding-block-start: calc(var(--section-padding) + 80px); }

  .hero .container {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
    gap: 100px;
  }

  .hero-content { text-align: left; }

  .hero .btn-wrapper { justify-content: flex-start; }



  /**
   * sertifika

   grid-template-columns: Grid taşıyıcısı altında element'leri sütun bazında ölçeklendirmeyi sağlar. grid-template-rows: Grid taşıyıcısı altında element'leri satır bazında ölçeklendirmeyi sağlar.
   */

  .about .wrapper {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .about .grid-list { grid-template-columns: repeat(4, 1fr); }



  /**
   * Proje

   u özelliğe ihtiyacımız çok eksilere dayanır. Görsel içeriğin kullanıcı tarafından girildiği sitelerde gelen resim boyutlarını istenen tasarımdaki içerik kutusuna sığdırma isteklerini karşılamak için bu özellikleri kullanırız. Bu özellik yaygınlaşmadan önce bu gibi ihtiyaçları karşılamak için resimleri ardalan resmine çevirip, background-size ve background-position ile halletmeye çalışırdım. Şimdi tarayıcı desktek oranları bayağı arttı ve artık kullanabiliriz.

object-fit
Yapısı : object-fit: [ deger ]
Aldığı Değerler : fill | contain | cover | none | scale-down
Başlangıç değeri: fill
Uygulanabilen elementler: yerine konabilir elementler
Kalıtsallık: Yok

object-fit özelliği, bir öğenin içerik kutusunun yüksekliğine ve genişliğine nasıl tepki verdiğini tanımlar. object-position özelliği ile birlikte resimler, videolar vd. medya formatları için tasarlanmıştır. object-fit içerik kutusuna nesneyi en/boy oranını koruyarak, mümkün olduğunca uzatarak veya mümkün olduğunca fazla yer kaplayacak şekilde yerleştirmeyi sağlar.

Aldığı değerler

fill: En/boy oranına bakılmaksızın görüntüyü içerik kutusuna uyacak şekilde uzatan varsayılan değerdir.
contain: En/boy oranını korurken kutuya doldurmak için duruma göre resmin boyutunu artırır veya azaltır.
cover: Resim, en/boy oranını koruyarak ancak işlem sırasında resmi kırparak kutunun yüksekliğini ve genişliğini dolduracaktır.
scale-down: Resim, en küçük somut nesne boyutunu bulmak için none ve contains arasındaki farkı karşılaştıracaktır ve uygun olanı uygulayacaktır.
none: Resim orijinal halindeki boyutlarını korur ve içerik kutusu içine sığmaya çalışmaz. İçerik kutusundan taşan kısımlar kırpılır.
   */

  .project .grid-list {
    grid-template-columns: 1fr 1fr;
    row-gap: 50px;
  }

  .project .grid-list > li:nth-child(-n+2) { grid-column: 1 / 3; }

  .project-card-1,
  .project-card-2 {
    flex-direction: row;
    align-items: flex-end;
  }

  :is(.project-card-1, .project-card-2) .card-content { width: 33.33%; }

  :is(.project-card-1, .project-card-2) .card-banner { width: 66.66%; }

  .project-card-1 .card-content { padding-block-end: var(--padding); }

  .project-card-2 .card-content { order: 1; }



  /**
   * iletişim
   */

  .contact-card {
    grid-template-columns: 0.8fr 1fr;
    align-items: center;
    gap: 90px;
  }

}





/**
 * responsive erkran için 1200px 
 */

@media (min-width: 1200px) {

  /**
   * 
   */

  .container,
  .header { max-width: 1140px; }



  /**
   * sertifka
   */

  .about .grid-list { gap: 50px; }



  /**
   * iletişim
   */

  .contact-card { gap: 150px; }

}





/**
 * responsive  1400px ekran
 */

@media (min-width: 1400px) {

  /**
   * REUSED STYLE
   */

  .container,
  .header { max-width: 1320px; }



  /**
   * arda
   */

  .hero .container { grid-template-columns: 1fr 0.8fr; }

  .hero .section-text { --fs-5: 2.4rem; }



  /**
   * sertifka
   */

  .about .wrapper { gap: 100px; }

  .about .grid-list { gap: 60px; }

}