/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden
}

.baslangic_alani {
  min-height: 100vh;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative
}

.ic_cerceve {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    min-height: 75vh
}

.sol_kolon {
  padding: 20px;
  position: relative;
  z-index: 2
}

.ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 4.5rem;
    font-weight: 300;
    color: var(--primary-dark);
    margin-bottom: 10px;
    letter-spacing: -2px;
    transform: rotate(-1deg);
    display: inline-block
}

.alt_metin {
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-style: italic;
  margin-bottom: 35px;
  margin-left: 8px
}

.aciklama_kutusu {
    background: rgba(252, 191, 73, 0.08);
    padding: 28px;
    border: 3px solid var(--primary-color);
    border-radius: 0;
    margin-bottom: 30px;
    transform: rotate(0.5deg)
}

.birinci_paragraf {
  margin-bottom: 18px;
  font-size: 1.1rem;
  line-height: 1.7
}

.ikinci_paragraf {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-secondary)
}

.hizmet_listesi {
  margin: 35px 0;
  padding: 25px;
  background: var(--secondary-light);
  border: 2px solid var(--secondary-color)
}

.liste_basligi {
    font-weight: bold;
    font-size: 1.25rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px
}

.hizmet_item {
  padding: 8px 0;
  border-bottom: 1px dotted var(--neutral-color);
  font-size: 1.05rem
}

.hizmet_item:last-child {
  border-bottom: none
}

.iletisim_dugme {
    background: var(--accent-color);
    color: white;
    padding: 18px 35px;
    display: inline-block;
    margin-top: 25px;
    cursor: pointer;
    border: 3px solid var(--accent-color);
    transition: all 0.3s ease;
    transform: skew(-5deg)
}

.iletisim_dugme:hover {
  background: transparent;
  color: var(--accent-color);
  transform: skew(-5deg) scale(1.02)
}

.dugme_metni {
    font-weight: 600;
    font-size: 1.1rem;
    display: inline-block;
    transform: skew(5deg)
}

.sag_kolon {
  padding: 20px;
  position: relative
}

.gorsel_cerceve {
  position: relative;
  border: 4px solid var(--primary-color);
  transform: rotate(2deg);
  overflow: hidden
}

.ana_gorsel {
  display: block;
  width: 100%
}

.hero_resmi {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    filter: sepia(10%) saturate(1.1)
}

.vurgu_kutusu {
    position: absolute;
    top: 25px;
    right: 25px;
    background: var(--primary-color);
    padding: 15px 20px;
    border: 2px solid var(--primary-dark);
    transform: rotate(-8deg)
}

.vurgu_sayisi {
    display: block;
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-dark);
    line-height: 1
}

.vurgu_aciklamasi {
  font-size: 0.9rem;
  color: var(--text-primary)
}

.alt_bilgi_saha {
    margin-top: 40px;
    padding: 0 20px
}

.ozellik_tablosu {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 20px 0
}

.tablo_satiri {
  background: var(--tertiary-light)
}

.ozellik_hucre {
    padding: 20px;
    text-align: center;
    border: 2px solid var(--tertiary-color);
    font-weight: 500;
    font-size: 1.05rem;
    color: var(--text-primary);
    width: 33.33%
}

/* Responsive Design */
@media (max-width: 768px) {
  .ic_cerceve {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center
  }
  
  .ana_baslik {
    font-size: 3rem;
    transform: rotate(0deg)
  }
  
  .aciklama_kutusu {
    transform: rotate(0deg);
    padding: 20px
  }
  
  .gorsel_cerceve {
    transform: rotate(0deg);
    margin: 20px auto;
    max-width: 400px
  }
  
  .hero_resmi {
    height: 350px
  }
  
  .vurgu_kutusu {
    transform: rotate(-3deg)
  }
  
  .ozellik_tablosu {
    border-spacing: 10px 0
  }
  
  .ozellik_hucre {
    padding: 15px;
    font-size: 0.95rem
  }
}

@media (max-width: 480px) {
    .baslangic_alani {
        padding: 20px 15px
    }
    
    .ana_baslik {
        font-size: 2.5rem
    }
    
    .alt_metin {
        font-size: 1.2rem
    }
    
    .ozellik_tablosu {
        border-spacing: 5px 0
    }
    
    .ozellik_hucre {
        padding: 12px;
        font-size: 0.9rem
    }
}















/* Services Section Styles */
.hizmet_spektrumu {
  padding: 80px 20px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
  position: relative
}

.merkez_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.ustbaslik_alani {
  text-align: center;
  margin-bottom: 60px;
  padding: 0 20px
}

.hizmet_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3.2rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: -1px;
    transform: rotate(-0.8deg);
    display: inline-block
}

.hizmet_alt_aciklama {
  max-width: 650px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--text-secondary);
  font-style: italic
}

.hizmet_haritasi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px;
    margin-bottom: 60px
}

.hizmet_kategori {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 30px;
  position: relative;
  transition: all 0.3s ease
}

.hizmet_kategori:nth-child(odd) {
  transform: rotate(1deg)
}

.hizmet_kategori:nth-child(even) {
    transform: rotate(-0.8deg)
}

.hizmet_kategori:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 8px 25px rgba(252, 191, 73, 0.3);
    border-color: var(--primary-dark)
}

.kategori_basligi {
  margin-bottom: 25px;
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.grup_ismi {
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 500
}

.grup_vurgusu {
  background: var(--tertiary-color);
  color: white;
  padding: 4px 12px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600
}

.hizmet_detay_listesi {
  space-y: 15px
}

.detay_maddesi {
    display: flex;
    flex-direction: column;
    margin-bottom: 18px;
    padding: 15px;
    background: var(--accent-light);
    border-left: 4px solid var(--secondary-color)
}

.madde_adi {
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 5px
}

.madde_aciklama {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5
}

/* Kategori Özel Renkler */
.ozel_dikim_grubu {
  border-color: var(--primary-color)
}

.ozel_dikim_grubu .grup_vurgusu {
  background: var(--primary-dark)
}

.ozel_gunler_grubu {
    border-color: var(--tertiary-color)
}

.ozel_gunler_grubu .grup_vurgusu {
    background: var(--tertiary-color)
}

.tamir_grubu {
  border-color: var(--secondary-color)
}

.tamir_grubu .grup_vurgusu {
  background: var(--secondary-color)
}

.kurumsal_grubu {
    border-color: var(--accent-color)
}

.kurumsal_grubu .grup_vurgusu {
    background: var(--accent-color)
}

.ek_hizmet_alani {
  margin-top: 50px
}

.tasarim_danismanlik {
    background: var(--primary-light);
    border: 2px solid var(--primary-color);
    padding: 40px;
    text-align: center;
    transform: rotate(0.3deg)
}

.danismanlik_baslik {
  font-family: 'Roboto', sans-serif;
  font-size: 2rem;
  color: var(--primary-dark);
  margin-bottom: 20px;
  font-weight: 400
}

.danismanlik_aciklama {
    max-width: 700px;
    margin: 0 auto 30px;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary)
}

.danismanlik_tablosu {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0
}

.tablo_basligi .tablo_hucre {
    background: var(--primary-color);
    color: var(--accent-color);
    font-weight: 600;
    padding: 18px;
    border: 2px solid var(--primary-dark);
    text-align: center;
    font-size: 1.05rem
}

.tablo_detayi .tablo_hucre {
  background: white;
  padding: 15px;
  border: 2px solid var(--primary-color);
  border-top: none;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary)
}

/* Responsive Design */
@media (max-width: 768px) {
  .hizmet_spektrumu {
    padding: 60px 15px
  }
  
  .hizmet_ana_baslik {
    font-size: 2.5rem;
    transform: rotate(0deg)
  }
  
  .hizmet_haritasi {
    grid-template-columns: 1fr;
    gap: 25px
  }
  
  .hizmet_kategori {
    transform: rotate(0deg) !important;
    padding: 25px
  }
  
  .hizmet_kategori:hover {
    transform: rotate(0deg) scale(1.01)
  }
  
  .grup_ismi {
    font-size: 1.5rem
  }
  
  .tasarim_danismanlik {
    padding: 30px;
    transform: rotate(0deg)
  }
  
  .danismanlik_baslik {
    font-size: 1.7rem
  }
  
  .danismanlik_tablosu {
    font-size: 0.9rem
  }
  
  .tablo_basligi .tablo_hucre,
  .tablo_detayi .tablo_hucre {
    padding: 12px;
    font-size: 0.85rem
  }
}

@media (max-width: 480px) {
  .hizmet_ana_baslik {
    font-size: 2rem
  }
  
  .hizmet_kategori {
    padding: 20px
  }
  
  .detay_maddesi {
    padding: 12px
  }
  
  .madde_adi {
    font-size: 1rem
  }
  
  .madde_aciklama {
    font-size: 0.9rem
  }
  
  .tasarim_danismanlik {
    padding: 20px
  }
  
  .danismanlik_tablosu {
    display: block;
    overflow-x: auto;
    white-space: nowrap
  }
}










/* Work Process Section Styles */
.surec_yolculugu {
  padding: 90px 20px;
  background: var(--accent-light);
  position: relative;
  overflow: hidden
}

.ana_konteyner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative
}

.surec_giris_alani {
  text-align: center;
  margin-bottom: 70px;
  padding: 0 20px
}

.surec_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 25px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(-0.5deg);
    display: inline-block
}

.surec_aciklama {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic
}

.asamalar_labirent {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-bottom: 60px
}

.surec_adimi {
    background: white;
    border: 3px solid var(--primary-color);
    padding: 30px;
    position: relative;
    transition: all 0.4s ease;
    overflow: hidden
}

/* Alternating rotations for organic feel */
.surec_adimi:nth-child(odd) {
  transform: rotate(1.2deg)
}

.surec_adimi:nth-child(even) {
    transform: rotate(-0.8deg)
}

.surec_adimi:hover {
    transform: rotate(0deg) scale(1.03);
    border-color: var(--primary-dark);
    box-shadow: 0 10px 30px rgba(252, 191, 73, 0.25)
}

.adim_numarasi {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 50px;
  height: 50px;
  background: var(--primary-color);
  border: 3px solid var(--primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--primary-dark);
  z-index: 2
}

.adim_icerik {
  margin-top: 10px
}

.adim_ismi {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    font-weight: 500
}

.adim_detay {
  border-left: 4px solid var(--secondary-color);
  padding-left: 20px;
  position: relative
}

.adim_aciklama {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 12px
}

.sure_etiketi {
  background: var(--tertiary-color);
  color: white;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0;
  display: inline-block
}

/* Connecting lines between steps */
.baglanti_cizgisi {
    position: absolute;
    width: 30px;
    height: 3px;
    background: var(--primary-color);
    top: 50%;
    right: -35px;
    z-index: 1
}

.birinci_cizgi {
  transform: rotate(15deg)
}

.ikinci_cizgi {
    transform: rotate(-12deg)
}

.ucuncu_cizgi {
  transform: rotate(8deg)
}

.dorduncu_cizgi {
    transform: rotate(-18deg)
}

.besinci_cizgi {
  transform: rotate(22deg)
}

.altinci_cizgi {
    transform: rotate(-5deg)
}

/* Different color schemes for steps */
.ilk_gorusme {
  border-color: var(--primary-color)
}

.olcu_secim {
    border-color: var(--secondary-color)
}

.olcu_secim .adim_numarasi {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white
}

.tasarim_onay {
  border-color: var(--tertiary-color)
}

.tasarim_onay .adim_numarasi {
    background: var(--tertiary-color);
    border-color: var(--tertiary-color);
    color: white
}

.kesim_asamasi {
    border-color: var(--accent-color)
}

.kesim_asamasi .adim_numarasi {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white
}

.dikim_asamasi {
  border-color: var(--primary-dark)
}

.dikim_asamasi .adim_numarasi {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white
}

.prova_asamasi {
    border-color: var(--secondary-color)
}

.prova_asamasi .adim_numarasi {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: white
}

.teslim_asamasi {
  border-color: var(--primary-color)
}

.toplam_sure_alani {
  display: flex;
  justify-content: center;
  margin-top: 50px
}

.sure_ozet_kutusu {
    background: var(--primary-light);
    border: 3px solid var(--primary-color);
    padding: 40px;
    max-width: 700px;
    width: 100%;
    transform: rotate(-0.3deg)
}

.ozet_baslik {
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 25px;
  font-weight: 500
}

.sure_tablosu {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 25px
}

.tablo_satir:nth-child(odd) .sure_kategori,
.tablo_satir:nth-child(odd) .sure_degeri {
  background: white
}

.tablo_satir:nth-child(even) .sure_kategori,
.tablo_satir:nth-child(even) .sure_degeri {
    background: var(--accent-light)
}

.sure_kategori {
  padding: 15px 20px;
  border: 2px solid var(--neutral-color);
  border-right: 1px solid var(--neutral-color);
  font-weight: 500;
  color: var(--text-primary);
  width: 60%
}

.sure_degeri {
    padding: 15px 20px;
    border: 2px solid var(--neutral-color);
    border-left: 1px solid var(--neutral-color);
    text-align: center;
    font-weight: 600;
    color: var(--primary-dark);
    width: 40%
}

.not_alani {
  border-top: 2px dotted var(--primary-color);
  padding-top: 20px
}

.onemli_not {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    font-style: italic;
    text-align: center
}

/* Responsive Design */
@media (max-width: 768px) {
  .surec_yolculugu {
    padding: 70px 15px
  }
  
  .surec_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .asamalar_labirent {
    grid-template-columns: 1fr;
    gap: 30px
  }
  
  .surec_adimi {
    transform: rotate(0deg) !important;
    padding: 25px
  }
  
  .surec_adimi:hover {
    transform: rotate(0deg) scale(1.02)
  }
  
  .baglanti_cizgisi {
    display: none
  }
  
  .adim_ismi {
    font-size: 1.4rem
  }
  
  .sure_ozet_kutusu {
    padding: 30px;
    transform: rotate(0deg)
  }
  
  .ozet_baslik {
    font-size: 1.5rem
  }
  
  .sure_kategori,
  .sure_degeri {
    padding: 12px 15px;
    font-size: 0.95rem
  }
}

@media (max-width: 480px) {
  .surec_baslik {
    font-size: 1.8rem
  }
  
  .surec_adimi {
    padding: 20px
  }
  
  .adim_numarasi {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    top: -12px;
    left: -12px
  }
  
  .adim_ismi {
    font-size: 1.2rem
  }
  
  .adim_aciklama {
    font-size: 1rem
  }
  
  .sure_ozet_kutusu {
    padding: 20px
  }
  
  .sure_kategori,
  .sure_degeri {
    padding: 10px;
    font-size: 0.9rem
  }
  
  .onemli_not {
    font-size: 0.9rem
  }
}

















/* Pricing Section Styles */
.fiyat_rehberi {
  padding: 85px 20px;
  background: linear-gradient(145deg, var(--neutral-light) 0%, var(--primary-light) 100%);
  position: relative
}

.ana_cerceve {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.fiyat_giris_bolumu {
  text-align: center;
  margin-bottom: 65px;
  padding: 0 20px
}

.fiyat_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3.1rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(0.7deg);
    display: inline-block
}

.fiyat_aciklama {
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic
}

.fiyat_kartlari_alani {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 70px
}

.fiyat_kategorisi {
  background: white;
  border: 3px solid var(--primary-color);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease
}

.fiyat_kategorisi:nth-child(1) {
  transform: rotate(-1.1deg)
}

.fiyat_kategorisi:nth-child(2) {
    transform: rotate(0.9deg)
}

.fiyat_kategorisi:nth-child(3) {
  transform: rotate(-0.7deg)
}

.fiyat_kategorisi:nth-child(4) {
    transform: rotate(1.3deg)
}

.fiyat_kategorisi:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
    z-index: 2
}

.kategori_etiketi {
  background: var(--primary-color);
  padding: 15px 25px;
  text-align: center;
  border-bottom: 3px solid var(--primary-dark)
}

.etiket_metni {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--primary-dark);
    text-transform: uppercase;
    letter-spacing: 1px
}

.fiyat_listesi {
  padding: 25px 30px
}

.fiyat_maddesi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 2px dotted var(--neutral-color)
}

.fiyat_maddesi:last-child {
  border-bottom: none
}

.hizmet_adi {
    font-size: 1.05rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1
}

.baslangic_fiyati {
  background: var(--accent-light);
  padding: 8px 15px;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  margin-left: 15px
}

/* Category-specific colors */
.erkek_giyim {
  border-color: var(--primary-color)
}

.kadin_giyim {
    border-color: var(--secondary-color)
}

.kadin_giyim .kategori_etiketi {
    background: var(--secondary-color);
    border-color: var(--secondary-color)
}

.kadin_giyim .etiket_metni {
    color: white
}

.ozel_gun {
  border-color: var(--tertiary-color)
}

.ozel_gun .kategori_etiketi {
    background: var(--tertiary-color);
    border-color: var(--tertiary-color)
}

.ozel_gun .etiket_metni {
    color: white
}

.tamir_hizmet {
    border-color: var(--accent-color)
}

.tamir_hizmet .kategori_etiketi {
    background: var(--accent-color);
    border-color: var(--accent-color)
}

.tamir_hizmet .etiket_metni {
    color: white
}

.fiyat_faktorleri_bolumu {
  margin-bottom: 60px
}

.faktor_kutusu {
    background: var(--primary-light);
    border: 3px solid var(--primary-dark);
    padding: 40px;
    transform: rotate(-0.4deg)
}

.faktor_baslik {
  font-family: 'Roboto', sans-serif;
  font-size: 2.2rem;
  color: var(--primary-dark);
  text-align: center;
  margin-bottom: 20px;
  font-weight: 400
}

.faktor_giris {
    text-align: center;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 35px;
    font-style: italic
}

.faktor_tablosu {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 35px
}

.faktor_satiri:nth-child(odd) td {
  background: white
}

.faktor_satiri:nth-child(even) td {
    background: var(--accent-light)
}

.faktor_adi {
    padding: 18px 20px;
    border: 2px solid var(--neutral-color);
    font-weight: 600;
    color: var(--text-primary);
    width: 25%
}

.faktor_aciklama {
  padding: 18px 20px;
  border: 2px solid var(--neutral-color);
  border-left: 1px solid var(--neutral-color);
  border-right: 1px solid var(--neutral-color);
  color: var(--text-secondary);
  width: 50%
}

.faktor_etkisi {
    padding: 18px 20px;
    border: 2px solid var(--neutral-color);
    border-left: 1px solid var(--neutral-color);
    text-align: center;
    font-weight: 600;
    color: var(--tertiary-color);
    width: 25%
}

.onemli_uyari {
    display: flex;
    align-items: flex-start;
    background: var(--tertiary-light);
    border: 3px solid var(--tertiary-color);
    padding: 25px;
    gap: 20px
}

.uyari_ikonu {
  width: 35px;
  height: 35px;
  background: var(--tertiary-color);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  flex-shrink: 0
}

.uyari_metni {
  flex: 1
}

.uyari_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--tertiary-color);
    margin-bottom: 10px;
    font-weight: 600
}

.uyari_aciklama {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary)
}

.odeme_bilgi_alani {
  margin-top: 50px
}

.bilgi_kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px
}

.bilgi_karti {
  background: white;
  border: 3px solid var(--secondary-color);
  padding: 30px;
  text-align: center
}

.garanti_bilgileri {
    border-color: var(--accent-color)
}

.kart_baslik {
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  color: var(--accent-color);
  margin-bottom: 20px;
  font-weight: 500
}

.bilgi_listesi {
    list-style: none;
    padding: 0;
    margin: 0
}

.bilgi_maddesi {
  padding: 12px 0;
  border-bottom: 1px solid var(--neutral-light);
  font-size: 1.05rem;
  color: var(--text-secondary)
}

.bilgi_maddesi:last-child {
  border-bottom: none
}

/* Responsive Design */
@media (max-width: 768px) {
  .fiyat_rehberi {
    padding: 65px 15px
  }
  
  .fiyat_ana_baslik {
    font-size: 2.3rem;
    transform: rotate(0deg)
  }
  
  .fiyat_kartlari_alani {
    grid-template-columns: 1fr;
    gap: 25px
  }
  
  .fiyat_kategorisi {
    transform: rotate(0deg) !important
  }
  
  .fiyat_kategorisi:hover {
    transform: rotate(0deg) scale(1.01)
  }
  
  .fiyat_listesi {
    padding: 20px 25px
  }
  
  .fiyat_maddesi {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }
  
  .baslangic_fiyati {
    margin-left: 0;
    align-self: flex-end
  }
  
  .faktor_kutusu {
    padding: 30px;
    transform: rotate(0deg)
  }
  
  .faktor_baslik {
    font-size: 1.8rem
  }
  
  .faktor_tablosu {
    font-size: 0.9rem
  }
  
  .faktor_adi,
  .faktor_aciklama,
  .faktor_etkisi {
    padding: 12px 15px
  }
  
  .onemli_uyari {
    flex-direction: column;
    text-align: center;
    gap: 15px
  }
  
  .bilgi_karti {
    padding: 25px
  }
}

@media (max-width: 480px) {
  .fiyat_ana_baslik {
    font-size: 1.9rem
  }
  
  .etiket_metni {
    font-size: 1.2rem
  }
  
  .fiyat_listesi {
    padding: 15px 20px
  }
  
  .hizmet_adi {
    font-size: 1rem
  }
  
  .baslangic_fiyati {
    font-size: 0.9rem;
    padding: 6px 12px
  }
  
  .faktor_kutusu {
    padding: 20px
  }
  
  .faktor_baslik {
    font-size: 1.5rem
  }
  
  .faktor_tablosu {
    display: block;
    overflow-x: auto;
    white-space: nowrap
  }
  
  .bilgi_karti {
    padding: 20px
  }
}














/* Navigation Menu Styles */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

/* Unique styling for each link */
.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}

.mobil_nav_link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: white;
    transform: rotate(-0.5deg)
}

.mobil_studio_bilgi {
  text-align: center;
  margin-top: 20px;
  padding-top: 25px;
  border-top: 3px solid var(--primary-color)
}

.mobil_logo {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    background: white;
    transform: rotate(0.8deg)
}

.mobil_studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.mobil_studio_alt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px
}

/* Body padding to account for fixed nav */
body {
  padding-top: 80px
}

/* Responsive Design */
@media (max-width: 768px) {
  .ust_navigasyon {
    padding: 12px 0
  }
  
  .nav_konteyner {
    padding: 0 15px
  }
  
  .menu_bolumu {
    display: none
  }
  
  .mobil_menu_buton {
    display: flex
  }
  
  .logo_alani {
    transform: rotate(0deg);
    padding: 8px 12px
  }
  
  .studio_ismi {
    font-size: 1.5rem
  }
  
  .studio_alt_metin {
    font-size: 0.75rem
  }
  
  body {
    padding-top: 70px
  }
}

@media (max-width: 480px) {
  .ust_navigasyon {
    padding: 10px 0
  }
  
  .nav_konteyner {
    padding: 0 10px
  }
  
  .logo_alani {
    padding: 6px 10px
  }
  
  .studio_ismi {
    font-size: 1.3rem
  }
  
  .studio_alt_metin {
    font-size: 0.7rem
  }
  
  .mobil_nav_link {
    font-size: 1.2rem;
    padding: 12px 15px
  }
  
  .mobil_studio_ismi {
    font-size: 1.3rem
  }
  
  body {
    padding-top: 65px
  }
}

/* Active states and JavaScript interactions */
.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.mobil_nav_link.aktif {
  background: var(--primary-color);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: rotate(0deg)
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}










/* Footer Section Styles */
.alt_bolum {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--text-primary) 100%);
  color: var(--primary-light);
  padding: 60px 20px 30px;
  margin-top: 80px;
  position: relative;
  overflow: hidden
}

.footer_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.footer_ana_icerik {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 3px dotted var(--primary-color)
}

.studio_bilgi_alani {
  position: relative
}

.footer_logo {
    background: var(--primary-light);
    color: var(--accent-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-color);
    transform: rotate(-1.2deg);
    display: inline-block;
    margin-bottom: 25px
}

.footer_studio_adi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--primary-dark)
}

.footer_studio_aciklama {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 3px;
    color: var(--text-secondary)
}

.iletisim_bilgileri {
  margin-top: 20px
}

.email_bolumu {
    background: rgba(252, 191, 73, 0.1);
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    transform: rotate(0.8deg)
}

.email_etiketi {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-light);
  margin-bottom: 5px;
  font-weight: 500
}

.email_linki {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease
}

.email_linki:hover {
  color: var(--primary-light);
  text-decoration: underline
}

.yasal_linkler_alani,
.hizli_erisim_alani {
  position: relative
}

.yasal_baslik,
.erisim_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.yasal_liste,
.footer_menu_liste {
  list-style: none;
  margin: 0;
  padding: 0
}

.yasal_item,
.footer_menu_item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(252, 191, 73, 0.3)
}

.yasal_item:last-child,
.footer_menu_item:last-child {
  border-bottom: none
}

.yasal_link,
.footer_menu_link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease;
    font-weight: 400
}

.yasal_link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(252, 191, 73, 0.1);
    transform: rotate(-0.5deg)
}

.footer_menu_link:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
  background: rgba(252, 191, 73, 0.1);
  transform: rotate(0.8deg)
}

.telif_hakki_bolumu {
    text-align: center;
    padding: 25px 0;
    border-top: 2px solid var(--primary-color)
}

.telif_icerik {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.telif_metni {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 500
}

.ek_bilgiler {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 0.9rem
}

.kurucu_bilgi,
.kurulus_yili {
    font-style: italic
}

.ayirici {
  color: var(--primary-color);
  font-weight: bold
}

/* Responsive Design */
@media (max-width: 768px) {
  .alt_bolum {
    padding: 50px 15px 25px;
    margin-top: 60px
  }
  
  .footer_ana_icerik {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 35px;
    padding-bottom: 30px
  }
  
  .footer_logo {
    transform: rotate(0deg);
    text-align: center;
    padding: 15px 20px
  }
  
  .footer_studio_adi {
    font-size: 1.4rem
  }
  
  .email_bolumu {
    transform: rotate(0deg);
    text-align: center;
    margin-top: 15px
  }
  
  .yasal_baslik,
  .erisim_baslik {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 15px
  }
  
  .yasal_link,
  .footer_menu_link {
    text-align: center;
    font-size: 1rem
  }
  
  .yasal_link:hover,
  .footer_menu_link:hover {
    transform: rotate(0deg)
  }
  
  .telif_icerik {
    flex-direction: column;
    gap: 12px
  }
  
  .telif_metni {
    font-size: 0.95rem
  }
  
  .ek_bilgiler {
    font-size: 0.85rem
  }
}

@media (max-width: 480px) {
  .alt_bolum {
    padding: 40px 10px 20px
  }
  
  .footer_ana_icerik {
    gap: 25px;
    margin-bottom: 25px;
    padding-bottom: 25px
  }
  
  .footer_logo {
    padding: 12px 15px
  }
  
  .footer_studio_adi {
    font-size: 1.2rem
  }
  
  .footer_studio_aciklama {
    font-size: 0.8rem
  }
  
  .email_bolumu {
    padding: 12px 15px
  }
  
  .email_linki {
    font-size: 1rem
  }
  
  .yasal_baslik,
  .erisim_baslik {
    font-size: 1.1rem
  }
  
  .yasal_link,
  .footer_menu_link {
    font-size: 0.95rem;
    padding: 6px 10px
  }
  
  .telif_hakki_bolumu {
    padding: 20px 0
  }
  
  .telif_metni {
    font-size: 0.9rem
  }
  
  .ek_bilgiler {
    font-size: 0.8rem
  }
}

/* Dark theme adjustments */
.alt_bolum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--tertiary-color) 100%)
}

/* Hover effects for better interactivity */
.footer_logo:hover {
  transform: rotate(0deg);
  background: var(--primary-color);
  color: var(--accent-color)
}

.footer_logo:hover .footer_studio_adi {
  color: var(--accent-color)
}





















/* Import styles from main site */
/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden;
    padding-top: 80px
}

/* Navigation Styles - Same as main page */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}

.mobil_nav_link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: white;
    transform: rotate(-0.5deg)
}

.mobil_nav_link.aktif {
  background: var(--primary-color);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: rotate(0deg)
}

.mobil_studio_bilgi {
  text-align: center;
  margin-top: 20px;
  padding-top: 25px;
  border-top: 3px solid var(--primary-color)
}

.mobil_logo {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    background: white;
    transform: rotate(0.8deg)
}

.mobil_studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.mobil_studio_alt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px
}

/* About Page Specific Styles */
.ana_icerik {
  padding-top: 20px
}

/* Hero Section */
.hakkimizda_hero {
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--secondary-light) 100%);
  min-height: 70vh;
  display: flex;
  align-items: center
}

.hero_konteyner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: center
}

.hero_metin_alani {
  padding: 20px
}

.sayfa_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    font-weight: 300;
    color: var(--primary-dark);
    margin-bottom: 15px;
    letter-spacing: -2px;
    transform: rotate(-1.2deg);
    display: inline-block
}

.hero_alt_metin {
  font-size: 1.5rem;
  color: var(--secondary-color);
  font-style: italic;
  margin-left: 10px
}

.hero_gorsel_alani {
  position: relative
}

.gorsel_cercevesi {
  position: relative;
  border: 4px solid var(--primary-color);
  transform: rotate(2.3deg);
  overflow: hidden
}

.hero_resim {
  display: block;
  width: 100%
}

.hero_foto {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    filter: sepia(15%) saturate(1.1)
}

.yil_etiketi {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--tertiary-color);
    color: white;
    padding: 15px 20px;
    border: 3px solid var(--accent-color);
    transform: rotate(-12deg)
}

.kurulusyili {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1
}

.kurulusyili_aciklama {
  font-size: 0.85rem;
  margin-top: 3px
}

/* Story Section */
.hikayemiz_bolumu {
  padding: 90px 20px;
  background: var(--accent-light)
}

.hikaye_konteyner {
    max-width: 1100px;
    margin: 0 auto
}

.hikaye_icerik {
    display: flex;
    flex-direction: column;
    gap: 50px
}

.hikaye_kartı {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 40px;
  position: relative;
  transition: all 0.4s ease
}

.birinci_kart {
  transform: rotate(-1.1deg);
  border-color: var(--primary-color)
}

.ikinci_kart {
  transform: rotate(0.9deg);
  border-color: var(--secondary-color)
}

.ucuncu_kart {
  transform: rotate(-0.7deg);
  border-color: var(--tertiary-color)
}

.hikaye_kartı:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2
}

.kart_basligi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dotted var(--neutral-color)
}

.bolum_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: 500
}

.yil_vurgusu {
  background: var(--primary-color);
  color: var(--primary-dark);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 1.1rem;
  border: 2px solid var(--primary-dark)
}

.ikinci_kart .yil_vurgusu {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color)
}

.ucuncu_kart .yil_vurgusu {
    background: var(--tertiary-color);
    color: white;
    border-color: var(--tertiary-color)
}

.kart_icerik {
  line-height: 1.7
}

.hikaye_paragraf {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 18px
}

.hikaye_paragraf:last-child {
  margin-bottom: 0
}

/* Philosophy Section */
.felsefe_bolumu {
  padding: 85px 20px;
  background: linear-gradient(145deg, var(--primary-light) 0%, var(--tertiary-light) 100%)
}

.felsefe_konteyner {
    max-width: 1200px;
    margin: 0 auto
}

.felsefe_basligi {
  text-align: center;
  margin-bottom: 60px
}

.ana_felsefe_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(0.7deg);
    display: inline-block
}

.felsefe_alt_metin {
  font-size: 1.3rem;
  color: var(--text-secondary);
  font-style: italic
}

.degerler_alani {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px
}

.deger_kutusu {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 35px;
  text-align: center;
  position: relative;
  transition: all 0.4s ease
}

.kalite_kutusu {
  transform: rotate(-1.3deg);
  border-color: var(--primary-color)
}

.ustalık_kutusu {
    transform: rotate(0.8deg);
    border-color: var(--secondary-color)
}

.kisisel_kutusu {
  transform: rotate(-0.5deg);
  border-color: var(--tertiary-color)
}

.deger_kutusu:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15)
}

.deger_ikonu {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block
}

.deger_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    font-weight: 500
}

.deger_aciklama {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary)
}

/* Team Section */
.ekip_bolumu {
  padding: 90px 20px;
  background: var(--neutral-light)
}

.ekip_konteyner {
    max-width: 1300px;
    margin: 0 auto
}

.ekip_basligi {
  text-align: center;
  margin-bottom: 65px
}

.ekip_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(-0.6deg);
    display: inline-block
}

.ekip_alt_metin {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-style: italic
}

.ekip_uyeleri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px
}

.uye_kartı {
  background: white;
  border: 3px solid var(--primary-color);
  overflow: hidden;
  transition: all 0.4s ease
}

.usta_kart {
  transform: rotate(-1.2deg);
  border-color: var(--primary-color)
}

.tasarimci_kart {
    transform: rotate(0.9deg);
    border-color: var(--secondary-color)
}

.ekip_kart {
  transform: rotate(-0.7deg);
  border-color: var(--tertiary-color)
}

.uye_kartı:hover {
    transform: rotate(0deg) scale(1.03);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12)
}

.uye_foto_alani {
  height: 250px;
  overflow: hidden
}

.uye_resim {
  display: block;
  width: 100%;
  height: 100%
}

.uye_foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: sepia(8%) saturate(1.05)
}

.uye_bilgi {
  padding: 30px
}

.uye_isim {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 500
}

.uye_unvan {
  display: block;
  background: var(--primary-color);
  color: var(--primary-dark);
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  display: inline-block
}

.tasarimci_kart .uye_unvan {
    background: var(--secondary-color);
    color: white
}

.ekip_kart .uye_unvan {
    background: var(--tertiary-color);
    color: white
}

.uye_aciklama {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary)
}

/* Recognition Section */
.takdir_bolumu {
  padding: 85px 20px;
  background: var(--accent-light)
}

.takdir_konteyner {
    max-width: 1100px;
    margin: 0 auto
}

.takdir_basligi {
  text-align: center;
  margin-bottom: 60px
}

.takdir_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(0.5deg);
    display: inline-block
}

.basarilar_alani {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px
}

.basari_kutusu {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
  transition: all 0.4s ease
}

.basari_kutusu:nth-child(1) {
  transform: rotate(-0.8deg);
  border-color: var(--primary-color)
}

.basari_kutusu:nth-child(2) {
    transform: rotate(0.6deg);
    border-color: var(--secondary-color)
}

.basari_kutusu:nth-child(3) {
  transform: rotate(-0.4deg);
  border-color: var(--tertiary-color)
}

.basari_kutusu:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1)
}

.basari_yili {
  background: var(--primary-color);
  color: var(--primary-dark);
  padding: 15px 20px;
  font-size: 1.5rem;
  font-weight: bold;
  border: 2px solid var(--primary-dark);
  min-width: 100px;
  text-align: center;
  flex-shrink: 0
}

.basari_kutusu:nth-child(2) .basari_yili {
    background: var(--secondary-color);
    color: white;
    border-color: var(--secondary-color)
}

.basari_kutusu:nth-child(3) .basari_yili {
    background: var(--tertiary-color);
    color: white;
    border-color: var(--tertiary-color)
}

.basari_icerik {
  flex: 1
}

.basari_adi {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 10px;
    font-weight: 500
}

.basari_aciklama {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary)
}

.muhtesem_ozellik {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    background: var(--primary-light);
    border: 3px solid var(--primary-color);
    padding: 40px;
    transform: rotate(-0.3deg)
}

.ozellik_vurgusu {
  text-align: center;
  padding: 20px
}

.rakam_vurgu {
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-dark);
    line-height: 1
}

.rakam_aciklama {
  display: block;
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 8px;
  font-style: italic
}

/* Footer Styles - Same as main page */
.alt_bolum {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--text-primary) 100%);
  color: var(--primary-light);
  padding: 60px 20px 30px;
  margin-top: 80px;
  position: relative;
  overflow: hidden
}

.footer_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.footer_ana_icerik {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 3px dotted var(--primary-color)
}

.studio_bilgi_alani {
  position: relative
}

.footer_logo {
    background: var(--primary-light);
    color: var(--accent-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-color);
    transform: rotate(-1.2deg);
    display: inline-block;
    margin-bottom: 25px
}

.footer_studio_adi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--primary-dark)
}

.footer_studio_aciklama {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 3px;
    color: var(--text-secondary)
}

.iletisim_bilgileri {
  margin-top: 20px
}

.email_bolumu {
    background: rgba(252, 191, 73, 0.1);
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    transform: rotate(0.8deg)
}

.email_etiketi {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-light);
  margin-bottom: 5px;
  font-weight: 500
}

.email_linki {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease
}

.email_linki:hover {
  color: var(--primary-light);
  text-decoration: underline
}

.yasal_linkler_alani {
  position: relative
}

.yasal_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.yasal_liste {
  list-style: none;
  margin: 0;
  padding: 0
}

.yasal_item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(252, 191, 73, 0.3)
}

.yasal_item:last-child {
  border-bottom: none
}

.yasal_link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease;
    font-weight: 400
}

.yasal_link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(252, 191, 73, 0.1);
    transform: rotate(-0.5deg)
}

.telif_hakki_bolumu {
    text-align: center;
    padding: 25px 0;
    border-top: 2px solid var(--primary-color)
}

.telif_icerik {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.telif_metni {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 500
}

.ek_bilgiler {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 0.9rem
}

.kurucu_bilgi,
.kurulus_yili {
    font-style: italic
}

.ayirici {
  color: var(--primary-color);
  font-weight: bold
}

.alt_bolum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--tertiary-color) 100%)
}

.footer_logo:hover {
  transform: rotate(0deg);
  background: var(--primary-color);
  color: var(--accent-color)
}

.footer_logo:hover .footer_studio_adi {
  color: var(--accent-color)
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding-top: 70px
  }
  
  .ust_navigasyon {
    padding: 12px 0
  }
  
  .nav_konteyner {
    padding: 0 15px
  }
  
  .menu_bolumu {
    display: none
  }
  
  .mobil_menu_buton {
    display: flex
  }
  
  .logo_alani {
    transform: rotate(0deg);
    padding: 8px 12px
  }
  
  .studio_ismi {
    font-size: 1.5rem
  }
  
  .studio_alt_metin {
    font-size: 0.75rem
  }
  
  /* Hero Section Mobile */
  .hakkimizda_hero {
    padding: 50px 15px;
    min-height: 60vh
  }
  
  .hero_konteyner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center
  }
  
  .sayfa_baslik {
    font-size: 2.8rem;
    transform: rotate(0deg)
  }
  
  .hero_alt_metin {
    font-size: 1.3rem;
    margin-left: 0
  }
  
  .gorsel_cercevesi {
    transform: rotate(0deg);
    max-width: 400px;
    margin: 0 auto
  }
  
  .hero_foto {
    height: 300px
  }
  
  .yil_etiketi {
    transform: rotate(-5deg)
  }
  
  /* Story Section Mobile */
  .hikayemiz_bolumu {
    padding: 70px 15px
  }
  
  .hikaye_kartı {
    padding: 30px;
    transform: rotate(0deg) !important
  }
  
  .hikaye_kartı:hover {
    transform: rotate(0deg) scale(1.01)
  }
  
  .kart_basligi {
    flex-direction: column;
    gap: 15px;
    text-align: center
  }
  
  .bolum_baslik {
    font-size: 1.7rem
  }
  
  /* Philosophy Section Mobile */
  .felsefe_bolumu {
    padding: 65px 15px
  }
  
  .ana_felsefe_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .felsefe_alt_metin {
    font-size: 1.1rem
  }
  
  .degerler_alani {
    grid-template-columns: 1fr;
    gap: 30px
  }
  
  .deger_kutusu {
    padding: 25px;
    transform: rotate(0deg) !important
  }
  
  .deger_kutusu:hover {
    transform: rotate(0deg) scale(1.02)
  }
  
  .deger_baslik {
    font-size: 1.4rem
  }
  
  /* Team Section Mobile */
  .ekip_bolumu {
    padding: 70px 15px
  }
  
  .ekip_ana_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .ekip_uyeleri {
    grid-template-columns: 1fr;
    gap: 30px
  }
  
  .uye_kartı {
    transform: rotate(0deg) !important
  }
  
  .uye_kartı:hover {
    transform: rotate(0deg) scale(1.02)
  }
  
  .uye_foto_alani {
    height: 220px
  }
  
  .uye_bilgi {
    padding: 25px
  }
  
  .uye_isim {
    font-size: 1.4rem
  }
  
  /* Recognition Section Mobile */
  .takdir_bolumu {
    padding: 65px 15px
  }
  
  .takdir_ana_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .basari_kutusu {
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 25px;
    transform: rotate(0deg) !important
  }
  
  .basari_kutusu:hover {
    transform: rotate(0deg) scale(1.01)
  }
  
  .basari_yili {
    min-width: auto;
    padding: 12px 18px
  }
  
  .basari_adi {
    font-size: 1.2rem
  }
  
  .muhtesem_ozellik {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px;
    transform: rotate(0deg)
  }
  
  .rakam_vurgu {
    font-size: 2rem
  }
  
  /* Footer Mobile */
  .alt_bolum {
    padding: 50px 15px 25px;
    margin-top: 60px
  }
  
  .footer_ana_icerik {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 35px;
    padding-bottom: 30px
  }
  
  .footer_logo {
    transform: rotate(0deg);
    text-align: center;
    padding: 15px 20px
  }
  
  .email_bolumu {
    transform: rotate(0deg);
    text-align: center;
    margin-top: 15px
  }
  
  .yasal_baslik {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 15px
  }
  
  .yasal_link {
    text-align: center;
    font-size: 1rem
  }
  
  .yasal_link:hover {
    transform: rotate(0deg)
  }
  
  .telif_icerik {
    flex-direction: column;
    gap: 12px
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 65px
  }
  
  .sayfa_baslik {
    font-size: 2.2rem
  }
  
  .hero_alt_metin {
    font-size: 1.1rem
  }
  
  .hikaye_kartı {
    padding: 20px
  }
  
  .bolum_baslik {
    font-size: 1.5rem
  }
  
  .hikaye_paragraf {
    font-size: 1rem
  }
  
  .ana_felsefe_baslik {
    font-size: 1.9rem
  }
  
  .deger_kutusu {
    padding: 20px
  }
  
  .deger_ikonu {
    font-size: 2.5rem
  }
  
  .deger_baslik {
    font-size: 1.3rem
  }
  
  .ekip_ana_baslik {
    font-size: 1.9rem
  }
  
  .uye_bilgi {
    padding: 20px
  }
  
  .uye_isim {
    font-size: 1.3rem
  }
  
  .takdir_ana_baslik {
    font-size: 1.9rem
  }
  
  .basari_kutusu {
    padding: 20px
  }
  
  .basari_adi {
    font-size: 1.1rem
  }
  
  .basari_aciklama {
    font-size: 1rem
  }
  
  .muhtesem_ozellik {
    padding: 20px
  }
  
  .rakam_vurgu {
    font-size: 1.8rem
  }
}













/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden;
    padding-top: 80px
}

/* Navigation Styles - Same as main page */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}

.mobil_nav_link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: white;
    transform: rotate(-0.5deg)
}

.mobil_nav_link.aktif {
  background: var(--primary-color);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: rotate(0deg)
}

.mobil_studio_bilgi {
  text-align: center;
  margin-top: 20px;
  padding-top: 25px;
  border-top: 3px solid var(--primary-color)
}

.mobil_logo {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    background: white;
    transform: rotate(0.8deg)
}

.mobil_studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.mobil_studio_alt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px
}

/* Blog Specific Styles */
.blog_ana_icerik {
  padding-top: 20px
}

/* Blog Hero Section */
.blog_hero {
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--secondary-light) 100%);
  position: relative
}

.blog_hero_konteyner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.hero_metin_alani {
  flex: 1
}

.blog_sayfa_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 4.2rem;
    font-weight: 300;
    color: var(--accent-color);
    margin-bottom: 15px;
    letter-spacing: -2px;
    transform: rotate(-1.1deg);
    display: inline-block
}

.blog_hero_alt_metin {
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-style: italic;
  margin-left: 10px
}

.hero_vurgu_kutusu {
    background: var(--primary-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-dark);
    transform: rotate(8deg);
    text-align: center;
    margin-left: 40px
}

.vurgu_metni {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--primary-dark);
    line-height: 1
}

.vurgu_alt_metni {
  font-size: 0.9rem;
  color: var(--text-primary);
  margin-top: 5px
}

/* Main Article */
.ana_makale {
  padding: 90px 20px;
  background: white
}

.makale_konteyner {
    max-width: 900px;
    margin: 0 auto
}

/* Article Header */
.makale_basligi {
  text-align: center;
  margin-bottom: 50px;
  padding: 40px;
  background: var(--primary-light);
  border: 3px solid var(--primary-color);
  transform: rotate(-0.5deg)
}

.kategori_etiketi {
  margin-bottom: 20px
}

.kategori_metni {
    background: var(--tertiary-color);
    color: white;
    padding: 8px 16px;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    display: inline-block
}

.makale_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 2.8rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 400;
    letter-spacing: -1px;
    line-height: 1.2
}

.makale_meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1rem;
  color: var(--text-secondary)
}

.yazar_bilgi {
  font-weight: 600;
  color: var(--primary-dark)
}

.meta_ayirici {
  color: var(--neutral-color);
  font-weight: bold
}

.yayin_tarihi,
.okuma_suresi {
    font-style: italic
}

/* Article Introduction */
.makale_intro {
  margin-bottom: 60px;
  padding: 40px;
  background: var(--accent-light);
  border: 3px solid var(--accent-color);
  transform: rotate(0.7deg)
}

.intro_resim_alani {
  margin-bottom: 25px;
  position: relative
}

.intro_resim {
  display: block;
  width: 100%
}

.intro_foto {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    filter: sepia(8%) saturate(1.05)
}

.resim_aciklama {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(45, 52, 54, 0.85);
    color: white;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-style: italic
}

.intro_metin {
  text-align: center
}

.giris_paragraf {
    font-size: 1.3rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-style: italic;
    max-width: 700px;
    margin: 0 auto
}

/* Article Content */
.makale_icerik {
  line-height: 1.7;
  font-size: 1.1rem
}

.icerik_bolumu {
  margin-bottom: 60px;
  padding: 40px;
  background: var(--primary-light);
  border: 3px solid var(--primary-color);
  position: relative
}

.icerik_bolumu:nth-child(1) {
  transform: rotate(-0.8deg);
  border-color: var(--primary-color)
}

.icerik_bolumu:nth-child(2) {
    transform: rotate(0.6deg);
    border-color: var(--secondary-color);
    background: var(--secondary-light)
}

.icerik_bolumu:nth-child(3) {
  transform: rotate(-0.4deg);
  border-color: var(--tertiary-color);
  background: var(--tertiary-light)
}

.bolum_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 2.2rem;
    color: var(--accent-color);
    margin-bottom: 30px;
    font-weight: 500;
    border-bottom: 3px dotted var(--neutral-color);
    padding-bottom: 15px
}

.bolum_icerik {
  display: flex;
  flex-direction: column;
  gap: 30px
}

/* Fabric Care Sections */
.ipek_bakimi,
.yun_bakimi,
.pamuk_bakimi {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 30px;
    align-items: start
}

.bakım_resmi {
  position: relative
}

.kumas_foto {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border: 3px solid var(--primary-color);
    transform: rotate(-2deg);
    filter: sepia(5%) saturate(1.05)
}

.bakım_detaylari {
  padding: 20px
}

.aciklama_paragraf {
  margin-bottom: 25px;
  color: var(--text-secondary);
  font-size: 1.05rem
}

/* Care Steps */
.bakım_adimlari {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.adim_kutusu {
  background: white;
  border: 2px solid var(--primary-color);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease
}

.adim_kutusu:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

.ipek_adim {
  border-color: var(--primary-color)
}

.yun_adim {
    border-color: var(--secondary-color)
}

.pamuk_adim {
  border-color: var(--tertiary-color)
}

.adim_ikonu {
  font-size: 1.8rem;
  flex-shrink: 0
}

.adim_icerik {
  flex: 1
}

.adim_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.adim_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5
}

/* Warning Box */
.onemli_uyari {
    background: #fff3cd;
    border: 3px solid #ffc107;
    padding: 20px;
    margin: 30px 0;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    transform: rotate(-0.8deg)
}

.uyari_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 5px
}

.uyari_icerik {
  flex: 1
}

.uyari_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: #856404;
    margin-bottom: 10px;
    font-weight: 600
}

.uyari_metni {
  color: #856404;
  font-size: 1.05rem;
  line-height: 1.5
}

/* Cotton Specific Elements */
.kumas_ozellikleri {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px
}

.ozellik_kutusu {
  background: white;
  border: 2px solid var(--tertiary-color);
  padding: 20px;
  text-align: center
}

.ozellik_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--tertiary-color);
    margin-bottom: 10px;
    font-weight: 600
}

.ozellik_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5
}

/* Care Table */
.pamuk_bakım_tablosu {
  margin-top: 30px
}

.tablo_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-align: center
}

.bakım_tablosu {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 3px solid var(--tertiary-color)
}

.tablo_basligi .tablo_hucre {
    background: var(--tertiary-color);
    color: white;
    font-weight: 600;
    padding: 15px 12px;
    text-align: center;
    font-size: 1rem;
    border-right: 2px solid white
}

.tablo_basligi .tablo_hucre:last-child {
  border-right: none
}

.tablo_satiri:nth-child(odd) .tablo_hucre {
  background: white
}

.tablo_satiri:nth-child(even) .tablo_hucre {
    background: var(--accent-light)
}

.tablo_satiri .tablo_hucre {
  padding: 12px;
  border-right: 1px solid var(--neutral-light);
  border-bottom: 1px solid var(--neutral-light);
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary)
}

.tablo_satiri .tablo_hucre:last-child {
  border-right: none
}

.tablo_satiri:last-child .tablo_hucre {
  border-bottom: none
}

/* Footer Styles - Same as main page */
.alt_bolum {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--text-primary) 100%);
  color: var(--primary-light);
  padding: 60px 20px 30px;
  margin-top: 80px;
  position: relative;
  overflow: hidden
}

.footer_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.footer_ana_icerik {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 3px dotted var(--primary-color)
}

.studio_bilgi_alani {
  position: relative
}

.footer_logo {
    background: var(--primary-light);
    color: var(--accent-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-color);
    transform: rotate(-1.2deg);
    display: inline-block;
    margin-bottom: 25px
}

.footer_studio_adi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--primary-dark)
}

.footer_studio_aciklama {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 3px;
    color: var(--text-secondary)
}

.iletisim_bilgileri {
  margin-top: 20px
}

.email_bolumu {
    background: rgba(252, 191, 73, 0.1);
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    transform: rotate(0.8deg)
}

.email_etiketi {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-light);
  margin-bottom: 5px;
  font-weight: 500
}

.email_linki {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease
}

.email_linki:hover {
  color: var(--primary-light);
  text-decoration: underline
}

.yasal_linkler_alani {
  position: relative
}

.yasal_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.yasal_liste {
  list-style: none;
  margin: 0;
  padding: 0
}

.yasal_item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(252, 191, 73, 0.3)
}

.yasal_item:last-child {
  border-bottom: none
}

.yasal_link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease;
    font-weight: 400
}

.yasal_link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(252, 191, 73, 0.1);
    transform: rotate(-0.5deg)
}

.telif_hakki_bolumu {
    text-align: center;
    padding: 25px 0;
    border-top: 2px solid var(--primary-color)
}

.telif_icerik {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.telif_metni {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 500
}

.ek_bilgiler {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 0.9rem
}

.kurucu_bilgi,
.kurulus_yili {
    font-style: italic
}

.ayirici {
  color: var(--primary-color);
  font-weight: bold
}

.alt_bolum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--tertiary-color) 100%)
}

.footer_logo:hover {
  transform: rotate(0deg);
  background: var(--primary-color);
  color: var(--accent-color)
}

.footer_logo:hover .footer_studio_adi {
  color: var(--accent-color)
}

/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden;
    padding-top: 80px
}

/* Navigation Styles - Same as main page */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}

.mobil_nav_link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: white;
    transform: rotate(-0.5deg)
}

.mobil_nav_link.aktif {
  background: var(--primary-color);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: rotate(0deg)
}

.mobil_studio_bilgi {
  text-align: center;
  margin-top: 20px;
  padding-top: 25px;
  border-top: 3px solid var(--primary-color)
}

.mobil_logo {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    background: white;
    transform: rotate(0.8deg)
}

.mobil_studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.mobil_studio_alt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px
}

/* Contact Page Specific Styles */
.iletisim_ana_icerik {
  padding-top: 20px
}

/* Contact Hero Section */
.iletisim_hero {
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--secondary-light) 100%);
  position: relative
}

.hero_konteyner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.hero_metin_alani {
  flex: 1
}

.sayfa_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 4.2rem;
    font-weight: 300;
    color: var(--accent-color);
    margin-bottom: 15px;
    letter-spacing: -2px;
    transform: rotate(-1.1deg);
    display: inline-block
}

.hero_alt_metin {
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-style: italic;
  margin-left: 10px
}

.hero_vurgu_kutusu {
    background: var(--tertiary-color);
    color: white;
    padding: 20px 25px;
    border: 3px solid var(--accent-color);
    transform: rotate(8deg);
    text-align: center;
    margin-left: 40px
}

.vurgu_metni {
    display: block;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1
}

.vurgu_alt_metni {
  font-size: 0.9rem;
  margin-top: 5px;
  opacity: 0.9
}

/* Contact Information Section */
.iletisim_bilgileri_bolumu {
  padding: 90px 20px;
  background: var(--primary-light)
}

.bilgiler_konteyner {
    max-width: 1200px;
    margin: 0 auto
}

.bilgi_basligi {
  text-align: center;
  margin-bottom: 60px
}

.bilgi_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(0.7deg);
    display: inline-block
}

.bilgi_alt_metin {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-style: italic
}

.bilgi_kartlari {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px
}

.bilgi_karti {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 30px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: all 0.4s ease;
  position: relative
}

.adres_karti {
  transform: rotate(-1.2deg);
  border-color: var(--primary-color)
}

.telefon_karti {
    transform: rotate(0.8deg);
    border-color: var(--secondary-color)
}

.email_karti {
  transform: rotate(-0.5deg);
  border-color: var(--tertiary-color)
}

.saat_karti {
    transform: rotate(1.1deg);
    border-color: var(--accent-color)
}

.bilgi_karti:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 2
}

.kart_ikonu {
  font-size: 2.5rem;
  flex-shrink: 0;
  margin-top: 5px
}

.kart_icerik {
  flex: 1
}

.kart_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 12px;
    font-weight: 600
}

.kart_metin {
  font-size: 1.1rem;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.5
}

.kart_alt_metin {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-style: italic
}

.telefon_linki,
.email_linki {
    color: var(--primary-dark);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease
}

.telefon_linki:hover,
.email_linki:hover {
  color: var(--tertiary-color);
  text-decoration: underline
}

/* Contact Form Section */
.iletisim_formu_bolumu {
  padding: 90px 20px;
  background: var(--accent-light)
}

.form_konteyner {
    max-width: 800px;
    margin: 0 auto
}

.form_basligi {
  text-align: center;
  margin-bottom: 50px
}

.form_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(-0.6deg);
    display: inline-block
}

.form_alt_metin {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-style: italic
}

.form_alani {
    background: white;
    border: 3px solid var(--primary-color);
    padding: 40px;
    transform: rotate(0.4deg)
}

.iletisim_formu {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.form_grubu {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.mesaj_grubu {
  margin-top: 10px
}

.form_etiketi {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 5px
}

.form_girisi,
.form_metin_alani {
    padding: 15px;
    border: 2px solid var(--neutral-light);
    font-family: 'PT Sans', sans-serif;
    font-size: 1rem;
    color: var(--text-primary);
    background: var(--accent-light);
    transition: all 0.3s ease;
    outline: none
}

.form_girisi:focus,
.form_metin_alani:focus {
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 3px rgba(252, 191, 73, 0.2);
    transform: scale(1.01)
}

.form_metin_alani {
    resize: vertical;
    min-height: 120px;
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6
}

.form_bilgi_notu {
    background: var(--primary-light);
    border: 2px solid var(--primary-color);
    padding: 15px;
    border-radius: 0;
    margin: 15px 0
}

.bilgi_metni {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5
}

.bilgi_ikonu {
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 2px
}

.form_buton_alani {
  text-align: center;
  margin-top: 20px
}

.gonder_butonu {
    background: var(--accent-color);
    color: white;
    border: 3px solid var(--accent-color);
    padding: 18px 40px;
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transform: skew(-3deg)
}

.gonder_butonu:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--accent-color);
    transform: skew(-3deg) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2)
}

.buton_metni {
    display: inline-block;
    transform: skew(3deg)
}

.buton_ikonu {
  font-size: 1.3rem;
  transform: skew(3deg)
}

/* Map Section */
.harita_bolumu {
  padding: 90px 20px;
  background: var(--secondary-light)
}

.harita_konteyner {
    max-width: 1200px;
    margin: 0 auto
}

.harita_basligi {
  text-align: center;
  margin-bottom: 50px
}

.harita_ana_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 3rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: -1px;
    transform: rotate(0.5deg);
    display: inline-block
}

.harita_alt_metin {
  font-size: 1.2rem;
  color: var(--text-secondary);
  font-style: italic
}

.harita_alani {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    align-items: start
}

.harita_cercevesi {
  border: 4px solid var(--secondary-color);
  transform: rotate(-1deg);
  overflow: hidden;
  height: 400px;
  position: relative
}

.google_harita {
    width: 100%;
    height: 100%;
    border: none;
    filter: sepia(5%) saturate(0.95);
    transform: rotate(1deg) scale(1.02)
}

.harita_bilgi_kutusu {
    background: white;
    border: 3px solid var(--secondary-color);
    padding: 30px;
    transform: rotate(1.2deg);
    height: fit-content
}

.konum_vurgusu {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px dotted var(--neutral-color)
}

.konum_ikonu {
  font-size: 2rem;
  flex-shrink: 0
}

.konum_detay {
  flex: 1
}

.konum_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.4rem;
    color: var(--accent-color);
    margin-bottom: 5px;
    font-weight: 600
}

.konum_adres {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.4
}

.ulasim_bilgileri {
  margin-top: 20px
}

.ulasim_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--secondary-color);
    margin-bottom: 15px;
    font-weight: 600
}

.ulasim_listesi {
  list-style: none;
  padding: 0;
  margin: 0
}

.ulasim_maddesi {
    padding: 8px 0;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5;
    border-bottom: 1px dotted var(--neutral-light)
}

.ulasim_maddesi:last-child {
  border-bottom: none
}

/* Footer Styles - Same as main page */
.alt_bolum {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--text-primary) 100%);
  color: var(--primary-light);
  padding: 60px 20px 30px;
  margin-top: 80px;
  position: relative;
  overflow: hidden
}

.footer_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.footer_ana_icerik {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 3px dotted var(--primary-color)
}

.studio_bilgi_alani {
  position: relative
}

.footer_logo {
    background: var(--primary-light);
    color: var(--accent-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-color);
    transform: rotate(-1.2deg);
    display: inline-block;
    margin-bottom: 25px
}

.footer_studio_adi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--primary-dark)
}

.footer_studio_aciklama {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 3px;
    color: var(--text-secondary)
}

.iletisim_bilgileri {
  margin-top: 20px
}

.email_bolumu {
    background: rgba(252, 191, 73, 0.1);
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    transform: rotate(0.8deg)
}

.email_etiketi {
  display: block;
  font-size: 0.9rem;
  color: var(--primary-light);
  margin-bottom: 5px;
  font-weight: 500
}

.email_linki {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease
}

.email_linki:hover {
  color: var(--primary-light);
  text-decoration: underline
}

.yasal_linkler_alani {
  position: relative
}

.yasal_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.yasal_liste {
  list-style: none;
  margin: 0;
  padding: 0
}

.yasal_item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(252, 191, 73, 0.3)
}

.yasal_item:last-child {
  border-bottom: none
}

.yasal_link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease;
    font-weight: 400
}

.yasal_link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(252, 191, 73, 0.1);
    transform: rotate(-0.5deg)
}

.telif_hakki_bolumu {
    text-align: center;
    padding: 25px 0;
    border-top: 2px solid var(--primary-color)
}

.telif_icerik {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.telif_metni {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 500
}

.ek_bilgiler {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 0.9rem
}

.kurucu_bilgi,
.kurulus_yili {
    font-style: italic
}

.ayirici {
  color: var(--primary-color);
  font-weight: bold
}

.alt_bolum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--tertiary-color) 100%)
}

.footer_logo:hover {
  transform: rotate(0deg);
  background: var(--primary-color);
  color: var(--accent-color)
}

.footer_logo:hover .footer_studio_adi {
  color: var(--accent-color)
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding-top: 70px
  }
  
  .ust_navigasyon {
    padding: 12px 0
  }
  
  .nav_konteyner {
    padding: 0 15px
  }
  
  .menu_bolumu {
    display: none
  }
  
  .mobil_menu_buton {
    display: flex
  }
  
  .logo_alani {
    transform: rotate(0deg);
    padding: 8px 12px
  }
  
  .studio_ismi {
    font-size: 1.5rem
  }
  
  .studio_alt_metin {
    font-size: 0.75rem
  }
  
  /* Contact Hero Mobile */
  .iletisim_hero {
    padding: 50px 15px
  }
  
  .hero_konteyner {
    flex-direction: column;
    text-align: center;
    gap: 30px
  }
  
  .sayfa_baslik {
    font-size: 2.8rem;
    transform: rotate(0deg)
  }
  
  .hero_alt_metin {
    font-size: 1.2rem;
    margin-left: 0
  }
  
  .hero_vurgu_kutusu {
    transform: rotate(-3deg);
    margin-left: 0
  }
  
  /* Contact Info Mobile */
  .iletisim_bilgileri_bolumu {
    padding: 70px 15px
  }
  
  .bilgi_ana_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .bilgi_kartlari {
    grid-template-columns: 1fr;
    gap: 25px
  }
  
  .bilgi_karti {
    padding: 25px;
    transform: rotate(0deg) !important
  }
  
  .bilgi_karti:hover {
    transform: rotate(0deg) scale(1.02)
  }
  
  .kart_ikonu {
    font-size: 2rem
  }
  
  .kart_baslik {
    font-size: 1.3rem
  }
  
  /* Contact Form Mobile */
  .iletisim_formu_bolumu {
    padding: 70px 15px
  }
  
  .form_ana_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .form_alani {
    padding: 30px;
    transform: rotate(0deg)
  }
  
  .form_girisi,
  .form_metin_alani {
    padding: 12px;
    font-size: 0.95rem
  }
  
  .gonder_butonu {
    padding: 15px 35px;
    font-size: 1.1rem;
    transform: skew(0deg)
  }
  
  .gonder_butonu:hover {
    transform: skew(0deg) scale(1.03)
  }
  
  .buton_metni,
  .buton_ikonu {
    transform: skew(0deg)
  }
  
  /* Map Mobile */
  .harita_bolumu {
    padding: 70px 15px
  }
  
  .harita_ana_baslik {
    font-size: 2.2rem;
    transform: rotate(0deg)
  }
  
  .harita_alani {
    grid-template-columns: 1fr;
    gap: 30px
  }
  
  .harita_cercevesi {
    transform: rotate(0deg);
    height: 300px
  }
  
  .google_harita {
    transform: rotate(0deg) scale(1)
  }
  
  .harita_bilgi_kutusu {
    padding: 25px;
    transform: rotate(0deg)
  }
  
  .konum_vurgusu {
    flex-direction: column;
    text-align: center;
    gap: 10px
  }
  
  .konum_ikonu {
    font-size: 2.5rem
  }
  
  .ulasim_maddesi {
    font-size: 0.95rem
  }
  
  /* Footer Mobile */
  .alt_bolum {
    padding: 50px 15px 25px;
    margin-top: 60px
  }
  
  .footer_ana_icerik {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 35px;
    padding-bottom: 30px
  }
  
  .footer_logo {
    transform: rotate(0deg);
    text-align: center;
    padding: 15px 20px
  }
  
  .email_bolumu {
    transform: rotate(0deg);
    text-align: center;
    margin-top: 15px
  }
  
  .yasal_baslik {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 15px
  }
  
  .yasal_link {
    text-align: center;
    font-size: 1rem
  }
  
  .yasal_link:hover {
    transform: rotate(0deg)
  }
  
  .telif_icerik {
    flex-direction: column;
    gap: 12px
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 65px
  }
  
  .sayfa_baslik {
    font-size: 2.2rem
  }
  
  .hero_alt_metin {
    font-size: 1.1rem
  }
  
  .vurgu_metni {
    font-size: 1.5rem
  }
  
  .vurgu_alt_metni {
    font-size: 0.8rem
  }
  
  .bilgi_ana_baslik {
    font-size: 1.9rem
  }
  
  .bilgi_karti {
    flex-direction: column;
    text-align: center;
    padding: 20px
  }
  
  .kart_ikonu {
    font-size: 2.5rem
  }
  
  .form_ana_baslik {
    font-size: 1.9rem
  }
  
  .form_alani {
    padding: 20px
  }
  
  .form_etiketi {
    font-size: 1rem
  }
  
  .form_bilgi_notu {
    padding: 12px
  }
  
  .bilgi_metni {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    font-size: 0.9rem
  }
  
  .gonder_butonu {
    padding: 12px 30px;
    font-size: 1rem
  }
  
  .harita_ana_baslik {
    font-size: 1.9rem
  }
  
  .harita_cercevesi {
    height: 250px
  }
  
  .harita_bilgi_kutusu {
    padding: 20px
  }
  
  .konum_baslik {
    font-size: 1.2rem
  }
  
  .ulasim_baslik {
    font-size: 1.1rem
  }
  
  .ulasim_maddesi {
    font-size: 0.9rem
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}













/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden;
    padding-top: 80px
}

/* Navigation Styles - Same as main page */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}

.mobil_nav_link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: white;
    transform: rotate(-0.5deg)
}

.mobil_nav_link.aktif {
  background: var(--primary-color);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: rotate(0deg)
}

.mobil_studio_bilgi {
  text-align: center;
  margin-top: 20px;
  padding-top: 25px;
  border-top: 3px solid var(--primary-color)
}

.mobil_logo {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    background: white;
    transform: rotate(0.8deg)
}

.mobil_studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.mobil_studio_alt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px
}

/* Cookies Page Specific Styles */
.cerez_ana_icerik {
  padding-top: 20px
}

/* Hero Section */
.cerez_hero {
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--secondary-light) 100%);
  position: relative
}

.hero_konteyner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.hero_metin_alani {
  flex: 1
}

.sayfa_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    font-weight: 300;
    color: var(--accent-color);
    margin-bottom: 15px;
    letter-spacing: -2px;
    transform: rotate(-1.1deg);
    display: inline-block
}

.hero_alt_metin {
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-style: italic;
  margin-left: 10px
}

.hero_cerez_ikonu {
    background: var(--primary-color);
    padding: 25px;
    border: 3px solid var(--primary-dark);
    transform: rotate(12deg);
    text-align: center;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.cerez_emoji {
    font-size: 3rem;
    display: block;
    transform: rotate(-12deg)
}

.cerez_aciklama {
  font-size: 0.9rem;
  color: var(--primary-dark);
  font-weight: 600;
  transform: rotate(-12deg)
}

/* Policy Content Section */
.cerez_politika_bolumu {
  padding: 90px 20px;
  background: var(--accent-light)
}

.politika_konteyner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px
}

/* Policy Cards */
.politika_kartı {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 40px;
  transition: all 0.4s ease;
  position: relative
}

.giris_karti {
  transform: rotate(-0.8deg);
  border-color: var(--primary-color)
}

.cerez_turleri_karti {
    transform: rotate(0.6deg);
    border-color: var(--secondary-color)
}

.haklariniz_karti {
  transform: rotate(-0.4deg);
  border-color: var(--tertiary-color)
}

.ayarlar_karti {
    transform: rotate(0.7deg);
    border-color: var(--accent-color)
}

.guncelleme_karti {
  transform: rotate(-0.5deg);
  border-color: var(--primary-color)
}

.politika_kartı:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2
}

.kart_basligi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dotted var(--neutral-color)
}

.kart_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: 500
}

.kart_vurgusu {
  background: var(--primary-color);
  color: var(--primary-dark);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.cerez_turleri_karti .kart_vurgusu {
    background: var(--secondary-color);
    color: white
}

.haklariniz_karti .kart_vurgusu {
    background: var(--tertiary-color);
    color: white
}

.ayarlar_karti .kart_vurgusu {
    background: var(--accent-color);
    color: white
}

.kart_icerik {
  line-height: 1.7
}

.aciklama_paragraf {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 18px
}

.aciklama_paragraf:last-child {
  margin-bottom: 0
}

/* Cookie Types */
.cerez_turleri {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.cerez_turu {
  background: var(--accent-light);
  border: 2px solid var(--neutral-light);
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: all 0.3s ease
}

.cerez_turu:hover {
    transform: scale(1.02);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
}

.tur_ikonu {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 5px
}

.tur_bilgi {
  flex: 1
}

.tur_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.tur_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 10px
}

.tur_durum {
    background: var(--primary-color);
    color: var(--primary-dark);
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block
}

.analitik_cerez .tur_durum {
    background: var(--secondary-color);
    color: white
}

.tercih_cerez .tur_durum {
    background: var(--tertiary-color);
    color: white
}

/* Rights Section */
.haklar_listesi {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.hak_maddesi {
  background: var(--accent-light);
  border: 2px solid var(--neutral-light);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: all 0.3s ease
}

.hak_maddesi:hover {
    transform: scale(1.01);
    border-color: var(--tertiary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
}

.madde_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px
}

.madde_icerik {
  flex: 1
}

.madde_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.madde_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6
}

/* Browser Settings Guide */
.tarayici_rehberi {
  text-align: center
}

.rehber_giris {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
    font-style: italic
}

.ayar_adimlari {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto
}

.adim_kutusu {
  background: var(--accent-light);
  border: 2px solid var(--accent-color);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  text-align: left;
  transition: all 0.3s ease
}

.adim_kutusu:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

.adim_numara {
    background: var(--accent-color);
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    flex-shrink: 0
}

.adim_detay {
  flex: 1
}

.adim_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.adim_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5
}

/* Policy Updates */
.guncelleme_bilgisi {
  text-align: center
}

.tarih_kutusu {
    background: var(--primary-light);
    border: 2px solid var(--primary-color);
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.guncelleme_tarihi {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: var(--primary-dark);
    font-weight: 600
}

.versiyon_numarası {
  background: var(--primary-color);
  color: var(--primary-dark);
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.guncelleme_aciklama {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px
}

.iletisim_notu {
    background: var(--tertiary-light);
    border: 2px solid var(--tertiary-color);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px
}

.not_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px
}

.not_metni {
  flex: 1;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left
}

/* Footer Styles - Same as main page */
.alt_bolum {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--text-primary) 100%);
  color: var(--primary-light);
  padding: 60px 20px 30px;
  margin-top: 80px;
  position: relative;
  overflow: hidden
}

.footer_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.footer_ana_icerik {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 3px dotted var(--primary-color)
}

.studio_bilgi_alani {
  position: relative
}

.footer_logo {
    background: var(--primary-light);
    color: var(--accent-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-color);
    transform: rotate(-1.2deg);
    display: inline-block;
    margin-bottom: 25px
}

.footer_studio_adi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--primary-dark)
}

.footer_studio_aciklama {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 3px;
    color: var(--text-secondary)
}

.yasal_linkler_alani {
  position: relative
}

.yasal_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.yasal_liste {
  list-style: none;
  margin: 0;
  padding: 0
}

.yasal_item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(252, 191, 73, 0.3)
}

.yasal_item:last-child {
  border-bottom: none
}

.yasal_link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease;
    font-weight: 400
}

.yasal_link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(252, 191, 73, 0.1);
    transform: rotate(-0.5deg)
}

.telif_hakki_bolumu {
    text-align: center;
    padding: 25px 0;
    border-top: 2px solid var(--primary-color)
}

.telif_icerik {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.telif_metni {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 500
}

.ek_bilgiler {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 0.9rem
}

.kurucu_bilgi,
.kurulus_yili {
    font-style: italic
}

.ayirici {
  color: var(--primary-color);
  font-weight: bold
}

.alt_bolum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--tertiary-color) 100%)
}

.footer_logo:hover {
  transform: rotate(0deg);
  background: var(--primary-color);
  color: var(--accent-color)
}

.footer_logo:hover .footer_studio_adi {
  color: var(--accent-color)
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding-top: 70px
  }
  
  .ust_navigasyon {
    padding: 12px 0
  }
  
  .nav_konteyner {
    padding: 0 15px
  }
  
  .menu_bolumu {
    display: none
  }
  
  .mobil_menu_buton {
    display: flex
  }
  
  .logo_alani {
    transform: rotate(0deg);
    padding: 8px 12px
  }
  
  .studio_ismi {
    font-size: 1.5rem
  }
  
  .studio_alt_metin {
    font-size: 0.75rem
  }
  
  /* Hero Mobile */
  .cerez_hero {
    padding: 50px 15px
  }
  
  .hero_konteyner {
    flex-direction: column;
    text-align: center;
    gap: 30px
  }
  
  .sayfa_baslik {
    font-size: 2.8rem;
    transform: rotate(0deg)
  }
  
  .hero_alt_metin {
    font-size: 1.2rem;
    margin-left: 0
  }
  
  .hero_cerez_ikonu {
    transform: rotate(-5deg);
    margin-left: 0;
    padding: 20px
  }
  
  .cerez_emoji {
    font-size: 2.5rem
  }
  
  /* Policy Content Mobile */
  .cerez_politika_bolumu {
    padding: 70px 15px
  }
  
  .politika_konteyner {
    gap: 35px
  }
  
  .politika_kartı {
    padding: 30px;
    transform: rotate(0deg) !important
  }
  
  .politika_kartı:hover {
    transform: rotate(0deg) scale(1.01)
  }
  
  .kart_basligi {
    flex-direction: column;
    gap: 15px;
    text-align: center
  }
  
  .kart_baslik {
    font-size: 1.7rem
  }
  
  .kart_vurgusu {
    font-size: 0.8rem;
    padding: 6px 12px
  }
  
  /* Cookie Types Mobile */
  .cerez_turu {
    flex-direction: column;
    text-align: center;
    padding: 20px
  }
  
  .tur_ikonu {
    font-size: 2.5rem;
    margin-top: 0
  }
  
  .tur_baslik {
    font-size: 1.2rem
  }
  
  /* Rights Mobile */
  .hak_maddesi {
    flex-direction: column;
    text-align: center;
    padding: 18px
  }
  
  .madde_ikonu {
    font-size: 2rem;
    margin-top: 0
  }
  
  .madde_baslik {
    font-size: 1.1rem
  }
  
  /* Browser Settings Mobile */
  .ayar_adimlari {
    gap: 15px
  }
  
  .adim_kutusu {
    flex-direction: column;
    text-align: center;
    padding: 18px
  }
  
  .adim_numara {
    width: 40px;
    height: 40px;
    font-size: 1.2rem
  }
  
  .adim_baslik {
    font-size: 1.1rem
  }
  
  .adim_aciklama {
    font-size: 0.95rem
  }
  
  /* Updates Mobile */
  .tarih_kutusu {
    flex-direction: column;
    gap: 10px;
    padding: 18px
  }
  
  .guncelleme_tarihi {
    font-size: 1rem
  }
  
  .iletisim_notu {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 18px
  }
  
  .not_ikonu {
    font-size: 2rem;
    margin-top: 0
  }
  
  /* Footer Mobile */
  .alt_bolum {
    padding: 50px 15px 25px;
    margin-top: 60px
  }
  
  .footer_ana_icerik {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 35px;
    padding-bottom: 30px
  }
  
  .footer_logo {
    transform: rotate(0deg);
    text-align: center;
    padding: 15px 20px
  }
  
  .yasal_baslik {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 15px
  }
  
  .yasal_link {
    text-align: center;
    font-size: 1rem
  }
  
  .yasal_link:hover {
    transform: rotate(0deg)
  }
  
  .telif_icerik {
    flex-direction: column;
    gap: 12px
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 65px
  }
  
  .sayfa_baslik {
    font-size: 2.2rem
  }
  
  .hero_alt_metin {
    font-size: 1.1rem
  }
  
  .cerez_emoji {
    font-size: 2rem
  }
  
  .cerez_aciklama {
    font-size: 0.8rem
  }
  
  .politika_kartı {
    padding: 20px
  }
  
  .kart_baslik {
    font-size: 1.5rem
  }
  
  .aciklama_paragraf {
    font-size: 1rem
  }
  
  .cerez_turu {
    padding: 15px
  }
  
  .tur_ikonu {
    font-size: 2rem
  }
  
  .tur_baslik {
    font-size: 1.1rem
  }
  
  .tur_aciklama {
    font-size: 0.95rem
  }
  
  .hak_maddesi {
    padding: 15px
  }
  
  .madde_ikonu {
    font-size: 1.8rem
  }
  
  .madde_baslik {
    font-size: 1rem
  }
  
  .madde_aciklama {
    font-size: 0.95rem
  }
  
  .adim_kutusu {
    padding: 15px
  }
  
  .adim_numara {
    width: 35px;
    height: 35px;
    font-size: 1rem
  }
  
  .adim_baslik {
    font-size: 1rem
  }
  
  .adim_aciklama {
    font-size: 0.9rem
  }
  
  .tarih_kutusu {
    padding: 15px
  }
  
  .guncelleme_tarihi {
    font-size: 0.95rem
  }
  
  .versiyon_numarası {
    font-size: 0.8rem;
    padding: 4px 8px
  }
  
  .guncelleme_aciklama {
    font-size: 1rem
  }
  
  .iletisim_notu {
    padding: 15px
  }
  
  .not_metni {
    font-size: 0.95rem
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}


















/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden;
    padding-top: 80px
}

/* Navigation Styles - Same as main page */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}

.mobil_nav_link:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: white;
    transform: rotate(-0.5deg)
}

.mobil_nav_link.aktif {
  background: var(--primary-color);
  color: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: rotate(0deg)
}

.mobil_studio_bilgi {
  text-align: center;
  margin-top: 20px;
  padding-top: 25px;
  border-top: 3px solid var(--primary-color)
}

.mobil_logo {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--primary-color);
    background: white;
    transform: rotate(0.8deg)
}

.mobil_studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.mobil_studio_alt {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px
}

/* Privacy Page Specific Styles */
.gizlilik_ana_icerik {
  padding-top: 20px
}

/* Hero Section */
.gizlilik_hero {
  padding: 60px 20px;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--secondary-light) 100%);
  position: relative
}

.hero_konteyner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.hero_metin_alani {
  flex: 1
}

.sayfa_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    font-weight: 300;
    color: var(--accent-color);
    margin-bottom: 15px;
    letter-spacing: -2px;
    transform: rotate(-1.1deg);
    display: inline-block
}

.hero_alt_metin {
  font-size: 1.4rem;
  color: var(--secondary-color);
  font-style: italic;
  margin-left: 10px
}

.hero_gizlilik_ikonu {
    background: var(--secondary-color);
    color: white;
    padding: 25px;
    border: 3px solid var(--accent-color);
    transform: rotate(10deg);
    text-align: center;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px
}

.gizlilik_emoji {
    font-size: 3rem;
    display: block;
    transform: rotate(-10deg)
}

.gizlilik_aciklama {
  font-size: 0.9rem;
  font-weight: 600;
  transform: rotate(-10deg);
  opacity: 0.9
}

/* Privacy Policy Content Section */
.gizlilik_politika_bolumu {
  padding: 90px 20px;
  background: var(--accent-light)
}

.politika_konteyner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px
}

/* Policy Cards */
.politika_kartı {
  background: white;
  border: 3px solid var(--primary-color);
  padding: 40px;
  transition: all 0.4s ease;
  position: relative
}

.giris_karti {
  transform: rotate(-0.8deg);
  border-color: var(--primary-color)
}

.veri_toplama_karti {
    transform: rotate(0.6deg);
    border-color: var(--secondary-color)
}

.kullanim_karti {
  transform: rotate(-0.4deg);
  border-color: var(--tertiary-color)
}

.koruma_karti {
    transform: rotate(0.7deg);
    border-color: var(--accent-color)
}

.haklariniz_karti {
  transform: rotate(-0.5deg);
  border-color: var(--primary-color)
}

.saklama_karti {
    transform: rotate(0.8deg);
    border-color: var(--secondary-color)
}

.guncelleme_karti {
  transform: rotate(-0.6deg);
  border-color: var(--tertiary-color)
}

.politika_kartı:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2
}

.kart_basligi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px dotted var(--neutral-color)
}

.kart_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    color: var(--accent-color);
    font-weight: 500
}

.kart_vurgusu {
  background: var(--primary-color);
  color: var(--primary-dark);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.veri_toplama_karti .kart_vurgusu {
    background: var(--secondary-color);
    color: white
}

.kullanim_karti .kart_vurgusu {
    background: var(--tertiary-color);
    color: white
}

.koruma_karti .kart_vurgusu {
    background: var(--accent-color);
    color: white
}

.saklama_karti .kart_vurgusu {
    background: var(--secondary-color);
    color: white
}

.guncelleme_karti .kart_vurgusu {
    background: var(--tertiary-color);
    color: white
}

.kart_icerik {
  line-height: 1.7
}

.aciklama_paragraf {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 18px
}

.aciklama_paragraf:last-child {
  margin-bottom: 0
}

/* Data Collection Types */
.veri_turleri {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.veri_kategorisi {
  background: var(--accent-light);
  border: 2px solid var(--neutral-light);
  padding: 25px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: all 0.3s ease
}

.veri_kategorisi:hover {
    transform: scale(1.02);
    border-color: var(--secondary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
}

.kategori_ikonu {
  font-size: 2rem;
  flex-shrink: 0;
  margin-top: 5px
}

.kategori_bilgi {
  flex: 1
}

.kategori_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.kategori_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 10px
}

.toplama_nedeni {
    background: var(--secondary-color);
    color: white;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block
}

.teknik_veri .toplama_nedeni {
    background: var(--tertiary-color)
}

.kullanim_verisi .toplama_nedeni {
    background: var(--accent-color)
}

/* Data Usage Purposes */
.kullanim_amaclari {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.amac_maddesi {
  background: var(--accent-light);
  border: 2px solid var(--neutral-light);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: all 0.3s ease
}

.amac_maddesi:hover {
    transform: scale(1.01);
    border-color: var(--tertiary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
}

.madde_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px
}

.madde_icerik {
  flex: 1
}

.madde_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.madde_aciklama {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6
}

/* Data Protection Measures */
.guvenlik_onlemleri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px
}

.onlem_kutusu {
  background: var(--accent-light);
  border: 2px solid var(--accent-color);
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease
}

.onlem_kutusu:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1)
}

.onlem_ikonu {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 15px
}

.onlem_detay {
  text-align: center
}

.onlem_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.onlem_aciklama {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5
}

/* User Rights */
.haklar_listesi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px
}

.hak_maddesi {
  background: var(--accent-light);
  border: 2px solid var(--neutral-light);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  transition: all 0.3s ease
}

.hak_maddesi:hover {
    transform: scale(1.02);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
}

.hak_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px
}

.hak_icerik {
  flex: 1
}

.hak_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-color);
    margin-bottom: 8px;
    font-weight: 600
}

.hak_aciklama {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6
}

/* Data Retention Table */
.saklama_tablosu {
  margin: 20px 0
}

.tablo_baslik {
  text-align: center;
  margin-bottom: 25px
}

.baslik_metni {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--accent-color);
    font-weight: 500
}

.saklama_satirlari {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.satir_kutusu {
  background: var(--accent-light);
  border: 2px solid var(--secondary-color);
  padding: 20px;
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 15px;
  align-items: center;
  transition: all 0.3s ease
}

.satir_kutusu:hover {
    transform: scale(1.01);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08)
}

.veri_turu {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: var(--accent-color);
    font-weight: 600
}

.saklama_suresi {
    background: var(--secondary-color);
    color: white;
    padding: 8px 15px;
    text-align: center;
    font-weight: 600;
    font-size: 1rem
}

.saklama_nedeni {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-style: italic
}

.otomatik_silme_notu {
    background: var(--primary-light);
    border: 2px solid var(--primary-color);
    padding: 20px;
    margin-top: 25px;
    display: flex;
    align-items: flex-start;
    gap: 15px
}

.not_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px
}

.not_metni {
  flex: 1;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6
}

/* Policy Updates */
.guncelleme_bilgisi {
  text-align: center
}

.tarih_kutusu {
    background: var(--tertiary-light);
    border: 2px solid var(--tertiary-color);
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap
}

.guncelleme_tarihi {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: var(--tertiary-color);
    font-weight: 600
}

.versiyon_numarası {
  background: var(--tertiary-color);
  color: white;
  padding: 6px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px
}

.guncelleme_aciklama {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 25px
}

.degisiklik_gecmisi {
    background: var(--accent-light);
    border: 2px solid var(--neutral-color);
    padding: 20px;
    margin-bottom: 25px;
    text-align: left
}

.gecmis_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 15px;
    font-weight: 600
}

.degisiklik_listesi {
  list-style: none;
  padding: 0;
  margin: 0
}

.degisiklik_maddesi {
    padding: 8px 0;
    border-bottom: 1px dotted var(--neutral-color);
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.5
}

.degisiklik_maddesi:last-child {
  border-bottom: none
}

.degisiklik_maddesi::before {
    content: "• ";
    color: var(--tertiary-color);
    font-weight: bold;
    margin-right: 8px
}

.bildirim_notu {
    background: var(--primary-light);
    border: 2px solid var(--primary-color);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px
}

.bildirim_ikonu {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 2px
}

.bildirim_metni {
  flex: 1;
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left
}

/* Footer Styles - Same as main page */
.alt_bolum {
  background: linear-gradient(135deg, var(--accent-color) 0%, var(--text-primary) 100%);
  color: var(--primary-light);
  padding: 60px 20px 30px;
  margin-top: 80px;
  position: relative;
  overflow: hidden
}

.footer_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    position: relative
}

.footer_ana_icerik {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 3px dotted var(--primary-color)
}

.studio_bilgi_alani {
  position: relative
}

.footer_logo {
    background: var(--primary-light);
    color: var(--accent-color);
    padding: 20px 25px;
    border: 3px solid var(--primary-color);
    transform: rotate(-1.2deg);
    display: inline-block;
    margin-bottom: 25px
}

.footer_studio_adi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--primary-dark)
}

.footer_studio_aciklama {
    display: block;
    font-size: 0.85rem;
    font-style: italic;
    margin-top: 3px;
    color: var(--text-secondary)
}

.yasal_linkler_alani {
  position: relative
}

.yasal_baslik {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px
}

.yasal_liste {
  list-style: none;
  margin: 0;
  padding: 0
}

.yasal_item {
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px dotted rgba(252, 191, 73, 0.3)
}

.yasal_item:last-child {
  border-bottom: none
}

.yasal_link {
    color: var(--primary-light);
    text-decoration: none;
    font-size: 1.05rem;
    padding: 8px 12px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease;
    font-weight: 400
}

.yasal_link:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background: rgba(252, 191, 73, 0.1);
    transform: rotate(-0.5deg)
}

.telif_hakki_bolumu {
    text-align: center;
    padding: 25px 0;
    border-top: 2px solid var(--primary-color)
}

.telif_icerik {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px
}

.telif_metni {
    font-size: 1rem;
    color: var(--primary-light);
    font-weight: 500
}

.ek_bilgiler {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary-color);
  font-size: 0.9rem
}

.kurucu_bilgi,
.kurulus_yili {
    font-style: italic
}

.ayirici {
  color: var(--primary-color);
  font-weight: bold
}

.alt_bolum::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--tertiary-color) 100%)
}

.footer_logo:hover {
  transform: rotate(0deg);
  background: var(--primary-color);
  color: var(--accent-color)
}

.footer_logo:hover .footer_studio_adi {
  color: var(--accent-color)
}

/* Responsive Design */
@media (max-width: 768px) {
  body {
    padding-top: 70px
  }
  
  .ust_navigasyon {
    padding: 12px 0
  }
  
  .nav_konteyner {
    padding: 0 15px
  }
  
  .menu_bolumu {
    display: none
  }
  
  .mobil_menu_buton {
    display: flex
  }
  
  .logo_alani {
    transform: rotate(0deg);
    padding: 8px 12px
  }
  
  .studio_ismi {
    font-size: 1.5rem
  }
  
  .studio_alt_metin {
    font-size: 0.75rem
  }
  
  /* Hero Mobile */
  .gizlilik_hero {
    padding: 50px 15px
  }
  
  .hero_konteyner {
    flex-direction: column;
    text-align: center;
    gap: 30px
  }
  
  .sayfa_baslik {
    font-size: 2.8rem;
    transform: rotate(0deg)
  }
  
  .hero_alt_metin {
    font-size: 1.2rem;
    margin-left: 0
  }
  
  .hero_gizlilik_ikonu {
    transform: rotate(-5deg);
    margin-left: 0;
    padding: 20px
  }
  
  .gizlilik_emoji {
    font-size: 2.5rem
  }
  
  /* Policy Content Mobile */
  .gizlilik_politika_bolumu {
    padding: 70px 15px
  }
  
  .politika_konteyner {
    gap: 35px
  }
  
  .politika_kartı {
    padding: 30px;
    transform: rotate(0deg) !important
  }
  
  .politika_kartı:hover {
    transform: rotate(0deg) scale(1.01)
  }
  
  .kart_basligi {
    flex-direction: column;
    gap: 15px;
    text-align: center
  }
  
  .kart_baslik {
    font-size: 1.7rem
  }
  
  .kart_vurgusu {
    font-size: 0.8rem;
    padding: 6px 12px
  }
  
  /* Data Collection Mobile */
  .veri_kategorisi {
    flex-direction: column;
    text-align: center;
    padding: 20px
  }
  
  .kategori_ikonu {
    font-size: 2.5rem;
    margin-top: 0
  }
  
  .kategori_baslik {
    font-size: 1.2rem
  }
  
  /* Usage Purposes Mobile */
  .amac_maddesi {
    flex-direction: column;
    text-align: center;
    padding: 18px
  }
  
  .madde_ikonu {
    font-size: 2rem;
    margin-top: 0
  }
  
  .madde_baslik {
    font-size: 1.1rem
  }
  
  /* Security Measures Mobile */
  .guvenlik_onlemleri {
    grid-template-columns: 1fr;
    gap: 15px
  }
  
  .onlem_kutusu {
    padding: 18px
  }
  
  .onlem_ikonu {
    font-size: 2rem
  }
  
  .onlem_baslik {
    font-size: 1.1rem
  }
  
  /* Rights Mobile */
  .haklar_listesi {
    grid-template-columns: 1fr;
    gap: 15px
  }
  
  .hak_maddesi {
    flex-direction: column;
    text-align: center;
    padding: 18px
  }
  
  .hak_ikonu {
    font-size: 2rem;
    margin-top: 0
  }
  
  .hak_baslik {
    font-size: 1rem
  }
  
  .hak_aciklama {
    font-size: 0.9rem
  }
  
  /* Data Retention Mobile */
  .satir_kutusu {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: center;
    padding: 15px
  }
  
  .veri_turu {
    font-size: 1rem
  }
  
  .saklama_suresi {
    padding: 6px 12px;
    font-size: 0.9rem
  }
  
  .saklama_nedeni {
    font-size: 0.9rem
  }
  
  .otomatik_silme_notu {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 18px
  }
  
  .not_ikonu {
    font-size: 2rem;
    margin-top: 0
  }
  
  /* Updates Mobile */
  .tarih_kutusu {
    flex-direction: column;
    gap: 10px;
    padding: 18px
  }
  
  .guncelleme_tarihi {
    font-size: 1rem
  }
  
  .degisiklik_gecmisi {
    padding: 18px
  }
  
  .gecmis_baslik {
    font-size: 1.1rem
  }
  
  .degisiklik_maddesi {
    font-size: 0.95rem
  }
  
  .bildirim_notu {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding: 18px
  }
  
  .bildirim_ikonu {
    font-size: 2rem;
    margin-top: 0
  }
  
  /* Footer Mobile */
  .alt_bolum {
    padding: 50px 15px 25px;
    margin-top: 60px
  }
  
  .footer_ana_icerik {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-bottom: 35px;
    padding-bottom: 30px
  }
  
  .footer_logo {
    transform: rotate(0deg);
    text-align: center;
    padding: 15px 20px
  }
  
  .yasal_baslik {
    font-size: 1.2rem;
    text-align: center;
    margin-bottom: 15px
  }
  
  .yasal_link {
    text-align: center;
    font-size: 1rem
  }
  
  .yasal_link:hover {
    transform: rotate(0deg)
  }
  
  .telif_icerik {
    flex-direction: column;
    gap: 12px
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 65px
  }
  
  .sayfa_baslik {
    font-size: 2.2rem
  }
  
  .hero_alt_metin {
    font-size: 1.1rem
  }
  
  .gizlilik_emoji {
    font-size: 2rem
  }
  
  .gizlilik_aciklama {
    font-size: 0.8rem
  }
  
  .politika_kartı {
    padding: 20px
  }
  
  .kart_baslik {
    font-size: 1.5rem
  }
  
  .aciklama_paragraf {
    font-size: 1rem
  }
  
  .veri_kategorisi {
    padding: 15px
  }
  
  .kategori_ikonu {
    font-size: 2rem
  }
  
  .kategori_baslik {
    font-size: 1.1rem
  }
  
  .kategori_aciklama {
    font-size: 0.95rem
  }
  
  .amac_maddesi {
    padding: 15px
  }
  
  .madde_ikonu {
    font-size: 1.8rem
  }
  
  .madde_baslik {
    font-size: 1rem
  }
  
  .madde_aciklama {
    font-size: 0.95rem
  }
  
  .onlem_kutusu {
    padding: 15px
  }
  
  .onlem_ikonu {
    font-size: 1.8rem
  }
  
  .onlem_baslik {
    font-size: 1rem
  }
  
  .onlem_aciklama {
    font-size: 0.9rem
  }
  
  .hak_maddesi {
    padding: 15px
  }
  
  .hak_ikonu {
    font-size: 1.8rem
  }
  
  .hak_baslik {
    font-size: 0.95rem
  }
  
  .hak_aciklama {
    font-size: 0.85rem
  }
  
  .satir_kutusu {
    padding: 12px
  }
  
  .veri_turu {
    font-size: 0.95rem
  }
  
  .saklama_suresi {
    font-size: 0.8rem;
    padding: 4px 8px
  }
  
  .saklama_nedeni {
    font-size: 0.85rem
  }
  
  .otomatik_silme_notu {
    padding: 15px
  }
  
  .not_metni {
    font-size: 0.9rem
  }
  
  .tarih_kutusu {
    padding: 15px
  }
  
  .guncelleme_tarihi {
    font-size: 0.95rem
  }
  
  .versiyon_numarası {
    font-size: 0.8rem;
    padding: 4px 8px
  }
  
  .guncelleme_aciklama {
    font-size: 1rem
  }
  
  .degisiklik_gecmisi {
    padding: 15px
  }
  
  .gecmis_baslik {
    font-size: 1rem
  }
  
  .degisiklik_maddesi {
    font-size: 0.9rem
  }
  
  .bildirim_notu {
    padding: 15px
  }
  
  .bildirim_metni {
    font-size: 0.9rem
  }
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}/* CSS Variables */
:root {
  --primary-color: #fcbf49;
  --primary-light: #fefaec;
  --primary-dark: #e5a626;
  --secondary-color: #8d5524;
  --secondary-light: #f4ede4;
  --tertiary-color: #d4763c;
  --tertiary-light: #faf5f2;
  --accent-color: #2d3436;
  --accent-light: #f8f9fa;
  --neutral-color: #636e72;
  --neutral-light: #ddd;
  --text-primary: #2d3436;
  --text-secondary: #636e72
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
    font-family: 'PT Sans', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--primary-light);
    overflow-x: hidden;
    padding-top: 80px
}

/* Navigation Styles - Same as main page */
.ust_navigasyon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(254, 250, 236, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 3px solid var(--primary-color);
  padding: 15px 0
}

.nav_konteyner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: relative
}

.menu_bolumu {
  flex: 1
}

.nav_linkler {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 35px;
    align-items: center
}

.nav_item {
  position: relative
}

.nav_baglanti {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 12px 18px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    display: block;
    position: relative
}

.nav_baglanti:hover {
    color: var(--primary-dark);
    border-color: var(--primary-color);
    background: var(--primary-light);
    transform: rotate(-1deg)
}

.nav_baglanti.aktif {
    background: var(--primary-color);
    color: var(--primary-dark);
    border-color: var(--primary-dark);
    transform: rotate(0deg)
}

.hakkimizda_link .nav_baglanti:hover {
  transform: rotate(1.2deg);
  border-color: var(--secondary-color);
  background: var(--secondary-light)
}

.iletisim_link .nav_baglanti:hover {
    transform: rotate(-0.8deg);
    border-color: var(--tertiary-color);
    background: var(--tertiary-light)
}

.blog_link .nav_baglanti:hover {
  transform: rotate(1.5deg);
  border-color: var(--accent-color);
  background: var(--accent-light)
}

.studio_adi_bolumu {
  flex-shrink: 0
}

.logo_alani {
    text-align: right;
    transform: rotate(-0.5deg);
    padding: 10px 15px;
    border: 2px solid var(--primary-color);
    background: var(--primary-light);
    position: relative
}

.studio_ismi {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--primary-dark);
  letter-spacing: -1px;
  line-height: 1
}

.studio_alt_metin {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
    letter-spacing: 0.5px
}

.mobil_menu_buton {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px
}

.hamburger_cizgi {
    width: 25px;
    height: 3px;
    background: var(--primary-dark);
    transition: all 0.3s ease;
    transform-origin: center
}

.mobil_menu_buton:hover .hamburger_cizgi {
  background: var(--secondary-color)
}

.mobil_menu_paneli {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--primary-light);
    border-bottom: 3px solid var(--primary-color);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999
}

.mobil_menu_paneli.aktif {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}

.mobil_menu_icerik {
    max-width: 1300px;
    margin: 0 auto;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    gap: 25px
}

.mobil_nav_listesi {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px
}

.mobil_nav_item {
  border-bottom: 2px dotted var(--neutral-color);
  padding-bottom: 15px
}

.mobil_nav_item:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.mobil_nav_link {
    text-decoration: none;
    font-family: 'PT Sans', sans-serif;
    font-size: 1.3rem;
    color: var(--text-primary);
    font-weight: 500;
    padding: 15px 20px;
    border: 2px solid transparent;
    display: block;
    transition: all 0.3s ease
}